タグ: Webデザイン

ぼくがやってきたWebデザインの4つの勉強法

もーいーくつねーるーとおーしょーおがーつー なんて思ってる間に気がつけば、1月も終わりそうでした。 もはや数ヶ月に1回思いつきで書くブログとなりそうです。 ここ最近、人に何かを教える、ということが出てきたので、勉強法につ [...]

WordPressのオリジナルテーマでブログを作る方法②

この記事は、WordPressのオリジナルテーマでブログを作る方法①の続きです。

目次

テーマの編集

ではいよいよテーマの編集になります。
私のやり方になっちゃうんですけど、流れとしては

  • 1　パスを書き換える
  • 2　ページを分解する
  • 3　ループを理解する
  • 4　テンプレートタグを埋め込む
  • 5　必要ファイルを作成・複製する

こんな感じです。

1　パスを書き換える

最初に、画像などのパスをWordPress用の書き方に修正していきます。
こちらが、パスの書き方です。

もともとの記述

<img src="images/sample.jpg" />

修正後

<img src="<?php bloginfo('template_directory');?>/images/sample.jpg" />

twentyelevenの中にも、画像なんかはこの記載でかかれてますので、この部分をコピーしてきて、画像パスなどを全置換、してください。

header部分の、style.cssの読み込みの記載方法だけ、ちょっと違うのでご注意ください。
こちらもtwentyelevenのheader.php内に記述がありますので、
参考にこぴぺしてください。

もともとの記述

<link rel="stylesheet" href="style.css" type="text/css" />

修正後

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

一応、追加資料のほうにもこの辺、書いてますので、よろしければ参考にしてください。
「初めてのWordPress!オリジナルのテーマでブログを作る方法」追加資料【pdf】

2　ページを分解する

WordPressでは、各ページの共通部分を、「テンプレートファイル」にしてしまって、読み込むことができます。


たとえば、上の画像のデザインで言うと、このindexページの、header部分、右カラム部分、フッター部分は、他のページでも全く同じ内容です。

そのようなファイルを
header部分はheader.phpに
右カラム部分はsidebar.phpに、と新しいファイルを作ってしまいます。

index.phpのソースには、
ヘッダーがあったところに、phpの「header.phpをよみこんでくださーい」という記述を書いておきます。

<?php get_header(); ?>


同じように、右カラムがあったところに、

<?php get_sidebar(); ?>

フッターがあったところに、

<?php get_footer(); ?>

と記述。

index.phpはソースがスッキリなるはずです。

3　ループを理解する

php、が苦手でも、これだけは理解しておいたほうがいい記述です。

ブログでは、投稿の内容を複数件、表示することが良くあります。
例えば、最新記事の5件表示、同じカテゴリーの記事5件表示、など。

上の↑感じで同じレイアウトの箱を5回表示させたい！
そんな時の書き方がこちら。

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		～ここに表示したい一つの箱のソースが入るよ～
	<?php endwhile; ?>
<?php else : ?>
～ここは記事が1件もなかった時の表示内容～
<?php endif; ?>

図で書くとおそらく下のような感じ。

「もし投稿があったら、投稿内容を表示させましょー」、というphpの記述を書いて、
その中身は、投稿内容の、ひとつの、ボックス分の、ソースが入ってきます。
投稿内容がないときは、記事はありません、といったような表示をだす、っていう記述です。

※ループに対してたくさんの条件を設定することもできます。
例えば「カテゴリー3の記事だけを5件表示」とか。
そんなときは、「WordPress 特定カテゴリ」とかわかりやすい言葉で検索すると、たっくさん参考、解説サイトが出てきます！

4　テンプレートタグを埋め込む

ループ部分の記述が終わったら、テンプレートタグを埋め込んでいきます。
日付やタイトルなど、テスト用に、ソースにテキストをじかがきしてる部分に投稿内容を反映させるため、テンプレートタグを埋め込んでいきます。
このタグについてはWordPressのCodexにタグ一覧が載っています。

たとえばtitle、上の画像の「斜めフレンチ・・・どうのこうの」の部分は、Codexの中から必要なtitleタグを見つけて詳細を見てみると、

Codexに答えが載ってます。
記述方法まで詳しく紹介されています。

ここ以外でも、たくさんのブログでよく使われる、テンプレートタグは紹介されてますので、ぜひ、いろんな参考サイトを調べつつ、タグを埋め込んでいってください。

