WordPressテーマカスタマイズ事始め・基本構造を理解してカスタマイズしてみる

WordPressを使っているけど、
PHP分からないし、カスタマイズ
は未経験・・という方の為の
カスタマイズ方法です。PHP
を理解せずとも基本構造を
ある程度理解すれば可能です。

PHP製のWordPressですので、当然PHPを理解していれば様々なカスタマイズが可能ですが、プログラミング自体まだ敷居はデザインより高いかもしれません。

でも、カスタマイズしてみたい！という方も多いと思いますので今回はカスタマイズ始めの1歩、的な内容です。

はじめに

これはPHPの記事ではありません。コピペ（ファイル間でのソースの移動など）が基本になるのでプログラマーさんからすれば酷い記事になると思いますが、デザイナーさんが少しでもプログラミングに興味を抱き、理解する事でチームの作業が円滑になる側面も期待しつつエントリーしてみます。

で、カスタマイズする前に以下にご注意頂きたいと思います。

テーマファイルのバックアップは必ず取ってください。コードを間違えてエラーが出ても直し方が分からないと取り返しが付かなくなります。

出来ればWeb上ではなく、ローカル環境を作って、テーマカスタマイズを行った方が良いです。敷居が高いようでしたらBitNamiをお試し下さい。

自己責任でお願いします。

内容はプログラミング知識に疎い方向けなので100%正解の記事ではありません。こんな方法でカスタマイズ出来るよ、という一例です。

プログラミングの用語（『関数』等）は使わないようにしています。出来る限り分かりやすく、という旨の記事になります。

まずはテーマの構成から。

WordPressのテーマの基本構成

wp02
図を書いてみました。テーマは色々な形のものがありますが、基本的にはこんな感じです。混乱を避ける為に、コメントファイルは今回は省いています。

index.phpがTOPページ
個別記事ページはsingle.php
検索ページはsearch.php
「ページ」はpage.php
過去記事などのアーカイブがarchive.php

sideber.phpやfooter.php、header.phpはそれぞれindex.phpやsearch.php、single.phpなどに結合されています。

[note]index.phpの書き方によってはsingle.php等が無くてもテーマとして使えますが今回は触れないでおきます。[/note]

どのように結合されるの？

wp04
結合するコードはindex.phpなどにある<?php get_header(); ?>や<?php get_footer(); ?>等です。このコードのある部分にheader.php内のソースが読み込まれます。

これらはファイルとファイルを繋ぐ橋の様なもので、header.phpやsideber.php内のソースはこの橋を渡ってindex.phpに来れるようになる、とイメージしていただくと分かりやすいかも知れません。
wp15

[note]<?php get_header(); ?>がある部分にheader.php内に書かれているコードを呼び出してhtmlで実装する、という感じです。CODEXのインクルードタグを参考にして下さい。[/note]

では、実際にコードを見てみます。

ソースを見てみる

