翻訳:Professional WordPress: Design and Development

Professional WordPress: Design and Development

プロフェッショナル・ワードプレス:デザインと開発

  • Professional WordPress: Design and Development
  • by Brad Williams , David Damstra , Hal Stern
  • Wrox, 2015
  • Amazon.com の website design で87位(2016年10月17日現在)
  • 132レビュー

ページ数:442ページ

読書メモ

本書は、ワードプレスの機能のみならず、機能がウェブサイト上でどういう意味を持って開発され、使われているかを紐づけて紹介しているところが優れている。

コンテンツ

  • イントロダクション
  • 第1章 最初の投稿
  • 第2章 コードの概要
  • 第3章 WordPressのローカル開発
  • 第4章 コアを見てみる
  • 第5章 ループ
  • 第6章 データ管理
  • 第7章 カスタムポストタイプ、カスタムタクソノミー、メタデータ
  • 第8章 プラグイン開発
  • 第9章 テーマ開発
  • 第10章 マルチサイト
  • 第11章 WordPressへの移植
  • 第12章 ユーザー体験を作る
  • 第13章 ワードプレスのセキュリティ
  • 第14章 アプリケーションフレームワーク
  • 第15章 WordPressの現実
  • 第16章 WordPress開発コミュニティ

この本の説明

  • 第9章、「テーマ開発」は第8章のカウンターパートとなるものです。プラグインはコアに新機能と関数を追加しますが、テーマとCSSページテンプレートは閲覧者にコンテンツが表示される方法を変えます。ベーシックテーマに始まり、この章ではテーマの書き方、カスタムページテンプレートの作り方、メニュー管理、ウィジェットエリア、投稿形式、テーマのインストール、そしてテーマの要素が前章で扱った関数でどのように利用されるかを述べます。この章はこの本の中でも深く開発者にフォーカスした中間セクションの最後になります。

CAPTER 5 THE LOOP ループ

テンプレートタグ

p.85

  • WordPressテーマテンプレートでループコンテンツを表示するために用いられているPHP関数はテンプレートタグと呼ばれます。これらのタグはウェブサイトとコンテンツに関する特定のデータのピースを表示するために使われます。これによりコンテンツがどこにどのように表示されるかをカスタマイズすることができるのです。

CHAPTER 6 DATA MANAGEMENT データ管理

WordPressデータベースクラス

p.116

  • WordPressの機能にはデータベースにダイレクトに働きかけるメソッド関数を持つオブジェクトクラスが用意されています。このデータベースクラスは wpdb と呼ばれ、wp-includes/wp-db.php に配置されています。WordPressのデータベースにクエリーする場合は必ず wpdb クラスをつかうべきです。その主要な理由は、そのクラスを用いることでWordPressが可能な限り安全にクエリーを実行できるからです。

シンプルデータベースクエリー Simple Database Queries

CHAPTER 9 THEME DEVELOPMENT

テーマの開発

pp.230-281(51ページ)

チャプターの要約

p.230

  • テーマを構成する各種のファイルとテンプレートを理解する
  • 既存のテーマに手を入れてカスタマイズする
  • プロジェクトテーマと子テーマのどちらを使うべきか決める方法
  • Content is king というが、そうだろうか。確かにそうだろう。サイトを訪れた人がコンテンツ以外にドライブされることはないし、コンテンツ以外のためにサイトへ戻ってくることもないだろう。重要なのはあなたが作ったコンテンツであることは間違いない。たとえインターネット上で最も優れたコンテンツを作成していたとしても、それを読者にプレゼンテーションしなければならない。読者だけではない、ブラウザーや、検索エンジンにも、そのコンテンツが消費するだけの価値があると主張するために必要だ。
  • テーマが必要なのはそのためだ。テーマはサイトのプレゼンテーション層をコントロールする。プレゼンテーション層にはユーザーエクスペリエンスと、コンテンツがユーザーにどのように提供されるのかの両方が含まれている。テーマには同様に、ページの種類がどういうものかを決定するロジックが含まれており、従って、どのタイプのループが用いられるべきかも決定している。
  • (中略)このチャプターを読み終える頃には、あなたはテーマの機能とカスタムプロジェクトテーマあるいは子テーマを作るための確かな基礎を手に入れているだろう。
  • テーマは単なるグラフィカルな要素ではない。テーマは団結力のあるマーケティング/ブランディングファサードではない。テーマはユーザーエクスペリエンスとそれ以上のものを網羅している。コンテンツがどのようにレンダリングされるか、エラーの状態を含めてコントロールしている。テーマはコンテンツとルック&フィールを変換して、生のhtmlへと変換する。htmlはいくつものテンプレートを経てブラウザへと配信される。

