過去記事の再投稿作業中です

【FF14】WordPressでブログにツールチップを導入する方法

こんばんわ。
ウテナ(@k_natural_time)です。

運営しているこちらのブログにFF14のツールチップを使えるようにしました。
自分用のメモを兼ねてやり方を書いておきます。

ツールチップとは?

参考 ファイナルファンタジー14ファンキットlodestone エオルゼアデータベースに掲載されているコンテンツを埋め込んで利用することができる公式ツールチップです。

PCで表示した際に下記リンクにマウスでカーソルを合わせると画像の様にエオルゼアデータベースのデータが出てきます。(スマホでは見れないです(´・ω・`))

月読命大斧

天然要害 サスタシャ浸食洞

マーモットの肉

こんな感じです!

だから何と言われればソレまでなんですがw
ちょっとかっこいいじゃないですかw

アナログ人間ですけど・・・。
頑張って設定してみました(´・ω・`)

導入方法

ロードストーンの説明を読んでみると、「サイトで利用するため、<body></body>タグの間に下記のJavascriptファイルを読み込みます。」と書かれています。

この時点で大抵の人はチンプンカンプンになると思います。
わたしもチンプンカンプンでしたw

注意
ここで書いてるやり方はアナログ人間がやったやり方です。
間違っているかもしれませんし、他にもやり方があるかもしれません。

 

まず<body></body>タグの間に書き込みをする為にワードプレス外観⇒テーマの編集で使用しているテーマの子テーマを開きます。
(ワードプレスのカスタマイズは必ず子テーマを使用してください。)

その中にheader.phpのファイルがあるかどうかを確認。
この中に<body></body>タグがあるはずなんですね。

私の場合はheader.phpのファイルがまだ無かったので、
親テーマから子テーマにファイルをコピーしてきます。

FFFTPをいうソフトを使用し親テーマのheader.phpを子テーマにコピー。
FFFTPのダウンロードページ

コピーのやり方についてはこちらの記事が参考になると思います。
参考 FTPソフトを使ってSANGOの子テーマファイルを追加しようgoma.me

ワードプレス外観⇒テーマの編集を開いてちゃんと子テーマにheader.phpがあるかを確認。

ここに書き込みをするには一旦ダウンロードしたheader.phpを別ソフトを使用し、
書き換えてFFFTPを使ってサーバーに入れないといけません。
なんてめんどくさいんだ!

header.phpを一旦ダウンロードしてデスクトップ等に入れておき、
私はMeryというソフトを使用し書き込みをしました。

Meryでheader.phpを開きctrl+Fでbodyを探します。
見つけたらその後ろにJavascriptファイルを書き込みします。
書き込む内容は公式サイトを見てね。青文字になっている所です!

書き込みをしたら「名前をつけて保存」して、
再度FFFTPを使用し子テーマのフォルダの中に入れて置き換えましょう。

無事入れる事が出来れば、ブログの記事でツールチップのコードを使用した際に先程のようなデータが出てくるようになるはずです(´・ω・`)

できあがった状態がこちら

画像の18行目に書き込みしてあるのが分かるかと思います。

まとめ

以上!
ブログでツールチップを導入する方法でした。

これがあると、ちょっといい感じのサイトに見える気がします・・・!w
なんかちょっとプロぽいじゃないですか(´・ω・`)ww

かっこいいー・・・w

もしWordPressを使用しているFF14ブロガーさんで導入したいけど分からないっていう方いれば、私に分かる範囲で教えますので是非ご相談ください(´・ω・`)ワーイ

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)