例えばheader.phpの中が

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title><?php wp_title('-', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
</head>
<body>
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

というコードだった場合。このソースは<?php get_header(); ?>と書かれた場所に出されます。

index.phpを開けてみると以下のようなコードがあると思います。（※divのclass名等はそれぞれ異なります。）

<?php get_header(); ?>
<div id="site-wrapper">
<div id="head">

オレンジの部分がheader.php内のソースを呼び出すコードです。

この時、HTMLは

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>サイト名</title>
<link rel="stylesheet" href="cssのURL" type="text/css" media="screen" />
</head>
<body>
<h1>サイト名</h1>
<div id="site-wrapper">　←ここの真上にhaeder.php内のソースが読み込まれる
<div id="head">

となる訳です。では実際にカスタマイズしてみます。

カスタマイズしてみよう：個別記事のh1を変える

先ほどのindex.phpを以下のようにしてみます。

<?php get_header(); ?>
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<div id="site-wrapper">
<div id="head">

header.phpにあったh1のソースをindex.phpにコピペしました。このままだとHTMLは

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>サイト名</title>
<link rel="stylesheet" href="cssのURL" type="text/css" media="screen" />
</head>
<body>
<h1>サイト名</h1>　←header.php内のh1
<h1>サイト名</h1>　←index.php内のh1
<div id="site-wrapper">
<div id="head">

となってしまい、h1が重複しますのでheader.phpのh1を消さなくてはなりません。header.phpは

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title><?php wp_title('-', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
</head>
<body>

のように変更します。header.phpにあったh1をindex.phpに持ってきました。これで変更前と同じHTMLにする事が出来ました。

ご注意！

wp06
ところが、header.phpは個別記事を出すsingle.phpにも関係するので、header.php内にh1が無くなると、個別記事にはh1が無い事になってしまします。

そこでsingle.phpの最上部にある<?php get_header(); ?>の下にも同じように

<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

をコピーしてあげる必要があります。
[note]single.phpだけでなく、page.php、search.phpやarchive.phpにもh1のソースを加えてあげる必要があります。[/note]

これで、index.php内とsingle.php内にh1が出来ました。

個別記事のみh1を変えたい場合はsingle.phpのh1のソースを変更してあげれば個別記事だけh1を変更出来る、という訳です。

応用：個別記事のみデザインを変える

では、応用です。個別記事とTOPページのデザインを変えたい、という時に。

これまでで、header.phpは<?php get_header(); ?>をindex.phpやsingle.phpに含ませる事で出力される事をご理解頂けたかと思います。

例えばsingle.phpが

<?php get_header(); ?>
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<div id="site-wrapper">
<div id="head">

であろうと、

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title><?php wp_title('-', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
</head>
<body>
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<div id="site-wrapper">
<div id="head">

というように、<?php get_header(); ?>を消してheader.phpのソースを丸々コピペしても同じHTMLで実装できます↓
wp08

このsingle.phpを好きなように変えてあげれば（例えば別のcssを用意したり）、TOPページとは別のデザインに変える事が可能になります。

[note]別のcssを用意するので、コピペだけ、というのは語弊がありますが、PHPの知識は必要ないのが分かって頂けると思います。[/note]

実践編：記事のカテゴリーごとにデザインを変える方法

ここまでの事をご理解頂いた上で、実践編です。

個別記事のカテゴリごとにデザインを変える方法。WordPressでは記事のカテゴリーごとにIDが振り分けられています。管理画面から「カテゴリー」に進むと以下のようになっています。
wp09
カテゴリーのリンク先にはそのカテゴリーのIDが振り分けられているのが確認出来ます。

このカテゴリーIDを使ってsingle.phpから他のファイルに振り分ける事で、カテゴリーごとに別のファイルを読み込むようにします。クエリベースのテンプレートの作成Tipsです。

single.phpを複数作る

まず、バックアップを取ってください。取ったら、single.phpと全く同じソースでsingle-others.phpというファイルを作ります。（※othersの部分は何でも結構です）

single-others.phpを作ったら、single.phpを以下のように変更します。

<?php
$post = $wp_query->post;
if ( in_category('1') ) {
include(TEMPLATEPATH . '/single01.php');
} elseif ( in_category('2') ) {
include(TEMPLATEPATH . '/single02.php');
} elseif ( in_category('3') ) {
include(TEMPLATEPATH . '/single03.php');
} elseif ( in_category('カテゴリのID') ) {
include(TEMPLATEPATH . '/呼び出したいファイル名.php');
} else {
include(TEMPLATEPATH . '/single-others.php');
}
?>

single.phpにはこのソースのみにします。

これは、カテゴリーのIDが1の場合にsingle01.phpを、IDが2の場合はsingle02.phpを、3の場合はsingle03.phpを、呼び出し、それ以外のカテゴリーIDはsingle-others.phpを呼び出す、というコードです。
wp11

そのためには、single01.php、single02.phpというファイルを別途作らなければなりません。

[note]single01.phpというファイル名は他の名でも構いませんが、分かりやすいファイル名にした方が後々便利です。上記例では3つ作っていますが、もっと増えても問題ありません。管理は大変になるかもしれませんが。。。[/note]

single01.phpやsingle02.phpをそれぞれ別のデザインにする

wp13
ここでsingle01.phpやsingle02.phpの中身のソースやcssを変えて（例えばスライドショーを作る、など）デザインしてあげればカテゴリーごとに違うデザインにする事が可能です。HTMLで作る事も可能ですし、footer.phpだけ共通にしたい、等の場合はfooterだけ読み込んであげれば実装可能です。

ただし、ローカル環境でテストする場合はWebサーバーとカテゴリーのIDが異なる可能性がある事に注意してください。この情報は、CODEXのテーマの作成にも記載されていますのであわせてご覧下さい。

あとがき

説明が下手で済みません。自分なりに分かりやすく書いたつもりですが、分かり難い場合は他の方の記事も参照になさってみるといいと思います。ググればいくらでも出てくると思います。

方法はこれだけではありませんので、PHPにご興味が沸けばもっと合理的な方法を見出していただけると思います。詳しい方から見ればこの記事内容は突っ込み所も多々あるでしょうが、取り合えずコピペで出来るカスタマイズ法の一例として書いてみました。少しでもカスタマイズに興味が沸くようでしたら、ぜひともフォーラムを掘り下げていただくことをお勧めします。

まだ、カスタマイズが未経験の方はぜひチャレンジしてみてください。
icon:Open Icon Library