wordpressをCMSとして使う(3)
デザインを作成する
お好きなソフトでサクサクっと作成していただければ幸いです。
デザインが苦手な方は、デザインが得意な方にお願いするのも一興です★
今回は、極力画像は避けてデバイスフォントを使うことに。
文章や、イラストを見てもらいたいのが目的なので、
シンプルにデザインしました。
トップページは、コーディング上で調整しようと思い、デザインしませんでした。
※実装後のキャプチャ
コーディングの下準備
デザインが完成したら、コーディングに入ります。
まずは、普通にhtmlとcssでコーディングするのが手っ取り早いです。
wordpressの文字コードは、utf-8なので、
html及びcssも、utf-8でコーディングする必要が有ります。
コーディングに入るまえに、下記の準備を行います。
(1)style.cssを作る
wordpressがデフォルトで読み込むcssファイルです。
このcssの先頭に、テンプレート名などの必要な情報を記述してください。
後は好きにコーディングして頂いて構いません。
/* Theme Name: テーマの名前 Theme URI: テーマのURL Description: テーマの説明 Version: テーマのバージョン Author: テーマの制作者 Tags: テーマのタグ */
(3)使い回す箇所を決める
デザインを見て、
- 全ページで共通のデザインになっている箇所
- そのページ／カテゴリーのみで表示する特殊なデザインの箇所
を洗い出す。
使い回しできそうなパーツは、
モジュール化*1することを前提にコーディングしたいので、どこが使い回しできそうか考えておくと良いと思います。
基本となるテンプレートを作成する
wordpressのテーマの最小系は、以下の2つのファイル。
index.php テンプレートファイルはとても融通の効くテンプレートで、参照するヘッダ・サイドバー・フッタ・コンテンツ・カテゴリ・アーカイブ・検索結果・エラーほか、サイト上で生成されるウェブページの全てに用いることが出来るそうです。
要するに、細かく設定してるテンプレが無いときは、全部index.php様がまかなっちゃうぞ〜！ ということらしい。
とりあえず、下記のように分割しようと考えました。
他に、ヘッダとフッタにあたる部分も分割することに。
下記がコーディング済みのファイルです。
慣れない横文字に、ウッ！ っとなってしまう方もご安心ください。
htmlとcssを理解していれば、phpがわからなくても、ほんとにコピペするだけで作れます。php？ ナニソレ、おいしいの？ な、rcorcoが保証します。
「これは、こういうことが起きる魔法なんだな〜★」
くらいに思っておけばノープロブレムです。
みんな、wordpressが解決してくれます。
wordpressスゴイッ！！
★便利な魔法がいっぱい！★
wordpressタグリスト
※とりあえずまとめてみました。
※本家本元！ wordpress Codexを見てみるともっと詳しいことがわんさか載っています♪
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><?php wp_title(' | ', true, 'right'); //現在のページのタイトルを表示 ?> <?php bloginfo('name'); //ブログのタイトルを表示 ?></title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="<?php bloginfo('description'); //ブログの説明を表示 ?>" /> <meta name="robots" content="noindex, nofollow" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); //style.cssを読み込む ?>" /> <script type="text/javascript" src="<?php bloginfo('template_directory'); //テンプレートをアップしたURLを挿入 ?>/js/jquery-1.2.6.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); //テンプレートをアップしたURLを挿入 ?>/js/functions.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); //テンプレートをアップしたURLを挿入 ?>/js/thickbox.js"></script> </head> <body> <div id="wrapper">
footer.php
</div><!-- /wrapper --> <div id="footer"> <address>Copyright (c) <?php bloginfo('name'); //ブログのタイトルを表示 ?> All Rights Reserved.</address> </div> </body> </html>
sidebar.php
<h1><a href="<?php bloginfo('url'); //ブログのURLを代入 ?>"><?php bloginfo('name'); //ブログのタイトルを表示 ?></a></h1> <p class="description"><?php bloginfo('description'); //ブログの説明文を表示 ?></p> <ul id="category"> <?php wp_list_categories('title_li='); //カテゴリー一覧を表示?> </ul> <ul id="page"> <?php wp_list_pages('sort_column=menu_order&title_li='); //ページ一覧を表示 ?> </ul> <ul id="others"> <li> <a href="feed/">RSS</a> / <a href="http://twitter.com/rcorco/">Twitter</a> </li> </ul>
index.php
<?php get_header(); //ヘッダを読み込む?> <div id="contents"> <h2><?php the_category(',') //カテゴリー名を表示 ?></h2> <p class="categoryDescription"><?php echo category_description(); //カテゴリーの説明を表示 ?></p> <?php if (have_posts()) :while (have_posts()) : the_post(); //格納されている記事の内容を呼び出すときのおまじない ?> <div class="entry"> <h3><a href="<?php the_permalink(); //記事の単独URLを挿入 ?>"><?php the_title(); //記事のタイトルを表示?></a><p><span class="date"><?php the_date(); //記事の投稿日時を表示 ?></span><span class="author"><?php the_author(); //記事の投稿者を表示 ?></span><?php edit_post_link(' [edit] ', '<span class="edit">', '</span>'); //wordpressにログインしているとき、編集ボタンを表示?></p></h3> <?php the_content(__('READ MORE')); //記事の内容を表示 ?> <p class="postmetadata"><?php comments_popup_link(__('Comment', 'simply'), __('Comment(1);', 'simply'), __('% Comment;', 'simply'), '', __(' ', 'simply') ); //コメントへのリンクと件数を表示 ?><?php the_tags('Tags : ', ', ', ''); //この記事に設定されている投稿タグを表示?></p> </div> <?php endwhile;endif; //格納されている記事の内容を呼び出し終わるときのおまじない ?> <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } //改ページ用のプラグインを表示 ?> </div><!-- end___div#contents --> <div id="navi"> <?php get_sidebar(); //サイドバーを読み込む ?> </div><!-- end___div#navi --> <?php get_footer(); //フッターを読み込む ?>
管理画面からスキンを選択する。
管理画面にログインし、スキンを選択して適応してください。
無事にスキンが適応されたはずです。
とはいえ、これではまだ、ただのブログ…。
次回は、トップページ、Illustページ（ギャラリー）、Aboutページ（文章+お問い合わせフォーム）、リンクページ、を実装します。乞うご期待です〜！
*1:Dreamweaverで言うところのライブラリ
