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

1件のコメント / エキスパート講師, ブログ / By

はじめに

みなさま、あけましておめでとうございます！

個人的に去年まで正月も関係無く仕事だったので、十数年ぶりの正月休みを満喫してます。（9日まで休み）

今年の抱負などは立てられましたか？
わたしは、去年まったく運動が出来ず少しお腹まわりがぽちょっとしてきだしたので、
本腰入れて取り組んで行きたいと思っています。（思っているだけ）

このコーナーも3回目になりますね。
前回はようやく出力部分に辿り着けたところまで行きました。

今回の目標は、

「ホームページ（トップページ）設定のデフォルトである最新の投稿画面を書き換えてみる。」

とします。

では、順番に見ていきましょう！

前回の続き

前回の投稿「WordPress「Cocoon」のテーマファイルを読んでみよう。②」では、
投稿のループ部分まで見たと思います。（tmp/list-index）

今回深掘りしていくのは、その中の

////////////////////////////
//一覧の繰り返し処理
////////////////////////////
$count = 0;
if (have_posts()) : // WordPress ループ
  while (have_posts()) : the_post(); // 繰り返し処理開始
    $count++;
    set_query_var( 'count', $count );
    get_template_part('tmp/entry-card');

    ////////////////////////////
    // ちょっと省略
    ////////////////////////////

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

この部分です。

ループに入る条件

まずは5行目を見てみましょう。

if (have_posts()) : という記述があります。
have_posts() はWordPressの関数で、見て読んだまま投稿を持っているか？を判別する関数です。

カテゴリーページなら、そのカテゴリーが付与された投稿。
タグページなら、そのタグが付与された投稿。
今回のように index.php でフロントページとして呼ばれる場合は全記事が対象になります。

参考：関数リファレンス/have posts

持っている場合は以下のループ文に入っていき、
持っていない場合は else文である 18行目の処理の get_template_part(‘tmp/list-not-found-posts’); が走ります。

コロン構文について

少し脱線。

PHP の if文の書き方として、

if ( 条件 ) {
    // 条件が一致したときに実行する処理
} else {
    // 上記以外のときに実行する処理
}

というのが基本的で、ググって出てくるのもこのような形だと思います。

では、tmp/list-index の 5行目の if (have_posts()) : を見てみると、同じ if文ですが「{」ではなく、「:」になっています。
このような書き方をコロン構文と言います。

この書き方のメリットはそれ以降の処理をHTMLと同じ書き方で書けるという点です。
コロン構文の場合、処理が書き終わった後の「}」は「endif;」とします。

<?php if ( 条件 ) : ?> // ここでPHPを閉じる。
    // HTML
<?php else : ?> // ここだけPHPでこのように書く。
    // HTML
<?php endif; ?> // ここだけPHPでこのように書く。

こんな感じで書きます。ループ内の処理がHTML出力の場合はこの書き方にすると可読性が高くてオススメです。
長くなりそうなので、詳しくは別の機会にします。

ぜひマスターしてみて下さい！

ループ処理

記事を持っている場合は、6行目のwhile (have_posts()) : the_post(); の処理に入ります。

while文は条件が true の間は処理を繰り返します。
条件は先程も出てきた have_posts() で、記事を持っていれば true になります。
「：」で繋げて同じ行に書かれる事の多い the_post() ですが、この部分はwhile文の条件ではなく
すでに true の時に実行される処理に入っています。

the_post()

1回目の処理として、まず the_post() が走ります。

参考：関数リファレンス/the post

複数ある記事の1つ目を取得します。
ここでタイトルを出力する関数を使えば1つ目のタイトルが出力されます。
他の内容やアイキャッチ画像も同様に使えるようになります。

ループ2回目で the_post() が走る事で 2つ目の投稿に切り替わります。
そうやってループを回して投稿を切り替えながらHTMLとして出力しています。

$count++

これは見たままですね。
ループ外で定義した、$count = 0; に1プラスします。

わたしがよくやるミスは、ループ内で$count = 0; を定義してしまいループを何回回しても$count が 変わらないというものです。笑
ループ回数を変数で定義する場合はループに入る前に書きましょう！（約束）

set_query_var( ‘count’, $count );

set_query_var() はここで定義した $count を別の場所で使うために書くもののようです。
get_query_var() を使う事で使用できるみたいですが
個人的には使った事が無いので、一旦スルーします。後で出てくれば一緒に解説します！

get_template_part(‘tmp/entry-card’);

またまたやってまいりました、get_template_part 略してGTP！

もうこれが出てきても怖くないですね！
さくっと、ファイルを探して見てみましょう！

tmp/entry-card

ファイルの中身はこんな感じになっていると思います。
ざっと見たところ、PHPとHTML が一緒になって書かれています。（コロン構文だったり、じゃなかったり）

