single.phpを追加したことで(例によって、defaultテーマ由来)一応、殆どのリンクはクリックしても動作するようになって来ました。スナップショットとしてファイルと画像を添付しておきます。
これから、一気にCSSで見栄えを良くする処理に入ろうかと思います。基本的には各種ツールやプラグインなどと相性の良い、背景色(白)を基調にモノクロームなデザインを目指します。画像は、シングルビュー(1枚目)、カテゴリービュー(2枚目)です。simple003.zip
single.phpを追加したことで(例によって、defaultテーマ由来)一応、殆どのリンクはクリックしても動作するようになって来ました。スナップショットとしてファイルと画像を添付しておきます。
これから、一気にCSSで見栄えを良くする処理に入ろうかと思います。基本的には各種ツールやプラグインなどと相性の良い、背景色(白)を基調にモノクロームなデザインを目指します。画像は、シングルビュー(1枚目)、カテゴリービュー(2枚目)です。simple003.zip
前回最小限、WordPressのテーマとして動作する(動作するだけ)のテーマを作りましたが、今回は下のように2カラムのデザインにすべく、修正を加えます。書き換えるファイルはStyle.css(必須)とheader.php、index.php、footer.phpです。今回はサイドバーが必要なため、例によってdefaultテーマからパクって来ます。
構成は次のようになります。

header,sidebar,footerは自動で、『<div id=”header” ~』のようにしてくれますから、CSSに#headerなどを加えればOKです。入れ子部分は自分で編集する必要があります。今回はかなりいい加減、のちのち直しますよ。simple002.zip
index.phpは前回とほぼ変わらず、こんな感じ
<?php
/**
* @package WordPress
*/
get_header(); ?><div id=”main”>
<?php get_sidebar(); ?><div id=”contents”>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?> id=”post-<?php the_ID(); ?>”>
<?php the_title(); ?>
<br />
<div>
<?php the_date(‘Y.n.j l’); ?> <?php the_time(‘h:i:s’); ?>
</div>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php get_footer(); ?>
sidebarは<?php get_calendar(); ?>を追加してカレンダーを出したり、liの入れ子構造が気持ち悪いので少し編集(現在ぶっ壊れてる感じなので気にせずに
)
今回の作業でのスクリーンショット
最低限、動くテーマを作成しました。simple001.zip機能もへったくれもありません。ファイルはheader.php, footer.phpはdefaultテーマからパクって、style.cssには何も書いていない状態(テーマとして動くための情報のみでcssとしての動作はなし)、新しく作ったindex.phpの4ファイルです。index.phpでは記事のタイトル、日付、内容のみをループで表示させています。恐らく最低限動作するテーマファイルです。面倒なのでサイドバーはありません。
index.phpの内容
<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?> id=”post-<?php the_ID(); ?>”>
<?php the_title(); ?>
<br />
<?php the_time(); ?>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>
ちなみに、表示するとこんな感じになります。
早速、index.phpの構造を読み解いていきます。index.phpの構造は、まず一番外側に、<?php if (have_posts()) : ?>~<?php else : ? >~<?php endif; ?>のif文があります。have_posts()は投稿の有無を返す関数で、あればTrueをなければFalseを返します。このあたりの処理は日本語の情報としてSTANDING TALLさんの記事が良くまとまっています。
<?php if (have_posts() : ?>
…投稿のループ処理
<?php else : ?>
…投稿が存在しない場合の処理
<?php endif; ?>
次に、投稿を処理するループです。この部分は<?php while (have_posts()) : the_post(); ?>から始まり <?php endwhile; ?>で終了します。ループの中身は、post_class(), the_ID(), the_permalink(), the_title(), the_time(), the_content(), the_tags(), get_the_category_list(), edit_post_link(), comments_popup_link()を順にテンプレートタグを呼び出しています。動作を表にしました。それ以外も知りたい場合は、WordPressのテンプレートタグを参照してください。
| タグ名 | 概要 | ループ | パラメータ |
| post_class() | |||
| the_ID() | 現在の記事の記事ID を表示 | ループ中 | ー |
| the_permalink() | 現在の記事のパーマリンクURI を表示 | ループ中 | - |
| the_title() | 現在の記事のタイトルを表示/取得 | ループ中 | 表示/取得、前後テキスト |
| the_time() | 現在の記事の投稿日時を表示。フォーマットを指定しなければ一般設定「時間のフォーマット」で表示。 | ループ中 | 日時フォーマット |
| the_content() | 現在の記事の本文を表示。記事中に <!–more–> がある場合、単体記事ページ以外ではそれより前の部分を表示し「続きを読む」リンクを添える。 | ループ中 | 「続きを読む」の文言、 |
| the_tags() | 現在の記事のタグ一覧を表示 | ループ中 | 前・後・区切り文字 |
| get_the_category_list() | |||
| edit_post_link() | 現在の記事の編集リンクを表示 | ループ中 | リンク・前後テキスト |
| comments_popup_link() | コメントフォームのポップアップへのリンクを表示。 | ループ中 | コメント数表示テキスト、CSSクラス |
色々と思い通りにならないため、WordPressのテーマを自作する必要に迫られました。PHPにはあまり馴染みがなく最低限の知識しかありません、 WordPress程整備されたフリーのblogエンジンは少ないし、フルスクラッチで作成するほどの気力もなければメリットも感じません。本当に作りたいものはシンプルかつ機能的なテーマで、派手さは後で追加すれば良いかな?と思っています。使用するバージョンは2.8.4です。
はじめの一歩として、テーマを作るためには wp-content/theme以下にディレクトリを作成し、最低限必要なファイルは、index.phpとスタイルシートです。この程度の情報はすぐに得ることができました。次に、標準テーマ(default)のindex.phpを見てみると、結構複雑ですね。すぐに理解できたのは、最初に、get_header();、最後にget_sidbar();、get_footer();でヘッダー、サイドバー、フッターに分かれていることです。あとは、ループ部分の処理ですね。
ディレクトリを見てすぐに、あれ、ja.poがある。gettextで国際化してるのか、こりゃ面倒と思いました。テーマを作ることに慣れた人が改造・改良する分には国際化ありきで良いと思いますが、勉強用には国際化は障壁でしかないし、最初に英語用テンプレートを作るのも馬鹿らしいです。国際化は無視の方向で書いていこうと思います。
スタイルシート(style.css)は最小限、次の内容を書く必要があります。
@charset “utf-8″;
/*
Theme Name: テーマの名前
Theme URI: テーマのURL
Description: 適当に注釈など
Version: バージョン番号
Author: 作者名
Author URI:作者URL
*/
上記を書かないと、テーマとして認識されません。
<?php get_header(); >はheader.phpを必要として、存在しなければwp-content/theme/default/header.phpを使用する。フッター、サイドバーも同様にdefaultのフッター、サイドバーを使用するとの事なんで。完全に自作テーマとする場合に必要なファイルは、index.php, header.php, sidbar.php, footer.php, style.cssの5個になります。
とりあえず、index.phpは学習のために自作するとして、header、footer、sidbarはdefaultのものを一時的に拝借します。