Twenty Fourteenのテーマファイルを眺めてみたよ

WordPress3.8からの新しいデフォルトテーマTwenty Fourteenのテーマのつくりをざっくり覗いてみたので、メモ的に。

Twenty Fourteenはマガジンタイプのなかなかカッコイイテーマで、気に入ってる方も多いのではないでしょうか。

screenshot
まだじっくりみたことがなかったので、中のファイル構成がどうなってるのかさらっとみてみました。

Twenty Fourteenのファイル群

twenty-fourteen-05

相変わらずファイル数が多いですね。。種類ごとにわけていってみましょう。

ページ表示のテンプレートファイル

ページを表示するためのテンプレートファイルです。いわゆるテンプレート階層に従って表示されるものですね。

  • index.php・・・メインインデックス(トップ)ページ テーマの必須ファイルです
  • page.php・・・固定ページ
  • single.php・・・投稿の個別ページ
  • archive.php・・・アーカイブページ
  • category.php・・・カテゴリーアーカイブ
  • tag.php・・・タグアーカイブ
  • author.php・・・著者ページ
  • comments.php・・・コメント
  • image.php・・・画像(画像挿入時に「添付ファイルのページ」を選択した画像)表示
  • search.php・・・検索結果
  • 404.php・・・404ページ

うん。こうやって見るとちょっとスッキリしてきますね。

ヘッダー・フッターなどのモジュールファイル

ヘッダーやフッターなどのサイト内で共通のパーツを表示するテンプレートファイルです。

  • header.php・・・共通ヘッダーを表示
  • footer.php・・・共通フッターを表示 sidebar-footer.phpを読み込んでいる
  • sidebar.php・・・左サイドバー。カスタムメニューの「左サイドバーのメニュー 2」(設定されている時のみ)とウィジェットのメインサイドバーを表示
  • sidebar-content.php・・・右サイドバー。ウィジェットのコンテンツサイドバーを表示(設定されている時のみ)
  • sidebar-footer.php・・・サイドバーという名前だけれどフッター。ウィジェットのフッターウィジェットエリアを表示(設定されている時のみ)

02-01-01

コンテンツを表示するモジュールテンプレートファイル

コンテンツ部分を表示するファイルです。ページ表示のテンプレートファイルに読みこまれて表示されます。

【基本のコンテンツ表示モジュールテンプレートファイル】

  • content.php・・・コンテンツ表示のデフォルトテンプレート。single、index、archive、searchで使われる
  • content-page.php・・・固定ページのコンテンツを表示する。
  • content-none.php・・・投稿がない場合

【投稿フォーマット別】
また、投稿フォーマットを選択した場合には投稿フォーマットに従って選択されます。
taxonomy-post_format.phpで投稿フォーマット別のテンプレートの読み込みを定義しています。

  • content-aside.php・・・投稿フォーマット アサイド
  • content-audio.php・・・投稿フォーマット 音声
  • content-gallery.php・・・投稿フォーマット ギャラリー
  • content-image.php・・・投稿フォーマット 画像
  • content-link.php・・・投稿フォーマット リンク
  • content-quote.php・・・投稿フォーマット 引用
  • content-video.php・・・投稿フォーマット 動画
  • taxonomy-post_format.php・・・投稿フォーマット別のテンプレートの読み込みを定義

【おすすめコンテンツ】
Twenty Fourteenの特徴でもある、ヘッダーに大きくグリッド、またはスライド形式で表示されるおすすめコンテンツを表示するテンプレートファイル。
おすすめコンテンツは「featured」というタグを設定することで認識されます。

  • featured-content.php・・・おすすめコンテンツを表示 content-featured-post.phpを読み込んでいる
  • content-featured-post.php・・・おすすめコンテンツを表示(グリッド、またはスライド形式)
  • 固定ページテンプレート

    固定ページのページ属性の部分で選択できる固定ページ用のテンプレートファイルです。

    • page-templates/contributors.php・・・参加者ページ
    • page-templates/full-width.php・・・全幅ページ

    スタイルシート

    スタイルシートです。

    • style.css・・・デフォルトのスタイルシート。テーマの必須ファイルです。
    • rtl.css・・・右から左へ書く言語用のスタイルシート
    • css/editor-style.css・・・投稿エディタにスタイルを適用
    • css/ie.css・・・ie用のCSSを記述

    機能を追加するphpファイル

    機能を追加するphpファイルです。Twenty Fourteenにはfunctions.phpの他にincフォルダにいくつかの機能追加ファイルが格納されています。

    • functions.php・・・基本の機能追加用ファイル
    • inc/back-compat.php・・・3.6以下への対応を記述
    • inc/custom-header.php・・・カスタムヘッダーを定義
    • inc/customizer.php・・・テーマカスタマイザーを定義
    • inc/featured-content.php・・・おすすめコンテンツを定義
    • inc/template-tags.php・・・Twenty Fourteen独自のテンプレートタグを定義
    • inc/widgets.php・・・Twenty Fourteen独自のウィジェットを定義

    スクリーンショット screenshot.png

    管理画面で表示されるスクリーンショット用のpngファイル。
    管理画面での表示が387×290、推奨サイズは880×660となっています。

    その他

    • genericons・・・テーマで使用されているアイコンフォント
    • languages・・・翻訳ファイル
    • js・・・JSファイル
    • images・・・テーマで使用する画像ファイル

    いやはや。ほんとに沢山ですが、整理してみると、ちょっとはわかりやすくなったでしょうか。
    なかなかここまで複雑なテーマを作ることがあるかもしれないし、ないかもしれませんが、テーマの構成を考えるときの参考にもなりますね。
    Twenty Fourteenをカスタマイズするぞ〜っという時の参考にしていただければ幸いです。

    かっこいいTwenty Fourteenと上手に付き合いたいですね!
    それでは楽しいカスタマイズライフを〜♪

    Twenty Fourteenのテーマファイルを眺めてみたよ」への2件のフィードバック

    1. ヒロセマリ

      GWにtwenty-fourteenに変更してから、調べ物をするたびにこちらのページにたどり着きます。
      カスタマイズにはまだまだですが、概要の把握に参考にさせて頂いております。

      返信
    2. ピンバック: 【TwentyFourteen】サイトのトップページ上部にアドセンス広告を配置するように修正(初心者向け) | itkhoshi.com

    コメントをどうぞ♪