1.8.6 Released !

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

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

page-forfront2col.php

Ver1.4〜追加されたトップページ用の2カラム(サイドバーあり)固定ページテンプレートです。ヘッダーアイキャッチ画像を使用できますが、記事タイトルや日付などは表示されません。

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を一覧で表示する方法サイト内の全記事の投稿ID/カテゴリーIDを一覧で表示する方法

parts

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

library

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


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

post-grid.php

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

home

トップページにヘッダーアイキャッチ表示するためのfeatured-header.php、タブ切替機能を実現するためのpost-tab.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を使うときにはここに書きます。

fontawesome4とfontawesome5

FontAwesomeのファイルが含まれます。v1.7からはFontAwesome5用のファイルも追加されました。

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

読み込み速度への影響からv1.7で廃止されました。

リップルエフェクトのプラグイン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の読み込みはこちらから行っています。

classic-editor-styles.php

v1.7から追加。クラシックエディターのスタイルを制御しています。

style-shortcode.php

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

widget-setting.php

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

sng-function.php

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

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

plugin-update-checker

v1.6から導入しまいた。テーマの自動更新のためのファイルが入っています。

66 COMMENTS

そら 2019/11/05

お世話になっております。sango でカスタム投稿で新しく投稿を作成して、アドバンスカスタムフィールドにて投稿を編集した場合、どのように編集するとよいでしょうか。
・どのテンプレートを複製し、編集するのか
・編集の際の注意点など
ございましたら、アドバイスいただけると助かります。

回答を見る
ユウスケ 2019/05/24

大変お世話になっております。
記事の下に表示されるコメント欄をカスタマイズしたいと考えております。
デフォルトでは、
コメント→名前→メールアドレス→サイト
というやや違和感のある順番になっていますが、
名前→コメント
という順番に変更し、さらに可能であれば、メールアドレス、サイトは非表示にしたいです(コメント投稿の心理ハードルが上がってしまうため)。
尚、すでに、設定>ディスカッションからメールアドレス入力は任意に設定してあります。
上記を実現するための方法をご教示いただけますと有難いです。
宜しくお願い致します。

回答を見る
ゆー 2019/03/26

2018/08/09に質問されていた「パンくずリストの「ホーム」の文字を「HOME」に変更したい」を参考に
content: ‘HOME’; →content: ‘コラム’;
として更新しようしますと「保存する前に1個のエラーを修正してください。」とエラーになります。英文字を入れた場合はエラーにならないようですが、日本語文字をいれるとエラーになってしまいます。

そのまま無理やり更新しますと「コラム」とは表示されず、空白になってしまいます。
ダブルクオーテーション「”コラム”」でも囲ってみましたがエラになります。

なにか良い方法がありましたら教えていただけましたら幸いです。

回答を見る
まさひろ 2019/03/01

こんばんは。ビジュアルエディターのスタイルに任意のclassを追加させることは可能でしょうか?

先日は、タグページについて丁寧にご説明いただき、ありがとうございました。

回答を見る
wtnb 2019/01/07

質問させてください。
sng-function.phpを編集しようと思い、子テーマ内にlibrary/functions/sng-function.phpを作りましたが、編集しても親テーマのsng-function.phpが適用されてしまいます。
どのようにしたら子テーマのsng-function.phpが反映されるようになりますでしょうか?
ご教授よろしく願いいたします。

回答を見る
maki 2018/08/27

エディタの「ビジュアル」「テキスト」を切り替えると改行が消えてしまうのですが、(が消えるわけではなく見た目の改行)これはどこかで変更できますか?

回答を見る
キム 2018/08/23

いつもお世話になっております~パンくずリストに関しての質問です。

ポスティング以外の、固定ページと、アーカイブページではパンくずリストを非表示にしたいのですが、、、もし可能なら方法を教えていただけると助かります!

回答を見る
大島 早希 2018/08/22

いつも利用させていただき、ありがとうございます。
投稿記事のfooter内に「share!」と「関連した投稿」が表示されているのですが、関連した投稿に対する文言を変更することはできますか?

回答を見る
いわい 2018/08/09

こんにちは。パンくずリストの「ホーム」の文字を「HOME」に変更したいのですが、どうにもうまくいきません…恐れ入りますが、教えていただければ幸いです。

