0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-07

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に直書きした。とりあえず動くことを優先した。

とりあえず動いた。

何か質問や気になることがあれば
コメントください!!!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?