WordPress-ショートコードでコンテンツをランダムに表示させる方法

雑記

WordPress-ショートコードでコンテンツをランダムに表示させる方法

今回は、 WordPress-ショートコードでコンテンツをランダムに表示させる方法という投稿です。

どのような時に役に立つのかというと、毎回、記事の中に「何か」を入れることにしていて、その「何か」が「複数パターンある」時です。

※バックアップを取った上で自己責任でお願いします。

スポンサーリンク

ファイル・フォルダ構成

このようなファイル・フォルダ構成にします。

1つのショートコードで、”Source_1.html”と”Source_2.html”のコンテンツをランダムに表示します。

つまり、ページ表示をしたある時は “Source_1.html” のコンテンツが表示され、またある時は “Source_2.html” のコンテンツが表示されるようになります。

面白いでしょ?

functions.php以外はファイル名・フォルダ名は、拡張子だけ合っていれば何でもよいです。

やり方

それではさっそくやり方をご紹介します。

functions.phpから、Func-shortcode.phpを読み込む

まず、”functions.php”から” Func-shortcode.php “を読み込みます。

私は子テーマで運用しているので、こんな感じです。

include(get_stylesheet_directory() . '/func-inc/Func-shortcode.php');

Func-shortcode.phpで、ショートコードを入れるとランダムに表示させるようにする

<?php
function shortcode_xxx()
{

    // ランダム表示ソース①
    $filename_1 = get_stylesheet_directory() . '/func-inc/origin/Source_1.html';
    $content_1 = file_get_contents($filename_1);

    // ランダム表示ソース②
    $filename_2 = get_stylesheet_directory() . '/func-inc/origin/Source_2.html';
    $content_2 = file_get_contents($filename_2);

    // ランダムで選択して返す
    $ary = array($content_1, $content_2);
    $key = array_rand($ary, 1);
    $content = $ary[$key];

    return $content;
}
add_shortcode('xxx', 'shortcode_xxx');

①file_get_contents()関数を使って外部ファイルのHTMLを取得する。

②array_rand()関数を使って、取得した外部ファイルのHTMLをランダムに選択させる。

というのをやっています。

Soucre_1.htmlとSource_2.htmlはHTMLの表示したい内容だけでO.K.です。

例えば、

<h2>おはよう</h2>
<h2>こんにちは</h2>

というような感じです。

これで、ショートコードを入れた場所に対して、ページを表示したりリロードしたりする度に、「おはよう」「こんにちは」がランダムで表示されるようになります。

便利でしょ?

cssは、作成したcssファイルを読み込ませればもちろんO.K.です。

参考

参考になるリンクをまとめています。

ショートコードとは?

【WordPress】ショートコード作成の基本
今回はWordpressのショートコードの基本的な書き方や使い方を解説していきたいと思います。複雑な処理も短い…

使用した関数

今回使用した関数についてのリンクです。

■get_stylesheet_directory() 

関数リファレンス/get stylesheet directory - WordPress Codex 日本語版

■ file_get_contents()

PHP: file_get_contents - Manual

■array_rand()

PHP: array_rand - Manual
スポンサーリンク

▼ [完全受注生産2022年5月8日まで] ▼

Megabass
Respect Color 42th
モスラOB

雑記
スポンサーリンク
wattanwattanをフォローする
スポンサーリンク
Lure Fishing from Tokyo

コメント

タイトルとURLをコピーしました