回答を見る
サントス 2018/07/11

ソーシャルボタンを減らして表示したいのですが、どのようにすればよいでしょうか。

回答を見る
匿名 2018/06/08

PageSpeed Insightsで、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目で以下を指摘されます。

https://fonts.googleapis.com/css?family=Quicksand%3A500%2C700

読み込みを遅延させるなどして対応したいのですが、どうしたらよいでしょうか。

回答を見る
中塚 章浩 2018/05/10

お忙しいところ失礼いたします。
コメント欄について質問です。

~該当箇所~
コメントを残す
メールアドレスが公開されることはありません。 * が付いている欄は必須項目です
~以上~

「* が付いている欄は必須」
デフォルトでは、名前とメールアドレスが必須入力だと思います。

名前だけ必須にすることは可能でしょうか?

回答を見る
匿名 2018/04/24

はじめまして!
お忙しい中失礼します。
404ページの猫の画像を変更したいのですが、どのようにすればいいのでしょうか?

回答を見る
みみ 2018/04/16

いつも大変お世話になっております。
SANGOのページ右下にあるような「トップへ戻る」ボタンを表示させたいのですが、どのようにすればよろしいでしょうか?
(既にどこかに方法が記載されていたら申し訳ありません。)

回答を見る
うきち 2018/04/06

ビジュアルエディターでも投稿時の見た目と同じにしたいのですが、やり方を教えていただけないでしょうか?

①sango-theme-childの下にlibraryフォルダを作り、更にCSSフォルダを作成。
②親テーマからeditor-style.cssをコピーして配置。

ここまではできるのですが、この先どのようにstyle.cssの中身を移植したら良いのでしょうか?

回答を見る
おおしま 2018/04/05

お世話になります。
libraryのimagesの画像を差し替えたのですが、画像が変わりません。
notfound.jpgを変更しました。
キャッシュしても変わりませんでした。
この場合、どのようなことが考えられるか教えていただけますか?

回答を見る
そうせい 2018/03/15

こんにちは。ワードプレス初心者です。特定のカテゴリー一覧ページをカスタマイズしたいのですが、なかなかうまくいかず、質問です。
1:カテゴリー一覧ページの<「」の一覧>を消すために、achive header phpを子テーマにコピペして、<の一覧>だけを削除したのですが消えません。単純に子テーマに移動するだけではだめなのでしょうか?
2:カテゴリー一覧ページのサイドバーを消すには、どうすればいいのでしょうか?
3:特定のカテゴリー一覧ページで、写真をフルスクリーン表示することは可能でしょうか?(こんなイメージ:http://demo-wp.com/mysong/)

どうぞ、よろしくお願いいたします。

回答を見る
とぺ 2018/03/15

はじめまして。
library/functions/配下のファイルは子テーマに複製して反映する方法はないのでしょうか?
library/functions/entry-function.phpの内容をカスタマイズしたいと思っています。

回答を見る
石倉清一 2018/03/14

いつも世話になっております。
libraryのimagesの画像を差し替えたのですが、画像が変わりません。
ちなみにdefault_small.jpgとnotfound.jpgです。
画像を上書きしてもデフォルトのままです。
考えられる要因があればご教示いただけないでしょうか。

回答を見る
RIVER 2018/03/06

こんにちは。Duplicate Postで記事を複製すると、元の記事のビュー数も引き継がれているようで、SANNGO標準機能の人気ランキングがおかしくなってしまいます。何か対応策はありますでしょうか?

回答を見る
アリス 2018/01/19

お世話になっております。PC表示・モバイル表示ともに気に入っています。ハンバーガーメニューについて質問なのですが、右に配置することはCSSの追加で可能でしょうか? また、三本線アイコンだけでなく「メニュー」の文字もつけられればと考えています。よろしくお願いします。

回答を見る
よし 2018/01/16

sangoのテーマを最近導入させて頂きました!
SEO関連の質問がございまして、head.php内でmeta robotsを制御をしているかと思うのですが、トップやアーカイブの2ページ目以降はindexせず、followする意図を教えていただきたいです。
https://saruwakakun.com/html-css/basic/meta-tag
この記事でも少し触れていますが、具体的な理由を知りたいです。

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン