Twenty Seventeen カスタマイズ5 テンプレートphp

Twenty Seventeenのカスタマイズ、テンプレートphpです。概要をさら〜っと流します。

テンプレートカスタマイズの心がけ

テンプレートphpを改変するにあたって心がけるのは次のことです。

わかりやすい説明 — 親フォルダからコピペしてきたテンプレートの内容を変更したときはなるべくコメントアウトで何をしたか何なのかを記録します。
モジュール化 — テンプレートにない表示や機能を追加したときは別ファイルで部品化してテンプレート内に読み込む形を目指します。cssもなるべく部品化します。
少しずつやる。慌てない焦らないです。

何度もテーマを変更してはその都度くじけてきた経験を踏まえてやっとこういうことを学びました。そのコードが何であるか、他人が見ても理解出来るように工夫して記述するのが礼儀というものです。コードを書いた本人であっても数年後には他人と同じ状態に確実になります。

テンプレートphpをちょっとずつコピーしていく

子テーマの最初はstyle.css、functions.php、index.phpのみっつだけがあります。cssのカスタムだけで十分な場合もあるでしょう。必要に応じて、ちょろりちょろりと親Twenty Seventeenのフォルダから必要なファイルを子テーマにコピーしてきて改造します。さらに自分で部品ファイルを作成したりもします。やがてファイル数は増えてくるでしょう。

何事も一気にやろうとせず、小さな事からコツコツと、理解しやすい範囲でやっていきたいものです。最初からカテゴリーやtaxonomy、カスタムポストの個別テンプレートなんかいりません。極端な話、index.phpと中身のconttent.phpがあれば他はいらないとも言えます。いりますが。

index.php以外にまず必要になってくるのはheaderとfooterでございます。それから、一覧用のarchive.phpもあったほうがいいかもしれませんね。indexをifまみれにしたくなければある程度目的に応じてテンプレートを使い分けます。

headerにしろfooterにしろarchiveにしろhomeにしろ、これは所謂でかいガワですね。中身はcontent何とかphpです。contentも子テーマにあったほうがいいでしょう。

と、こんな感じでちょっとずつ親フォルダから必要なものを子テーマにコピーしながら地味にカスタマイズしていきます。

カスタマイズをどこでやるか

あぁ、あとそれと今更ですけど、新しいテーマでカスタマイズをやるとき、どこでやるかって問題があります。一般的にはローカルでやりますか？私も以前はローカルに同じものを構築してやってましたが、結局本番に移行するときに面倒なことになったり失敗もするしURLも全部変わるのでローカルは閉じてしまいました。

サブアカウントでロボットを拒否しながらこっそりやるというのもひとつです。私はやっています。ただロボットをいくら拒否してもURLさえ入れれば丸見え状態で、あまりいいやり方とも思えません。そこで一工夫、headerの最後、contentとかmainとかのdivがあるあたり、あの辺に「ログインしてる人に見える」「していない人には見えない」みたいな処理で分岐させます。これでヘッダーとフッター以外は普通の他人には見えません。

こうしてカスタマイズして、ある程度完成が近づいてきたら、本番環境でテストします。本番環境でテストするのにいいプラグインがありますね。

Theme Test Drive

テストのためにTheme Test Driveというプラグインを使ってます。試作中のテーマに切り替えることができるプラグインです。管理者ログインの人にだけ指定したテーマで表示されます。これを使っても細かいところまでは完璧になりませんが、だいたいのところで試作中のテーマをテストできます。カスタマイズの最後は、大抵これを使って確認しながらやってます。

テーマを本番環境でテストできるプラグインは、Theme Test Driveの他にTheme Switchaというのもあるようです。

Theme Test Drive

Theme Switcha

ここで追記削除変更のお知らせです。一旦公開していたこのページですが、さらりと概要を流すとか言いながらまただらだら長くなっていたので分割しました。この後に続いたお話は以下のそれぞれに振り分け加筆しました。
このポストは目次的な役割になった感じです。

header.php、footer.php、content概要

ちょっと変わってる点は、シングルポストで現れる巨大画像がheader.phpで指定されてる点です。あと、footer.phpにはその部品としてsite-info.phpが用意されたので楽になりました。そしてcontent.phpとcontent-excerptの使い分けについてちょろりと書いてます。そんな話、詳しくは分割した記事、こちらでどうぞ。

Twenty Seventeen カスタム – header、footer、content

indexのページネーション

