WordPress「Cocoon」のテーマファイルを読んでみよう。②

アイキャッチ画像

SHARE

はじめに

おまたせしました！
今回はテーマファイルを読んでみよう企画の第2弾です！

先日、卒業生さんより「ブログを読ませていただいてます」との声を頂きました。
これを「ブログを楽しみにしています」に変えられるように頑張ります💪

本題ですが、前回はindex.php の中身を解説していきました。

読んでいない方はこちら

解説と言ってもかなり、ざっくりですが💦
今回はさらに深い階層まで読み進めていきましょう。

あーっと、ちなみに、Cocoon のこの場所が書かれている場所が知りたい！などがあれば教えて頂ければ、その部分を目標に読み進めていきますので、ある方は是非コメントでも担当講師にでもお伝え下さい！
（Cocoon のヘッダーのレイアウトの部分が書かれている場所が知りたい。など）

では、読み進めていきましょう！

get_template_part(‘tmp/list’); とは？

前回の続きです。

get_template_part('tmp/list');

index.php にはこのような記述がありましたね。
get_template_part() は、よそのファイルをここで読み込みますよーっていう関数です。
読み込むファイルの場所を、()内に引数として書いています。

tmp/list とは？

では、tmp/list とはどこなのか？
これは相対パスという書き方ですね！
相対パスなので、元となる（root）場所があります。

その場所はテーマ直下です。

wp-content/themes/cocoon-master/

ここの事です。
という事は、tmp/list とは、

wp-content/themes/cocoon-master/tmp/list

の事です。
( get_template_part() の引数に “.php ” などの拡張子は必要ありません。)

list.php の中身

中身は以下のようになっていると思います。

<?php //一覧
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;

////////////////////////////
//アーカイブのタイトル
////////////////////////////
if ( is_category() && !is_paged() ){
  ////////////////////////////
  //カテゴリページのパンくずリスト
  ////////////////////////////
  if (is_single_breadcrumbs_position_main_top()){
    get_template_part('tmp/breadcrumbs');
  }

  ////////////////////////////
  //カテゴリページのコンテンツ
  ////////////////////////////
  get_template_part('tmp/category-content');
} elseif ( (is_tag() || is_tax()) && !is_paged() ) {
  get_template_part('tmp/tag-content');
} elseif (!is_home()) {
  //それ以外
  get_template_part('tmp/list-title');
}

////////////////////////////
//インデックストップ広告
////////////////////////////
if (is_ad_pos_index_top_visible() && is_all_adsenses_visible()){
  //レスポンシブ広告
  get_template_part_with_ad_format(get_ad_pos_index_top_format(), 'ad-index-top', is_ad_pos_index_top_label_visible());
};

////////////////////////////
//インデックスリストトップウィジェット
////////////////////////////
if ( is_active_sidebar( 'index-top' ) ){
  dynamic_sidebar( 'index-top' );
};

////////////////////////////
// トップシェアボタン
////////////////////////////
//SNSトップシェアボタンの表示
if (is_sns_top_share_buttons_visible() &&
  //フロントページトップシェアボタンの表示
  (is_front_page() && !is_paged() && is_sns_front_page_top_share_buttons_visible())
){
  get_template_part_with_option('tmp/sns-share-buttons', SS_TOP);
} ?>

<?php
  if (is_front_top_page() && is_front_page_type_tab_index()) {
    get_template_part('tmp/list-tab-index');
  } elseif (is_front_top_page() && is_front_page_type_category()) {
    get_template_part('tmp/list-category');
  } elseif ((is_front_top_page() && is_front_page_type_category_2_columns()) || is_front_top_page() && is_front_page_type_category_3_columns()) {
    get_template_part('tmp/list-category-columns');
  } else {
    get_template_part('tmp/list-index');
  }
?>

<?php
////////////////////////////
//インデックスボトム広告
////////////////////////////
if (is_ad_pos_index_bottom_visible() && is_all_adsenses_visible()){
  //レスポンシブ広告のフォーマットにrectangleを指定する
  get_template_part_with_ad_format(get_ad_pos_index_bottom_format(), 'ad-index-bottom', is_ad_pos_index_bottom_label_visible());
};

