ワタシがWordPressテーマを自作する際、これだけは最低限必要と思ったものを注意点を踏まえてまとめてみます。
テーマの作成場所はこちら
wordpress/wp-content/themes/
ここにテーマ名でフォルダを作って、いろいろとつくっていきます。
各ファイルの解説
フォルダの下につくるファイルを1つずつ解説します
とりあえず必要なのは以下のファイルです。UTF-8で空ファイルを作りませう。
- style.css
CSSとテーマの定義 - index.php
- header.php
<html>から始まり<head><body>と続いて前ページ共通のヘッダ表示までを記述 - footer.php
前ページ共通のフッタ表示と</body></html>まで - functions.php
外部関数をいろいろ定義
style.css
まぁ、なんというかスタイルシートなんですけど、機能としてはスタイル定義のみにあらず！
jarで言うところのMANIFEST.MFファイル的な位置づけで…
テーマの公開情報を定義するところでもあるのです。
[css]
/*
Theme Name: テーマ名称。かっこいい名前をつけてあげよう
Theme URI: テーマを配布しているURL
Description: どんなテーマなのかを事細かく記述しよう。もちろん、1行でだぞ！！
Author: テーマ作成者。自分の名前です。
Author URI: テーマ作成者のホームページURL
Version: バージョン番号
*/
[/css]
こんな感じで書きます。
この下からはどうぞご自由にcss記述をお楽しみください。
index.php
これがブログの記事一覧ページであり、単一記事ページであり、ページのビューであり…
と、なんでもござれのファイル。ここを頑張ってデザイン設計する。
[xml]
<?php get_header(); ?>
<!– 記事ループ開始 –>
<div id="contents">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!– 投稿タイトル –>
<div id="post_title">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
<div id="post_body">
<!– 投稿日時 –>
<?php the_time(‘Y/m/d’); ?>
<!– 投稿内容 –>
<?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<p>投稿がみつかりませんでした。</p>
<?php endif; ?>
<!– 記事ループ終了 –>
</div>
<!– ページング –>
<?php
previous_posts_link(‘← 新しい記事’);
next_posts_link(‘古い記事 →’);
?>
<?php get_footer(); ?>
[/xml]
なんでもござれのファイルと書いたが、もちろん単一記事用やページ用でテンプレートを分けることも可能。
…だが、本稿では触れませんのであしからず。
じゃあ、上から順に気になるであろう関数をみていくよ
get_header()
ここにheader.phpが読み込まれる
if (have_posts()) : while (have_posts()) : the_post();
途中のendwhile; else:とendif;でワンセット
記事が存在するかどうかをチェックして、whileとendwhileで記事数分LOOPする。
んで、else:とendifで記事がないときの表記を行う。
the_permalink()
単一記事に対するURLを表示
the_title()
記事タイトルを表示
the_time(‘Y/m/d’)
記事の投稿年月日を表示
表示フォーマットはPHPのdateのとおり
the_content()
記事内容を表示
previous_posts_link(‘新しい記事’) next_posts_link(‘古い記事’)
一覧画面でページングを行うためのもの。引数にリンクを張る文字列を記述
1ページに表示する表示する記事数はWordPressの設定画面で行う。
get_footer()
ここにfooter.phpが読み込まれる
header.php
index.php内で get_header() で呼ばれていたのがコレ
[xml]
<html>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>" />
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="all" />
<link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />
<title><?php bloginfo(‘name’); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
[/xml]
上記は最低限の記述。ホントはbodyより下に共通ヘッダを書かなきゃならんし、やることいっぱいです。
footer.php
index.php内で get_footer() で呼ばれていたのがコレ
[xml]
<?php wp_footer(); ?>
</body>
</html>
[/xml]
ヘッダと違い、フッタは簡単。これだけで大丈夫！
functions.php
これはまだ早い！
真っ白なファイルを作っておきませう。
ではこれにて・・・