【jQuery】WordPressの固定ページでajaxを利用

はじめに

こんにちは、野村です。

前回、PHPを使ってタロットカードをランダムに１枚表示するページを作りました。

【PHP】Web上でタロットカードをランダムに１枚表示する

タロットがマイブームなのですよ。でも欲しいカードが書店に売ってない。それならば、Web上でカードを見れるようにすればいい。なので作ってみた。

atomiyama.com

2018-04-30 19:37

今回は、これをWordPress上に表示させてみます。
ちょっとした自作ブログパーツですな。

せっかくなので、カードのタイトルと意味も表示できるようにします。
いまのところ、カードの意味のデータが足りないので、カードの逆位置は表示させないことにしました。

WordPress上でjQueryを使うとき注意

WordPressでは jQuery 以外にも prototype.js も読み込まれるとのこと。
なので、WordPress側の jQuery は、noConflict() という関数を使用してるそうです。
そのため、スクリプト内の「$」は「jQuery」に置き換えなきゃいけない。

$('#tarotHTML').html(data); //これは通らない
jQuery('#tarotHTML').html(data); //これは通る

ファイル構成

WordPressがサーバの公開デレクトリのトップに設置してあるものとします。
WordPressと同じデレクトリ上にデレクトリ「tarot」を作成します。
デレクトリ「tarot」の内容は以下の通り。

・img：カードの画像を格納するデレクトリ
・ajax.php：HTMLを生成するスクリプト
・script.js：HTMLを表示させるスクリプト
・tarot-data.php：カードのデータ

カードの画像は、前回用意したものを流用します。

script.js

function tarot_ref(){
  jQuery.ajax({
    url: '/tarot/ajax.php',
    dataType: 'html',
    success: function(data) {
      jQuery('#tarotHTML').html(data);
      jQuery('#tarotCARD').click(
        function(){ tarot_ref(); }
      );
    }
  });
};

tarot_ref();

ついでなので、カードをクリックするとカードが入れ替わるようにしてみました。

tarot-data.php

カードのデータ部分です。

<?php
$dt = [];

$dt[] = ["愚者","自由、型にはまらない、無邪気、純粋、天真爛漫、可能性、発想力、天才"];
$dt[] = ["魔術師","起源、可能性、機会、才能、チャンス、感覚、創造"];
$dt[] = ["女教皇","直感、知性、安心、満足、期待、聡明、雰囲気"];
$dt[] = ["女帝","繁栄、豊穣、母権、愛情、情熱、豊満、包容力、女性的魅力、家庭の形成"];
$dt[] = ["皇帝","支配、安定、成就・達成、男性的、権威、行動力、意思、責任感の強さ"];
$dt[] = ["教皇","慈悲、連帯・協調性、信頼、尊敬、優しさ、思いやり、自信、法令・規律の遵守"];
$dt[] = ["恋人","誘惑と戦う、自分への信頼、価値観の確立、情熱、共感、選択、絆、深い結びつき、結婚"];
$dt[] = ["戦車","勝利、征服、援軍、行動力、成功、積極力、突進力、開拓精神、独立・解放、体力無限大、負けず嫌い、視野の拡大、ゾーンの発動、優勢"];
$dt[] = ["力","力量の大きさ、強固な意志、不撓不屈、理性、自制、実行力、知恵、勇気、冷静、持久戦、潜在能力の引き出し"];
$dt[] = ["隠者","経験則、高尚な助言、秘匿、精神、慎重、優等感、思慮深い、思いやり、単独行動、神出鬼没、変幻自在"];
$dt[] = ["運命の輪","転換点、幸運の到来、チャンス、変化、結果、出会い、解決、定められた運命"];
$dt[] = ["正義","公正・公平、善行、均衡、誠意、善意、両立"];
$dt[] = ["吊された男","修行、忍耐、奉仕、努力、試練、着実、抑制、妥協"];
$dt[] = ["死神","停止、終末、破滅、離散、終局、清算、決着、死の予兆、終焉、消滅、全滅、満身創痍、ゲームオーバー、バッドエンディング、死屍累々、風前の灯"];
$dt[] = ["節制","調和、自制、節度、献身"];
$dt[] = ["悪魔","裏切り、拘束、堕落、束縛、誘惑、悪循環、嗜虐的、破天荒、憎悪、嫉妬心、憎しみ、恨み、根に持つ、 憤怒、破滅"];
$dt[] = ["塔","崩壊、災害、悲劇、悲惨、惨事、惨劇、凄惨、戦意喪失、記憶喪失、被害妄想、トラウマ、踏んだり蹴ったり、自己破壊、洗脳、メンタルの破綻、風前の灯、意識過剰、過剰な反応"];
$dt[] = ["星","希望、ひらめき、願いが叶う"];
$dt[] = ["月","不安定、幻惑、現実逃避、潜在する危険、欺瞞、幻滅、猶予ない選択、踏んだり蹴ったり、洗脳、トラウマ、フラッシュバック"];
$dt[] = ["太陽","成功、誕生、祝福、約束された将来"];
$dt[] = ["審判","復活、結果、改善、覚醒、発展、敗者復活"];
$dt[] = ["世界","成就、完成、完全、総合、完遂、完璧、攻略、優勝、パーフェクト、コングラッチュレーションズ、グッドエンディング、完全制覇、完全攻略、正確無比、永遠不滅"];

