みなさん、ホームページはどのように制作していますか。私はもともとホームページビルダーでHTMLを編集して１ページずつ作っていましたが、ひとつずつやっていくことはやはり手間で、ホームページに「新着記事一覧を自動的に表示したい！」「掲示板ではなく、記事に対してのコメントを受け付けたい！」と思うようになってきました。でも、一過性の情報を発信するSNSや日記のようなブログでは物足りない。ポータルサイトなどはどのような仕組みでやっているのだろうか…研究に研究を重ね見つけたものがWordpressというシステムでした。
WordPressは数えきれないほどの有料・無料のデザインが用意されていて自分好みのものをインストールして使える手軽さがあります。そのまま使っても、新着記事リストをトップページに表示することができ、記事はカテゴリごとに分けることもできます。コメントの受付のON/OFFもワンタッチ。アクセス集計もプラグインひとつでページごとにできます。
子テーマを編集するって？
テーマファイルを直接編集すると、テーマがバージョンアップするたびにその変更が上書きされてしまいます。また、その上書きを嫌って古いバージョンのままにしておくとセキュリティ的に問題があります。テーマは常に最新のものを使うべきです。そこで有効なのが「子テーマ」の活用です。
親テーマは、いわゆる一般のテーマフォルダです。そして、子テーマはその一部コピーです。ざっくりいれば、変更したいファイルのみ子テーマフォルダに入れておけば、基本的には親テーマのものを読み取り、同じファイル名のものが子テーマにあればそちらを読み込むという仕組みです。親テーマのバージョンアップをしても、変更した子テーマは残りますので変更した部分は生きています。
子テーマの作り方は、テーマファイルのディレクトリに子テーマフォルダを用意して、style.cssとfunctions.php 必要なファイルを用意します。私が使っていCocoonでは、子テーマフォルダも用意されていますので、親テーマと同じくダウンロードして有効化するだけで作業完了です。
私が過去にカスタマイズした話
日本語Codexで使いたいテンプレートタグを検索して適切な部分に挿入します。HTMLの知識がある人はとっついやすいですが、初めての人には高度なことかもしれませんので、慌てずに研究してみてください。
タイトル表示の下に記事の抜粋を表示するカスタマイズ
All Aboutのようなデザインを作りたくて、記事タイトルの下に「抜粋」を表示するようにカスタマイズしました。shingle.phpファイルを編集します。
<?php the_excerpt(); ?>抜粋を表示するタグです。これをタイトルを表示する下の部分に挿入し、文字サイズなどはスタイルシートで設定しました。今はこのテーマを使っていませんが、表示していた時は次のような感じになっていました。
「この記事では」というところが自分で追加した部分だよ。
カテゴリによって記事のデザインを変更するカスタマイズ
投稿時に選ぶことはできませんが、子育て記事なら子育て記事用のテンプレートとだいたい決まっているので、カテゴリに応じてテンプレートが設定されるということでも支障はありません。さらにこの方法なら特別なプラグインは必要ありません。
まず、デフォルトのshingle.phpをshingle1.phpやshingle-sonota.phpなどにリネームして保存します。そして、shingle.phpには下記のように記事を振り分けるコードのみを残します。
<?php
$post = $wp_query->post;
if ( in_category('8') ) {
include(TEMPLATEPATH . '/single8.php');
} elseif ( in_category('14') ) {
include(TEMPLATEPATH . '/single14.php');
} else {
include(TEMPLATEPATH . '/single-sonota.php');
}
?>あとは、shingle1.phpなどを好きなようにアレンジしてしまえばOKです。
上のコードでは、カテゴリ８の記事はshingle8.phpを表示し、カテゴリ14はshingle14.phpを表示、その他はshingle-sonota.phpを表示するという命令です。elseifで条件を増やせばなんぼでもできます。これで携帯電話からの閲覧でも型崩れすることなくできるので、さらにサイト作りの幅が広がります。カテゴリごとにオリジナリティあるサイトを作成することができます。
テンプレートに合わせて複数のタイプのサイドバーを使い分ける
テンプレートファイルを編集してデザインを変える方法を使う場合、サイドバーについてもそれに応じたものに変えることができます。プラグインのjetpackを使えばこの方法を使わずとも対応する方法があります。
通常の sidebar.php の他に、オリジナルの sidebar-2.phpなどをつくる。
あとは、それを表示するphpファイルを編集します。sidebar-2.phpというファイルを読み込む場合は、<?php get_sidebar(‘2’); ?>にします。このように、「-」（ハイフン）の後の数字を増やしていけば、何パターンでもできてしまいます。
「日付・タイトル」の全記事一覧を作りたい
WordPressの全ての記事をプラグインを使わずに「日付」「タイトル」で発行日順に一覧表示する方法です。これが、ありそうでなかなか無かったので全記事リストのページをつくる方法を紹介します。
WordPressの固定ページには、カスタムテンプレートという機能があります。これを利用して、過去記事一覧用のテンプレートを作るという作戦です。
複製した固定ページの最初に下記のような文を追加します。
<?php
/*
Template Name: バックナンバー
*/
?>すると、ページ属性で「バックナンバー」のテンプレートが呼び出せるようになっています。これを応用すると、他のページと違うデザインのページやコンテンツを作ることができるのでサイト制作の幅はグンと広がります。
<li><?php the_time(‘Y/m/d’); ?> : <a href=”<?php the_permalink(); ?>”><?php the_title_attribute(); ?></a></li>記事一覧をリスト表示したいので、固定ページのコンテンツを表示する部分にこれを追記したファイルを作成します。最近のテーマは複雑に入り組んでいて、どこに追記するとよいか迷います。でも、必ず記事を表示する部分がありますのでそこに入れ込めば一覧表示を作成することは可能です。
カテゴリーごとに記事一覧ページのデザインを変える
WordPressのカテゴリーごとにページのデザインを変える方法です。究極な話をすると、特定のカテゴリーのみ別サイトのようにすることも可能です。
基本的な考え方として、WordPressにはカテゴリにIDというものがあります。ダッシュボードのカテゴリから、編集を選ぶ時のアドレスを見ると分かります。そのIDを応用したら何でもできるし、物によっては量産ができるということです。
category.phpを複製し、category-8.phpのように、ハイフンとカテゴリIDの数字をつけて保存するという方法です。 この場合、ID8の一覧ページはこのファイルを読み込みます。
各ページ、見出し画像と解説だけ変えたいんだけど…
カテゴリーのページをアレンジするといっても、結局一部の画像や文を差し替えるだけだったりします。category-××.phpというファイルをつくって対応するだけのことですが、この方法で大量生産するのは面倒です。もし、画像や文章が自動的に差し替わればどんなに便利かといろいろと解決策を探っていました。
カテゴリには説明を入力することができるので、それを表示させよう。あとは、画像の名前とカテゴリIDやスラッグをうまく関連付けられないかな。やってみよう！
私が試行錯誤した結果一番うまくいった方法は次の作戦でした。
<?php
$cat_info = get_category( $cat );
↑カテゴリIDを使って呼び出したいスラッグを指定する
?>
<IMG src=”https://n-hokkaido.com/tetudou/image/<?php echo wp_specialchars( $cat_info->slug ); ?>.png” >カテゴリーで入力したスラッグがhokkaidoであれば、”https://n-hokkaido.com/tetudou/image/hokkaido.png”というようになりますので、そこにhokkaido.pngというファイルがあれば画像が表示されるわけです。２つめの画像を使いたい場合は、hokkaido2.pngなどの画像にしたいですよね。呼び出す場合も同様ですので次のようにしてみます。
<IMG src=”https://n-hokkaido.com/tetudou/image/<?php echo wp_specialchars( $cat_info->slug ); ?>2.png” >どうです？WordPressって面白いでしょ。ちなみに、カテゴリIDの部分ですが呼び出したいスラッグを指定するときに必要なんです。分からないかもしれない解説でごめんなさい。
カテゴリー表示の場合は、グローバル変数$catに表示しているカテゴリーのIDが入っているようです。これをget_categoryの引数として指定することで、特定のカテゴリーの情報を取得することが可能になるのです。
<?php $cat_info = get_category( $cat ); ?> でカテゴリIDを呼び出したあとに <?php echo wp_specialchars( $cat_info->slug ); ?> とするとslugの部分がそのカテゴリになるのです。
私のサイトの場合ですが、JR北海道のカテゴリーでは「hokkaido」普通列車では「local」７１１系では「711」と出力されるようになりました。ここまで来たら勝ったようなものですね。
<?php echo $cat->category_nicename; ?>これもカテゴリのスラッグ（アルファベット）を取得するタグですが、残念なことに、そのカテゴリに所属する最初の記事のカテゴリまで取得してしまい思うようにいきませんでした。なんか、親とか親戚とかいろいろついちゃったんです。なので、使えませんでした。この試行錯誤がプログラミング的思考を育てます。WordPressって面白いよね。