‘WordPress’ カテゴリーのアーカイブ

wordpressで簡単にthickboxを利用する方法

2008 年 9 月 12 日 金曜日

今までDOM操作は「基本を覚えるうちはベタ書きだ!」と、
jQueryやprototype等のライブラリを使わず、チマチマ書いてましたが、
まぁ、そろそろ次のステップに進もうかな、と。
まずはお手軽簡単jQueryから。

今までwordpressに記事を書くとき、画像を入れ込んだときは、別窓で開きたいなーと思って、
わざわざ投稿時にリンクタグに手入力でクラスを振ってました(‘A`)
で、このクラスを振るwordpressのプラグインをつくろうかなと思って挫折w
wp-admin\includes\media.phpを直接いじれば簡単なんですが、過去の記事とかは変更できないし。

なので、jQuery使っちゃうぞ。
まず本家からjQuery本体その他モロモロを拾ってきます。
thickbox.js
thickbox.css
loadingAnimation.gif
jquery-latest.js

ちなみにローディング用のgif画像はhttp://www.ajaxload.info/でお手軽簡単に好きなのが作れて(ι゜ω゜)ィィ・・

環境によってthickbox.jsの8行目あたりにあるloadingAnimation.gifへのパスを、
書き換えなきゃいけないと思います。
僕の場合、パーマリンクをちょいといじっているので、フルパスに書き換えました。

さて、テーマも変更します。
ヘッダ部分に以下の4行追加。

<link href="<?php bloginfo(‘stylesheet_directory’); ?>/thickbox.css" rel="stylesheet" type="text/css" />
<script src="<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php bloginfo(‘stylesheet_directory’); ?>/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php bloginfo(‘stylesheet_directory’); ?>/js/thickbox.js" type="text/javascript" charset="utf-8"></script>

common.jsは記事内のリンクにthickbox呼び出し用のクラスを追加するスクリプトです。
スクリプトの呼び出し順は必ずjQuery本体→初期化スクリプト→thickBoxの順じゃないとダメです。

common.jsに記述する初期化の内容は以下。

$(function(){
$("div.post a[href$='.jpg']").addClass("thickbox");
$("div.post a[href$='.gif']").addClass("thickbox");
$("div.post a[href$='.png']").addClass("thickbox");
$("div.post a[href$='.jpeg']").addClass("thickbox");
});

記事はdiv.post内にあるので、その中のjpgやpngなど、リンク先が画像のものにthickboxと言うクラスを付加しています。
以上。
あとは、/wp-content/themes/の自分の使ってるテーマの中にアップロードするだけ。
簡単(´・ω・`)
こんな感じ。