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に直書きした。とりあえず動くことを優先した。
とりあえず動いた。
何か質問や気になることがあれば
コメントください!!!
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に直書きした。とりあえず動くことを優先した。
とりあえず動いた。
何か質問や気になることがあれば
コメントください!!!
コメント
コメントを投稿