Amazonで商品を見る セール会場へ

SWELL│アーカイブページにブログパーツを挿入する方法

カスタム投稿タイプnewsの一覧ページで、タイトルと記事一覧の間にブログパーツを入れる方法です。news専用の子テーマテンプレートを作り、他のアーカイブや固定ページへ影響しない範囲に限定します。

ここでは1ページ目だけに紹介文を表示します。通常投稿の一覧、カテゴリー、カスタムタクソノミーは使用するテンプレートが異なるため、同じファイル名を使わないでください。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

使用するテンプレートを確認する

WordPressのテンプレート階層では、newsの投稿タイプアーカイブにarchive-news.phpを使えます。該当ファイルがなければarchive.phpなどへ進みます。

newsは表示名やURLの文字列ではなく、登録した投稿タイプ名です。その投稿タイプでアーカイブが有効になっていることと、実際の一覧URLを先に確認します。

ブログパーツと編集前バックアップを用意する

表示したい紹介文やリンクをSWELLのブログパーツとして公開し、IDを確認します。この例の21686は自分のブログパーツIDへ変更してください。

有効なSWELL子テーマのファイルをバックアップします。すでにarchive-news.phpがある場合は上書きせず、既存の変更内容を確認して挿入箇所だけを編集してください。

子テーマにnews用テンプレートを作る

使用中のSWELL親テーマからarchive.phpを取得し、子テーマ直下へarchive-news.phpという名前で保存します。親テーマのファイルは編集しません。親テーマ更新後には、元のarchive.phpとの差分確認が必要です。

SWELL 2.19.0では、記事一覧を囲む次の行があります。コピーしたファイルのこの行の直前、タイトルの出力より後へ、次のPHPを追加します。

<div class="p-archiveContent u-mt-40">
<?php
$part_id = 21686; // 導入先の公開済みブログパーツIDへ変更
$part = get_post( $part_id );
if ( is_post_type_archive( 'news' ) && !is_paged()
    && shortcode_exists( 'blog_parts' ) && $part
    && $part->post_type === 'blog_parts'
    && $part->post_status === 'publish' && $part->post_password === '' ) {
    echo '<div class="post_content waza-archive-intro">';
    $previous_post = $GLOBALS['post'] ?? null;
    try {
        echo do_shortcode( '[blog_parts id="' . absint( $part_id ) . '"]' );
    } finally {
        $GLOBALS['post'] = $previous_post;
        if ( $previous_post instanceof WP_Post ) {
            setup_postdata( $previous_post );
        }
    }
    echo '</div>';
}
?>

このコードはテンプレート用です。functions.php、Code Snippets、記事のカスタムHTMLブロックへそのまま入れるものではありません。すでにPHPタグの内側へ置く場合は、PHPタグを重ねないよう編集してください。

newsの一覧の1ページ目で、公開済みのブログパーツだけを表示します。ページ送り後は表示しません。全ページに表示したい場合は、条件の&& !is_paged()を外しますが、各ページで同じ案内が繰り返されることを確認してください。

公開前に確認すること

newsの一覧1ページ目、2ページ目、newsの個別記事、別の投稿タイプやカテゴリーの一覧を開きます。紹介文は指定した一覧1ページ目だけに出て、元の記事一覧とページ送りが維持されることを確認してください。

PC・スマホ幅で、ブログパーツ内の画像、ボタン、余白を確認します。記事が0件の場合、ブログパーツを非公開にした場合、指定IDが存在しない場合も、表示が崩れないかを検証環境で確かめます。

ブログパーツを呼ぶ前後で投稿情報を戻す

SWELL 2.19.0のブログパーツ取得処理は、終了時にメインクエリーの投稿情報へ戻します。

別のWP_Queryのループ内から紹介文を呼ぶ場合、直後のタイトルやリンクが、そのループの投稿ではなく一覧側の投稿を参照することがあります。

掲載コードでは、呼出し直前の投稿を保存し、finallyで復元します。

隔離したWordPress 7.1.2とSWELL 2.19.0で、別クエリーのループから公開ブログパーツを呼び、元の投稿・著者情報・メインクエリーを保持することを確認しました。

投稿が設定されていない場合と、ブログパーツがパスワード保護されている場合も確認対象です。

既存テンプレートの配置やPC・スマホの一覧表示は、利用先で確認してください。

戻し方と検証範囲

新規作成したarchive-news.phpを使う前の状態へ戻すと、通常のテンプレート選択へ戻ります。もともと同名ファイルがあった場合は削除せず、バックアップからそのファイルを復元します。

この手順はSWELL 2.19.0のarchive.phpとWordPressのテンプレート階層に基づきます。公開中の本サイトへnewsのテンプレートを設置した実演ではありません。隔離環境での条件テストと、利用先サイトでの実際の一覧表示・ページ送り確認は分けて扱います。

掲載PHPの実行用ショートコードは単一の角かっこです。

二重の角かっこでは、ブログパーツではなくショートコードの文字列が表示されます。

公開ブログパーツの呼出しと一覧の表示条件は、掲載PHPを使う隔離環境で確認します。

子テーマへの配置、一覧全体のPC・スマホ表示とページ送りは、利用先で別に確認してください。

  • URLをコピーしました!

実装を任せたい方へ

SWELLのカスタマイズ代行

記事のコードをそのまま使うのが不安な場合や、サイトに合わせた調整が必要な場合は当社が実装します。1時間 ¥8,000〜(税込)。テーマ更新に強い書き方で納品します。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次