「一生懸命書いた記事なのに、読者が1ページだけ読んで帰ってしまう…」 そんな風に、Googleアナリティクスの「直帰率」を見てため息をついていませんか？
こんにちは、元アナログ人間の竹久 夢藤（たけひさ むとう）です。 ブログ運営において、読者に「もう1記事読んでほしい」というのは永遠のテーマですよね。 通常は「人気記事ランキング」や「関連記事」を表示させますが、実はこれ、読者も見慣れてしまっていて、スルーされることが多いんです。
そこで提案したいのが、「記事ガチャ（ランダムボタン）」です。 こんなボタン。
「次に何が出るかわからない」 このワクワク感、人間は抗えません。スマホゲームのガチャがあんなに流行るのも、この心理があるからです。
今回は、大人気テーマ「SWELL」を使っている方向けに、プラグインなし、コピペだけで実装できる「運命のランダム記事ボタン」の作り方を伝授します。 プログラミング知識ゼロの私でもできたので、安心してくださいね。
なぜ「人気記事」ではなく「ランダム」なのか？
「人気の記事を読んでもらった方がいいんじゃない？」と思いますよね？ もちろんそれも正解です。でも、ブログの中には「いい記事なのに、検索順位が低くて誰にも読まれない記事」ってありませんか？
ランダムボタン（ガチャ）を設置すると、そんな「埋もれた名作」に光が当たるんです。 読者にとっても、「検索では出会えなかった記事」との偶然の出会い（セレンディピティと言います）は、あなたのブログのファンになる大きなきっかけになります。 まさに、ブログ内の宝探しです。
【3分で完了】SWELLに「記事ガチャ」を実装する手順
では、早速作っていきましょう。やることは「コードをコピーして、所定の場所に貼り付ける」。これだけです。
手順①：まずはバックアップ（命綱）
作業に入る前に、一つだけ約束してください。 今回触る functions.php というファイルは、いわばブログの「心臓部」です。一文字間違えると、画面が真っ白になることがあります。 必ず、バックアップを取るか、FTPソフトなどで修正できる準備をしてから行ってください。 （※自信がない方は、プラグイン「Code Snippets」を使って追加するのが一番安全でおすすめです！）
手順②：functions.phpに魔法のコードを追記
WordPressの管理画面から、以下の手順で進みます。
- 「外観」 ➡ 「テーマファイルエディター」をクリック。
- 右側のファイル一覧から 「テーマのための関数 (functions.php)」 を探してクリック。 ※必ず「SWELL CHILD（子テーマ）」が選択されていることを確認してくださいね！親テーマに書くと、アップデートで消えてしまいます。
- ファイルの一番下に、以下のコードをまるっとコピーして貼り付けます。
このコードは、SWELLの美しいボタンデザインをそのまま使いつつ、中身を「同じカテゴリーの記事からランダムに選ぶ」という動きに変える魔法の呪文です。
PHP
/* ------------------------------------------------------- */
/* 同一カテゴリーのランダム記事へ飛ぶボタン（最強版）
/* 使い方：[random_btn text="文字" color="red" style="shiny"]
/* ※colorは "red", "blue" 等のほか、"#ff0000" のようなコードもOK！
/* ------------------------------------------------------- */
add_shortcode('random_btn', function($atts) {
if ( ! is_single() ) return '';
// 設定（初期値を無難なものに変更）
$atts = shortcode_atts(array(
'text' => '別の記事を読む',
'color' => 'red',
'style' => 'shiny', // normal, shiny, solid
), $atts);
// カテゴリー記事取得処理
$cats = get_the_category();
if ( empty($cats) ) return '';
$cat_ids = array();
foreach($cats as $cat) $cat_ids[] = $cat->term_id;
$args = array(
'posts_per_page' => 1,
'orderby' => 'rand',
'category__in' => $cat_ids,
'post__not_in' => array( get_the_ID() ),
'post_status' => 'publish'
);
$random_post = get_posts($args);
if ( empty($random_post) ) return '';
$url = get_permalink($random_post[0]->ID);
// クラス生成
$style_class = 'is-style-btn_' . esc_attr($atts['style']);
// 色の判定（#から始まるならカスタム色、それ以外はSWELLクラス）
$color_class = '';
$custom_style = '';
if ( strpos($atts['color'], '#') === 0 ) {
// #ff0000 などの指定の場合、無理やり背景色を変える
$custom_style = 'style="background-color:' . esc_attr($atts['color']) . ';"';
} else {
// red, blue などの場合
$color_class = 'is-' . esc_attr($atts['color']);
}
// 出力
return '
<div class="swell-block-button u-mb-ctrl u-mb-10 ' . $style_class . ' ' . $color_class . '">
<a href="' . esc_url($url) . '" class="swell-block-button__link" ' . $custom_style . '>
<span>' . esc_html($atts['text']) . '</span>
</a>
</div>
';
});
貼り付けたら、「ファイルを更新」ボタンを押して保存完了です。エラーが出なければ成功です！
使い方：ショートコードを貼るだけ
準備はこれでおしまい。あとは、記事の中やブログパーツで呼び出すだけです。
基本の使い方
パターンA：青くてキラッとする
記事の編集画面で「ショートコード」ブロックを選び、以下のように入力してください。
[random_btn text="次の記事を読む" color="blue" style="shiny"]
これだけで、青色のボタンで「ランダムに別の記事を読む」と表示されます。 クリックすると、今読んでいる記事と同じジャンルの中から、別の記事へジャンプします。
文字や色をアレンジしたい場合
パターンB：好きな色（例：黒）にする
「もっと目立たせたい！」「文言を変えたい！」という時は、真ん中テキスト部分をこんな風に書きます。
[random_btn text="もっと目立たせたい！" color="#000000"]
- text: ボタンに表示する文字を自由に変えられます。
- color: SWELL標準の
red,blue,green,orangeなどが指定できます。
クリック率を上げる「設置場所」のアイデア
せっかく作ったこのボタン、どこに置くのが一番効果的だと思いますか？ 私が試して効果があったのは、以下の2箇所です。
1. 記事下の「まとめ」の直後 読者が読み終わった瞬間こそ、次の行動を探しているタイミングです。 「この記事が気に入ったあなたには、こんな記事もおすすめかも…？👇」 というテキストと一緒にガチャボタンを置くと、ゲーム感覚で押してくれます。
2. 404ページ（ページが見つかりません） リンク切れなどで表示される404ページ。ここは通常、絶望して離脱される場所ですが… 「お探しのページは見つかりませんでしたが、代わりに運命の記事を読んでみませんか？」 と置いておくと、ピンチがチャンスに変わります。
SWELLの「ブログパーツ」機能を使えば、一度登録するだけで、すべての記事の下に一括で表示させることもできますよ。
まとめ：小さな遊び心がファンを作る
いかがでしたか？ 難しいプラグインを入れなくても、数行のコードでブログに「遊び心」はプラスできます。
「効率よく情報を探したい」という読者もいれば、「何か面白い暇つぶしはないかな」と思っている読者もいます。 このランダムボタンは、後者の読者の心をガッチリ掴むはずです。
もし実装してみて「画面が真っ白になった！」などのトラブルがあったら、焦らずバックアップから戻すか、私（の心の中にいるXのエンジニア）に相談してくださいね。 あなたのブログが、読者にとって「いつまでも滞在したい遊園地」のような場所になりますように！
コメント