なぜテーマを使うのか

  • (前略)ルック&フィールはサイトに個性を与え、有象無象からサイトを目立たせるものである。一つの見た目は1000の言葉にも勝る。
  • ウェブサイトで新しいテーマを利用するのは2つのシンプルな方法がある。伝統的なFTPインストール(WordPress2.8までは)と、新しく導入されたテーマブラウザーとインストーラーを利用する方法とだ。
  • テーマブラウザーには限界がある。テーマを

テーマとは何か?

p.232

テーマはPHP、CSS、JavaScriptによって構成される。

  • テンプレートファイル。PHPコードのファイルで、閲覧者に見せるコンテンツをコントロールする。ワードプレスはリクエストされたコンテンツにもとづいてテンプレートファイルを呼び出す。初見ではテンプレートファイルの数を見て怖気付いてしまう。しかしテーマによっては2つだけのファイルのこともあれば、非常に複雑なファイル構成であることもある。テーマに含まれるファイルの違いがわかったら、テンプレートのヒエラルキーをレビューするべきだ。それはワードプレスがどのテンプレートをいつ使うか決定するメカニズムだからである。
  • テンプレートのヒエラルキーに圧倒されるかもしれないが、この仕組みはアプリケーションの開発を勢いづける。その柔軟性がWordPressの美しさであり、最も強みのある特徴なのである。
  • CSS。WordPressのテーマはコンテンツをスタイルから分離しようと努力している。このガイドラインを無視することもできるが、良い開発者はこれによくしたがっている。主要なスタイルシートは style.css である。さらに、このファイルの冒頭の数行は一定のガイドラインに従っている必要がある。
  • 画像とアセット。テーマには画像ファイルやその他のクリエイティブアセットあるいはjQueryなどのJavaScriptファイルも含まれるだろう。これらのファイルをどう構成するかは自分で決めていいが、一般的にはテーマのメインディレクトリにサブフォルダを作成して、 img/ や images/、 assets/ 、あるいは js/ などファイルタイプに応じて配置される。
  • プラグイン。プラグインはウェブサイトに機能を追加する。テーマの性格によっては特定のプラグインが必要かもしれない。全てのプラグインはプラグインフォルダに入れる。従ってプラグインは直接的にはテーマの一部ではない。どちらかといえばテーマが作者の意図した通りに動くために必要とされるのである。

テーマを自作する

p.234

  • プロジェクトテーマはスターターテーマをカスタマイズをsteamrollしないかぎり更新することができない。
  • 子テーマは親テーマを継承する。ふた通りの利用法があり、既存のテーマを部分的に変更するか、テーマフレームワークを用いるかがある。
  • テーマフレームワークと子テーマを利用すると、子テーマに変更を加えつつ、フレームワークが改訂されたら更新することができる可能性を保持できる。
  • 第3のアプローチとしては、テーマフレームワークとしくは親テーマと、子テーマの両方を自分で開発する方法がある。
  • どのアプローチを選ぶかは、将来のメンテナンスしやすさとのかねあいで決めるべきだ。

p.235

  • スターターテーマとしては、自分が理想としているイメージに近いものを選んで、それを変更するのがもっとも簡単なやり方だ。もちろん、テーマのライセンスには特別に注意をしなければならない。
  • WordPressのテーマディレクトリはすべてGPLライセンスなので、思った通りに変更して構わない。ワーキングテーマを探索するのは優れた学習方法になる。
  • ワーキングテーマから着手するためには、以下を考慮すべきである。
  • オリジナルテーマのライセンス
  • コードのクオリティ
  • 変更がどれぐらい必要かの見積り
  • クリエイティブアセットの元データ

テーマを流用するか、スクラッチから作るかは、開発の手間や将来の運用の手間を勘案して決定するべきだ。

テーマを自作する:まずはじめに

p.236

  • style.cssは不可欠

コンテンツを表示する:index.php

p.238

  • index.phpはテンプレートの最後の手段である。

テーマを自作する:DRY

  • コードをコピペしたくなった時は、再利用のためにコードを分割するいいチャンスである。
  • DRY: Don’t Repeat Yourself 一度達成した仕事を再現するな
  • ヘッダー、フッター、サイドバーのみっつは特に再利用パーツにすべき箇所だ。

Header.php

  • header.phpはhtmlのhead要素だけでなく、トップにレンダリングされる水平ナビゲーションや検索エリアなどを読み込む目的で使われる。
  • ここで表示される要素を、新聞のタイトル部分になぞらえて、ネームプレートとも呼ぶ。
  • ヘッダーテンプレートファイルには wp_head()が必要である。
  • 自作のテンプレートをスクラッチで作る場合には、ワードプレスのcore機能にget_header()機能が用意されている。
  • インクルード機能とパスを指定する機能の他は持っていないが、テーマ開発の際にはコードが読みやすくなる。

Footer.php

p.241

  • ヘッダーファイルと同様に、フッターファイルにはwp_foot()が必要で、テンプレートファイルの呼び出しはget_footer()を使う

Sidebar.php

