WordPressの固定ページテンプレートをいじって、Booksページをリニューアルしました

ブログ上部にあるメニューリンクに、「Books」という項目があります。

拙著の一覧を展開しているのですが、そこのデザインを変更しました。
※PC版の話なので、モバイル端末で閲覧されている方は「?」かもしれません。

リンクをクリックしてご覧いただくとわかりますが、ブログ記事のページとは若干デザインが違います。

screenshot

右側のサイドバーが消えていて、ワンカラムスタイルになっています。

オリジナルテンプレート作成の流れ

WordPressの固定ページは、個別にテンプレートを指定できます。

たとえば、「Evernoteリンク」のページはそれ専用のテンプレートで作成されています。このテンプレートの作成方法は、

「Evernoteリンク」の作成過程

にて紹介しました。

オリジナルテンプレート作成の流れは、

  1. WordPressのテーマが保存されているフォルダにアクセス
  2. そこに新テンプレート用のphpファイルを作成
  3. 固定ページ作成時に、そのテンプレートを選択

というものです。

新規でphpファイルを作成するのが手間な場合は、もともと存在している「page.php」(固定ページ用のデフォルトのテンプレート)をコピーして、そこに手を加える方法があります。

注意点は、ファイルの冒頭にテンプレート名の宣言を加えること。

 
<?php
/*
Template Name: マイページ
*/
?>

この「マイページ」にあたる部分が、テンプレート名になります。

phpのファイル名は「page2.php」とでもしておけば問題ありませんが、複数のテンプレートを作成する場合、どれがどれだったのかわかりにくくなるので、具体的な役割名を与えておいてもよいでしょう。(book.phpやevernote.phpなど)

追加されたか確認

WordPress側できちんと認識されていれば、新規作成したphpファイルが、「外観→テーマの編集」のページに「固定ページテンプレート」として表示されます。もし表示されなければ、ファイルを保存している場所か、宣言の記述に問題があると思うので、確認してください。

screenshot

固定ページの新規作成でも、「book」が選択可能になっています。

screenshot

新デザインについて

今回使用した固定ページのテンプレートの一番大きなポイントは、

<?php get_sidebar(); ?>

を削除したことです。というか、ほぼそれだけのために新規テンプレートを作ったようなものです。

ちなみにBooksページの下位にある、各書籍のページも同じテンプレートを使いました。既存のデザインと見比べてみると、やっぱり画像を使う場合は広いほうがいいですね。

蛇足ついでに書いておくと、デザインについては、「結城浩のホームページ」からインスパイアを・・・というかほぼパクリですね。はい。

さいごに

せっかくデザインを変えたということで、本を並べるだけでなく、それぞれの本にキャッチフレーズも付けてみました。ぜひご覧ください。個人的に、こういう作業は大好きです。

各書籍のページについては、まだ情報が不足しているものもあるので、じわじわ埋めていきたいと思います。

▼参考リンク:

▼関連エントリー:

Related Posts with Thumbnails
Send to Kindle
Rashita
物書きをやっております。実用書から小説までなんでもござれのハイブリッド物書きです。 ライフハックや仕事術、知的生産などに興味があります。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です