5　必要ファイルを作成・複製する

次に、必要なテンプレートファイルを作っていきます。
WordPressをインストールした時にもともと入っているテーマにはもりもりとphpファイルがあります。
ですが、自分で、テーマを作るときに、まねして、全部準備することはありません。
もりもりある中でも、ブログ制作時によく利用されて、最低限抑えておきたいテンプレートファイルは少しだけです。

こちらは、ブログの構成を考えたときの図。

ここから必要ファイルを考えた場合、以下のようなファイルを作ることになります。

今回の構成では、最新5件表示のデザインは、トップページもカテゴリーも全部、同じなので、ほぼ、複製するだけで、すみます。

他にも、Codexには、カテゴリーやタグ以外でも、色んなファイルが紹介されていますので、追加したい機能に対する、該当ファイルを使ってオリジナルブログを作っていくことができます。

私はだいたいこんな感じで、Codex、Twentyeleven、参考になるブログなどをいったりきたりしながら、ブログを制作しました。
この内容は、ほんとに最小のページ数でブログを作る方法を、ご紹介したのですが、もし、ここまでできたら、機能を追加したり、ページを追加したりすることにも、調べ方が、慣れてきてますので、サクサクと、比較的簡単に、できるようになってるんじゃないかな、と思います。

目次へ

WordPressで制作した「ブログ」でよく使うプラグイン

「プラグイン」はWordPressの拡張機能です。
プラグインはWordPressの大きな魅力の一つで、phpなどを一生懸命記述するのではなく、そのサイトに合った機能を簡単に追加していくことができます。
プラグインは無料のもの、有料なものとありますが、「なんでこんな高機能で無料！！」とびっくりするほど充実した手の込んだ大盤振る舞いの機能がさくっと追加できたりします。
追加方法も簡単、直接、管理画面の「プラグイン」⇒「新規追加」から、インストールすることができます。

Contact Form 7

Contact Form 7
コンタクトフォームを、一発で、実装することができます。
日本語もOKだし、デザインもカスタマイズできます。

WPtouch

WPtouch
スマートフォンに最適化させるプラグインです。
デフォルトのままでなんかかっこいいインターフェイスになります。
利用者がすごく多いので同じデザインをよく見かけてしまうのですが、簡単なカスタマイズも可能です。

SNSプラグイン

最近はFacebookやtwitterからの、ブログの訪問者さん多いと思います。
たくさんの方に見てもらいたいって方は、ぜひ、こういったソーシャルネットワーク系の、アイコンを、設置されるといいかと思います。

SexyBookmarks

このプラグインはこのブログでも使ってるのですが、ぴょこっとでてくるデザインがかわいいです。

WP Social Bookmarking Light

ブログに限らず多くの色んなタイプのWordPressのサイトで使われています。

WP-PageNavi

WP-PageNavi
ページ番号を並べた、ナビゲーションリンクを、表示させることができます。
今どこのページにいて、あとどくらいページがあるのか、直感的に分るので、訪問者には便利です。
デザインもカスタマイズすることができます。

目次へ

最後に。WordCamp Tokyoが開催されるよー！

最後に、なんども申し上げていますとおり、WordPressはたくさんの参考サイトがあります。
勉強会やコミュニティもたくさんあります。

私が今までお世話になって、これからもお世話になるであろう、親切な「WordPress上級者」の方々にはとっても感謝しております。

そして、、、
2012年9月15日にWordCamp Tokyoが開催されます。
もうすぐ1000枚用意してあったチケットがなくなる勢いなのだそう。。。(ΦωΦ)すごいです。

WordCampではたくさんのデザイナーさん、プログラマーさん、ブロガーさん、などなどと交流ができて、WordPressのことを知ることができる無料のお祭りみたいな感じです。
私も今からとっても楽しみで、どのセッションに行こうかと、タイムテーブルとにらめっこしてます！
当日はそのへんうろちょろしてると思うので、是非、みなさん名刺交換＆仲良くしてくださいヽ(´ー｀)ノ☆

デザイナーさんにとってプログラム書いたりって、とっても難しいですが、こういった機会にお友達を作って同じ悩みを共有、相談できる人ができると、きっと楽しいはず！
と思います。WordPressにご興味ある方、こういった機会を大事にしてぜひ、参加してみて下さい。

