Ver1.3.1をリリースしました(11/22)

SANGOテーマの設計図(各ファイルの役割)

SANGOの設計図

WordPressテーマ「SANGO」をご使用頂く方々には、できる限り自由にカスタマイズをして頂きたいと考えています。そこで、このページではSANGOのテーマフォルダーに含まれるそれぞれのファイルの役割をまとめておきたいと思います。

MEMO
以下の内容は中〜上級者向けです。理解しなくても問題なく使用できるのでご安心ください。

テーマフォルダに含まれるファイル

WordPressテーマ「SANGO」をご使用頂く方々には、できる限り自由にカスタマイズをして頂きたいと考えています。そこで、このページではSANGOのテーマフォルダーに含まれるそれぞれのファイルの役割をまとめておきたいと思います。

MEMO
以下の内容は中〜上級者向けです。理解しなくても問題なく使用できるのでご安心ください。

テーマフォルダに含まれるファイル

index.php

トップページに使用されるテンプレートファイルです。ここからはheader.phpfooter.phpsidebar.phpなどなどを読み込みます。

archive.php

アーカイブページ(カテゴリーページ/タグページ/著者ページ/日付別ページ)に使用されるテンプレートファイルです。index.phpと同様にheader.phpfooter.phpsidebar.phpなどなどを読み込みます。

search.php

検索ボックスからの検索結果を表示するテンプレートファイルです。

single.php

記事ページに使用されるテンプレートファイルです。index.phpと同様にheader.phpfooter.phpsidebar.phpなどなどを読み込みます。

page.php

固定ページで使用されるテンプレートファイルです。記事ページと同じように働きます。

page-1column.php

固定ページ作成時に「1カラム表示」のテンプレートを選んだ場合には、こちらが読み込まれます。

page-forfront.php

固定ページ作成時に「トップページ用」のテンプレートを選んだ場合には、こちらが読み込まれます。サイドバーや記事タイトルなどが表示されないオリジナルトップページ作成用のテンプレートです。

header.php

全ページで読み込まれるヘッダー用のファイルです。このファイルが無ければWebサイトはうまく表示されません。

footer.php

同じく全ページで表示されるフッターを構成するファイルです。

sidebar.php

サイドバーを表示するファイルです。

comments.php

記事ページにコメント欄を表示するために読み込まれます。

404.php

ページが見つからなかったときに読み込まれます。なお、「見つかりませんでした…」というような文章等はcontent-not-found.phpに含まれており、このファイルを読み込むことで表示させています。

content-not-found.php

404ページだけでなく、記事ページ等でコンテンツが見つからなかった場合にこちらが読み込まれます。

style.css

サイト全体のスタイルを決めるCSSファイルです。

searchform.php

検索フォーム(検索ボックス)のためのファイルです。

entry-option.css

記事ページで使用されるスタイルを決めるCSSファイルです。ショートコードやビジュアルエディターのスタイル設定(ドロップダウン)のためのCSSはこちらに書かれています。

functions.php

読み込むファイルを制御したり、サイトへ様々な機能を追加したり、WordPressのサイト設定を変えたりと、非常に重要な役割を担うファイルです。サイドバーやサムネイル画像の登録はこちらで行っています。
また、整理するために、後述のlibrary/functionsフォルダ内のファイルに分けて関数を記載しています。

screenshot.png

SANGOのテーマのサムネイル画像です。無視してくださいませ。

page-allpostsid.php

全カテゴリーIDと、全記事の投稿IDを一覧で出力するための固定ページ用テンプレートです。詳しくはこちらの記事をご覧くださいませ。

サイト内の全記事の投稿ID/カテゴリーIDを一覧で表示する方法

theme-update-checker.php

テーマのアップデート情報を管理画面に表示するファイルです。ただし、テーマのアップデート版(もちろん無料)を配布させて頂く場合にも、管理画面からの更新は行わない予定です(意図せず、カスタマイズ内容が消えてしまうリスクが高いからです)。
アップデートがある場合には、本カスタマイズガイドおよびTwitterで告知をし、BOOTHからダウンロード出来るように致します。

