お急ぎの方や、ごたくはいいからリンク先がランダムになってるボタン設置の方法知りたいだ！
という方は、以下もくじ内の
【本題】ランダムリンクを複数作って記事内に設置する方法をクリックしてくださいませ。
ランダムなリンク作成にたどり着くまでの道のり
今後、このサイト内でいろいろやりたいことがあり、
そのために「リンクをクリックするとランダムなページに飛ぶしくみ」を知りたかったのです。
しかしながら、わたしは「HTML」「CSS」「JavaScript」などの違いがさっぱりんこで、結局のところ一体なんだってばよ？状態。
それらがそれぞれどういう働きをして、そもそもどういう意図で存在しているのかもまったくわからない。
何を考えて生きているんだこの人たち状態。こわい。
日本語がまったく通じないし何語を話しているのかもわからない異国の人を目の前にしている状態。こわい。
[quads id=1]
知っているHTMLタグは<br>の改行くらいでした。
「麻呂は改行タグなら知っておるぞ？改行ならまかせろー（バリバリ）破ぁ！」と謎のドヤ顔をしていました。
いろいろ調べていくと
HTMLは顔（パーツなど含め）
CSSはメイク
JavaScriptは動き(表情)というわかりやすいサイトさんに出会いました！
たぶんわかりました。ありがとうございます！
そんなこんなで、なんだかよくわからないままとりあえず検索キーワードとして
「WordPress ランダム 記事 表示」
「WordPress リンク クリック ランダム 表示」
「WordPress ランダム表示 ページ プラグイン」
など、とにかく思いつく限りの
「リンクをクリックするとランダムなページに飛ぶしくみ」を調べようとしました。
しかし、だいたいが
「記事内に別の記事をランダム表示させる方法」ばっかりでした。
今思うと、そりゃこの検索の仕方じゃそうなるわなって感じです。
ちゃうねん！わいは…わいは、リンクをぽちっとおしたら、ランダムなページに飛んでそのページがばーん表示されてわーいってなりたいねん！
しかしこれをどう、人に伝わるよう、検索にひっかかるよう言語化すればいいのかわかりませんでした。
これを書いている今もわけがわからなくなってきました。
結論から言うとJavaScriptのタグを使ったらできたよ！
ついでに言うとCSSで可愛いボタンリンクに変身させることができたよ！
わたしが使っているテンプレートテーマは『Seal』です。
プログラミング何それおいしいの状態の初心者にとても優しいテンプレなので、 「headにタグ追加したならココに書こう！」「CSS追加したいならココだよ！」と、 変にいじっておかしくならないようになってるんですね。
※今はJINです。
※今はSWELLです！！！※
予断ですが、わたし数年前にも個人サイト作ってたんです。
その時は無料のテンプレでこつこつ作ってたんですが、
ある時、PHP（？）をおかしないじり方をしたみたいでサイトがぶっ壊れてしまいました。
結局、テンプレの元PHP（？）をコピペ、つまりたぶん初期化してなんとかなりましたが、
あの時の絶望感といったら二度と味わいたくないので、もうヘタなことはしたくないのです。
でも、今はなんだかよくわからないけどJavaScriptを使えたではないか！
わたしやればできるんだな、天才だなと思いました。よくわからないけど。
【本題】ランダムリンクを複数作って記事内に設置する方法
まず、ランダムリンクをひとつだけ設置する方法は比較的すぐに見つかったんですよね。↓
<head>
<SCRIPT language="javascript">
<!--
function j(){
var u=new Array("URL1","URL2","URL3");
location.href=(u[Math.floor(Math.random()*u.length)]);
}
//-->
</SCRIPT>
</head>
<body>
<A HREF="JavaScript:j();">クリックしてね（リンク文章）</A>
</body>
「URL」の部分に、飛ばしたいページのURLを入れる。
「クリックしてね」はテキストリンク部分。
（このタグの参考ページはコチラです。このページのおかげで基本がまずわかりました。感謝です。）
だけど、わたしがしたいのは「今日のあなたに必要な元素占い」「今日のあなたにオススメな山占い」「今日のあなたの行動範囲占い」みたいに、複数設置なんよなあ…と自分でいろいろ書き換えてみましたがどうもできませんでした。しゅん。
そしてまたいろいろ検索していたら…Yahoo知恵袋で見つけました！↓
<head>
<script language="JavaScript">
<!--
myTable = new Array();
myTable[0] = new Array("URL1","URL2","URL3");
myTable[ 1] = new Array("URL4","URL5","URL6");
myTable[ 2] = new Array("URL7","URL8","URL9");
function rndLink(grp){
myRnd = Math.floor(Math.random() * myTable[grp].length);
location.href = myTable[grp][myRnd];
}
// --></script>
</head>
<body>
<form>
<input type="button" value="リンクA" onclick="rndLink(0);">
<input type="button" value="リンクB" onclick="rndLink(1);">
<input type="button" value="リンクC" onclick="rndLink(2);">
</form>
</body>
（[ 1][ 2]と変なスペースが空いているのは、SWELLの仕組みなのか何故か王冠のアイコンになるからです）
しかも、テキストリンクじゃなくてボタンやんこれ！
なんだかレベルアップしたきがするね。
リンクボタンを増やそうと思えばたぶん
myTable[３] = new Array(“URL10″,”URL11″,”URL12”);
<input type=“button” value=“リンクD” onclick=“rndLink(3);”>
としていけば良いのではないでしょうか？（すみませんそこまでまだ試してません）
URL自体は、myTable[ ] =new Array（）内の””でそれぞれカンタンに増やせるようです。
[quads id=2]
CSSでかわいいボタンリンクにしてみた。しかし問題が…。
普通のボタンじゃ味気ないので、CSSで可愛くメイクなんかしちゃいたいわ！と、「ボタンリンク CSS」で検索。
参考サイトはコチラです。かわいいボタンがたくさんあります。迷いました。
そして気に入ったボタンデザインのコードを追加CSS部分に導入しました。
CSSは上記サイトにあるので省きますね。
そしてランダムリンクに適用するのはどうしたらー？と試行錯誤し、下記のタグでなんとかジャンプすることができるようになりました。
<a href="#" class="square_btn" onclick="rndLink(0);">ボタン内テキスト</a>
class=”” は、ボタンの種類(形？)により変わります。
わたしは四角いボタンにしたから、square_btnのようです。
上記サイトは対応ボタンのCSSとHTMLがセットで記載があるので安心。
ボタンの色も、色部分を書き換えれば簡単に変更できました。
onclick=”rndLink( )内数字は対応するTableの数字を入れるといいのですね。
しかし上記タグだとひとつ問題が起こりました。
ボタンをクリックすると、一番上にスクロールしてからジャンプするという挙動が起きたのです。
非常に気持ちが悪いです。
なので原因を調べました。
どうやらa href=の”#”部分がそういうことをさせるそうで、「javascriptの動きを止めるようにすればいいんですよ」とかなんだかそういうことが書いてある風なような感じがしたので、よくわかりませんでしたが、やってみました。↓
<a href="javascript:void(0)" class="square_btn" onclick="rndLink(0);">ボタン内テキスト</a>
上記でテストしたら…
わーーーーーい！！！
キレイにランダムジャンプしたよーーーーーーーーー！！！！！！！！！
以下がわたしが喉から手が出るほど欲しくて、試行錯誤の上産み落とした…
ランダムリンクを搭載したボタンリンクしかも複数なのだよ（ドヤァ
※サイト内を色々いじった結果、結構前から以下からのボタンでジャンプできなくなっています。
しかし上記のとおりにすると確実に出来ると思いますのでお許しください！！！
３つめのボタンもなんかバグってますが気にしないでください。
※上記はJINのボタンタグになってます。
最後にですが、わたしは本当に初心者のため、もっと違うやり方もあるのかもしれません。
でも、わたしと同じように「リンクをクリックしたらランダムにページジャンプするしくみを複数設置したいんだよウアアアン！」という方のお役に少しでも立てればなあと思ったのです。