p.242

  • Twenty Fourteenテーマは左右の両方で、sidebar.phpとsidebar-content.phpとsidebar-footer.phpがインクルードされている。
  • sidebar.phpをインクルードするには get_sidebar() を利用する
  • サイドバーを伝統的な左もしくは右に配置したい場合は、 get_sidebar(‘right’) などの関数を利用する。すると引数に応じて sidebar-right.php が呼び出される
  • この関数は get_template_part() 関数と似てはいるが、サイドバーのために特別にデザインされているため、読みやすいコードになる。例えばTwenty Fourteen のテーマでは、 get_sidebar(‘content’)という関数で、右手のコンテンツサイドバーを表示させている。
  • より応用的なテーマフレームワークには複数のサイドバーがある。この工夫は一般的な「サイドバーはコンテンツの左か右に垂直なスペースをとって配置されるもの」という考えから逸脱するものだ。そのようなテーマフレームワークにおいては、サイドバーを上や下や、投稿ループの真ん中にさえ挿入する。このように複数のウィジェット化されたエリアを設置することで、サイト管理者にはページレイアウトのどこにでもウィジェットを配置できる力がもたらされるのである。
  • Twenty Fourteen テーマはこれをフッターエリアのサイドバーで行なっているが、このやり方はテーマ開発者の中でも非常に一般的である。
  • ここでしっかりと考慮しなければならないことは、サイドバーをどこまでウィジェット化し、どこまでPHPでハードコードするのかを決めることである。つまり、ウィジェット化すれば管理者画面からコンテンツクリエイターによってコントロールし管理することができるが、PHPコードで書けばWordPressの機能を使って更新を自動化することができるのである。このバランスの正しい判断は開発者にかかっている。

規範からの逸脱:コンディショナル・タグ

p.243

  • サイトがほとんど完成したところで電話がかかって来て、追加の要件を告げられたとしよう。特定の条件のページ(タグがPoniesの時)にだけ、ネームプレートのサイトロゴ脇に虹のマークを加える。しかし全てのheader.phpを同じデザインにしてしまったので、ちょっとした変更のために特別に考慮しなければならない。
  • CSSとテーマのbodyクラスに手を加える方法もある
  • 別の手としては、このカテゴリーに対応するために新しくカテゴリーテンプレートを作成する(後で述べる)方法もある。だが、たかだか小さな要素を加えるためだけに新しいテンプレートファイルを丸々作るのはあまりにもやりすぎと感じられる。
  • こういう場合を想定して作られたのがコンディショナル・タグである。コンディショナル・タグの中には、どのタイプのページが閲覧されているのか、あるいはページコンテンツのメタ情報を取得したいという特定のニーズに応えるものがある。
  • header.php につぎのようなタグを挿入すれば良い

if (is_category(‘Ponies’))){

//処理を記述する

}

  • なお、この例はカテゴリーページにだけ作用し、Poniesカテゴリに属する個々のシングルポストページには作用しない

テーマを自作する:コンテンツの表示

p.244

  • いいテーマはサイトのコンテンツの価値を高める。単に視覚的にいい感じに見える、サイトの性質やブランドにぴったりくるというだけではなく、テーマはコンテンツを適切に構造化しなければならない。

ホームページをカスタマイズする:Front-Page.php

  • プラグインやその他のトリックによってもカスタマイズはできる。管理画面から設定で固定フロントページを設定することもできる
  • カスタムレイアウトあるいはHTMLレンダリングについてカスタマイズしたいケースでは、ビルトインされたテンプレートのヒエラルキーを使って、front-page.phpテンプレートを特別に設定すれば良い。フロントページとして機能するテンプレートファイルはふたつある。 front-page.php か home.php である。これらのテンプレートファイルのヒエラルキーと比較は後で述べる
  • 概して、ユニークなフロントページを作るのはマーケティングツールになる。ユニークなフロントページを作ることに含まれるのは、
    • プロダクトやサービスをフィーチャーしたりショーケースする
    • ウェブサイトのその他のページをフィーチャーしたりショーケースする
    • サイトの特定のページにトラフィックを誘導する
    • プロダクトに深く関わるプロセスの説明的なステップに用いる
    • 提供するサービスの階層構造を概説する
  • Twenty Fourteen テーマのサンプルを見てみよう。フロントページには良いイメージショーケースがフロントかつセンターに来て、個々のページにリンクされている。
  • このルックはTwenty Fourteen テーマで実現したが、面白いことにこのテンプレートファイルでは、Automattic社が用意したデフォルトテーマがひとつも使われていない。前節で説明したコンディショナルタグを使って実現している。 index.php テンプレートをみると良い。
  • is_front_page() と twentyfourteen_has_featured_posts() がつかわれている
  • 次の例では、Twenty Eleven テーマに front-page.phpテンプレートを追加する。2つのコンテンツがある場合は、ショーケーススライドとニュースは複数のループを含む。このループは特定のカテゴリーあるいは特定のカスタムポストタイプの投稿を引っ張ってくる。そのようにして、サイト管理者はショーケースにコンテンツを追加したり取り除いたりすることができる。この例ではカスタム・ポストタイプが用いられている。7章で解説する。
  • この例でショーケースループは ID が showcase の div 要素にラップされている。これはjQueryにフックさせるための仕組みで、後で解説する。PHPコード中で、ループに使うためにカスタムクエリーを作成している。クエリーはカスタムポストタイプの中にslidesというタグを探す。それはあらかじめfunctions.phpの中に記述すべきであり、WordPressダッシュボードでも設定がされていなければならない。
  • ループは次にdiv要素を作成し、ユニークなIDを与え、jQueryとCSSフックの用意をする
  • 続くコードスニペットは、もしスライド用の画像が600px * 160px のサイズになっていれば単に表示するだけである
  • 最終的にjQueryプラグインが不恰好なこのコンテンツのブロックをエレガントなスライドショーに変換する
  • 最後のブロックは伝統的なループの記述で、 index.php テンプレートのループにも見られるものと同じようなものだ。
  • 複数のループを作成することができる——ひとつはslideカテゴリーのポストに使うもので、他のループはnewsカテゴリーを除外して表示するものなどだ。

