WordPress JavaScriptライブラリをテンプレートで使う作法

WordPress テンプレートで prototype.js, jQuery…etc などの JavaScriptライブラリを使いたい時にテンプレートにハードコードしてはいけない。
プラグインを作成し JavaScriptライブラリを使いたい時も同じ。

コンフリクトを起こすかもしれないし、同じライブラリを何度も呼び出してしまうかもしれない。

ちゃんと関数が用意されている。

// wp_head の前で使う!
wp_enqueue_script( 'handle', 'src', 'deps', 'ver');
// wp_head を次に - wp_head でライブラリの<script>コードが書出される
wp_head();

Function Reference/wp enqueue script

handle(string)
ライブラリ名(小文字)

src(string)
ライブラリまでのパス – 通常は指定しなくてよい。
添付されているライブラリが最新版というわけではないので、どうしても最新版でないといけないような時に使うのだろう。

deps(array)
– 通常は指定しなくてよい。

ver (string)
– 通常は指定しなくてよい。

handle を指定すればことたりるはず。

// prototype.js and scriptaculous.js
wp_enqueue_script('prototype');
wp_enqueue_script('scriptaculous-effects');
wp_head();

下記のライブラリは WordPress に添付されている。

Script Name Handle
Scriptaculous Root scriptaculous-root
Scriptaculous Builder scriptaculous-builder
Scriptaculous Drag & Drop scriptaculous-dragdrop
Scriptaculous Effects scriptaculous-effects
Scriptaculous Slider scriptaculous-slider
Scriptaculous Sound scriptaculous-sound
Scriptaculous Controls scriptaculous-controls
Scriptaculous scriptaculous
Image Cropper cropper
SWFUpload swfupload
SWFUpload Degarade swfupload-degrade
SWFUpload Queue swfupload-queue
SWFUpload Handlers swfupload-handlers
jQuery jquery
jQuery Form jquery-form
jQuery Color jquery-color
jQuery UI Core jquery-ui-core
jQuery UI Tabs jquery-ui-tabs
jQuery UI Sortable jquery-ui-sortable
jQuery Interface interface
jQuery Schedule schedule
jQuery Suggest suggest
ThickBox thickbox
Simple AJAX Code-Kit sack
QuickTags quicktags
ColorPicker colorpicker
Tiny MCE tiny_mce
Prototype Framework prototype
Autosave autosave
WordPress AJAX Response wp-ajax-response
List Manipulation wp-lists
WP Common common
WP Editor editor
WP Editor Functions editor-functions
AJAX Cat ajaxcat
Admin Categories admin-categories
Admin Tags admin-tags
Admin custom fields admin-custom-fields
PAssword Strength Meter password-strength-meter
Admin Comments admin-comments
Admin Users admin-users
Admin Forms admin-forms
XFN xfn
Upload upload
PostBox postbox
Slug slug
Post post
Page page
Link link
Comment comment
Admin Gallery admin-gallery
Media Upload media-upload
Admin widgets admin-widgets
Word Count word-count
WP Gears wp-gears
Theme Preview theme-preview

ちなみに wp_head はなるべく </head> の前に書いておく。
プラグインなどの中にも wp_head を使用してコードを吐き出している場合がある。

テンプレートでは wp_footer(); の記述を忘れないように挿入場所は </body> の前に書くのが吉。

WordPress クエリをカスタマイズする

WordPress である特定のカテゴリやタグだけ表示を他と変えたい時がある。
わざわざテンプレートファイルを作るほどでもない時は、オリジナルループの条件を足したり変更したりすることで対応できる。

条件を文字列で指定する時は $query_string を利用する。

// 表示件数を20件に変える
query_posts($query_string."&showposts=20");

条件が category__in, category__not_in... など配列指定が必要な条件の時は
$wp_query->query_vars を使用する。

// カテゴリID 5, 8, 7 を除く
$wp_query->query_vars['category__not_in'] = array(5,8,7);
query_posts($wp_query->query_vars);

