【WP】FF14ツールチップ導入メモ

ツールチップの導入方法

攻略日記的にも使いたいので、エオルゼアデータベースから情報を引っ張れるFF14ファンサイトキットの公式ツールチップの導入をしてみる。
※PCから見たときしかツールチップは見えない

FFXIVファンキット ツールチップ

1.<body></body>タグの間にJavascriptファイルを読み込む

WordPressは動的CMSなので<body>タグはテーマのテーマヘッダー(header.php)内にある。canvas on EASEL(小テーマ)のテーマヘッダーを編集したい…が、残念ながら親テーマにしか無かった

小テーマのフォルダにFTPで親テーマのフォルダから「header.php」をコピーする。フォルダは /root/サイトのフォルダ/wp-content/themesあたりにあるので、FTPソフトなり(ロリポFTPが楽にできた)でコピーしてくる。

テーマエディター内のcanvas on EASELにテーマヘッダー(header.php)が出来たことを確認してツールチップ用のコードを仕込む。

2. サイトに表示したい位置にツールチップ用コードを貼り付ける

1)エオルゼアデータベースから貼り付けたいコンテンツを探す

エオルゼアデータベース

2)ファンキット「ツールチップ」コード表示からコードコピーしてくる

3)記事内の好きなところに「カスタムHTML」ブロックで埋めこむ

 ※そのまま貼るとただのハイパーリンク化されてしまうので注意…。

御鮭様のムニエル(PCでオンマウスすると出てくる)

参考