index.php（とかhome.phpとかarchive.phpとか）てのは最も外側のテンプレートですのでほとんど触る必要ありませんが気になるポストページネーションだけはカスタムします。前の記事（css基本ナビゲーション）で触れていますがその続きでページネーションに特化した記事は分割したこちらよりどうぞ。

Twenty Seventeen カスタム – ポストページネーション

固定ページ

さてTwenty Seventeenの特殊な固定ページです。これの扱いがちょっと変わってます。1カラム、2カラム、そしてサイドバーについてです。詳細は分割したこちらの記事よりどうぞ。

Twenty Seventeen カスタム – 固定ページ

注目画像、メタ情報、その他

WardPress の基本的な関数が使われてます

Twenty Sixteenも出た当初は「これまでの公式テーマより簡素」と思いましたが今からすれば全然そんなことなく、テンプレートで使われるちょっとした部品さえもことごとく関数化されていて大変でした。「inc」フォルダのtemplate-tags.phpに大量登録されていましたね。カスタマイズのしにくさたるや異常事態でした。Twenty Seventeenはそいういう意味でも筋が良く、必要以上に無駄な関数が書かれていることもありません。titleはthe_titleだし、ポストページネーションはthe_posts_paginationだし、注目画像はthe_post_thumbnailだし、素直にwordpressの基本の関数が多く使われています。

注目画像

headerから注目画像の表示を消し去ったのでcontentで画像を表示する関数を書き加えます。content.phpではタイトルと抜粋の下、本文の上あたりにでっかく、一覧のcontent-excerpt.phpでは小さな画像を必要箇所に。そして見栄えのcssも整えます。

ところで Featured Image は「アイキャッチ画像」「注目画像」「おすすめ画像」など日本語で用語が統一されていませんね。Wordpressの投稿編集画面では「アイキャッチ画像」になってますがいろいろな説明のところで「注目画像」と書いてあったりもします。どの言葉もなんかしっくりきません。

meta情報の場所

entry-meta, entry-footer のメタの記述は個人的にカスタマイズする部分です。デフォルトではタイトルの上に投稿日と著者が載ります。記事の終わりにカテゴリーとタグが載ります。通常ブログではそれでいいんですが、わりと変える必要があるんですよね。ここ（Digitalboo）はいいんですがMovieBooのほうは大変です。重要なタクソノミーもたくさんあるし重要なmeta keyもあるし、一覧ではメタのオンオフまでやってますからカスタムたいへんです。でもTwenty Seventeenは”twentyseventeen_posted_on”でカテゴリーとタグをまとめている程度の簡素さがいいので、このあたりは通常のWordPress関数で十分やり過ごせそうで「無茶苦茶カスタマイズしてもうた」感もほとんどありません。

カテゴリー、タグ、ターム、メタ情報についてはいずれ細かく何か書いていくつもりです。記事ができればここに追記します。

meta情報は置き場所やカスタマイズより、近年の「構造化」てやつのせいで何だか面倒なことにもなってます。

構造化やOGP

あぁめんどくさい、あぁめんどくさいとため息ばかりの構造化やOGPの設定です。もうほんとにね、いろいろ大変な時代です。

OGPはすでにテンプレート化しているのですが、何年も前の知識のままだったりして「今どきでも同じでいいのか？」と思わなくもないです。もうそういうのをいちいち調べることすら面倒です。

構造化はもっと酷いことになってまして、これをみっちりやったせいでテーマを変えることもできないくらいガチガチになったんですよ。当時はタグに仕込むのが主流でしたが、今はスクリプトとしてまとめて書くのが主流だとか。単純にhtmlが倍以上の行数に膨れあがりますしまとめるためのコードをテンプレート内にifまみれで書くのも並大抵ではありません。しかもスキーマとかいうやつ、日々更新されて色々追加や変更もあるそうです。こんなことほんとにみんなやってんのか？

それに加えてまだまだ酷いのが近年出てきていまして、そうですAMPです。何なのだAMPとか、あともう一個新しいのありますね、名前も知りませんが、何とかってやつ、またもや専用テンプレートをこしらえたり、規格が変われば合わせたり、これはその道の職業人でさえ追いかけるの大変ですよ。私たちのように空いた時間に片手間にやってる人間はついて行くのが難しいレベルになってきて、開かれたインターネット誰もが発信の時代も終わりに近づいてるなと感じないではおれません。

おっとテンプレートの概要から話がずれてきたのでここらでいったん閉じます。