古い投稿を日付順に表示する:Archive.php

p.247

  • 定期的なスケジュールでコンテンツを作成していれば、フロントページや最近の投稿リストだけではまかないきれなくなってくる。過去の投稿の金庫へ入っていくのはそんな時である。
  • archive.php が介入するのはこのタイミングである。WordPress ブログの起源に立ち戻れば、投稿した時系列と逆順に並べるのが目立ったやり方である。
  • 古い投稿については時系列よりも特定のトピックについてや、特定のカテゴリあるいはトピックについてファイルされたものが見たくなるだろう

1つのカテゴリのみを表示する:Category.php

p.249

  • カテゴリテンプレートを表示してみよう。category.phpテンプレートは特定のカテゴリの投稿のループを作成する。カテゴリテンプレートは閲覧者がカテゴリ名が含まれたURLを叩くと発動する。例えば http://example.com/category.zombies などのように。
  • category.phpテンプレートにおいては、WordPressはすでに閲覧者が特定のカテゴリの投稿を探しているということはわかっているので、デフォルトのループは自動的にクエリを作成する。
  • 例として、Twenty Fourteen テーマはヘッダーとカテゴリー説明からオプションのカテゴリー説明情報を引っ張ってきて、可能なら表示する。
  • これはデフォルトカテゴリーの場合でもカバーすることができ、良いデフォルトフォールバックテンプレートがよく備えている機能である。しかしもしカテゴリーテンプレートごとに異なる見た目にしたいと思った場合はどうしたらいいだろうか。例えば、カラースキームやアイコンを変更したい場合だ。
  • WordPressには最も限定されたテンプレートから、最も汎用的なテンプレートへと順に適用しようとする仕組みがある。要求されたリクエストに最も当てはまるテンプレートを選択し、それからより一般的なテンプレートへと移行し、どうしようもない場合はindex.phpテンプレートにたどり着いて諦める。
  • これはテーマテンプレートを制作するにあたって決定的な側面であり、今後もあなたが見直さなければならない点である。

p.250

  • マーケティングディレクターのために、 Zombies カテゴリーのIDが3なので、category-3.phpテンプレートを作ることができる。カテゴリーIDを確認する簡単な方法は「投稿→カテゴリー」画面でカテゴリー名の上にマウスをホバーさせてブラウザーウィンドウの下に表示されるURLを見ることだ。
  • 特定のカテゴリーについてカテゴリーテンプレートを作るべきかは、「鶏と卵」問題に近い。テンプレートファイルを正しく命名するためには、先にカテゴリーを作成して、カテゴリーIDを取得しなければならないからだ。
  • 幸運なことに、別のやり方もある。WordPress 2.9 以降、ユーザーはカテゴリーテンプレートにスラッグを設定することができます。従って、「鶏と卵」の問題を回避するには、カテゴリーを先に作ってそれにスラッグを適用します。今回の例では zombies を適用します。もしこれより先にプランしていたのであれば、category-zombies.phpというファイルを作成し、それから今言った手順を取れば良いのです。
  • 気づいたと思いますが、WordPressには常に複数の解決手段があります。マーケティングディレクターの例では、課題をコンディショナルタグやカテゴリー特化型のテンプレートで対応する方法もあり、もっとありそうなのは、この要求を解決するのにCSSを用いる方法です。なぜならたいていのテーマには豊富なCSSフックがあるからです。何れにせよこの拡張性こそがキラーアスペクトなのです。WordPressにこのような側面があるということを知っておくだけで、いつかあなたの役に立つでしょう。

特定のタグの投稿を表示する:Tag.php

