「カスタム投稿のアーカイブページに表示させる内容を変更してみたい!」と思うことはありませんか?

アーカイブページの表示について

カスタム投稿のアーカイブページには、通常は記事の一覧が並んで表示されます。

この記事の方法を使えば、このように、カスタム投稿のアーカイブページに、別の固定ページで作成した内容を表示させることができます

Lightning G3 Proで適用できる方法です

ステップに沿ってお伝えしていきます!

Lightningの設定①

外観 > カスタマイズ > Lightning アーカイブページ設定  から、固定ページの内容を追加表示させたいカスタム投稿タイプを選択します。

今回の例では、テストカスタム投稿を選択します。

STEP
1

Lightningの設定②

表示タイプとカラムで、表示タイプを「Lightning標準」以外の設定にします。

ここでは、テキスト1カラムを選択して、設定を保存しておきます。

STEP
2

表示させたい固定ページを作成する

表示させたい内容を固定ページで作成していきます。
今回は、このような形で作成をしました。

固定ページのパーマリンクを設定します。
今回は、replace-testとしました。

ここで入力したパーマリンクを次のステップで使用するので、控えておきます。

STEP
3

functions.phpへの記述

functions.phpにコードを記述して保存します。

・testにはご自身のカスタム投稿タイプのスラッグを入力してください。
・replace-testには、先ほど作成した固定ページのパーマリンクを入力します。

STEP
4
add_filter( 'is_lightning_extend_loop', function( $return ){
    // 改変するアーカイブページを指定
    if ( is_post_type_archive( 'test' ) ){
        // ループエリアの改変を有効にする
        $return = true;
    }
    return $return;
} );

// ループエリアに指定の内容を表示
add_action( 'lightning_extend_loop', function(){
    // 改変する投稿タイプ(ここでは test を指定)
    if ( is_post_type_archive( 'test' ) ){
        $args        = array(
            'post_type'   => 'page', // 固定ページ
            'name'        => 'replace-test', // 表示させたい固定ページのスラッグを指定
            'post_status' => array( 'publish', 'private' ), // 非公開でも取得するように private を追加
        );
        // 特定のスラッグの投稿を取得
        $posts_array = get_posts( $args );
        if ( $posts_array && is_array( $posts_array ) ) {
            // スラッグを指定して投稿を取得しているので0番目の投稿の本文の内容を取得
            $content = $posts_array[0]->post_content;
            // 本文を表示
            echo apply_filters( 'the_content', $content );
        }
    }
} );

カスタム投稿タイプのスラッグって?

Custom Post UIで作成した
カスタム投稿タイプの場合

Lightningで作成した
カスタム投稿タイプの場合

カスタム投稿タイプは、プラグインなどを使用して作成が可能です!
カスタム投稿の作り方については、こちらの記事でもご紹介しています。

アーカイブページを表示して確認する

アーカイブページを開いてみます。
すると、先ほど作成した固定ページの内容が表示されていることがわかります!

STEP
5

アーカイブページにデフォルトで


表示される部分を非表示にするには?

アーカイブページにデフォルトで表示される記事一覧を非表示にしたい場合は、CSSを記述することで実現可能です!

管理画面の外観から、カスタマイズを選択します。

追加CSSを開きます。

こちらの記事を参考に、特定のカスタム投稿タイプにだけCSSを反映させるように記述をしていきます。

今回は「テストカスタム投稿(スラッグ:test)」に適用させたいので、このように記述をします。

.post-type-test .vk_posts {
	display:none;
}

testには、ご自身のカスタム投稿タイプのスラッグを入力してください。

すると、デフォルトで表示されていた部分が非表示となり、固定ページで作成した内容のみが表示されます!

使用例ー店舗一覧の表示カスタマイズー

店舗一覧のカスタム投稿があるとします。
デフォルトでは、アーカイブページはこのように、店舗一覧が並んで表示されています。

デフォルトの表示を非表示にして、固定ページで都道府県ボタンを作成して、表示させます

たとえば、「大阪」のボタンをクリックすると、大阪府の店舗一覧がポップアップ表示されます。

表示されたポップアップから、各店舗の詳細ページにリンクすることもできます。

※この例ではPopup Makerを使用しています。

関連記事
簡単にポップアップを作成!「Popup Maker」の使い方
【個人情報保護】Cookieの利用同意のポップアップの作り方(Popup Maker)

上記のような方法で、カスタム投稿のアーカイブページにお好みの内容を表示させることが可能です!
お好みに合わせて、ぜひ色々とカスタマイズしてみてください。

投稿者プロフィール

Mayu
Mayu
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

お問合せフォームはこちら

(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)