Twenty Fourteen の子テーマ作成例【右サイドバー仕様の 2 カラムレイアウト】- CSS、functions.php および java script 編

レイアウトのチューニングは時間がかかる。でも見た目のインパクトは小さくて少し悲しい・・・。

 
前回は、WordPress のテーマ Twenty Fourteen の子クラス Twenty Fourteen Child(2014 Child)の作成例のうち、レイアウトの概要とテンプレートについて説明した。今回は functions.php や CSS などのコード類について説明する。今回の作成例が一つのテストということもあって、CSS 以外のコードはあえて複雑にしている部分があるので、その点をあらかじめ頭の片隅に入れておいて頂きたい。

スポンサーリンク

2. Twenty Fourteen Child の CSS と java script

1)functions.php

2014 Child の functions.php は子テーマにしては中身が多い。
「ここでなければできない(ランク AA)」処理と「ここでやるべき(ランク A)処理、それに「無理してここでやらなくても良い(ランク C)」処理が入り混じっているからだ。実のところ処理として必須なのは CSS の登録だけで、他はテストの一環だと思って頂きたい。

functions.php の全コード:

関数の役割:

2014 Child の functions.php の各関数の役割は次の通りだ。

関数名 役割り ランク 処理の重要度
theme_enqueue_styles CSS  ファイルと java script ファイルを登録する。 A
child_fullwidth_class_name body のclass 属性にクラスセレクタを登録する。 C
disable_sidebar_widget 固定ページ表示時にウィジェットを削除する。 AA

style.css の登録は子テーマとして必須で、fullwidth-custom-style.css の登録は 2014 Child として必須だ。
body の class 属性へのクラスセレクタ登録は、header.php の 33 行目を  <body <?php body_class(‘child-full-width’); ?>> と書き換えて登録する方が簡単だ。

条件分岐(参考):

is_page_template、is_page などの条件分岐タグを functions.php の中で直接使うことはできない
必ずユーザー関数の中に記入して、アクションフックやフィルターフックの中で有効にする必要がある。

  • theme_enqueue_styles の条件分岐の意味

CSS、スクリプトなどの登録内容を、現在の投稿/固定ページが使用するテンプレートの種類で切り替えるテストとして使っている。CSS については、通常レイアウトでページを表示した時に style.css と fullwidth-custom-style.css が同居するのを回避している

  • child_fullwidth_class_name の条件分岐の意味

body 要素へクラスセレクタを登録するテストとして使っている。
これは、2 カラムレイアウトで表示した時に 、style.css と fullwidth-custom-style.css が競合(コンフリクト)するのを防止するための処理だ。詳細は CSS のところで説明する。

ウィジェットの登録/削除処理(参考):

一度ウィジェットを登録した後で、別途ウィジェットの登録/削除を実行することはできない。
登録/削除を実行するためには、処理を functions.php の中で sidebars_widgets フィルターに事前登録しておく必要がある。

これはウィジェット登録/削除のテストだ。2014 Child では固定ページ表示時にコメントとアーカイブのウィジェットを削除している。

recent-comments-2 、archives-2 などのインデックスは私のプロジェクトに固有の値なので、他のプロジェクトでこのコードをテストする場合は、サイト上に表示される実際の値 ―― つまり content-sidebar 内の該当する aside の ID を指定する必要がある。【検証】や他のブラウザの開発ツールを使えば簡単に調べられるが、素(す)のソースコードだとちょっと大変かも知れない。