また、今回、ジョブボードとやらが用意されるらしく、参加者が働く先を、企業が一緒に働く仲間を探す場が提供されるそうな。
（詳しくはWordCampで仕事を探せ！WordCampで仲間を探せ！！で。）
今、まさに一緒に働く仲間募集中なので、いい出会いがあるとうれしいです(ΦωΦ)♪

WordPressのオリジナルテーマでブログを作る方法①

目次

はじめに

昨年9月、WordCamp KOBEで「初めてのWordPress!オリジナルのテーマでブログを作る方法」というお題でスピーカーをやらせていただいてもうすぐ1年。。。
終了後のスライド公開時に「しゃべった時のカンペもそのうち公開します」とか言ってそのままズルズル、ずーーっと気になっておりました。

ググればこの手の情報はきっちりまとめてくださってるブログなどがわんさかあって、今更、需要無さそうですが、もうすぐWordCamp Tokyoも開催されますので、「行ってみようかしら(・∀・)」と思う方ちょっとでもいたらうれしいなぁ、と思い、まとめてみました。

約1年前のスライドとカンペをもとに、変わった部分（WordPressのバージョン的にも私の知識的にも）を織り交ぜつつオリジナルテーマでブログを作る方法を書いてます。
全スライドはこちら　WordCamp KOBE「初めてのWordPress!オリジナルのテーマでブログを作る方法」スライドと追加資料です
※でもこのスライド約一年前のなので情報が古い部分もあります。。。
「PHPよくわかんないけど、html、cssはおっけーでWordPressにちょっと興味があるWebデザイナーさん、またはWebデザイナー目指してる人」など、初心者向けの内容です。
コレ見たらブログが作れたよ！っていう内容ではないですが、今後WordPressに触れる上で参考になるサイトや調べ方などをざっと紹介できたらと思います。

目次へ

WordPressをおススメする理由

WebデザイナーでSNSなどを利用して情報を収集している方多いかと思います。
そうやって情報集めまくってると、それをメモっといたりするアウトプットをする場が欲しくなってきます。
そのひとつの方法として「ブログ」があり、私は最初アメブロやらFC2やらでブログをやってたのですが、Webデザイナーなりたいんだからやっぱオリジナルのデザインで、好きなレイアウトで、好きな構成のブログ作りたいなぁーと思いはじめたのでした。
その頃ちょうど、転職も考えていたので、ポートフォリオの一つになるといいなぁとも思ってました。


そこでPHPもよくわからないまま、WordPressのブログ制作に挑戦しました。
が、わからないなりにもなんとかできました。

今、ほんとにWordPressって大人気で、
WordPressに興味がある人がたっくさんいるので、
ちょっと調べると情報が満載です。
上級者の方からたくさんの情報を得ることができます。

たとえば、

WordPress Codex
こちらは、WordPressの公式オンラインマニュアルで、
初心者の方が欲しい情報はほぼ書いてある教科書のような存在です。

Codexに載ってないような、、もっと具体的な質問も、
WordPressフォーラムに投稿すると、答えてくれるWordPress上級者さんがいらっしゃいます。

あと、今回のWordCampのような、無料のイベントも各地でたくさん開催されてます。
この他にも、ちょっと検索すると、参考になるブログがたくさんあふれています。
こんなかんじで、WordPressは初心者のために色々と教えてくれる先輩もたくさんいて、わからないことがあっても情報量が多いので調べやすいです。

私の場合は、こうやってWeb上でいろいろと調べながら、WordPressにふれていって、今ではお仕事でもWordPressを使ったサイトを制作できるようになりました。

PHPの知識が浅くても、WordPressのおかげで動的なページが制作できるようになります。
また、WordPressに慣れることで逆にちょっとだけPHPが理解できるようになります。

WordPressに慣れていくためには、まずは最初にブログを作って、いろいろとテストしていくのがすごくいい練習になると思います。

目次へ

ブログの構成を考える

まずはブログのデザインに入る前に構成を考えます。

ブログと一言で言っても、いろんな種類があると思うんですけど、内容や目的、ターゲットなどをよく考えてどんなコンテンツやページが必要なのかを考えてみます。
そのためには、私の場合はいろんな既存のブログを見て、構成とか参考にさせていただきました。

今更な感じですが、Webデザイナーさんにとっては有名ドコロ、デザインがステキでWordPressで作られているサイト。