p.250

  • tag.phpはcategory.phpとほぼ似たような働きをします。
  • カテゴリーと同じように、特定のタグを作り、IDもしくはスラッグをテンプレートのファイル名に適用します。Zombiesタグであれば、 tag-zombies.php という名前にします。スラッグはダッシュボードで確認する必要があります。
  • これらのテンプレートをお払い箱にして、アーカイブページのように、単に関連するコンテンツを逆時系列順に並べるようなことをしてはいけません。

その他のアーカイブ用テンプレート

p.252

単一の投稿を表示する:Single.php

  • ほとんどのサイトにとってはsingle.phpテンプレートで十分でしょうが、WordPressはより大きいカスタマイズ性を提供しており、カスタムポストタイプを取り扱うことができます。先ほどのスライドショーショーケースの例について言えば、クリックさせてsinglep.phpを用いたランディングページをレンダリングする代わりに、特別なsingle-slide.phpテンプレートを作ることもできます。このテンプレートはオススメのイメージあるいはカスタムフィールドをてこ入れし、より魅力的あるいは情報を活用できるものにするでしょう。

ページを表示する:Page.php

p.254

  • WordPressをコンテンツ管理システムとして使うには、固定ページと投稿のいずれを使うのか、などの選択をしなければなりません。これは例えるなら犬か猫かを選ぶようなものです。つまり、みんなそれぞれに思い入れがあります。このチャプターのほとんどの部分では、投稿とカスタムポストタイプについて説明をしてきました。
  • クライアントと仕事をするときには、あなたはふつう、固定ページと投稿を組み合わせるハイブリッドなデザインをするでしょう。投稿は一時的な項目、例えばニュースとプロモーションのページに用いられるのに、固定ページは頻繁には変更されない静的な情報、例えば製品やサービスのページに用いられます。製品ページは関連する投稿ページによって力を増強します。ウェブサイトにおける投稿ページの力により、静的な製品ページにもトラフィックが流れ込むので、クライアントには利益がもたらされます。これは一般的なウェブサイトがとる戦略です。
  • page.php テンプレートは基本的に単一ページテンプレートと同様に機能します。ループはなく、 the_post()が呼び出されています。そう、これは単一ページテンプレートで使われているのと同じ関数です。WordPressは投稿と固定ページを原理的に同じ種類のコンテンツだと捉えており、the_post()はデータベースからコンテンツを呼び出します。
  • 先ほどの例と同様に、特定の固定ページテンプレートを固定ページのIDもしくはスラッグに基づいて作成することができます。やり方はこれまでに述べたのと同じです。加えて、サイトのいかなるページについてもカスタムページテンプレートをアサインすることができるのですが、詳しいことはこの章の後ろで説明します。

カスタムポストタイプを表示する

p.254

  • カスタムポストタイプは、7章で説明したように、作成するコンテンツにひとつの構造を強制するために用いることができます。特定のフィールドやエントリーを用意して、サイト管理者が一貫性のあるコンテンツを作り続けられるようにできるでしょう。

テンプレートヒエラルキー

p.255

  • 選べるテンプレートファイルがたくさんあるにもかかわらず、WordPressはどのようにして使うファイルを決定しているのでしょうか? WordPress コアはとてもその点で賢いのです。URLに基づいて、WordPressはどのタイプのコンテンツがリクエストされたのか判断し、次にどのファイルを使うか判断を始めることができます。
  • 図を見ればわかるように、良い判定ツリーがあるため、柔軟性が非常に大きくなっています。全てのテーマに必ずしも全てのテンプレートファイルが必要なわけではありません。けれどより限定的にカスタマイズされたテーマや特別な用途のためのテーマでもこのヒエラルキーを利用してユニークなアプリケーションをWordPressで作成できます。
  • 検索テンプレートのヒエラルキーについても言及しておいた方が良いでしょう。検索テンプレートは template-loader.php で定義されており、そこにフックが検索ツリーが始まる前に記述されています。その template_redirect を編集することでテンプレートの選択プロセスを変更できます。この記述は主にURLリダイレクトを担当しており、例えばひとつのページ[固定ページ?]に定義された「ショートリンク」により、WordPressがどんなテンプレートを使っているのかをふつうは解読するために使われるURL情報を隠蔽するのに使われています。

機能を自分のテンプレートに追加する:Funcions.php

p.261

  • このファイルは自分の振る舞いやテーマの機能を作ることができます。あなたの要求や目的に合った新たなプレゼンテーションロジックや新機能を追加することができるでしょう。しかし、それに加えて、既存のWordPressの機能をオーバーライドしたり増強したりできます。例に Twenty Fourteen テーマを見てみましょう。
  • twentyfourteen_body_classes() のコード
  • この関数はCSSクラスをHTMLのbodyノードにアサインする body_class() 関数にさらに変数を追加しています。デフォルトの body_class()関数が返すたくさんの便利なクラスは、自分のCSSスタイリングにフックすることができます。しかし、時には特別なCSSを必要とすることもあります。Twenty Fourteen テーマの場合、先ほどの関数は一定の判断基準に基づいて返される配列にクラスを追加します。