2)CSS(目次へ戻る

styles.css:

2014 Child の style.css は次のようなコメントだけで成り立っている。
必須項目は Theme Name と Template だけだが、オープンライセンスの部分は親テーマの内容を全部残してある。

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://ys.moon-sky.net/themes/twentyfourteen-child/
Author: Bonkure
Author URI: http://ys.moon-sky.net/
Template: twentyfourteen
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This theme is licensed under the GPL.
*/

 

fullwidth-custom-style.css:

これは 2 カラム右サイドバー仕様のレイアウトを実現する CSS だ(以下 fullwidth CSS)。
このレイアウトを PC で見ると、記事表示部分(entory-content)の width が padding 込みで 907px、右サイドバー(content-sidebar)が、やはり padding 込みで 353px で表示されるはずだ(ズーム率 100% )。

  • fullwidth-custom-style.css 全コード

  • 2 カラムレイアウトを実現するクラス型スタイル(クラス)と :before 疑似要素型スタイルの設定

下の表で Child 設定値が 0(ゼロ)に変更されている部分が、キャンセルされた左サイドバー表示領域だ。
スタート用テンプレートの single_full-width.php と full-width.php では、この領域に配置されるコンテナ要素 secondary そのものが削除されているので、これでレイアウトが完全な 2 カラムになる。

セレクタ property  既定値 Child 設定値
.site:before 16 width 182-222px 0
.search-box-wrapper 136 padding-left 182-222 px 0
 .site-content 113 margin-left 182-222 px 0
 .site-content 112 margin-right 29.047-33.33%:Val1 28-33%:Val2
 .content-sidebar 118 width Val1 Val2
 .content-sidebar 117 margin-left Val1(※) Val2

Val はマイナス値のマージン。

  • その他の修正

次にその他の修正を挙げる。
Chrome のデベロッパーツール【検証】でこれを変更しても、通常の表示では違いが見えない部分なので、コードを見ただけでは何のために入っているのか分りづらい部分だ。プロパティ値はコード例で確認して頂きたい。

セレクタ property 修正理由
#site-header img 23 vertical-align ズーム率 125% で発生する 1px の空白補正
.site-header 28 width java script による width 補正前の初期値
.main-content 108 float Media Queries の条件変更による修正(固定ページのみ)
  • fullwidth CSS の適用範囲(スコープ)を制限する

スコープを制限する目的:

  • (1)fullwidth CSS でオーバーライドされたスタイルのプロパティを他の CSS に継承させない。
  • (2)fullwidth CSS の作成および改編を容易にする。

最初のが当初の目的だ。
2014 Child のダウンロード用サンプルを作ると決めた時に、最初に思い浮かんだのがこれ。CSS の登録順で他の CSS に影響を与えるようなものは作れないということだ。

下のは後付けの理屈だ。
スコープを制限したら実際に作成スピードと精度が上がったので、付け加えることにした。

スコープを制限する方法:

  • (1)2 カラムレイアウト用テンプレートを使用する時に、body 要素の class 属性に.child-full-width クラス型スタイル(以下「クラス」)を設定する。
  • (2)fullwidth CSS の中で、すべてのクラスをこの .child-full-width の下位クラスに指定する(ID 型スタイル #site-header  も含む)。

最初の手順は functions.php の中で実施している。
functions.php では fullwidth CSS の登録制御も実施しているので、同じような目的の処理が重なっていることが分かる。だからテストなのだ。

次の手順は fullwidth CSS で行っている。
セレクタが【.child-full-width セレクタ】となっている部分がそうだ。ほとんどすべてのクラスがそうなっているが、.main-content のみ .full-width の下位クラスになっている。

custom-st yle.css:

これは table 要素の overflow 分をスクロールする CSS だ。
2 カラムレイアウトとは直接関係はないが、4 列以上のテーブルを iPhone エミュレータで表示した時の表示がかんばしくないので、とりあえずその対策の一つとして入れておいた。

この CSS を利用するためには table 要素の中に thead 要素を置く必要がある。
table 開始タグの直下に thead 要素を置き、tbody の先頭の tr 要素を丸ごと切り取ってその中に配置すれば良い。それで列見出しが全部 thead の中に配置される。

この CSS はほとんど下の参考リンクから頂いたものなので、詳細はそちらを参考にして頂きたい。

  • custom-style.css 全コード

3)java script(目次へ戻る

これは、スクロールアップ時に固定位置で表示(position:fixed)されるマスタヘッダー(masthead)の width を調整するための、java script のイベントハンドラだ。
DOMContentLoaded イベントと resize イベントに同じイベントハンドラを指定しているので、分かり易いと言えばそうなのだが、少しイレギュラーな構成かも知れない。

イベントハンドラ:

イベントハンドラ width 基準要素 ヘッダー画像
reSizeMastHead site-header
reSizeMastHead_2nd page

reSizeMastHead はヘッダーに画像がある場合のみ有効なイベントハンドラで、reSizeMastHead_2nd は制限なしのバージョンだ。これらは元々一つのイベントハンドラだったが、今はあえて二つに分割してある。私にはその方がデバッグしやすかったからだ。

  • 全ソースコード

2nd の処理が多いのは、基準要素 page の左右の padding と、ターゲット要素 masthead の 左右の margin の設定を補正するためだ(※1)。padding や margin を設定しない場合は、それらの計算部分は不要になる。

Chrome のデベロッパーツール【検証】で masthead の左右の margin を設定すると、left が設定値分だけずれて表示される。これは、何らかのかたちで resize イベントを発生させると、正常位置に戻ってくれる。

私は jQuery のことは何も知らないので、ここではそのことには触れない。

また、【検証】で java script をデバッグするのも初めてだったので、あまり分かったようなことも言えない。いま言えるのは、変数や制御コードを追加/削除しながらスクリプトをデバッグするのは大変だったが、とりあえず何とかすることはできた(※2) ―― ということだけだ。
これについては、きちんとオーソライズされた方法を見つけたら、何かを書くことがあるかも知れない。

  • ※1)masthead に左右の margin を設定する場合は、site-header も同じだけ margin を設定する必要がある。
  • ※2)Event listeners タブの resize イベントから msthead-resize.js を削除する。js ファイルの中身を全部コピーして、Chrome の【検証】の Console に貼りつけ Return キーを押す ―― というようなことをやってみた。
