Ver1.3.2をリリースしました(1/27)

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コンテンツの最大幅を設定
  • エディタの整形設定

38 Comments

れおん

SNS Count Cache関連についての要望です。

トップページ(is_front_page())にて、モバイル用フッター固定メニューのシェアボタン下に表示されるシェア数が最新記事のものになっていました。

子テーマに「library->functions->entry-function.php」を持ってきて編集したところ適用されず、知識不足により解決できなかったため親テーマのものを直接編集しました。

親テーマの「entry-function.php」のscc_get_share_xxx();を条件分岐させて対応することができましたが、親テーマを直接編集したため、今後のSANGOのアップデートが不安です。

対応していただけたら幸いです!

返信する
サルワカくん

ありゃ、そうなってしまいましたか。
次回のアップデートで対応するかと思うのでご安心ください。

返信する
あまね

画像遅延ライブラリ使おうと思ったのですが、テーマの「library」→「js」フォルダにすでに「lazyload.min.js」があることに気づきました。
自分の使いたい画像遅延のライブラリとは異なるため、こちらを削除して置き換えたいと考えています。しかし、どこに支障が出るのかわからなかったため、もし削除しない方がいいということでしたらお教えいただけると幸いです。

返信する
サルワカくん

そちらは、今後のアップデートでLazyLoadを実装しようと思っており、
そのために予め入れておいたもので、現在のバージョンではどのページからも読み込まれておりません。
削除しても全く問題ございません。
混乱を招いてしまい申し訳ありません。
よろしくお願い致します。

返信する
あまね

そうでしたか。わかりました。
お忙しい中ご回答ありがとうございました。

返信する
よし

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

返信する
サルワカくん

お世話になっております。
以下の記事が参考になるかと思います。
http://afi8.com/2014/06/29/10598/
https://www.suzukikenichi.com/blog/is-it-best-practice-to-add-noindex-tag-on-paginated-pages/
重複コンテンツを避けつつ(2ページ目以降まで検索エンジンにインデックスされるのは、ユーザーにとって価値が薄い)、
Googlebotには2ページ目以降もクロールしてもらう、という意図でこのようにしています。

返信する
アリス

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

返信する
サルワカくん

右側配置する方法はこちらです。

#drawer #drawer__open {
  right: 0;
}

三本線の下にメニューの文字を追加する方法は次にCSSでおそらくいけるかと思います。

#drawer .fa-bars:after {
    content: 'メニュー';
    font-size: 4px;
    font-weight: bold;
    display: block;
}
返信する
アリス

返信が遅れてしまい申し訳ありません。
ありがとうございます。
無事メニューの文字が表示されました。当初2、3時間近く悩んだため、スッキリしました(笑) 

ただ、右側表示の件なのですがいただいたCSSを追加しても左側表示のままでした。大変細かい要望で申し訳ないのですがよろしくお願いいたします。

返信する
アリス

返信ありがとうございます。
キャッシュを削除したのですが、左側表示のままになっております。
ブラウザ、クロームの両方で試したのですが、位置の変化はありません。

返信する
サルワカくん

なるほど…。それでは

#drawer #drawer__open {
    right: 0;
    left: auto;
}

としてみて頂けますか?

返信する
アリス

早急に対応していただきありがとうございます。無事、右側表示になりました。私自身、持ち手は左なのですが操作する手は右のため、大変助かりました。感謝です。

返信する
RIVER

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

返信する
サルワカくん

こんにちは。Duplicate Postの設定で「スラッグ」のチェックを外したうえで複製してみて頂けますか?

返信する
RIVER

ご教授ありがとうございます。早速設定を変えてみたのですが、やはりビュー数が引き継がれているようで、いきなり上位に来てしまいます。。。

返信する
サルワカくん

本当ですか…。
・「複製しないカスタムフィールド」欄に「post_views_count」と入れてみて頂けますか?
・複製する投稿/ページの要素のうち「タイトル」と「内容」と「Featured Image」にだけチェックを入れて、
 その他は外してみて頂けますか?
(今後保存されるものから適用されるので、その後再度複製をお願いします)。
これでダメなら申し訳ありませんが、お手上げです。

返信する
RIVER

ありがとうございました!指示通りに設定したところ無事対策できました!引き続きよろしくお願いいたします。

返信する
石倉清一

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

返信する
サルワカくん

