【コラム】ワードプレス内でJQueryを使って、『お題メーカー』を作ってみよう

まず最初に。
まこはパソコン・インターネット共に初心者です。
Windows95から使い続けてはいますが、本当に初心者の域を出ません。
ので、間違ったことを書くかもしれません。
この記事に書いてあることを実行し、データなどに被害が出ても、当方は責任を取れません。
以上のことを了解できる方のみ、記事内容をどうぞ。

+*+*+*+*+*+*+*+*+*+*+



今回は、アクセスするたびにアクセスするたびにお題を出してくれる『三題メーカー』の作り方を、備忘録として書き記していこうと思います。
上のスクリーンショットが出来上がりです。クリックすると『三題を授けようぞ』に飛びます。

参考にしたサイトはこちらの『ONZE開発ブログ』さまの、『【jQuery】重複しない複数の要素をランダムに表示する方法。(jQuery編)』という記事です。
判りやすい記事をありがとうございます。この場を借りてお礼申し上げます。

まず、エクセルで、こんなファイルを用意します。


そう、データの管理はエクセル(の互換ソフト)です。
Aセルには、

<li><div class="#〇〇">

と入れます。
なお、〇〇の部分には0001からのナンバーが入ります。
エクセルは1つだけナンバリングしたセルを置いておけば、カーソルが黒十字になるようにセルを引っ張ると自動ナンバリングしてくれますし、その機能を使うと楽です。
Bセルには単語を一つずつ入れていきます。
Cセルには、

</div></li>

と入れましょう。これも単語が増えるごとにセルを下に引っ張り、同じ文字を張り付けてしまえば楽だと思います。

データが完成したら、テキストエディタに張り付けます。


このソフトの場合、それぞれのセルの間にTABの隙間ができてしまっているので、置き換え機能で削除したほうがいいです。
それから、このテキストの一番最初に

<ul randomdisplay="×">

一番最後に

</ul>

と記述しておきます。
<ul randomdisplay=”×”>の×は表示したいお題の数です。3だったら、3つの単語が表示されます。
これをテキストAと仮称します。

ここまで来ましたら、『Simple Custom CSS and JS』というプラグインを入れて有効化。メニューに現れた『Custom CSS & JS』の『Add Custom JS』をクリックします。


タイトルは日本語でも動きます。判りやすいタイトルをつけましょう。
本文に、JQueryを書き込みます。

jQuery(function($) {
$.fn.extend({
	randomdisplay : function(num) {
		return this.each(function() {
			var chn = $(this).children().hide().length;
			for(var i = 0; i < num && i < chn; i++) {
				var r = parseInt(Math.random() * (chn - i)) + i;
			$(this).children().eq(r).show().prependTo($(this));
			}
		});
	}
});
$(function(){
	$("[randomdisplay]").each(function() {
	$(this).randomdisplay($(this).attr("randomdisplay"));
	});
});
});

(以上のソースは『ONZE開発ブログ』さまからのコピペになります)
ここまで書いたら、

      • 『Linking type』を『Internal』
      • 『Where on page』を『Header』
      • 『Where in site』を『In Frontend』

にして保存してください。

次に、固定ページを新規作成し、表示をテキストエディタに変えます。


(こんな表示だったらテキストエディタ)
このエディタにテキストAを流し込みます。

すると、


こんな風に表示されるようになりました。
あとは、HTMLで表示を整えて完成です。
私の場合、必要部分はこう記述しています。

<h4>今回のあなたへのお題は……</h4>
<ul randomdisplay="3">
<li><div class="#0001">Bluetooth</div></li>
<li><div class="#0002">Blu-ray</div></li>
<li><div class="#0003">CD</div></li>
(長いので省略します)
</ul>
<p>の三題です。 <br />
創作、頑張ってくださいね!</p>

自分で作った『三題メーカー』はやっぱり自分好みの単語を出してくれるので楽しいよ!
おもしろそうだと思った人は自分でも作ってみてね!

ちなみにおまけ。


単語によってはこんなホラーなお題も出ますw