parts

Webページを表示するためのパーツが含まれます。index.phpsingle.phpなどのファイルから読み込まれます。詳しくは後述。

library

画像やCSS/JSファイルなどが含まれます。次の章で詳しく解説します。


partsフォルダーに含まれるファイル

post-grid.php

トップページとアーカイブページの記事一覧グリッドを表示するためのパーツです。

home

トップページにヘッダーアイキャッチ表示するためのfeatured-header.phpが含まれます。

archive.php

アーカイブページのヘッダーを表示するためのarchive-header.phpが含まれます。

single.php

記事ページを構成するための4つのパーツファイルが含まれます。

  1. entry-header.php:記事のタイトルまわりのパーツです。
  2. entry-content.php:記事の本文まわりのパーツです。
  3. entry-footer.php:記事下にもろもろを表示させるためのパーツです。
  4. prev-next-entry.php:「前の記事へ」「次の記事へ」を表示するためのパーツです。

libraryフォルダーに含まれるファイル

css

ビジュアルエディタの表示を変えるeditor-style.cssが含まれています。

js

フッターで読み込まれるscripts.jsが含まれています。カスタマイズでJavascriptを使うときにはここに書きます。

fontawesome

FontAwesomeのファイルが含まれます。

images

以下の画像が含まれます。必要に応じて置き換えてくださいませ。

  1. default.jpg:デフォルトサムネイル画像です。カスタマイザーでデフォルト画像が登録されていない場合の使用されます。
  2. default_small.jpg:デフォルトのサムネイル画像(520x300px)です。
  3. default_thumb.jpg:デフォルトのサムネイル画像(正方形)です。
  4. feedly.pngfeedlyの画像です。
  5. insta.jpg:Instagramボタンの背景のグラデーションに使われます。
  6. notfound.jpg:404ページに使用される画像を変える場合には、こちらを置き換えます。

ripple

リップルエフェクトのプラグインRipplerのファイルが含まれます。カスタマイザーで「リップルエフェクトをオフにする」を選ぶと読み込まれなくなります。

functions

関数ファイルがもろもろ含まれます。次の章で詳しく解説します。


library/functionsに含まれるファイル

このフォルダーに含まれるファイルはどれもテーマフォルダ直下のfunctions.phpから読み込まれています。

custom-field.php

投稿/固定ページのカスタムフィールドを実装するための関数が含まれます。メタデスクリプション、タイトル(titleタグ)設定、meta robot設定など。

customizer.php

カスタマイザー関係はここに入っています。色設定を反映するためのCSSの出力もこちらで制御しています。

entry-function.php

記事ページで使われるもろもろの関数が含まれます。関連記事やおすすめ記事、CTA、「この記事を書いた人」、シェアボタンなど。

head.php

ogpやmeta robot設定、titleタグ設定などをこちらで制御しています。

sng-style-scripts.php

外部CSSやJSの読み込みはこちらから行っています。

style-shortcode.php

ショートコードやエディターのスタイル機能(ドロップダウン)はこちらで実装しています。

widget-setting.php

人気記事ウィジェットの実装や、サイドバーに最新記事にサムネイル画像を表示させたりなど、(主にサイドバーの)ウィジェット関連の関数が書かれています。

sng-function.php

その他の細かな設定が書かれています。内容は以下の通り。

  • アイキャッチ画像のURLを取得
  • パンくずリスト
  • 記事一覧のページネイション(トップ/アーカイブページ用)
  • 記事一覧カード上にカテゴリー名を出力
  • NEWマーク
  • カテゴリーページのタイトルを調整
  • 記事内に広告挿入
  • Google Analyticsコードをフッターに挿入
  • embedコンテンツの最大幅を設定
  • エディタの整形設定

コメントを残す

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