////////////////////////////
//インデックスリストボトムウィジェット
////////////////////////////
if ( is_active_sidebar( 'index-bottom' ) ){
  dynamic_sidebar( 'index-bottom' );
};

////////////////////////////
//フロントページボトムシェアボタン
////////////////////////////
//SNSボトムシェアボタンの表示
if (is_sns_bottom_share_buttons_visible() && !is_paged() &&
  (
  //フロントページボトムシェアボタンの表示
  (is_front_page() && is_sns_front_page_bottom_share_buttons_visible()) ||
  //カテゴリーページトップシェアボタンの表示
  (is_category() && is_sns_category_bottom_share_buttons_visible()) ||
  //タグページトップシェアボタンの表示
  (is_tag() && is_sns_tag_bottom_share_buttons_visible())
  )

){
  get_template_part_with_option('tmp/sns-share-buttons', SS_BOTTOM);
}

////////////////////////////
//フロントページフォローボタン
////////////////////////////
//SNSフォローボタンの表示
if (is_sns_follow_buttons_visible() && !is_paged() &&
  (
    //フロントページフォローボタンの表示
    (is_front_page() && is_sns_front_page_follow_buttons_visible()) ||
    //カテゴリーページボトムフォローボタンの表示
    (is_category() && is_sns_category_follow_buttons_visible()) ||
    //タグページボトムフォローボタンの表示
    (is_tag() && is_sns_tag_follow_buttons_visible())
  )

){
  get_template_part_with_option('tmp/sns-follow-buttons', SF_BOTTOM);
}

////////////////////////////
//ページネーション
////////////////////////////
if (is_front_page_type_index() || !is_front_top_page()) {
  get_template_part('tmp/pagination');
}

////////////////////////////
//カテゴリページのパンくずリスト
////////////////////////////
if (is_category() && is_single_breadcrumbs_position_main_bottom()){
  get_template_part('tmp/breadcrumbs');
}

////////////////////////////
//メインカラム追従領域
////////////////////////////
get_template_part('tmp/main-scroll'); ?>

急にそれらしくなりましたね！
この中でもたくさんの get_template_part() が散見されています。
そうやってたくさんのパーツを組み合わせてページが作られているのが一般的です。

一気にすべてのコードを読もうとすると、挫折すると思います。
一つずつブロックに分けて読み進めていくと良いですね！

アーカイブのタイトル

まずはこれで1ブロックです。

////////////////////////////
//アーカイブのタイトル
////////////////////////////
if ( is_category() && !is_paged() ){
  ////////////////////////////
  //カテゴリページのパンくずリスト
  ////////////////////////////
  if (is_single_breadcrumbs_position_main_top()){
    get_template_part('tmp/breadcrumbs');
  }

  ////////////////////////////
  //カテゴリページのコンテンツ
  ////////////////////////////
  get_template_part('tmp/category-content');
} elseif ( (is_tag() || is_tax()) && !is_paged() ) {
  get_template_part('tmp/tag-content');
} elseif (!is_home()) {
  //それ以外
  get_template_part('tmp/list-title');
}

その4行目の