WordPress は本家も日本語版もドキュメントが他のCMSなどに比べて充実していると思う。
ただテンプレートタグの説明はだいたいあるけど、変数になるとどこに説明があるのかが分かりにくい、と思ったりする。

Codex を上手に使うと WordPress はもっと楽しくなる。
Codex 日本語版
Codex

Yahoo! UI Library: YUI Compressor で prototype.js を圧縮してみた

便利に使っている prototype.js だけど Ver.1.6.0.3 だとファイルサイズは 128KB!
少しでもサイズを減らせないかとあがいてみる。

Yahoo! UI Library の 圧縮ツール JAVA アプリ YUI Compressor を使ってみた。

http://www.julienlecomte.net/yuicompressor/ からダウンロード。
現在のバージョンは 2.4.2。
ターミナルを起動し
1. 展開したフォルダ内の「build」フォルダへ移動
2. yuicompressor-2.4.2.jar を使って圧縮

1
2
cd /path to yuicompressor-2.4.2/build
java -jar yuicompressor-2.4.2.jar /path to prototype.js -o /path to output prototype-pack.js

見事に 76KB へ圧縮された。

圧縮は、改行コード・インデントをとることでファイルサイズを小さくしているのが基本のようだ。
圧縮ツールは色々あるけど YUI Compressor は品質がよろしいらしい。

always to preserve the operational qualities of the code

その他のツール
JSMIN
the Dojo compressor
Packer

WordPress, ShadowBox JSプラグインでFlash(swf)再生

2008-12-03 http://www.inazumatv.com/contents/archives/1276

WordPressのイケテル プラグインShadowbox JSを使ってFlash再生。

Shadowbox JSは良くできたプラグインで画像の時は勝手に処理をしてくれる。
Space Invaders again なつかしゲームで遊んでみた


<a title="some title" rel="shadowbox;width=N;height=N" href="path to swf"></a>

title
入れるとコンテンツ上部に表示。
rel
shadowbox;width=swf width(px);height=swf height(px)
href
swfまでのパス

後は勝手にShadowBox JSがしてくれる。

プラグインShadowBox JSはShadowbox.jsを使用している。
Shadowbox.js by Michael J. I. Jackson

WordPress用Flash関連Pluginリスト

2008-11-13 http://www.inazumatv.com/contents/archives/1144

Lemlinh.comFlash articles | Flash in WordPress plugin

WordPressで使えるFlashなPluginをリストアップし解説している。

画像ギャラリー
NextGEN Gallery
http://wordpress.org/extend/plugins/nextgen-flashviewer/
Download

NextGEN-FlashViewer
Download

NextGEN-ImageFlow
Download

Page Flip WordPress Plugin
Download

Flickr Gallery wordpress plugin
Download

SimpleFlickr
Download

サウンド再生
Audio Player WordPress plugin
Download

Flash MP3 Player
Download

ビデオ再生
WordTube WordPress plugin
JW FLV MEDIA PLAYER 4.1を使ってる。
www.jeroenwijering.com
Download

pb-embedFlash WordPress plugin
Download

WP-SWFObject
Download

Embed QuickTime
Download

AFC FLV-Player
Download

Post videos and photo galleries
Download

その他
AFC Google Map
Download

AIR Badge
Download

WP-Cumulus
Download

CHAT Users and Design Integrated (BoWoB)
Download

RSS FEED anywhere
Download

WP FLASH TITLES PLUGIN
Download

WordPress 2.7 日本語 まだアップグレードしてはいけない?

2008-12-11 http://www.inazumatv.com/contents/archives/1352

WordPress 2.7が出ましたね、やっと。
日本語環境で若干問題がありそうです。

WordPress > フォーラム > post_class() が不正な CSS クラス名を生成

まだ日本語版はリリースされていないのでアップグレードしようとする人は限られているかとは思いますが・・・

