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

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

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

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

投稿をランダムに表示する方法
- リンクだけ作ってどのページが表示されるかわからなくする
カテゴリーで絞り込む
現在表示している投稿についているカテゴリーで絞り込む
まとめ

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

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

/**
 * 投稿をランダムに１件取得
 */
$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 の数値を変更すれば複数件数も取得・表示できます。

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

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

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

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

/**
 * 投稿をランダムに１件取得
 */
$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を追加します。

/**
 * 投稿をランダムに１件取得
 */
$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;
}
/**
 * 投稿をランダムに１件取得
 */
$rand_posts = get_posts(
  array(
    'posts_per_page' => 1, //取得件数
    'orderby'        => 'rand', //ランダムに取得する
    'category__in'   => $cat_list, //カテゴリー絞り込み　投稿には複数カテゴリー付けられるので複数絞り込みしておく
  )
);

…省略

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

まとめ

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

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

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

簡単操作で初心者にもオススメ！WordPressのローカル開発環境を「Local by flywheel」で作る方法

ではまた。