おそらくキャッシュが残っているのだと思います。
また、外観⇒カスタマイズ⇒「デフォルトのサムネイル画像」から該当の画像は変更可能です。
(サイズは521px x 301px以上)

返信する
石倉清一

キャッシュを削除したら画像が表示されました。
初歩的な問題で失礼いたしました。
ご返信ありがとうございました。

返信する
三浦

初めまして
検索画面から検索すると、ワードでヒットした記事に続き、最新記事がヒットしたように見えて表示されます。
こちらはデフォルトの仕様でしょうか?
よろしくお願いいたします。

返信する
サルワカくん

そのような仕様はないですね…。
カスタマイズされましたか?もしくはプラグインの影響ですね。

返信する
とぺ

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

返信する
サルワカくん

はじめまして。
WordPressでは、子テーマからfunctions系のファイルを複製して反映することができないのです…。
そこで面倒なのですが、「functions.php で定義済の関数をオーバーライドする」や「親テーマのfunctions.php内のrequireの参照先の関数を子テーマで書き換える」で紹介されている方法を取るのが良いかと思います。

また、書き換える部分が多いのであれば(どちらにせよテーマアップデートで反映されない部分などが出てきそうなので)
今後のテーマアップデートを諦めて、親テーマを直接編集してしまうか・・・ですね。
よろしくお願いします。

返信する
そうせい

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

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

返信する
サルワカくん

1. おそらく子テーマ内にpartsという名前のフォルダーを作り、その中にarchiveという名前のフォルダーを作り、
その中にachive-header.phpを入れれば、反映されるかと思います。

2、3. カテゴリーページを1カラムにしたり、写真をヘッダーにフルスクリーン表示したりなどとレイアウトを変えるには、けっこうガッツリとカスタマイズを行う必要があります・・・。
申し訳ないのですが、そのカスタマイズの方法は現状ではご案内しておりません。

返信する
そうせい

どうもありがとうございました。1については解決しました!その他は、ゆっくり勉強していきます。

返信する
おおしま

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

返信する
サルワカくん

404ページの画像を変えるということですね。
確認したのですが、おそらく画像が差し替えられておりません。
FTPソフトをご利用かと思いますが、変更できていないようです。
今一度ご確認くださいませ。

返信する
おおしま

早急なお返事、ありがとうございました。
画像の差し替えができていないかもしれないと、
契約しているロリポップのFTP上のnotfound.jpgの画像を
確認したところ、変更後の画像が表示されていました。
しかし、HP上では変更されていないままでした。
画像のサイズは550×430です。
画像サイズなど関係がありますか・・?

返信する
サルワカくん

今見たら変わっているようです。キャッシュ系のプラグインをご利用の場合、キャッシュが残っていたのかも?です。
PCで見ると、一部背景色がくいこんでしまっているような見た目になってしまっているようなので、
以下のCSSを追加すると良いかと思います。

.nofound-img {
    background: #FFF;
    text-align: center;
}
返信する
うきち

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

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

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

返信する
サルワカくん

その方法だとeditor-style.cssが上書きされないので、以下の方法を取って頂くと良いかと思います。
手順1:子テーマ内にeditor-style.cssを追加
子テーマ(sango-theme-child)ディレクトリの直下に、editor-style.cssという名前のファイルを追加します。
このファイル上に書かれたCSSは、親テーマのeditor-style.cssと合わせてビジュアルエディタに対して指定されます。つまり、「親テーマのeditor-style.css」+「子テーマのeditor-style.css」両方がビジュアルエディタに対して反映されます。
もし、全く同じCSSを書いた場合、子テーマのCSSが優先されます。

手順2:子テーマのfunctions.phpに読み込みコードを追加


/*子テーマのeditor-sytleを読み込み*/ 
function wpdocs_my_add_editor_styles() { 
add_editor_style( get_stylesheet_directory_uri() . '/editor-style.css' ); 
} 
add_action( 'admin_init', 'wpdocs_my_add_editor_styles' ); 
/*END 子テーマのeditor-sytle*/

以上で準備は完了です。あとは、子テーマのeditor-style.css上にCSSを書きます。ただし、WordPressでビジュアルエディタに対してCSSを指定する場合、少し独特の書き方をしないと効きません。このあたりはやや上級者向けの内容です。ググってみると解説記事がヒットするかと思います。

返信する
みみ

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

返信する
サルワカくん

お世話になっております。
管理画面→外観→カスタマイズ→トップへ戻るボタン
から設定ができます。

返信する

コメントを残す

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