WordPressテーマに必要なファイルとPOCOのファイル構成

ダイブツ

この記事は約 9 分で読めます

ワードプレスではいくつかのファイル名が予約されています。どのワードプレステーマもそのルールに従って制作されています。

このページでは、 POCO がワードプレステーマのルールに沿ってどのようなファイルで構成されているかを解説します。どのファイルがどのように使われているのか、図を使って解説します。

フォルダおよびファイル構成

まずは poco.zip をダウンロードして解凍してみましょう。中身はこうなっています。

ダウンロード:poco.zip

トップフォルダ内は以下の構成になっています。

  • 各種 php ファイル
  • style.css (CSS)
  • readme.txt (テーマの簡単な説明文書)
  • screenshot.png (テーマ画像)
  • サブフォルダ(POCO専用データ)

上記のサブフォルダ以外のファイルはワードプレスで用意するように指定されています。そのためファイル名や保存先を変更することはできません。

各 php ファイルについては後ほど、テンプレート階層と照らし合わせて説明します。ここでは残りのファイルを解説します。

スタイルシート style.css について説明します。ファイル名はワードプレスで指定されているので変更できません。サイズは AMP の規格 (50 kB 以内) に従い半分の約 25 kB としています。

読み込み速度を改善するにはスタイルシートを分割すべきですが、そもそもの実装量を少なくしているためファイルは1つだけです。ただしレスポンシブデザインには対応しています。

screenshot.png はテーマ画像です。 PNG でも JPG のどちらでも問題ありませんがファイル名はやはり変更できません。

POCO は写真を使っていないので、ファイルサイズを抑えられる PNG 形式を採用しました。横幅は 1200 px です。 Google 検索結果でリッチリザルトやカルーセル表示するのに推奨されている解像度が横幅 1200 px です。

images サブフォルダ

テーマ画像以外でサイト運営に最低限必要な画像を images フォルダに集めています。ワードプレスで指定されているわけではありません。

ワードプレスブログ運用開始後は画像の管理を「メディア」画面でやるでしょう。そのためこのフォルダ内の画像はあくまでもスタートアップのフォローです。

実際下記の画像ファイルがあります。

  • 404.png (404ページで使う、訪問者様に次のアクションを促すためのガイド画像)
  • gunosy-logo.png (グノシー配信向けのサイトロゴ画像)
  • no-image.png (サイト内記事一覧でアイキャッチ画像が指定されていない場合の代替え画像、サイト外で使う代替え画像はテーマ画像を使用)
  • portrait.png (ブログ運営者の顔画像またはアイコン)
  • site-icon.png (正方形のサイトアイコン)
  • site-logo.png (横長のサイトロゴ画像で、グノシー配信向けのロゴより大きい)

各画像の詳細な使われ方は「定数設定」にて解説しました。合わせてご覧ください。

関連記事:定数の変更による画像指定、ID設定、その他POCOの設定

fonts サブフォルダ

カスタムウェブアイコンの4ファイルを fonts フォルダに集めてあります。このフォルダも POCO 独自で用意したもので、ワードプレステーマでは必須ではありません。

POCO では Icomoon をあらかじめ同梱しています。同梱フォントを使わずに Font Awesome や Google Design Material Icons といった外部ウェブフォントを使うこともできます。詳しくは別記事で解説しました。

関連記事:POCOでカスタムアイコン(ウェブフォント)を使う方法

feed サブフォルダ

ニュースサイトに記事を配信するための処理や、XMLサイトマップの生成処理を行う php コードを feed フォルダに集めています。

ここの php ファイルだけトップフォルダと別に保存しているのには理由があります。ワードプレスの必須ファイルではない、 POCO 独自の実装ファイルです。

このフォルダには以下の3つの php ファイルがあります。

  • gunosy.php (グノシー配信向けフィード生成)
  • smartnews.php (スマートニュース配信向けフィード生成)
  • xmlsitemap.php (XMLサイトマップ生成)

これらのコードは既出の他のサイトのコードを参考に作りました。コードの中身の解説は省略します。

各フィードの使い方については別ページを参照してください。

ニュースフィード配信には別途各社への配信申請と審査があります。詳しくは各社の申請方法をご確認ください。

POCOの構成ファイルをWordPressテンプレート階層に照らし合わせてみる

改めて、トップフォルダ内の各 php ファイルの解説をしましょう。

ワードプレスは、入力された URL (ページ表示の要求)に対してどのテンプレートで読み込むかをフロー形式で判断します。このフローのことをテンプレート階層と呼びます。

POCO はテンプレート階層で示されているテンプレートファイル (php) をすべて用意していません。

理由は明確です。できるだけ少ないファイル構成でブログテーマを制作したほうが、今後のワードプレスの仕様変更にも対応が容易(メンテナンスコストを抑える)で長くサイト運営ができるからです。

外部リンク:テンプレート階層 – WordPress Codex 日本語版

上の図はテンプレート階層で予約しているファイルと読み込みの流れに対して、 POCO で用意した php ファイルを明示しています。グレーのファイルはワードプレスで予約しているが、 POCO で実装していないテンプレートです。