if ( is_category() && !is_paged() ){

この部分で、もし、list.php の呼び出し元がカテゴリーページで、かつ、1ページ目じゃなかったら
という分岐になります。（!は否定）

is_category も WordPress の関数でいろんな種類があります。（is_xxxx()）
意味は直感的に分かると思いますが、そのページが xxxx かどうかを判定します。

1ページ目かどうかは、ページングの話ですね。
投稿が100件あって、1ページに10件表示の設定であれば
2ページ目を指定すれば、11～20件目が表示されます。
そのページ数が1ページ目じゃなかったら（2ページ目以降なら）という事になります。

このように、if文で切り分け get_template_part() で呼び出すファイルを決定しています。

すべて読んで行くとキリがないので、少し飛ばします。
コメントが書いてあるので、大体何をしているところかは分かるかなと思います。

では、メインの部分を見て行きましょう。

Cocoon設定 フロントページタイプによる切り分け部分

ここはなぜかコメントが無いので、分かりづらいかもしれませんが、
58 ～ 68行目を見てください。

<?php
  if (is_front_top_page() && is_front_page_type_tab_index()) {
    get_template_part('tmp/list-tab-index');
  } elseif (is_front_top_page() && is_front_page_type_category()) {
    get_template_part('tmp/list-category');
  } elseif ((is_front_top_page() && is_front_page_type_category_2_columns()) || is_front_top_page() && is_front_page_type_category_3_columns()) {
    get_template_part('tmp/list-category-columns');
  } else {
    get_template_part('tmp/list-index');
  }
?>

ここで 4パターンの切り分けが行われているのはわかりますか？

上から、
① フロントページで、かつ、タブインデックスタイプか？
② フロントページで、かつ、カテゴリータイプか？
③ フロントページで、かつ、カテゴリータイプ（2カラム）か？
④ 上記の3つ以外の場合。

こんな風に読む事が出来ます。

is_front_top_page() は Cocoonの関数で、フロントページかどうかを確認します。
is_front_page_type_tab_index() の部分で、これも Cocoon独自の関数です。

基本的には何をしている関数なのかが一目で分かるような関数名になっています。
（関数を自分で定義する場合は誰が見ても分かる名前にしましょう）

問題は、タブインデックスタイプって何？って話です。
WordPress では聞き慣れない言葉です。
ここで下の画像を見てください。

Cocoon設定 > インデックス

Cocoon で作業した事がある方なら見た事があるであろうこの画面。

ここの表示形式で色々選択できるようになっていて、そのうちのタブ一覧を選択すると、
is_front_page_type_tab_index() が true になります。

このように、関数が WordPress のものでは無い場合はテーマ独自の設定を判断する為のものという場合が考えられます。

ここからは、一覧（デフォルト）を選択した場合で考えていきましょう。
（条件分岐の④ 上記の3つ以外の場合。）

tmp/list-index とは

またまた、get_template_part() で別ファイルへ飛びます。

<?php //インデックス
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;
?>
<div id="list" class="<?php echo get_index_list_classes(); ?>">
<?php
////////////////////////////
//一覧の繰り返し処理
////////////////////////////
$count = 0;
if (have_posts()) : // WordPress ループ
  while (have_posts()) : the_post(); // 繰り返し処理開始
    $count++;
    set_query_var( 'count', $count );
    get_template_part('tmp/entry-card');

    //インデックスミドルに広告を表示してよいかの判別
    if (is_ad_pos_index_middle_visible() && is_index_middle_ad_visible($count) && is_all_adsenses_visible()) {
      get_template_part_with_ad_format(get_ad_pos_index_middle_format(), 'ad-index-middle', is_ad_pos_index_middle_label_visible());
    }

    ////////////////////////////
    //インデックスリストミドルウィジェット
    ////////////////////////////
    if ( is_active_sidebar( 'index-middle' ) && is_index_middle_widget_visible($count) ){
      dynamic_sidebar( 'index-middle' );
    };

  endwhile; // 繰り返し処理終了
  $count = 0; ?>
<?php else : // ここから記事が見つからなかった場合の処理
  get_template_part('tmp/list-not-found-posts');
endif;
?>
</div><!-- .list -->

みなさん！朗報です！
10 行目を見てください！

<div id=”list” class=”<?php echo get_index_list_classes(); ?>”>

ようやく初めての HTML のコードが確認できました！

このクラス名のように、クラス名を動的に出力するのは常套手段ですので覚えておきましょう！

これも Cocoon独自の関数なので一旦無視します。
今後、フックの話をここでしようと思うので頭の片隅に置いておいてください。

今回はこのあたりにしておきます！

あとがき

WordPress の関数か？

テーマ独自の関数か？

VSCode上に限った話ですが、見分けるポイントとして Ctrl + クリックで飛べるかどうかで判断すると良いでしょう。
テーマフォルダを今回はダウンロードして見ているので、その中で定義された関数へはジャンプ出来ます。WordPress の関数は、もっと上層（wp-includes）の下層で定義されているのでジャンプ出来ません。
※WordPress ごとダウンロードすればジャンプ可能になると思います。

次回はいよいよ投稿一覧の出力部分を見ていきましょう！

コメントを残す

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

3 × three =

前の記事

2022年11月度月間気付きまとめ
2022年11月度 気づきまとめページ

次の記事

2022年12月度 気づきまとめページ
2022年12月度月間気付きまとめ