\ ゲームのおもしろさを伝えるブログ /

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

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

こんばんわ。ウテナです。

運営している当ブログにFF14ツールチップが表示される様に設定にしました。
自分用のメモを兼ねてやり方をご紹介しますっ!

FF14ブログを運営してる方は是非参考にしてみてください。

FF14ツールチップとは?

エオルゼアデータベースに掲載されているコンテンツを埋め込んで利用することができる公式ツールチップです。

PCで表示した際に下記リンクにマウスでカーソルを合わせると画像の様にエオルゼアデータベースのデータが出てきます。

PCのみでスマホでは表示されません。

こんな感じです!

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

というワケで。アナログ人間ですけど頑張って設定してみましたよっ!

導入方法

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

この時点で大抵の初心者さんはチンプンカンプンになると思います。
わたしもチンプンカンプンです。

注意
ここで書いてるやり方は、あくまでも私が行ったやり方です。
導入の際はバックアップを取る等してから試してください。

手順

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

その中にheader.phpのファイルがあるかどうかを確認。
この中に<body></body>タグがあります。

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

FFFTPをいうソフトを使用し親テーマのheader.phpを子テーマにコピー。
FFFTP自体は無料で使用できるので検索してダウンロードしましょう。

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

 

次にワードプレス外観⇒テーマの編集を開いて、自分のサイトで子テーマにheader.phpがあるかを確認。

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

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

Meryでheader.phpを開きctrl+Fでbodyを探します。
見つけたらその後ろにJavascriptファイルを書き込みします。

書き込む内容は公式サイトのファンキットのページを見てください。

 

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

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

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

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

まとめ

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

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

かっこいいー・・・!と大満足です。

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

WordPress初心者さんにオススメの記事
>>気になるブログのWordPressテーマを簡単に調べる方法

コメントを残す

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

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