【WordPress】ランダムにおすすめ記事を紹介するびっくりボタンを作成するカスタマイズ

【WordPress】ランダムにおすすめ記事を紹介するびっくりボタンを作成するカスタマイズ

作成してある投稿の中から1記事だけランダムにリンクを作成する方法について紹介します。

投稿をランダムに表示することによって、古い記事などもおすすめ記事として紹介することができるので、様々な記事を見つけてもらうことに役立つのではないかと思います!

それではカスタマイズしていきましょう!

投稿をランダムに表示する方法

まずは投稿をランダムに取得・表示してみます。やり方はいくつかあると思いますが、今回はget_postsを使って取得します。

/**
 * 投稿をランダムに1件取得
 */
$rand_posts = get_posts(
  array(
    'posts_per_page' => 1, //取得件数
    'orderby'        => 'rand', //ランダムに取得する
  )
);
/**
 * 表示
 */
if ( $rand_posts ) : ?>
  <div class="rand-recommend">
    <h2>もう一つ、こんな記事もいかがですか?</h2>
    <?php
    foreach ( $rand_posts as $rand_post ) :
      $post_id = $rand_post->ID;
      /**
        * 記事のURL
        */
      $url = get_the_permalink( $post_id )
      ?>
      <div class="rand-post">
        <a href="<?php echo $url; ?>">
          <?php
          /**
            * アイキャッチ画像
            */
          echo get_the_post_thumbnail( $post_id );
          ?>
        </a>
        <?php
        /**
         * 記事タイトル
         */
        ?>
        <h3><a href="<?php echo $url; ?>"><?php echo get_the_title( $post_id ); ?></a></h3>
      </div>
    <?php endforeach; ?>
  </div>
<?php
endif;

表示を整えるCSSサンプル▼

.rand-recommend {
  padding: 1em 2em;
  margin: 4em 0;
  border: 1px solid #ddd;
  border-radius: .5em;
}
.rand-recommend h2 {
  margin: 0 0 .5em;
  text-align: center;
}
.rand-post h3 {
  margin: .5em 0 0;
}

表示例はコチラ▼

ランダムにアイキャッチとタイトルを表示したリンクを作成する

posts_per_page の数値を変更すれば複数件数も取得・表示できます。

表示のレイアウトはお好みに合わせて適宜変更してみて下さい!

リンクだけ作ってどのページが表示されるかわからなくする

アイキャッチ画像やページタイトルを表示して、どのページにリンクしているか分かったほうがユーザー側としては安心できますが、ちょっとした遊び心的にどんなページが表示されるかわからないボタンを作ってみましょう。

基本的には上記カスタマイズと一緒です。アイキャッチ画像やタイトルを使わなければいいだけです。

/**
 * 投稿をランダムに1件取得
 */
$rand_posts = get_posts(
  array(
    'posts_per_page' => 1, //取得件数
    'orderby'        => 'rand', //ランダムに取得する
  )
);
/**
 * 表示
 */
if ( $rand_posts ) : ?>
  <div class="rand-recommend">
    <?php
    foreach ( $rand_posts as $rand_post ) :
      $post_id = $rand_post->ID;
      /**
        * 記事のURL
        */
      $url = get_the_permalink( $post_id )
      ?>
      <div class="rand-post">
        <a href="<?php echo $url; ?>">
          <span>もう一つ、こんな記事もいかがですか?</span>
          <span class="small">ココをクリックしてもう1記事見てみる</span>
        </a>
      </div>
    <?php endforeach; ?>
  </div>
<?php
endif;

スタイル調整▼

.rand-recommend {
  margin: 4em 0;
}
.rand-post a {
  display: block;
  padding: 3em 1em;
  border: 2px solid #222;
  border-radius: .5em;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
}
.rand-post a,
.rand-post a:hover {
  color: #222;
}

.rand-post a span {
  display: block;
  font-size: 1.4em;
}
.rand-post a .small {
  font-size: 1em;
}

表示はこんな感じになります▼

びっくりボタン

今回はテキストで「もう一つ、こんな記事もいかがですか?」というリンクにしましたが、もっとクリックしたくなるようなバナー画像を作って表示してもいいかもしれないですね!

カテゴリーで絞り込む

特定のカテゴリーの記事をランダムで表示したい場合、get_postsのパラメーターにcategory_nameを追加します。

/**
 * 投稿をランダムに1件取得
 */
$rand_posts = get_posts(
  array(
    'posts_per_page' => 1, //取得件数
    'orderby'        => 'rand', //ランダムに取得する
    'category_name'  => 'cat_slug', //カテゴリー絞り込み スラッグを指定する
  )
);

…省略

category_name に絞り込みたいカテゴリーのスラッグを指定します。(上の例ではcat_slug部分を書き換えます。)

現在表示している投稿についているカテゴリーで絞り込む

投稿詳細ページのみで表示する場合は現在表示している投稿についているカテゴリーで絞り込みする事もできます。

/**
 * 投稿に付いているカテゴリーの取得
 */
$categories = get_the_category();
$cat_list   = array();
/**
 * カテゴリーIDを一覧にする
 */
foreach ( $categories as $category ) {
  $cat_list[] = $category->cat_ID;
}
/**
 * 投稿をランダムに1件取得
 */
$rand_posts = get_posts(
  array(
    'posts_per_page' => 1, //取得件数
    'orderby'        => 'rand', //ランダムに取得する
    'category__in'   => $cat_list, //カテゴリー絞り込み 投稿には複数カテゴリー付けられるので複数絞り込みしておく
  )
);

…省略

上の例で投稿に複数カテゴリーが付いていても絞り込みできます。1記事1カテゴリーというルールがあればもう少し簡単にできますが、上のコードでも十分でしょう。

まとめ

ちょっとマニアックなカスタマイズでしたが、おすすめ記事をランダムに表示したい場合などにご活用下さい!

ちなみに、今回紹介したカスタマイズはPHPコードを編集しますので、PC上でカスタマイズして正常に動くことを確認してからサーバーにアップロードしたほうが安全です。

PC上でWordPressを簡単に動かせるツールもあるので試してみて下さい。

ではまた。

WordPress初級者〜中級者向けの書籍を執筆しました!

WordPressをもっと使いこなしたい!CSSで見た目もカスタマイズできるようになりたい!という方にオススメしたい書籍を執筆しました!

Gutenbergの使い方などWordPressの基礎からブログをかっこよくカスタマイズするコツなどを紹介しています!

もっと詳しく