Search.php

p.262

SearchForm.php

p.264

  • 別のやり方としては、サイトのネームプレートの横にしばしば見られる検索フォームがあります。これは伝統的なPHPの include で作成します。テンプレートエンジンで予約されているファイル名に気をつけて、適切な箇所に自作のテンプレートを挿入してください。
  • bloginfo[] 配列を忘れると、テーマがポータブルになりませんので注意してください。DRY原則に従うことも忘れないようにしてください。もし複数のテンプレートに何度も出てくる要素があり、かつヘッダーかフッターテンプレート外で使われるものについては、関数化しましょう。

その他のファイル

p.265

  • 自作のファイルにさらに磨きをかけるその他のファイルがいくつかあります。
  • テーマ管理画面で自作テーマを見分けやすくするためには、880px * 660px のサイズで画像を作成し、PNG形式で保存してください。GIFとJPGも利用可能であり、この順に推奨されています。
  • テーア管理画面に表示されるその他のテーマの情報は、style.css に記載されています。
  • ローカリゼーションとインターナショナリゼーションは本書では取り扱っていません。しかしその機能がWordPressには備わっていることを必要な時に思い出してください。

カスタムページテンプレート

p.265

  • ときおり、ユニークなレイアウトが必要な特定のページを作成することがあるでしょう。例えばコンタクトページや、ブローシャーサイトの各製品ページなどがあります。あるいはカスタムランディングページをマーケティングキャンペーンやQRコードのために作るかもしれません。
  • このような場合、page.phpテンプレートを使うのはあなたのサイトの要求には合わないかもしれません。なぜならそれぞれのページにはそれぞれ際立った個性がなければならないからです。さらには、ウィジェットを特定のページに表示し、その他のページには表示しないということがあるでしょう。もちろんこれは Widget Logic のようなプラグインで対応することができますが。あるいは、サードパーティ製のウェブアプリケーションをWordPressに組み込みたいかもしれません。こんな時役に立つのがページテンプレートです。
  • ページテンプレートは管理画面のダッシュボードで固定ページにアサインすることができます。WordPress はどのページテンプレートを使うか、あらかじめ決まったパターンに基づいてコンテンツを表示する時に判断します。

カスタムページテンプレートの使い所

p.266

  • ページテンプレートを作るシンプルな例では、例えばユニークな製品ページを作る場合で、各製品ページのサイドバーに製品固有のデータとリンクがあるという時です。例によってWordPress には何かをやるのに複数のやり方があるものですが、ときおりカスタムページテンプレートを作るのが一番シンプルでわかりやすい方法ということがあります。
  • 他のシンプルな例としては、iFrame HTML 要素を使ってサードパーティ製のウェブアプリケーションを読み込む場合です。サイトの要求と目的に応じて(予算も言わずもがな)、ふたつのサイトをひとつに統合するためにこれは素早くダーティなやり方です。このやり方について注意してほしいことは、iFrame を使うときの一般的な注意点と同じで、ブックマークが期待通りに働かないし[you introduce a competing look and feel from another website]。しかし事実を認めると、このやり方は素早くダーティーな方法としてよく使われていました。
  • 実際には、カスタムページテンプレートはイベントカレンダーや登録ページに使われます。例えば、発展的な授業のクラスが作られました。検索用のウェブアプリケーションをオファーし、講義内容と共に参加登録を直接もしくはウェブからできるようにしています。
  • このシステムは数年間使われ、頻繁に利用されました。この授業登録システムをWordPressサイトに統合する最もシンプルな方法がカスタムページテンプレートを作ることでした。
  • 根本的には、これはRESTウェブサービスコマンドで既存の登録システムを拡張したものでした。

カスタムページテンプレートの使い方

