Twenty Fourteen の子テーマ作成例【右サイドバー仕様の 2 カラムレイアウト】- サンプルとテンプレート編

Twenty Fourteen の full-width.php と single.php を少し書き換えて、Twenty Sixteen 固定ページ風の 2 カラムレイアウトを実現する。

始めに:

今回は 、WordPress のテーマ Twenty Fourteen のテンプレートを少し書き換えて、同じ WordPress のテーマ Twenty Sixteen 風の 2 カラムレイアウトを実装した子クラス、Twenty Fourteen Child(以下「2014 Child」)の作成例を報告する。

2014 Child では、新規に作成したファイルと部分的に改編したファイルが合計 8 本あるので、説明はある程度まとめてやってしまうつもりでいる。代わりにダウンロード可能なサンプルを用意したので、不足分はそれを参考にして頂きたい。サンプルは【3)ファイル構成とレイアウトの実例】に置いてある。

スポンサーリンク

1.Twenty Fourteen Child のレイアウトとテンプレート

1)概要

2014 Child を作ろうと思い立った理由については、前々回の記事の中で少し触れている。
当初は、任意に選んだ固定ページを 2 カラムレイアウトで表示する機能一本で進めてきたが、この記事を書いている途中で、投稿でも同じレイアウトを選択できるように仕様変更した。

2)レイアウトの目標と実装の方針

Twenty Fourteen を右サイドバー仕様の 2 カラムのレイアウトに変更するのは、実はわりと簡単だ。
微調整の方も簡単に実装できれば良かったのだが、さすがにそれほど甘くはなかった。

以下に作成前、作成中に設定したり修正したりした達成目標を挙げるが、目標 1 が簡単なところで、目標 2 が甘くなかった所ということになる。

目標 1 ― Twenty Sixteen の特徴を活かしたレイアウト :

  • 2 カラムのサイトレイアウトで任意の固定ページを表示する(※)。
  • 記事表示領域( entry-content)の幅を拡張する。
  • 右側サイドバー(content-sidebar)にウィジェットグループ(sidebar-1、sidebar-2)を集約する。
  • ヘッダー画像表示領域(site-header)の幅を縮小する。

※ 途中で任意の投稿でも表示できるように仕様変更した。

目標 2 ― Twenty Fourteen の特徴を引き継ぐレイアウト:

  • サイトのマスタヘッダー(masthead)の位置固定(fixed)、ヘッダーメニュー、検索ボックスの表示などは、親テーマの特徴を引き継ぐ。

実装の方針:

  • 2 カラム表示には、親テーマの全幅ページテンプレート(full-width.php)を流用する。
  • 親テーマのテンプレートのカスタマイズは、必要最小限の範囲にとどめる。
  • CSS スタイルのスコープを限定して、他の スタイル、特に親テーマの style.css との競合(コンフリクト)をできるだけ回避する。
  • スクリプトの使用は必要最小限の範囲にとどめる。

目標を立てるより実装の方が難しかったのは、まぁ当然と言える。
特に時間がかかったのは、マスタヘッダー(masthead)の位置固定(fixed)を維持しながら width を微調整するところだ。CSS で何とかしようとしたがどうにもならなかったので、ここは java script でお茶を濁(にご)している。

左サイドバー仕様の full-width.php の使用を決めたのは、それが「固定ページの属性」で選択できる Full Width Page のスタートテンプレートだったからだ。
page.php を使った方が簡単に見えるかも知れないが、書き換えの手間は同じようなものだ。
しかし、page.php を使えば full-width.php をデフォルトに戻せるので、レイアウトの選択肢は一つ増えることになる(今は増加分ゼロ)。

改編後の full-width.php をもう少し改編すれば投稿でも使えるようになるが、今は single.php を改編した single_full-width.php を使ってテストしている(選択肢増加分は 1)。

3)ファイル構成とレイアウトの実例目次へ戻る

下に 2014 Child のファイル構成図を示す。
図の下にダウンロードを置いてあるので、興味のある方は参考にして頂きたい。

Twenty Fourteen Child のファイル構成:

2014 Child は 3 個のサブフォルダと 10 本のファイルで構成されている。
contributors.php と screenshot.png は必須ではないが、親テーマにあったものをそのまま放り込んである。

※ msthead-resize.js のファイル名は masthead-resize.js に変更した(2017/09/17)。

  • 茶色フォント表示は親テーマに存在しないファイル。
  • black と gray フォント表示は親テーマにも存在するファイル。
  • black は中身が変更されているファイルで gray は変更なしのファイル。

single_full-width の single と full の間の区切り文字(デリミタ)は「-」(ダッシュ)ではなく 【 _ 】(アンダースコア)であることに注意して頂きたい。これは Codex の名前付け規則に従っている。

Twenty Fourteen Child のサンプル:

このファイルはテスト・評価用のサンプルだ。
参考にして(笑って)頂きたい。頒布品ではないので、実際にサイトレイアウトに適用する場合は、各位の自己責任にて実施して頂くようお願い申し上げる。

レイアウトの実例:

親テーマの全幅表示と、手本にした Twenty Sixteen の固定ページのレイアウト、2014 Child のレイアウトを比較する。Twenty Sixteen の黒い枠線が強烈すぎて、とてもマネする気にはなれなかった。


Twenty Fourteen の全幅ページ

Twenty Sixteen の固定ページ

Twenty Fourteen Child の固定ページ

4)テンプレート目次へ戻る

テンプレートの名前と表示対象:

2014 Child ファイル名 表示対象 編集画面「属性」上での名前
full-width.php 固定ページ Full Width Page
single_full-width.php 投稿 Full Width Single
sidebar-content-child.php 右サイドバー

full-width.php と single_full-width.php はスタート用のテンプレートだ。
sidebar-content-child.php はスタート用の 2 本のテンプレート内で、右サイドバー表示用のテンプレートとして使用される。

コピー元(Twenty Fourteen)のテンプレート:

2014 Child ファイル名 Twenty Fourteen ファイル名
full-width.php full-width.php
single_full-width.php single.php
sidebar-content-child.php sidebar-content.php

テンプレートの変更部分:

スタート用の 2 本のテンプレートの変更部分は下の枠内のとおり。
sidebar-content-child.php は全コードをコード例に表示している。見てお分かりになるとおり、テンプレートの変更は拍子抜けするほど簡単に済んでしまう。

full-width.php の変更部分:

41 行目:get_sidebar() を get_sidebar(‘content-child’) に変更する。

single_full-width.php の変更部分:

先頭のコメント部分:ファイル先頭のコメント部分に下の 2 行を追加する。

<?php
/**
* Template Name: Full Width Single
* Template Post Type: post
* 省略
*/

38 行目:get_sidebar(‘content’) を get_sidebar(‘content-child’) に変更する。
39 行目:get_sidebar() を削除する。

sidebar-content-child.php のコード例:

これは、私が Twenty Sixteen で固定ページを表示していた時のレイアウトをそのまま引き継いでいる。
つまり固定ページ関連のメニューが先(上方)に来て、投稿関連が後(下方)にくる仕様だ。
順番を変えたければ、このコードの中をアレコレするより、投稿専用のサイドバーテンプレートを別途用意する方が良いだろう。

スポンサーリンク

スポンサーリンク

コメントを残す

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