Loading...

水曜日

同じ内容のコンテンツを1つにまとめ必要なページで呼び出すには?

当ブログのホームページとBLOGページ、カテゴリーアーカイブ、タグアーカイブには、まったく同じコードがあります。

WordPressテーマを作るうえで、この同じコードを3つのテンプレート(front-page.php、home.php、archive.php)で記述していますが、これには問題があります。

この3つのテンプレートは、そのURLに該当する記事を四角いブロックの状態にして表示させていますが、例えば、表示されるタイトルにFontAwesomeのアイコンを利用しようとした場合、すべてのテンプレートファイルに同じソースコードを記述しないといけません。

これって、手間がかかるし、時間に追われる中での作業だったりしたら、漏れが発生するかもしれません。

同じコードは1つにまとめ、それぞれのテンプレートファイルで必要なときにそのまとめたブロックを呼び出した方が、すごく効率的な管理になります。

つまり修正する場合は、まとめた1つのファイルを修正すれば、運用しているすべてのファイルに反映されます。

そこで今回は、WordPressで1つのまとめファイルを複数のテンプレトートファイルで利用する方法をご紹介します。

といっても、呼び出すソースコードは1行ですが。

まず、共通しているソースコードを取り出し、任意のテンプレートファイルを作成します。

ここでは、parts-loop.php としました。

<?php
    // ==============================
    // カテゴリー
    // ==============================
    $category = get_the_category();
    $cat_id   = $category[0]->cat_ID;
    $cat_name = $category[0]->cat_name;
    $cat_slug = $category[0]->category_nicename;
    // ==============================
    // 本文の抜粋
    // ==============================
    $remove_array = ["\r\n", "\r", "\n", " ", " "];
    $content      = wp_trim_words(strip_shortcodes(get_the_content()), 80, '…' );
    $content      = str_replace($remove_array, '', $content);
    // ==============================
    // アイキャッチ画像を出力
    // 任意のサイズの場合:if ( has_post_thumbnail() ) the_post_thumbnail( array( 400, 400 ) )
    // ==============================
    if ( has_post_thumbnail() ) {
        $img_id  = get_post_thumbnail_id(); //アイキャッチ画像IDを取得
        $img     = wp_get_attachment_image_src( $img_id, 'full' ); //↑の画像IDの情報を取得
        $img_src = $img[0];
    } else {
        $img_src = get_template_directory_uri() . '/img/default-eyecatch.jpg';
    }
?>
<div class="col-md-4 mb-40">
    <article class="h-100">
        <div class="card border-0 rounded-0 h-100 hover-block">
            <div class="card-header outer" style="background-image:url(<?= $img_src; ?>);"></div>
            <div class="card-body pt-8">
                <div>
                    <span class="text-secondary fz-12 d-inline-block"><i class="fas fa-calendar-alt mr-4"></i><?php the_time('Y.m.d'); ?></span>
                    <span class="badge badge-secondary rounded-0 fz-10 d-inline-block px-8 ml-8"><?= $cat_name; ?></span>
                </div>
                <div class="tag-wrap mb-8"><?php the_tags( '', '', '' ); ?></div>
                <h5 class="card-title fz-16"><?php the_title();?></h5>
            </div>
            <a href="<?php the_permalink(); ?>" class="link-cover"><?php the_title();?></a>
        </div>
    </article>
</div>

このコードは、上記の3つのテンプレートファイルで記事をブロック形式に表示させています。

次に3つのテンプレートファイルから、この parts-loop.php を呼び出します。

<?php get_template_part( ‘parts’, ‘loop’ ); ?>

この1行で、先程の parts-loop.php ファイルが呼び出され、実行されます。

まとめ

今回は、WordPressのテンプレートファイルでの使用でしたが、この考え方・コーディングは、さまざまな言語に問わず、プログラミングしていく上の大事な考え方になります。

同じコードは2回書かず、なるべく1つにまとめ、プログラムの効率的な管理をしていきましょう。

               

2020 我が青春を突っ走れIII