WordPressのテーマCocoonで、投稿のランダム表示ができるボタンを設置する

押すと記事がランダムに表示されるボタンがあると楽しいかなと思って、つけてみる事にしました。
その方法をシェアします。

WordPressのfunctions.phpを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

検索したらコードがすぐ出てきた
自分に合わせて書き換えたコード
動作確認
まとめ

検索したらコードがすぐ出てきた

とりあえず、「cocoon」「投稿」「ランダム」と検索したら、すぐに実装できそうな方法のページが見つかりました。

ランダムな投稿にリンクされるボタンショートコードのつくり方

どの記事に飛ぶかわからないランダムリンクボタンの生成方法です。

既にCocoon開発者様が作り方を公開してくださっていました。
助かります、ありがとうございます。最高です。

こちらはショートコードでボタンを呼び出す方式でした。

ヘッダーメニューに置きたかったのですが、ヘッダーにショートコードを載せるのが実力不足でできなかったので、フィルターフックで呼びだす事にしました。

ショートコードとは

functions.php やプラグインなどに、あらかじめ用意しておいたパーツ簡単に呼び出すようにするための、WordPressの仕組みのこと。
投稿や固定ページの編集画面に、文字列を入力するだけで使えるので、初心者にも扱いやすく、便利です。

フィルターフックとは

あらかじめ設定した場所（フック）追加の変更（フィルター）をかけられるWordPress独自の仕組みです。こちらは中～上級者向けです。

ショートコードやフィルターフックについて詳しく知りたい方は検索してみてくださいね。

自分に合わせて書き換えたコード

改造したコードがこちらです。

function random_button_add( $items, $args ) {
  if( $args->theme_location === 'navi-header' || $args->theme_location === 'navi-footer-mobile')
  {
  $flg = $args->theme_location;
  $args = array(
    'post_type' => 'post',
    'posts_per_page' => '1',
    'post_status' => 'publish',
    'orderby' => 'rand',
    'ignore_sticky_posts' => true,
  );
  $the_query = new WP_Query( $args );
  if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) : $the_query->the_post();
      if($flg === 'navi-header'){
        $tag = '<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-no-description"><a href="' . get_permalink() . '"><span class="fas fa-sync-alt"></span> RANDOM</a></li>'."\n";
      }else{
        $tag = '<li class="navi-menu-button menu-button"><a href="' . get_permalink() . '" class="menu-button-in"><span class="custom-menu-icon menu-icon"><span class="fas fa-sync-alt"></span></span><span class="custom-menu-caption menu-caption"> RANDOM</span></a></li>'."\n";
      }
      wp_reset_postdata();
      $items .= $tag;
      return $items;
    endwhile; wp_reset_postdata();
  }
}else{
  return $items;
}
}
add_filter('wp_nav_menu_items','random_button_add', 10, 2);

random_button_add　というパーツを作って、wp_nav_menu_items　というフィルターフックに追加しています。

if( $args->theme_location === ‘navi-header’ || $args->theme_location === ‘navi-footer-mobile’)
ヘッダーメニューとヘッダーモバイルメニューにボタンが追加されるように条件を入れています。

$flg = $args->theme_location;　にメニューの場所を入れて
…
if($flg === ‘navi-header’){…　で分岐してそれぞれのスタイルに合わせて出力を変えます。
各スタイルは、HTMLのソースを表示して、まるっとコピペしました。

<span class=”fas fa-sync-alt”></span>　は Font Awesome です。
素敵な絵文字が簡単に表示できます。

これを functions.php に追加すれば出来上がり！