外国生まれのアプリに良くあるマルチバイト圏に関する理解度(?)ゼロな話です。
理解度じゃなくて重要性認識度がいいのかな、Wordpressは少なくとも多国語に対応しようとはしてるから。
開発者は普段関係ないので問題が理解できないのはしょうがない、とあきらめるしかないのか。

日本語版開発チームで何らかの対策をとっていただけるのではないでしょうか。

個人的には、
今回のアップグレードはかなり広範囲に及んでいるので使用バージョンを上げるのは気が進まない。
なんか色々不都合なことが起こりそうな予感大です。

確かにstableリリースまでに長くテストされていたけど・・・
RC2からのリリースが早すぎるのが気に入らない。

update:2008-12-15
日本語版が出たのでローカルでテストをしている。
添付テーマ、ブラグイン無しでは今のところ不具合は出ていない。
大幅に見た目が変わった管理画面も違和感なく使える。
FlashアップローダはFlash Player 10でも動作する。(非公式パッチがいらない)
*DBアップデートが実行されるので何か変更がある、アップグレード前にDBバックアップは必須。

update
Wordpress Japan Forum で活躍されている IKEDA yuriko さんが対策プラグインを公開してくれている。

yuriko さんは、他にも
Ktai Style (携帯対応プラグイン)
Lightweight Google Maps (地図プラグイン)
Ktai Location (携帯の位置情報活用プラグイン)
WordPress Plugins/JSeries 用更新通知プラグイン「JSeries Notifier
などの便利なプラグインを提供してくれている。

フォーラムでの豊富な知識と適切なコメントはとてもためになる。
ブログの ケータイ大喜利 ネタが楽しい。

Flash Player 10, SWFUpload Flashアップローダ WordPress用パッチ

2008-10-29 http://www.inazumatv.com/contents/archives/907

WordPress、Flashアップローダ(SWFUpload)用パッチがリリースされた。

本家Forum、Flash Player 10 Beta breaks file upload
http://wordpress.org/support/topic/177127?replies=20
cyberolfさんが swfupload_patch.zip を提供しています。

解凍後、マニュアルでファイルを配置する必要があります。
また公式パッチでは無いようなので自己責任で使用する必要があります。

jsとswfファイルなどが変更されているので、ファイル設置後はブラウザのキャッシュを空にすると良いかと思います。

不具合というほどではないけどちょっと微妙な・・・
表示はブラウザアップローダ
「アップロード」ボタンはswfに変更
アップロード処理はSWFUpload

ちょっと気持ち悪いけど動いている。

*追記
今回のSWFUploadからFlash Player 8はサポート対象外になっている。

Flash Player 9, 10 どちらでもブラウザアップローダ表示で処理はSWFUpload。
以前のSWFUploadを使わないブラウザアップローダではない。
Flashアップローダ、ブラウザアップローダの切替ができない。

update:2008-10-29
SWFUpload v2.2.0 Beta 2 がリリースされた。
今回のパッチがBeta 2で作られているかは不明。

update:2008-11-05
tracではFixが完了しcloseになった。
http://trac.wordpress.org/ticket/6979

Milestone:2.7なので正式リリースはWordpress 2.7の登場を待たないといけない?
Wordpress 2.7のリリースは当初の11/10頃が延びて11/末になっている。
http://wordpress.org/development/2008/11/wordpress-27-beta-1/
http://ja.wordpress.org/2008/11/02/wordpress-27-beta-1/

2.6系の次のリリースに入っているとイイナ。

あと少しの辛抱。

update:2008-11-10
Flash Player 9にダウングレードするリンク。
Adobe Flash Player uninstaller
How to uninstall the Adobe Flash Player plug-in and ActiveX control
Flash Player 9
Flash Player 9 for Unsupported Operating Systems

update:2008-12-12
Wordpress 2.7 で Flash アップローダの修正が行われた。