wikipediaっぽくリンク先プレビューを出したい。jQueryプラグイン導入

wikipediaっぽくリンク先プレビューを出したい。jQueryプラグイン導入:

wikipediaっぽくに

マウスオーバーした時にリンク先のプレビュー画像を表示させたい。

wordpressプラグインでは見つからなかったので、

jQueryプラグインをwordpress内に導入してみた。

イメージはなんとなくできたけども、実際手を動かすとかなり手こずった。

まずはプラグイン探しから、minipreviewというプラグインが良さげだったのでそれを

フォルダごとmini-preview-masteインストール。
https://github.com/lonekorean/mini-preview

次に

wordpress内を見ていく

ダッシュボード→外観→テーマの編集

ここからコードをいじっていくわけだが、直接いじることはしないで

FTPソフトを使って、一度ローカル環境に落とし込んでエディターで編集しよう。

この時にいじるファイルのバックアップを必ず取っておく！

インストールしたプラグインの必要なファイルもFTPソフトを通じて

wordpress内に入れておこう。

wo-contentの中に、相対パスを書く上で大事になってくるから入れる場所も要チェック

私の場合はフォルダを作っていたのでそちらに入れた。

jsフォルダに　jquery.minipreview.js　を追加

cssフォルダに　jquery.minipreview.css　を追加

それではコードをいじっていく

いじっていくファイルは、　header.php と　footer.php

header.phpのheadタグに　

minipreviw実装に必要な記述を書き込んでいく

インストールしたmini-preview-masterフォルダ内にindex.htmlがあるのでそちらを参考に

（jquery.minipreview.css　も忘れずに）

次にfooter.phpをいじっていく

bodyタグの下の方に

scriptタグを貼り付けて　jquery.minipreview.js　を読み込ませる


common.jsにminipreviewの内容を記述したかったが、動かなかったので

今回はfooterに直書きした。とりあえず動くことを優先した。

とりあえず動いた。

何か質問や気になることがあれば

コメントください！！！