p.267

  • カスタムページテンプレートを作ることそのものはとても簡単です。テンプレートの目的と、目的を達成するためにテンプレートを作ることが事態を複雑にさせます。
  • ページテンプレートを作るには、作りたいものと似ているテンプレートをコピーして新しいファイルを作成してください。通常はpage.phpがいいでしょう。この新しいテンプレートファイルに好きな名前をつけてテーマディレクトリーに保存してください。しかし、われわれの開発ショップではしばしば慣習としてページテンプレートを t_templatename.php のようにしています。t_ をプレフィックスとすることで、伝統的なテンプレートファイルと個人的なページテンプレートを簡単に区別できるのです。もちろんヒエラルキーの中で予約されたファイルネームを避けてさえいればファイル名はなんでもいいのですが。
  • WordPress 3.4以降、ページテンプレートファイルをテーマのサブフォルダーの中に保存することが可能になりました。これによりテーマを圧倒的に綺麗に整理することができます。Twenty Fourteenテーマを見ると、 この目的でpage-templates フォルダーを利用していることに気づくと思います。
  • 新しいテンプレートページを作成するには、特別なコメントセクションをファイルの一番初めに書く必要があります。
  • これは最初の数行に書かれていなければなりません。なぜならWordPressはファイルをスキャンしてページテンプレートとして登録するからです。実際には、このスタンザだけがソースコードの制御コメントです。
  • テンプレート名はなんでもいいのですが、意味がわかりやすく、長すぎないものが良いでしょう。なぜならWordPressはこのPHPコメントをダッシュボード画面のドロップダウンボックスに表示するからです。ページテンプレートはこれでWordPressに登録されます。
  • ページテンプレートの残りの部分は自分が達成したい目標に応じて作成すれば良いです。もちろん、あるいはおそらくやらないといけないのは、 get_header() や get_footer() などのWordPressビルトインの関数と、それからコンテンツ収集の関数を使うことです。基本的には必要なことさえやればそれでよいのですが、自分がやったことは自分で責任を取らねばならないことは覚えておいてください。
  • 例えば、動的なWordPressサイドバーを取り除いて、静的なHTMLに置き換えたとしましょう。さらにダッシュボードの管理用ウィジェットからも機能を取り除いてしまったとします。新しいウィジェットエリアをこのページテンプレートに登録し、ウィジェット画面をこのコンテンツの管理に使うのはいいやり方です。
  • 覚えていて欲しいのはページテンプレートはページの情報を表示する利用法に限定されている訳ではないということです。伝統的な投稿ループを表示したり、WordPressとは全く関係のないコンテンツを表示するのに利用しても問題ありません。従ってページのテキストエディターを白いままにしておいたり、自分自身への指示の覚書を書いておいても構わないのです。

Twenty Fourteen ページテンプレートをストックする

p.268

  • カスタムページテンプレートはとても強力なツールです。実際、コンテンツが既存のテンプレートタイプにフィットしない場合、いつでもこの最終手段を使って全てをオーバーライドすることができるのです。これはまた、特別な非WordPressの機能をウェブサイトに追加する優れた方法でもあります。

その他のテーマの拡張

p.268

メニュー管理

ウィジェットエリア

投稿フォーマット

p.271

要求に応じてスタイリングすることができます。

  • アサイド
  • 音声
  • チャット
  • ギャラリー
  • 画像
  • リンク
  • 引用
  • ステータス:この形式をTwitterやFacebookの最新情報の通知と考えてみてください。特にタイトルがなく表示がされます。このフォーマットを自作のTwitterクローンとして使うことができます。
  • ビデオ
  • 自作のテーマで投稿形式を有効にするには、どの形式を利用したいかを変数配列に渡せば良いです。例えば、 Twenty Fourteen テーマは先ほどのフォーマットのサブセットをサポートしています。
  • add_theme_support() を使った例
  • 覚えておいて欲しいのは、伝統的な投稿コンテンツのための標準形式は常に有効になっていることです。

テーマの設定

p.272

テーマカスタマイザー

テーマのヒエラルキーと子テーマ

p.273

  • WordPress 2.7以降、子テーマは現実的な機能になりました。
  • 以下の条件を満たせば、テーマの拡張をしても問題ありません。
    • ライセンスでテーマの拡張と変更が許可されている
    • 親テーマが、それ自身何かの子テーマではない
  • チャプターのはじめの方で述べたように、カスタムテーマを何かの子テーマにするには、style.css のヘッダー情報に1行加えなければなりません。この行によりWordPressは親テーマの置き場所を知ることができます。従って、コメントに入る変数はテーマのフォルダー名となります。サーバーの設定にもよりますが、テーマの名前をつけるときにはケースセンシティブになるのがベストでしょう。今回の例では、次のような行を追加します。
    • Template: twentyfourteen
  • 説明のために例を示すと、ヘッダーコメントブロックの全体は次のようになります。
    • Theme Name: A Twenty Fourteen Child Theme
    • Theme URL: mirmillo.com
    • Description: A sample child theme
    • Author: David Damstra
    • Author URI: mirmillo.com
    • Template: twentyfourteen
    • Version: 1.0
  • スタイルシートを読み込まない古いテーマとの後方互換性を保つために、次のステップではCSSを親テーマからインポートします。それに基づいてカスタムテーマがルールを適用できます。
    • @import url(‘../twentyfourteen/style.css’);
  • ここまでやれば、WordPressのテーマ画面で自分のテーマをアクティベートすることができるようになります。