おわりに:(目次へ戻る

日常的にキーボードに向かっていればそれほど気にならないテーマの更新も、長期間ブログを休んでいた時にはかなり億劫(おっくう)に感じられ、つい実行が遅れがちになってしまった。

ファイルの書き換えやコピペで更新を乗り切る、というアドホックなやり方には少し嫌気がさしていたので、もっと楽な ―― というか筋道の通った方法を探したら、WordPress の Codex 日本語版で次のような子テーマの説明を見つけた。

Codex 日本語版「子テーマ」より引用:

  • テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
  • 子テーマを使用することで開発時間を短縮できます。
  • 子テーマの使用することでWordPressのテーマの開発を良い形で学べます。

これに励まされて、その時使っていたテーマ anjirai に変更・追加ファイルを移動したら、確かにテーマの更新がとても楽になった。今頃何言ってんだ?・・・と呆れられそうだが、私が子テーマ関連のドキュメントを真面目に読んだのは、実はこれが初めてという情けなさなのだ。

その余勢を駆って、テンプレート込みの新しい子テーマ 2014 Child を作ってみたワケだ。
自作テンプレートを使いたくて 2014 Child を作ったのではなくて、子テーマ作成の敷居(しきい)が想像していたよりもずっと低かったので、次のステップを踏み出す気になれたということだ。

そして既存のテンプレートをカスタマイズして、それを固定ページと投稿記事に適用することも、想像していたよりずっと簡単だった。本当はこの記事でそのことをお伝えしたかったのだが、自分のための備忘録を兼ねて書いているので、そういう雰囲気はうまく書き切れなかったように思う。
話が少し長くなったが、この記事を終えるにあたり、上の二点はだけはどうしても強調しておきたかった。

スポンサーリンク

スポンサーリンク

コメントを残す

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