こういう素敵なブログを見て、
「ほぉ～2カラム構成で、サムネイルを豊富に使ってて、、、」とか研究してました。
（よそ様のブログを研究した時に書いた記事⇒４つの人気ブログのデザインを研究。しつこいですが、またブログリニューアルしました）

ちなみに、こちらのサイトWPデザインギャラリー

WordPressを使用した国内外のWebサイトを収集したWebデザインギャラリーで、カテゴリーで「個人の日記」など選ぶことができるので、WordPressで作られているたくさんのブログを参考にすることができます。

WordPressの「投稿」と「ページ」

WordPressのブログの構成を考える上で、「投稿」と「ページ」っていうのがとても重要になってきます。

WordPressでは、コンテンツを作成する時に「投稿」または「ページ」という方法でページを作成します。
（※カスタム投稿タイプという投稿方法もあるのですが、これは初めてWordPressをさわる方はまだふれないほうがいいかなぁ～と思います(；・∀・)
今後慣れてきて機能を追加したい時なんかに挑戦してみたらいいかと！
ちなみに私はコーポレートサイトなんかを制作するときはカスタム投稿タイプをモリモリに利用するものの、自分用のブログ、今まで3つ作って来ましたが、全てカスタム投稿タイプは使っていません。）

その「投稿」と「ページ」2つの違いなんですけど、

画像の左側は、管理画面の「投稿」の画面、右側は「ページ」の画面です。
すごく似ているんですけど、
「投稿」の方は、カテゴリーを選択したり、タグを設定することができます。

ですが、右側の「ページ」の方ではそれができません。

カテゴリーやタグでソートできるのも、「投稿」で、作ったページなので、まさに「投稿」は、「ブログ」向きの機能だと思います。

で、「ページ」の方は、時系列には影響せずに、恒久的、半固定的な情報を掲載する際に適していますので、たとえば「このサイトについて」とか「お問い合わせのページ」なんかが向いてる機能だと思います。

「投稿」でどんなカテゴリー、どんな構成にするか、また、「ページ」でブログとは別の、どんなページを追加するか、それぞれ考えます。

最近よく見かける、ブログのページ構成

こちらは、最近よく見かける、ブログのページ構成です。

まず、トップページで最新の記事数件をタイトルやサムネイル　のみで　表示させます。

そこから、記事の個別のページにリンクする、そう行った作りのブログが、最近よく見るなーと、思います。

さらに、この、トップページと同じようなレイアウトで、タグとかカテゴリーでソートされたタイトルだけ、数件表示のページから、個別記事へリンク、そういった感じの構成です。

私のブログもそうなんで、具体的なページを見てみるとこんな感じなんですけど、

イメージ画像で、ぱっと見で視覚的な情報を得ることができたり、おっきなフォントサイズでざーーっとタイトルを確認できたり、、、などなど、自分なりの見せ方を追求できるのがオリジナルデザインのブログをつくる醍醐味だと思うので、ぜひ、その辺も研究して、オリジナリティあふれるレイアウトを工夫してみてください！

今回はこの構成でのブログ制作についての流れを考えてみたいと思います。

構成が出来上がったところでデザインに入っていきます。

目次へ

デザイン～コーディング

デザイン

準備するデザインとしては、先ほどの構成を元に、5件表示用のレイアウトがひとつ、あと個別記事のデザインが二つ目、

この2つだけで最初に挑戦してみるブログであれば、十分なんじゃないかなーと思います。

あと、必要があればっと書いてるんですけど、、「このサイトについて」や「お問い合わせ」のページも、あるといいかもしれません。
ブログによっては、フッターの部分に自己紹介がしてあったり、お問い合わせフォームが右カラムにあったり、とその辺も自分にあったいろんな形にできますので、工夫してみてください(・∀・)

具体的なデザインをご紹介します。
これ、5件表示のページ。

細かく見ていくと、先ほどの構成案のとおりで、右カラムにカテゴリー別のリンクを設置。
あと、「キーワード」という形にはしてますが、タグのリンクになってます。

それぞれ、タグやキーワードで絞られた、最新5件表示のページ（レイアウトは全て同じ）にリンクするような構成になっています。

次に、各記事のページ。

先ほど例に上げたような見やすい素敵なブログは、見出しのデザインとか段落ごとの十分な余白とか、そういったことがすごーく考慮されている感じがします。

一つの記事内でも、いろんなスタイルを用意しているようです！

そのほかにも、訪問者に長時間見てもらうために、一つの記事の最後に関連する記事へのリンクを表示したり、人気のある記事をランキングで表示したり、と、色んなブログで色んな工夫がなされています！

