wordpress カスタム投稿タイプでトップページなどに記事のサムネイルやタイトルを表示させリンクさせる方法

20.04.03

ウェブデザイン備忘録

カスタム投稿を設定したらトップページなどに記事のサムネイル（アイキャッチ画像）やタイトルを表示してその記事にリンクさせたいですよね。今回はその方法のご紹介です。

1 「Custom Post Type UI」プラグインをインストール
2 カスタム投稿タイププラグインを設定
3 トップページにサムネイル（アイキャッチ画像）・記事タイトルなどのリンクを表示する。
4 まとめ

「Custom Post Type UI」プラグインをインストール

プラグインでCustom Post Type UIを検索後インストール＞有効化

カスタム投稿タイププラグインを設定

「Custom Post Type UI」プラグインをインストールしたら以下の設定をします。

「CPT UI」→「新規タイプの追加と編集」→「新規投稿タイプの追加」タブ→
「投稿タイプスラッグ」 ⇒スラッグ入力　例news
「複数形のラベル」 ⇒ニュース
「単数形のラベル」 ⇒ニュース
ずっと下に行って「アーカイブあり」→true

上記設定だけでカスタム投稿タイプが追加され編集ができます。カンタンですね！
これで「投稿」と同じように、今回は「ニュース」の投稿ができるようになりました。
・アーカイブ（記事一覧）のURLは「http://サイトurl/news」です。
・各記事のURLは「http://サイトurl/news/記事タイトル」になります。

トップページにサムネイル（アイキャッチ画像）・記事タイトルなどのリンクを表示する。

トップページなどの表示したい部分に以下を貼り付けます。

<?php 
        $args = array(
            'post_type' => 'news',
            'posts_per_page' => '5'
            );
        $the_query = new WP_query($args);
        if ($the_query->have_posts()):
        ?>
        
        <div class="newsラップクラス名">
        
        <?php while($the_query->have_posts()): $the_query->the_post(); ?>
        
        <div class="news個別クラス名">
        
        <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('full'); ?></a>
        <a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
        </div>
        
        <?php endwhile; ?>
        
         </div>
      
      <?php wp_reset_postdata(); endif; ?>

<?php

$args = array(

'post_type' => 'news',

'posts_per_page' => '5'

);

$the_query = new WP_query($args);

if ($the_query->have_posts()):

<?php while($the_query->have_posts()): $the_query->the_post(); ?>

<?php the_post_thumbnail('full'); ?></a>

</div>

<?php endwhile; ?>

</div>

<?php wp_reset_postdata(); endif; ?>

・’posts_per_page’ => ‘5’の数字には表示する記事数を入れます。ちなみに-1にすると無制限に表示できます。
・<?php the_post_thumbnail(‘full’); ?>で（サムネイル）アイキャッチ画像を表示できます。fullはフルサイズ。cssで小さく調整できます。
・<?php the_permalink(); ?>はその記事へリンクするコードです。
・<?php the_title(); ?>はその記事のタイトルを表示するコードになります。
・カスタム投稿ではなく普通の投稿を表示させるためには、スラッグをpostにすればOKです。（post_type’ => ‘news’の部分をpost_type’ => ‘post’）

まとめ

いかがでしたでしょうか？カスタム投稿タイプを設定すれば、必ずこの設定もセットで必要になりますよね。特にトップページに表示することは多くなると思います。デザイナーさんなら、アイキャッチのサイズもデフォルトで設定されたものをそのまま使う、あるいはfunctionsをいじって設定しなおすよりcssで調整したほうがやりやすいですよね。ただfullの場合だと画像によってはファイルサイズが大きすぎて重くなってしまったりすることがあります。その都度mediumやthumbnailなどに変更してみてください。

« ドメインだけを他のサーバー（サクラサーバー）へ引っ越し

「sarch console」「googleマイビジネス」「mcafeeサイト評価」「googleアナリティクス」新規サイト起ち上げ時に必須な４ステップ »