ブログ上部にあるメニューリンクに、「Books」という項目があります。
拙著の一覧を展開しているのですが、そこのデザインを変更しました。
※PC版の話なので、モバイル端末で閲覧されている方は「？」かもしれません。
リンクをクリックしてご覧いただくとわかりますが、ブログ記事のページとは若干デザインが違います。
右側のサイドバーが消えていて、ワンカラムスタイルになっています。
オリジナルテンプレート作成の流れ
WordPressの固定ページは、個別にテンプレートを指定できます。たとえば、「Evernoteリンク」のページはそれ専用のテンプレートで作成されています。このテンプレートの作成方法は、
にて紹介しました。
オリジナルテンプレート作成の流れは、
- WordPressのテーマが保存されているフォルダにアクセス
- そこに新テンプレート用のphpファイルを作成
- 固定ページ作成時に、そのテンプレートを選択
というものです。
新規でphpファイルを作成するのが手間な場合は、もともと存在している「page.php」（固定ページ用のデフォルトのテンプレート）をコピーして、そこに手を加える方法があります。
注意点は、ファイルの冒頭にテンプレート名の宣言を加えること。
<?php /* Template Name: マイページ */ ?>
この「マイページ」にあたる部分が、テンプレート名になります。
phpのファイル名は「page2.php」とでもしておけば問題ありませんが、複数のテンプレートを作成する場合、どれがどれだったのかわかりにくくなるので、具体的な役割名を与えておいてもよいでしょう。（book.phpやevernote.phpなど）
追加されたか確認
WordPress側できちんと認識されていれば、新規作成したphpファイルが、「外観→テーマの編集」のページに「固定ページテンプレート」として表示されます。もし表示されなければ、ファイルを保存している場所か、宣言の記述に問題があると思うので、確認してください。
固定ページの新規作成でも、「book」が選択可能になっています。
新デザインについて
今回使用した固定ページのテンプレートの一番大きなポイントは、<?php get_sidebar(); ?>
を削除したことです。というか、ほぼそれだけのために新規テンプレートを作ったようなものです。
ちなみにBooksページの下位にある、各書籍のページも同じテンプレートを使いました。既存のデザインと見比べてみると、やっぱり画像を使う場合は広いほうがいいですね。
蛇足ついでに書いておくと、デザインについては、「結城浩のホームページ」からインスパイアを・・・というかほぼパクリですね。はい。
さいごに
せっかくデザインを変えたということで、本を並べるだけでなく、それぞれの本にキャッチフレーズも付けてみました。ぜひご覧ください。個人的に、こういう作業は大好きです。各書籍のページについては、まだ情報が不足しているものもあるので、じわじわ埋めていきたいと思います。
▼参考リンク：
- Pages(WordPress Codex 日本語版)
- 固定ページのテンプレートをページごとに切り替えるカスタム方法（WordPressカスタム）
- 結城浩のホームページ
▼関連エントリー：
