[WordPress]ランダムな記事へのボタンを追加した（functions.php）

2024.09.05

過去の記事を「掘り起こして」読んでもらう仕掛けとして「ランダムな記事へのボタン」を追加しました。
WordPressブログにランダムな記事へのボタンを追加するカスタムウィジェットを作成しました。

[WordPress]ランダムな記事へのボタンを追加した（functions.php）

きっかけは、ブログの「アーカイブ」としての機能を強化したいと思ったからです¹。

1. カスタムウィジェットを作成するPHPコード

前の記事、ランダムな記事、次の記事へのリンクを表示するカスタムウィジェットを作りました。

WordPressテーマのfunctions.phpファイルの末尾に追加したら、ウィジェットで「記事ナビゲーションウィジェット」という新しいウィジェットが利用可能になります。

/** 2024-09-05 ランダムな記事へのボタンを追加*/
// カスタムウィジェットクラスを定義
class Custom_Navigation_Widget extends WP_Widget {

    // コンストラクタ
    public function __construct() {
        parent::__construct(
            'custom_navigation_widget',
            '記事ナビゲーションウィジェット',
            array('description' => '前の記事、ランダムな記事、次の記事へのボタンを表示します。')
        );
    }

    // ウィジェットのフロントエンド表示
    public function widget($args, $instance) {
        echo $args['before_widget'];
        
        // 現在の投稿IDを取得
        $current_post_id = get_the_ID();

        echo '<div class="nav-button-container">';

        // 前の記事へのボタン
        $prev_post = get_previous_post();
        if (!empty($prev_post)) {
            $prev_url = get_permalink($prev_post->ID);
            echo '<button class="nav-btn prev-btn" data-url="' . esc_url($prev_url) . '">&#8592; 古い記事</button>';
        }

        // ランダムな記事を取得
        $random_post = $this->get_random_post($current_post_id);
        if (!empty($random_post)) {
            $random_url = get_permalink($random_post->ID);
            echo '<button class="nav-btn random-btn" data-url="' . esc_url($random_url) . '">&#8635; ランダムジャンプ</button>';
        }

        // 次の記事へのボタン
        $next_post = get_next_post();
        if (!empty($next_post)) {
            $next_url = get_permalink($next_post->ID);
            echo '<button class="nav-btn next-btn" data-url="' . esc_url($next_url) . '">新しい記事 &#8594;</button>';
        }

        echo '</div>';


        // JavaScriptを追加
        echo '<script>
            document.addEventListener("DOMContentLoaded", function() {
                document.querySelectorAll(".nav-btn").forEach(function(btn) {
                    btn.addEventListener("click", function() {
                        var url = this.getAttribute("data-url");
                        if (url && url !== "#") {
                            window.location.href = url;
                        }
                    });
                });
            });
        </script>';

        echo $args['after_widget'];
    }

    // ランダムな投稿を取得するメソッド
    private function get_random_post($exclude_id) {
        $args = array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'posts_per_page' => 1,
            'orderby' => 'rand',
            'post__not_in' => array($exclude_id),
        );
        $random_query = new WP_Query($args);
        if ($random_query->have_posts()) {
            return $random_query->posts[0];
        }
        return null;
    }
}

// ウィジェットを登録
function register_custom_navigation_widget() {
    register_widget('Custom_Navigation_Widget');
}
add_action('widgets_init', 'register_custom_navigation_widget');

新しい記事や古い記事が存在しない場合にボタンを非表示にするようにしました。

目次に戻る

2. widget_custom_navigation_widgetのCSS

ボタンデザインにするために、style.cssにスタイルを追加しました。

/** 2024-09-05 ランダムな記事へのボタンを追加*/
.body .widget.widget_custom_navigation_widget {
  margin-top: 0px;
  margin-bottom: 0;
  order: 0;
}
.nav-button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 10px 0;
}
.nav-btn {
  flex: 0 1 30%;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: gray;
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: #cccccc;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline-color: transparent;
}
.nav-btn:hover {
  background-color: #eeeeee;
}

@media (max-width: 600px) {
  .nav-button-container {
  }
  .nav-btn {
    padding: 4px 6px;
    font-size: 11px;
  }
}

（補足）

「WordPress+独自ドメインのブログの存在意義は「アーカイブ」。SNS上に上げたコンテンツを、整理したりまとめたりして、将来へのこしていくアーカイブ作業こそが、個人ブログの唯一の役目かもしれない。そう思うと @yto さんのブログ（たつをの ChangeLog）などは、昔からアーカイブ貫いてるよな」- かん吉さん/X

目次に戻る

QRコードを読み込むと、関連記事を確認できます。