WordPress #10 | 制作日誌の記事ページを実装

2023.08.09（水） 22:30

sell

WordPressのテーマ開発10日目。少し休んでしまったので、今日は一気に1ページ分のテンプレートを実装した。
まず大きくレイアウトだけ構成し、投稿が反映される状態にするのに半日。そこから細かく実装していく。
サイドバーやシェアボタン、関連記事リストなどブログにありがちな要素の実装ノウハウを掴んだ。サイドバーはスクロール追従型で実装するのに、gsapのScrollTriggerを使った。他のアニメーションの実装を考えるとScrollEffectよりも使い勝手がいい。

シェアボタンはプラグインを使わず、独自コンポーネントとして実装。苦労するかな？と考えていたが、プラグインを使ってボタンだけカスタムするより早く実装出来た。ポイントは日本語が使われたURLに対しては、URLエンコードしないとリンクとして動作しない点。これはちょっと抜けていた。
結果的に記事のフッターにこんな感じでSNSへのシェアボタンを実装。

<div class="sns-links">
  <?php
  $site_name = get_bloginfo('name');
  $page_title = get_the_title();
  $tweet_text = urlencode($page_title.' | '.$site_name);
  $link_url = urlencode(get_permalink());
  ?>
  <a class="sns-link-button" href="https://twitter.com/intent/tweet?url=<?php echo $link_url; ?>&text=<?php echo $tweet_text; ?>" target="_blank">
    <span data-link="#share-twitter">
      <i
        title="Twitter"
        class="fab fa-twitter mx-1"
        style="color: #000"
        aria-hidden="true"
      ></i>
      <span class="sr-only">Twitter</span>
    </span>
  </a>
  <a class="sns-link-button" href="https://www.facebook.com/sharer.php?u=<?php echo $link_url; ?>" target="_blank">
    <span data-link="#share-facebook">
      <i
        title="Facebook"
        class="fab fa-facebook mx-1"
        style="color: #000"
        aria-hidden="true"
      ></i>
      <span class="sr-only">Facebook</span>
    </span>
  </a>
  <a class="sns-link-button" href="https://www.pinterest.com/pin/create/button/?url=<?php echo $link_url; ?>" target="_blank">
    <span data-link="#share-pinterest">
      <i
        title="Pinterest"
        class="fab fa-pinterest mx-1"
        style="color: #000"
        aria-hidden="true"
      >
      </i>
      <span class="sr-only">Pinterest</span>
    </span>
  </a>
</div>

Pinterestのボタンというのは初めて使うが、本番ドメインにアップしないと動作確認できない。これはまあ仕方がない。アイコンにはfont awesomeを利用した。

厄介だったのは関連記事をピックアップするプラグインで、有名プラグインはどれも記事内に自動的に実装されるタイプのもので、コードとしてテンプレート内に埋め込めるものがなかなか見つからない。いろいろと調べた結果、「Yet Another Related Posts」というプラグインを利用した。

YARPP – Yet Another Related Posts Plugin
https://yarpp.com/

決め手になったのは、関連記事リストをWP_Postオブジェクトのデータとして返す関数が用意されていた事で、さすがに1コードで埋め込みとはいかなかったが、オブジェクトで返してくれればそれを利用して好きな記事内要素と形に成形したリストが作成出来るので、生成されたHTMLをCSSでカスタマイズするよりは実装が早い。
データの取得はこんな感じで、パラメータを付けていろいろ取得される内容を変更出来るようだ。

$related_posts = yarpp_get_related(array(
  'limit' => 4
));

最終的に実装したコンポーネント。
取得したWP_Postオブジェクトの配列をforeachでループ出来る。サムネイルもプラグインの設定画面で指定したものに限らず取得出来るので、コードが書ける人間であれば、こちらの方が使い勝手がいい。
日付部分も予め使っているコンポーネントで実装した。

<div class="component-parts related-posts-component">
  <h3 class="related-posts-title">関連する投稿</h3>
  <?php
  $related_posts = yarpp_get_related(array(
    'limit' => 4
  ));
  if ($related_posts):
  ?>
  <div class="related-posts-items-box">
    <?php foreach($related_posts as $related_post): ?>
      <a class="related-post-item" href="<?php the_permalink($related_post->ID) ?>">
        <div class="post-thumbnail-image-box">
          <div class="thumbnail-image">
            <?php 
            $thumbnail = get_the_post_thumbnail_url( $related_post->ID, 'medium' );
            if (!$thumbnail) {
              $thumbnail = get_template_directory_uri().'/assets/images/no-image-thumb640.jpg';
            }
            ?>
            <img src="<?php echo $thumbnail; ?>" alt="Related Post Thumbnail Image" />
          </div>
        </div>
        <div class="post-contents-box">
          <div class="post-date">
            <?php
            $date_args = array(
              'post_date' => $related_post->post_date
            );
            get_template_part('parts/date-set-component', null, $date_args);
            ?>
          </div>
          <div class="post-contents">
            <div class="post-title"><?php echo $related_post->post_title; ?></div>
            <div class="post-categories">
              <?php
              $categories = get_the_category($related_post->ID);
              foreach( $categories as $category ){
                // カテゴリーIDを取得
                $cat_id = $category->term_id;
                // 子孫タームのIDを配列で取得
                $cat_child = get_term_children( $cat_id, 'category' );
                // 子孫タームのIDがない場合
                if( !$cat_child ){
                  echo '<div class="category-label">'.$category->name.'</div>';
                }
              }
              ?>
            </div>
          </div>
        </div>
        <div class="hover-cover"></div>
      </a>
    <?php endforeach; ?>
  </div>
  <?php endif; ?>
</div>

これで記事ページは完成。明日、制作日誌リストのアーカイブページを実装すればテーマの完成だ。本番ドメインに反映していよいよこのブログも稼働開始になるなあ。