職場で新しく入った人にWordPress信者になって頂こうという布教活動の一環で、WordPressのテーマの作り方をまとめていきたいと思います。
デフォルトでついてくるテーマtwentytenとか、色々配布テーマがありますよね。ただ、多機能だったりして、ブログテーマとしてはいいんだけど、WordPressのテーマを理解する上ではハードルが高い気がします。
というわけで、ここではゼロから作ることをテーマにして、まとめていこうかなと思います。
WordPressテーマの最小構成
WordPressのいろんなテーマを見るとたくさんファイルがあってややこしいですが、最低限
- index.php
- style.css
が入ったディレクトリが、wp-content/themes内にあればテーマとして成立します。簡単なブログとかだったらこれで十分かもしれません。
また、文字コードはutf-8､DOCTYPEはXHTMLか、HTML5で書いてあげましょう。
index.phpの書き方
index.phpの一例です。
[php]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="<?php bloginfo(stylesheet_url);?>" />
<title><?php bloginfo("name");wp_title();?></title>
</head>
<body>
<h1 id="siteName"><?php bloginfo("name");?></h1>
<div id="contents">
<?php if(have_posts()):while(have_posts()):the_post();?>
<div class="article">
<h2><a href="<?php the_permalink()?>"><?php the_title()?></a></h2>
<?php the_content();?>
</div>
<?php endwhile;endif;?>
</div>
</body>
</html>
[/php]
なにやら、で書かれた呪文が出てきて参りました。ただ、プログラム上の意味などは知る必要はありません。ただ、それが出力したときにどういう物が表示されるかを知っていればいいのです。凝ったことをしないのであれば・・・
- bloginfo(stylesheet_url);
- テーマのstyle.cssへのパスを出力します。この場合、http://www.example.com/wp-content/themes/hogehoge/style.cssと置換されます。
- bloginfo(“name”)
- ブログ名を出力します。
- wp_title()
- 今表示しているページの名前を表示しています。カテゴリーページだったら、カテゴリー名が表示され、個別ページならその記事のタイトルが表示されます。
- if(have_posts()):while(have_posts()):the_post();, endwhile;endif;
- よくわからない呪文が出てきましたが、前者はループ開始、後者はループ終了と思ってくれれば良いです。この中のタグが、記事の数だけ繰り返して出力されるわけです。
- the_permalink()
- 個別記事へのリンクを出力します。
- the_title();
- 個別記事のタイトルを出力します。
- the_content();
- htmlタグで成形された、記事の本文を出力します。
基本的な機能はこれだけです。結構あっさりです。ここさえ押さえればあなたもWordPress使いへの第一歩。
style.css
特に制限や、決まり事などは無いですが、相対パスで書くことが多いので、テーマで使う画像などは、テーマディレクトリ内に画像も一緒にあった方が、作業はしやすいです。
また、style,cssの文頭に
[css]
/*
Theme Name: Hoge Theme
Theme URI: http: //www.example.com/
Description: サンプルテーマ
Author: Toro-Unit
Version: 1.0
*/
[/css]
等、テーマの情報を記入することができます。テーマの管理画面のところに表示されるものですので、せめて名前くらいはつけてあげましょう。付けなくても動作もしますしディレクトリで区別もできます。この前に
[css]
@charset "utf-8";
[/css]
等は書いても認識するようです。
月間アーカイブやカテゴリー、個別記事等でデザインを変えたい
index.phpだけで作れるとは言いましたが、やはり、ページの種類ごとにソースは変えたいなんてことも多々あると思います。
WordPressにはテンプレート階層なんて仕組みが用意されていて、テーマを切り分けることができます。
たとえばカテゴリーページだったら、category.phpなんてファイルをテンプレートに用意してやると、index.phpではなくてそちらの方が優先的に読み込まれるようになります。
アーカイブページだったらarchive.php、個別投稿だったらsingle.php、ページだったら、page.php。書き方はindex.phpと全く変わりません。逆にこのテンプレート専用のタグみたいなものも特にはありません。
テンプレート階層図はコチラ
WordPressは奥が深いですが、ハードル自体は実はそんなに高い物ではないと思います。HTMLとCSSの知識さえあれば意外にあっさりですよ。
その１と銘打っているので、近々その２、その３と続けていこうと思います。三日坊主にならないようにがんばれれば良いのですが・・・