<?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;
$article_id_attr = null;
if (is_front_page_type_index()) {
  $article_id_attr = ' id="post-'.get_the_ID().'"';
}
?>

<a href="
<?php echo esc_url(get_the_permalink()); ?>
" class="entry-card-wrap a-wrap border-element cf" title="
<?php echo esc_attr(get_the_title()); ?>
">
  <article
<?php echo $article_id_attr; ?> <?php post_class( array('post-'.get_the_ID(), 'entry-card','e-card', 'cf') ); ?>
>
    <figure class="entry-card-thumb card-thumb e-card-thumb">
      <?php
      //サムネイルタグを取得
      $thumbnail_tag =
        get_the_post_thumbnail(
          get_the_ID(),
          get_entry_card_thumbnail_size($count),
          array(
            'class' => 'entry-card-thumb-image card-thumb-image',
            'alt' => '', 
            'loading' => 'lazy', 
            'decoding' => 'async',
          )
        );
      // サムネイルを持っているとき
      if ( has_post_thumbnail() && $thumbnail_tag ): ?>
        <?php echo $thumbnail_tag; ?>
      <?php else: // サムネイルを持っていないとき ?>
        <?php echo get_entry_card_no_image_tag($count); ?>
      <?php endif; ?>
      <?php the_nolink_category(null, apply_filters('is_entry_card_category_label_visible', true)); //カテゴリラベルの取得 ?>
    </figure><!-- /.entry-card-thumb -->

    <div class="entry-card-content card-content e-card-content">
      <h2 class="entry-card-title card-title e-card-title" itemprop="headline">
      <?php the_title() ?>
      </h2>
      <?php //スニペットの表示
      if (is_entry_card_snippet_visible()): ?>
      <div class="entry-card-snippet card-snippet e-card-snippet">
        <?php echo get_the_snippet( get_the_content(''), get_entry_card_excerpt_max_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?>
      </div>
      <?php endif ?>
      <?php //PVエリアの表示
      if (is_admin_index_pv_visible() && is_user_administrator() || apply_filters('public_page_entry_card_pv_visible', false)) {
        get_template_part('tmp/admin-pv');
      } ?>
      <div class="entry-card-meta card-meta e-card-meta">
        <div class="entry-card-info e-card-info">
          <?php
          //更新日の取得
          $update_time = get_update_time(get_site_date_format());
          //投稿日の表示
          if (is_entry_card_post_date_visible() || (is_entry_card_post_date_or_update_visible() && !$update_time && is_entry_card_post_update_visible())): ?>
            <span class="post-date"><span class="fa fa-clock-o" aria-hidden="true"></span><span class="entry-date">
              <?php the_time(get_site_date_format()); ?>
            </span></span>
          <?php endif ?>
          <?php //更新時の表示
          if (is_entry_card_post_update_visible() && $update_time && (get_the_time('U') < get_update_time('U'))): ?>
            <span class="post-update"><span class="fa fa-history" aria-hidden="true"></span><span class="entry-date">
              <?php echo $update_time; ?>
            </span></span>
          <?php endif ?>
          <?php //投稿者の表示
          if (is_entry_card_post_author_visible()): ?>
            <span class="post-author">
              <span class="post-author-image">
                <?php echo get_avatar( get_the_author_meta( 'ID' ), '16', null ); ?>
              </span>
              <span class="post-author-name">
                <?php echo get_the_author(); ?>
              </span>
            </span>
          <?php endif ?>
          <?php //コメント数の表示
          $count = get_comments_number();
          if(is_entry_card_post_comment_count_visible() && is_single_comment_visible() && apply_filters('entry_card_post_comment_count_visible', true, $count)): ?>
            <span class="post-comment-count"><span class="fa fa-comment-o" aria-hidden="true"></span>
              <?php echo $count; ?>
            </span>
          <?php endif; ?>
        </div>
        <div class="entry-card-categorys">
          <?php the_nolink_categories() ?>
        </div>
      </div>
    </div><!-- /.entry-card-content -->
  </article>
</a>

少し改行に変更を加えて、PHPの行とHTML の行をきっちり分けてみました。
その上で、HTML の行だけ色を変えてみました。

これで少しは全体像が見やすくなるのでは無いでしょうか？

PHP（コロン構文）で書いたループの中で
HTMLを出力し、その中で動的なものは都度PHPで出力させるといった流れになっています。

これは他のテーマなども同じ事が多いので、見て理解出来るようになると良いと思います！

さいごに

少し脱線した事もあり、目標の書き換えまでは進みませんでしたね💦

次回こそは実際に書き換えるところまで一緒にやっていきましょう！

関連投稿

「WordPress「Cocoon」のテーマファイルを読んでみよう。③」への1件のフィードバック

コメントする

上部へスクロール