WordPressのプラグインの｢Hello Dolly｣は管理画面にしか表示できないけど、あれを応用して自分のサイトに名言とか、名曲の歌詞とかをランダム表示させたらカッコよくない!?!?!?!?と思って調べてみたら、ドンピシャなサイトを発見。
参考URL
https://takala.tokyo/takala_wp/2018/04/19/428/
ぶっちゃけ、上記のサイトのコードを9.5割コピペすればできるのですが、いちおう私が実装したコードを載せておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <style> div.random-text{ background: #f5f5f5; width: 100%; padding: 2%; border-radius: 2% 2% 2% 2% } </style> <body> <div class="random-text"> <p id="text" align="left"></p> <p id="author" align="right"></p> </div> </body> <script type="text/javascript"> function getCSV(){ var req = new XMLHttpRequest(); req.open("get", "https://girishowawoman.com/wp-content/uploads/2022/11/random_text.csv", true); req.send(null); req.onload = function(){ render_text(req.responseText); } } function render_text(str){ var result = []; var tmp = str.split("\n"); var random = Math.floor( Math.random() * (tmp.length-1)); result = tmp[random].split(','); var p_text = document.getElementById("text"); var p_author = document.getElementById("author"); p_text.innerHTML = '"' + result[0] + '"'; p_author.innerHTML = result[1]; } getCSV(); </script> </html> |
手順としては、
- ランダムに表示させたい言葉をCSVファイルで作成
- WordPressのメディアにアップロード(画像と同じようにアップロードできます)
- アップロードしたファイルのURLをメモ帳などにコピーしておく
- ウィジェットのカスタムHTMLに上記のサンプルコードをコピペする
- 23行目｢req.open(“get”, “https://girishowawoman.com/wp-content/uploads/2022/11/random_text.csv”, true);｣のURL部分をさっきメモ帳にコピペしておいたCSVファイルのURLに変える
- 更新ボタンをポチッとする
※注意点１
CSVファイルは、A列に名言、B列に人物名などを入れる。文中にカンマ｢,｣は入れない。ファイル名は英数字で。
※注意点２
私の場合は、最初｢返答が正しい JSON レスポンスではありません｣というエラーが表示されて更新できなかったのですが、下記サイトの通りに契約しているロリポップサーバーのWAF機能を無効にしたら更新できました。
参考URL
https://weblog10.com/waf_setting
正直コードの意味はさっぱりわからないのですが、｢動けばオッケー｣という初心者マインドで有り難く実装させていただいております。
それにしても、これなかなかアイディアが広がるプログラムで、例えば名言じゃなくて失恋ソングの歌詞を表示させたらあっという間にメンヘラサイトになりますよね～!!!!
少しプログラミングができるだけでWordPressの幅が広がって楽しい。