1 | <script type="text/javascript" src="/js/jquery.js"></script> |
ところがWordPressでは各種プラグインがさまざまなJavaScriptのフレームワークを使うので、コンフリクト（競合）を起こさないようにグローバル変数を変えていたり、何重にもライブラリを読み込まないようにしたり、適切な順番で読み込んだりするような配慮がなされています。
では自前でスクリプト（今回はjQuery）を設置する場合は、どのようにすればスマートに読み込ますことができるでしょうか。
いろいろ調べていると、wp_enqueue_script()というwp_head()にフックする関数がありました。
これを使うとほかのプラグインなどとは競合せずに、安全にjsライブラリや自前のjsファイルを読み込むようになるようです。
また、WordPressには主要なライブラリが組み込み済みなので、テーマファイル内に自分でライブラリを設置しなくても、この関数を使えば使用できるようになります。
関数は以下のように呼び出します。
1 | wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false ); |
$handle
スクリプトの識別名
$src(optional)
スクリプトファイルへのパス。http://で始まるURLまたはサイトルートから絶対パス。
$deps(optional)
依存するスクリプトのリスト（配列）
$ver(optional)
スクリプトのバージョン
wp_enqueue_script()の実装例
実際は下記のコードを<head></head>内に読み込ませます。
注意点としては、必ず<?php wp_head(); ?>の前に記述します。そうしなければフックしないのでロードされません。
1 2 3 | <?php wp_enqueue_script('jquery'); ?> <?php wp_enqueue_script('sample','/wp-content/themes/yourthemes/js/sample.js',array('jquery'),'0.1.0'); ?> <?php wp_head(); ?> |
2行目の第3引数に依存するファイルを指定すると、読み込む順番も調整してくれます。
この状態でHTMLソースを見るとファイルを正しく読み込んでいることが確認できますが、前述の通りグローバル変数が変わっているので、自前のjsファイルの中身を修正する必要があります。
WordPressではjQueryという変数名でアクセスするので、$をjQueryにすべて修正します。これで正しく動作するはずです。
すべて置換するのが面倒だったりする場合は、自前のfunctionだけ$でアクセスできるように下記のコードで括ります。
1 2 3 4 5 6 7 8 | jQuery(document).ready(function($) { //下のfunction内だけ$が有効 $(document).ready(function() { alert("サンプルコード"); }); }); |
関連記事
]]>
]]>サイト上では明記していませんが、ShifftはWordPressで構築しています。
そこで今回は、サイトの公開時点で使用しているWordPressのプラグインを紹介しようと思います。全部で17個あり、王道なものが揃った感じです。
使用しているWordPressのプラグイン一覧
Akismet
WordPress日本語版に最初から入っているプラグイン。
スパムコメント対策には必須。wordpress.comに登録して、API Keyを取得しなければ使用できません。
一つ取れば、複数のブログに使いまわしてもよいらしいです。
WP Multibyte Patch
WordPress日本語版に最初から入っているプラグイン。
WordPressのマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグイン。
日本語環境でWordPressを動かすには、これも必須のようです。
Contact Form 7
問い合わせフォームを設置するプラグイン。Akismetと組み合わせるとスパムによる投稿はほとんどない模様。
Nonce! Please
スパム軽減プラグイン。URLを直打ちしてくるような明らかなスパムを排除します。
これである程度のスパムをふるいにかけてくれるので、Akismetに大量のスパムが入ってくることがありません。
Shifftではこれに加えて、.htaccess内にUserAgentを判別して拒否するようなこともやってます。とにかくスパムが大嫌いなのです。
WordPress Related Posts
関連記事を表示するプラグイン。一番シンプルで使い勝手が良い。
精度はYahoo! アプリIDを必要とするやつの方が良さそうだけど、いかんせん面倒くさいのでシンプルにこれ。
Redirection
リダイレクトを管理画面上で設定できるようにするプラグイン。
自分的にはこんなにいらないんスケド‥というぐらい機能がテンコ盛りです。
Shadowbox JS
WordPressにLight-Box系のスクリプトを組み込むプラグイン。
最初は直にスクリプトを設置していたのですが、構造が煩雑に感じたのでプラグイン版にしちゃいました。
Twitter Tools
WordPressでブログ記事を更新したら、その情報をTwitterに投稿したり、Twitterの投稿をWordPressで記事にしたりできる。
他にもTwitterの投稿をWordPressに表示させたり、WordPressの管理画面からTwitterに投稿できたり、なんてことも。
Twicon for WordPress
コメント欄に表示するアバターをGravatarsの代わりにTwitterのアイコンを表示させます。
最近TwitterのAPIに仕様変更があり取得できなくなったらしいのですが、Twitterアカウントを入れて拾ってくるような仕組みで表示させています。
mcRSSlist Plugin
他のサイトのRSSフィードを表示させることができます。
Smart update pinger
WordPress標準のping機能を使わずにこちらを。ちゃんと飛んだかの送信ログが読めたり、投稿後に再編集した時に再度送信しないようになる。
他にも投稿後にPingを飛ばさないように動作を止めたり、任意で発射することもできる。
Ktai Style
日本の携帯電話でブログを表示できるようにする、大変有難いプラグイン。
いくつかのスタイルを選択できます。
iWPhone
iPhoneとiPod touchに対応させるプラグイン。
All in One SEO Pack
titleタグやmetaタグを任意に変更できるようにするプラグイン。
記事ごとにkeywordやdescriptionを変更できたりもする。
Google Sitemap Generator
Google サイトマップを自動生成させるプラグイン。
上記のGoogle Sitemap Generator 3.1.2に同梱の日本語化ファイルが不完全だったので、こちらで配布している完成版を導入しました。
Ultimate Google Analytics plugin for WordPress
Google Analyticsのトラッキングコードを埋め込む。
手動での設置と違い、ダウンロードリンクやmailtoリンクも追跡でき、WordPressにログインしていると自分の計測もされないようになります。
Broken Link Checker
リンク切れチェッカー。
リンク切れを起こしているものに関しては自動的にカスタマイズしたスタイルを付与してくれます。
以上、長くなりましたが参考になれば幸いです。Firefoxのアドオンと同様に、入れすぎるとページの表示に時間がかかってきますので注意しましょう。
]]>