また、訪問者に、再度、遊びにきてもらうために、RSSやtwitterアイコンを設置したり、アフィリエイトを考えている方は、バナーの設置場所とか、それに合わせたカラムサイズ、効果的な広告の位置を考える、といいのかも。

せっかくオリジナルデザインのブログなので、いろいろ工夫したデザインを作ってみてください♪

コーディング

デザインが終わったら、コーディングです。
あとからワードプレスの機能を加えていきますので、
まずはWordPressことは考えずに、いつもどおりモリモリコーディングします。


作ったデザイン2種類のPHPファイルとcss。あと画像フォルダ。

目次へ

WordPressをインストール

サーバーについて

WordPressを設置するには、PHPとMySQLが使えるサーバーが必要なんですけど、レンタルサーバーによって特徴や規制があります。

データベースを作ったりとか、サーバの知識とかあまり無くて初めて体験する方にとっては、ちょっとだけめんどくさい工程があります。（慣れちゃったらダイジョブなんですが！）
ここでつまづいてしまう方多いと思います、私もくじけました(；・∀・)
ローカル環境でWordPressを動くようにしたり色んな方法があるかと思いますが、最初は思い切ってWordPressを自動インストールできるサーバを契約してしまった方がいいと思います！

インストールするときに、心折れてしまっては、どうしようもないので、初めての方は一番簡単な方法で、やってみるのを私はオススメします。。。
参考サイト
WordPress Codex レンタルサーバ情報

レンタルサーバの説明どおりに作業して自動インストールが完了したら、管理画面とサイト側のページが確認できます。

これは、WordPressに最初に入ってるテーマです。これから、いよいよ、自分のデザインを反映させていきます。

自分のオリジナルテーマと合体！

で、この自動インストール後の全ファイルをのぞいてみると、膨大な量のファイルがあります。
あまりの量で、けっこう、気持ちはなえてしまいそうなんですけど、実際、使うファイルは、ちょびっとだけなので、ﾀﾞｲｼﾞｮｳﾌﾞです！

WordPressを、インストールしたフォルダ直下の、wp-contentフォルダ、themesフォルダと中に入っていきます。
このthemesフォルダの中が、自分のオリジナルのテーマを入れる場所になりますので、このthemesフォルダの中に自分でコーディングしたテーマをフォルダごと入れちゃいます。


※ちょっと内容が古いですね、ゴメンナサイ。でもやることは変わらないです。。
このnails-parkっていうのが今回作ったオリジナルテーマで、まるごとUPします。

themesフォルダの中に既に他のテーマがもう入ってます。（WordPressのバージョンによって、入ってるテーマは違います。）
これが先ほどサイト側の画面で見えてたテーマです。
こういったもともと用意されているテーマは、これから自分のテーマを編集していく上で、すごく参考になりますので、私は参考ソースとして、一応、とっておきます。

では、まずは、サイト側で自分のテーマが表示されるように、設定します。

管理画面の、外観→テーマのページを見てみると、
twentytenが現在のテーマとして、設定されているのがわかります。
※情報が古いです、ｽｲﾏｾﾝ(´・ω・｀)　2012年8月現在、最新のWordPressをインストールすると、「twentyeleven」というテーマが入ってるかと思いますがどちらも参考にする部分は同じです！

もともと用意されているテーマの中のstyle.cssを開いてみると、一番最初の部分にテーマの名前とか、URLとかの記述があります。
これがこのテーマの情報です。

管理画面内でテーマを選ぶときに表示される情報がここになります。

なので、もともと用意されているテーマのstyle.cssの記述を参考にして、「自分の」オリジナルテーマ内のスタイルシートを編集してください。
自分のテーマに沿った情報に、記述を修正していきます。

修正したファイル、をまとめてアップすると、ちゃんと、管理画面外観→テーマに、自分のテーマ情報が、表示されるようになります。

ここで自分のテーマを有効化させると、なんとなく、自分のテーマの内容が表示されるようになります。
この時点ではcssや画像が反映されてなくて、予定してたものと違うのでドキドキしてしまいそうですが、これから自分のテーマを、WordPress仕様に書き換えていきますので、この時点ではこの表示でﾀﾞｲｼﾞｮｳﾌﾞです！

WordPressのオリジナルテーマでブログを作る方法②へ続きます。