$dt[] = ["カップの1","喜び、満足"];
$dt[] = ["カップの2","愛、友情、一致"];
$dt[] = ["カップの3","豊か、幸福、成就、治癒"];
$dt[] = ["カップの4","倦怠、飽食、混ぜ合わされた快楽"];
$dt[] = ["カップの5","損失、期待したほどではない遺産"];
$dt[] = ["カップの6","過去を振り返る、幸福、楽しみ"];
$dt[] = ["カップの7","幻想、ある程度の成功（ただし永続的なものではない）"];
$dt[] = ["カップの8","成功の放棄、謙遜、現実逃避"];
$dt[] = ["カップの9","物質的安寧、満足"];
$dt[] = ["カップの10","満足、人間愛と友情の完全さ、幸福な家庭"];
$dt[] = ["カップのペイジ","勉強熱心な若者、熟考"];
$dt[] = ["カップのナイト","到着、発展、提案、鼓舞"];
$dt[] = ["カップのクイーン","善良で公正な女性、幸福、叡智"];
$dt[] = ["カップのキング","公正な男性、創造的知性"];

$dt[] = ["コインの1","完全な満足、金"];
$dt[] = ["コインの2","陽気さ、文書によるニュース・メッセージ、調整する"];
$dt[] = ["コインの3","技芸、取引、熟練工"];
$dt[] = ["コインの4","所有の保証、自ら所有するものへの執着、贈り物"];
$dt[] = ["コインの5","物質的な面でのトラブル、貧困"];
$dt[] = ["コインの6","成功、贈り物、慈善"];
$dt[] = ["コインの7","金銭、ビジネス、交易"];
$dt[] = ["コインの8","職人気質、準備"];
$dt[] = ["コインの9","物質的な豊かさ、達成"];
$dt[] = ["コインの10","利益、財産 家族、一族の繁栄"];
$dt[] = ["コインのペイジ","精励勤勉、学生"];
$dt[] = ["コインのナイト","有用、財産、責任、廉直"];
$dt[] = ["コインのクイーン","富、寛大、安全"];
$dt[] = ["コインのキング","実際的な知性、ビジネス、成功"];

$dt[] = ["ソードの1","力の勝利、愛や憎しみにおける大きな力"];
$dt[] = ["ソードの2","均衡、条件付きの調和"];
$dt[] = ["ソードの3","撤退、断絶、悲しみ、未熟"];
$dt[] = ["ソードの4","退却、隠遁、墓、棺"];
$dt[] = ["ソードの5","堕落、廃止、損失、荒廃"];
$dt[] = ["ソードの6","仕事をやりこなす、仲介者、得策"];
$dt[] = ["ソードの7","企画、計画"];
$dt[] = ["ソードの8","拘束された力、非難、悪いニュース"];
$dt[] = ["ソードの9","失望、幻滅"];
$dt[] = ["ソードの10","荒廃、苦痛"];
$dt[] = ["ソードのペイジ","監視、警戒、スパイ、試験"];
$dt[] = ["ソードのナイト","勇ましさ、激怒"];
$dt[] = ["ソードのクイーン","貞淑で悲しみ多き女性、未亡人、喪失"];
$dt[] = ["ソードのキング","裁判官、正義、権威、命令"];

$dt[] = ["ワンドの1","創造力、出発点"];
$dt[] = ["ワンドの2","財産、荘厳さ、領主"];
$dt[] = ["ワンドの3","確立された力、交易、ビジネス上の協力"];
$dt[] = ["ワンドの4","仕事の完成、休息、平和"];
$dt[] = ["ワンドの5","熱心な競争、スポーツ"];
$dt[] = ["ワンドの6","勝利者、大ニュースの到着、吉報"];
$dt[] = ["ワンドの7","勇気、ディスカッション、交渉、克己心"];
$dt[] = ["ワンドの8","活動性、素早さ"];
$dt[] = ["ワンドの9","抑圧された状況における強さ、警戒"];
$dt[] = ["ワンドの10","抑圧、多すぎる財産、重圧"];
$dt[] = ["ワンドのペイジ","若い男性、忠実、外交使節、郵便"];
$dt[] = ["ワンドのナイト","出発、親しみやすい若者"];
$dt[] = ["ワンドのクイーン","田舎の女性、親しみやすく貞淑、尊敬できる"];
$dt[] = ["ワンドのキング","田舎の男性、正直、良心的"];

ajax.php

プログラムの本体です。

<?php
require_once("tarot-data.php");

$rnd = rand(1, 78);

echo('<style>#tarotCARD {box-shadow: 3px 3px 3px rgba(0,0,0,0.4);}</style>');
printf('<img src="/tarot/img/%s.jpg" width="120" id="tarotCARD" align="left" hspace="10" alt="*"/>',$rnd);
printf('<b>%s</b>',$dt[$rnd - 1][0]);
printf('<p>%s</p>',$dt[$rnd - 1][1]);
?>

WordPress側

WordPressの固定ページなどに以下のコードを貼り付けます。

<div id="tarotHTML"></div><script type='text/javascript' src="/tarot/script.js"></script>

終わりに

今回作ったものは、以下のページ内にひっそりと貼り付けてあります。

atomiyama.com

新着記事サブコンテンツ【告知】LINEスタンプ、LINE着せかえ、リリースしてますランダムタロットクリックするとカードが変わります

atomiyama.com

ちょっと満足。

というわけで、今回はこれにて。