p.276

  • WordPressは使用するテンプレートファイルを決めたら、まずその子テーマのディレクトリーをスキャンします。そこにファイルが存在しなかった場合、続いて親テーマのディレクトリーをスキャンします。WordPressは親テーマよりも子テーマの方を好んで使用するのです。つまり、特定のテンプレートの機能をオーバーライドするためにわざわざ親テーマのコアをいじることがないのです。また、子テーマはカスタムページテンプレートを導入することができますが、基本のテンプレートは親テーマから引っ張ってきます。広いスコープでの機会がありますが、同時に先に説明した制限があることは忘れないでください。
  • 最も簡単にそれをする方法は、親テーマのディレクトリーから変更したいテンプレートファイルを子テーマのディレクトリーにコピーしてくることです。そうすれば好きなように改変することができます。

p.277

  • 子テーマを functions.php でさらに拡張することもできます。WordPressは自動的に親テーマの関数をインクルードしますが、それに加えて子テーマの関数もインクルードします。関数の命名には意識的になる必要があります。自作のテーマで親テーマの関数と同じ名前の関数を作成しないようにしてください。機能をオーバーライドする場合、私たちのアドバイスとしては新しい関数を作って名前解決のコンフリクトを避けることと、テンプレートファイルを調整して必要なときに自作の関数を呼び出すことをお勧めします。

プレミアムテーマとその他のテーマフレームワーク

p.278

まとめ

p.280

  • このチャプターで、テーマを使ってどのように組織化し、構造化し、コンテンツを表示するかを学びました。テーマはサイトの顔であり、どんなにコンテンツが優れていても、提示の仕方がユーザー体験を実際には決定づけます。アマチュアっぽく見えるテーマはサイトの信用を傷つけうるし、シャープでプロフェッショナルなテーマは全体の体験をよりよくします。

WordPress専門用語

  • post 投稿
  • page 固定ページ

functions.phpのメモ

/**

* Twenty Fourteen functions and definitions

 

Twenty Fourteen の関数と定義

*

* Set up the theme and provides some helper functions, which are used in the

* theme as custom template tags. Others are attached to action and filter

* hooks in WordPress to change core functionality.

*

テーマをセットアップし、テーマ上でカスタムテンプレートタグとして使われるいくつかのヘルパー関数を提供します。

その他、WordPressのコア機能を変更するためにアクションとフィルターフックに追加されている関数もあります。

* When using a child theme you can override certain functions (those wrapped

* in a function_exists() call) by defining them first in your child theme’s

* functions.php file. The child theme’s functions.php file is included before

* the parent theme’s file, so the child theme functions would be used.

*

子テーマを使う際には既存の関数をオーバーライド(function_exists()の呼び出しでラップされています)することができます。

それには子テーマのfunctions.phpファイルにてまず定義してください。

子テーマのfunctions.phpファイルは親テーマのファイルよりも先に読み込まれる、それにより子テーマの関数が利用されるでしょう。

* @link https://codex.wordpress.org/Theme_Development

* @link https://codex.wordpress.org/Child_Themes

*

* Functions that are not pluggable (not wrapped in function_exists()) are

* instead attached to a filter or action hook.

*

プラガブルでない関数(function_exists()でラップされていない)は、代わりにフィルターかアクションフックに追加されます。

* For more information on hooks, actions, and filters,

* @link https://codex.wordpress.org/Plugin_API

*

* @package WordPress

* @subpackage Twenty_Fourteen

* @since Twenty Fourteen 1.0

*/

開発日記

20161013日木曜日

  • Vagrantの公式ドキュメントを読み進めながら、インストールからバーチャルマシンの解体までを行なった。
  • VCCWをインストールしてWordpressが動いていることを確認した。

20161014日金曜日

  • VCCWのドキュメントを読み、カスタマイズの仕方を覚えた。
  • 『WPプラグイン開発のバイブル』を読み、リクエスト処理の概要を理解した。

20161015日土曜日

  • Professional WordPress を読み、index.phpのテンプレートの役割を理解した。

20161016日日曜日

  • Profesional WordPress を読み、header, footer, sidebar.php の役割を理解した。

20161017日月曜日

  • Professional WordPress を読み、front-page.php, archive.php, category.php の仕組みを理解した。

20161018日火曜日

  • Professional WordPress を読み、tag.php, single.php, page.php の仕組みを理解した。

20161019日水曜日

  • Professional WordPress を読み、カスタムポストタイプ、テンプレートヒエラルキーについて理解した。

20161020日木曜日

  • Professional WordPress を読み、functions.phpの使いかたについて理解した。

20161021日金曜日

  • Professional WordPress を読み、カスタムページテンプレートについて理解した。一通りテーマの章は読み終えた。

20161025日火曜日

  • Twenty Fourteen をカスタムして Twenty Fourteen Kaerechan の開発を始めた
  • まずはstyle.css, functions.php, author.php を作成してカスタムした

20161026日水曜日

  • single.php をオーバーライドしてコメント欄を削除した

20161027日木曜日

  • CSSのspecificityについて調べた
  • 開発環境を別のディレクトリにコピーした
  • ウェブサイトのデザインをした