いくつかのフローに分けて解説します。

一覧ページ・アーカイブページ (index.php)

ワードプレステーマで最低限必要なテンプレートが index.php です。どのような要求 (URL) に対してもテンプレートファイルがない場合は index.php を読み込むようにワードプレスは作られています。

POCO では以下のページに対して index.php を使用します。

  • カテゴリーページ (category.php を index.php で代替)
  • タグページ (tag.php を index.php で代替)
  • 執筆者ページ (author.php を index.php で代替)
  • 月別記事一覧ページ (date.php を index.php で代替)
  • ホームページでの新着記事一覧(ワードプレスの表示設定で「最新の投稿」を選択した場合)

各アーカイブページは個別の php ファイルを実装することで細かく表示を変えることができます。しかしそれではメンテナンスが大変なので index.php に集約しています。

また archive.php も実装していません。そのためフロー上ではグレー(コードなし)にして読み込みをスキップしています。

ホームページだけは表示が2パターンあります。ワードプレス設定でホームページを「固定ページ」にしていた場合は page.php が使われます。デフォルト設定である「最新の投稿」だった場合は index.php を使います。

サイト内検索 (https://yoursite.com/?s={keyword}) についても search.php を使わず強引に index.php で表示します。実際のところ、この機能を使う訪問者はまずいないでしょう。

投稿ページ・固定ページ (single.php, page.php)

投稿ページ(記事)や固定ページは検索結果から最も多くの人が訪れるページなので、細かい設定が必要です。両者を統一して扱う singular.php もありますが、 POCO では使わず別々に実装しています。

実際のところ、固定ページは投稿ページの簡略版です。固定ページは投稿ページと以下の部分で異なります。

  • カテゴリとタグがない
  • パンくずリストがない(カテゴリがないため)
  • 関連記事一覧もない(カテゴリがないため)
  • 執筆者情報もない(固定ページは投稿と違って執筆者に依存しないという考え)

404ページ (404.php)

404ページを使う機会は少ないと思いますが、 URL が無効だった場合に表示するページです。万が一削除(非公開)した記事に読者様がアクセスした際には404ページが保険として必要です。

このページも index.php で代替できます。しかし、ただホームページを表示するよりも、訪問者様にページがなかったことを認知してもらい、次のアクションをとってもらうべきではないでしょうか。

テンプレートサポートファイル (その他のPHP)

フローの右下の点線部分は実際にはテンプレートファイルではありません。しかしテンプレートの部品として活躍するファイルなのでワードプレスで予約されています。

  • header.php(サイトヘッダーとしてサイトロゴ、グローバルメニューの表示部分)
  • footer.php(サイトフッターとしてコピーライトとフッターメニュー)
  • sidebar.php (サイドバー)

上記以外に functions.php もあります。このファイルはワードプレステーマを裏で支える重要なPHPファイルです。具体的には以下の処理が実装されています。

  • 定数の用意(POCO特有のカスタマイズはすべてここでやる)
  • ワードプレス本体の処理の変更や追加(スタイルシートの読み込み、タイトル出力の変更、カスタムフィードの登録、構造化マークアップの生成など)
  • エディタの設定変更(アイキャッチの有効化、抜粋入力欄の有効化など)
  • その他テンプレートファイルのコード生成を補助する処理の追加

各関数や処理は何を実装しているのか、 CSS の目次と連携してあります。ワードプレスのテーマ自作にお役立てください。

Javascript は一切なし

POCO には Javascript コードが一切ありません。 AMP ページを前提としているため、Javascript がどうしても制限されてしまします。

もちろんすべての Javascript を禁止されているわけではありません。ページトップに戻る処理などは Javascript でスライドさせるのが普通です。

しかし POCO は情報を届けることを最優先しているため、全カットにしています。ご了承ください。

直近の AMP のアップデートで Javascript の制限が大分緩和されています。しかしそれでも POCO では引き続き実装しません。ご自由にカスタマイズしてください。

まとめ

POCO は最小限の実装していない、しかしブログ運営に必要な実装に集中していることがおわかりいただけましたでしょうか。

POCO をダウンロードされた際にはぜひカスタマイズしながらワードプレスのしくみを習得してくださいね。

このページをまとめましょう。

  • POCO はメンテナンス性を保つために php ファイル数をできるだけ少なくしている。
  • ただし情報を届けるために必要なカスタムフィードなどは POCO で独自実装している。
  • Javascriptは制限が緩和されているが、それでも POCO では原則使わない。 AMP による表示速度を優先させる。
この記事のカテゴリ:POCOで学ぶWordPress
この記事のタグ: なし

シェアする

POCOを作った人

ダイブツ

WordPressでブログをはじめてみたものの、既存のテーマでは満足できなくてPOCOを制作しました。親サイトのコンセプト「自分の知識やノウハウをすべて公開する」にならって、POCOを通じて得たWordPressの知識はこのサイトで紹介します。

親サイトにある私の紹介:プロフィール

フォローする