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("サンプルコード"); }); }); |
関連記事
]]>
]]>
このIE6 FuneralのイベントでIE6は葬られたわけですが、実際のところGoogleもサポートを打ち切った*1ことで、IE6離れはますます加速されることと思います。
そういうわけで私も今後Webサイトを作るときは、IE6を完全に無視し続けていきます。（事前の確認は必要ですが）たとえ仕事でも。
どうしても「IE6が必要だ」と迫られたときは、IE6のセキュリティホールの問題とパフォーマンスの悪さ、そもそもなぜ必要なのか、とにかく時代遅れである、ということを説いていこうと思います。
jQueryでIE6を判別する
ShifftもIE6には対応させていませんが、崩れて表示されるというわけではなく、User AgentでIE6を判別して専用のページに飛ばすようにしています。
jQueryを使用している場合は下記の簡単なスクリプトを読ませることで、IE6のみを特定のページに飛ばすことができます。
1 2 3 4 5 6 7 8 9 | <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> var IE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false; if(IE6){ $(function(){ window.location.href = "/ie6/"; }); } </script> |
飛ばした先の専用ページで、「IE6はやめれ！」というアナウンスをすればOKですね！
関連記事
- Googleは3月11日にYouTubeの対応を打ち切るほか、Google ドキュメントのサポートも終了するようです。
普通はローカル環境で開発をして本番用のサーバーへアップするので問題は少ないのですが、ローカル環境と本番環境とでサーバーの設定が違っていたために上手く動作せず、ちょっとした手直しが必要になったり、大掛かりなファイルの入れ替え作業をする場合などでサービスを一時停止しなければならないケースはよくあります。こういうときは「メンテナンス中」の画面を表示させて、サービスにアクセスできないようにします。
これを実現させるためには下記の記事が参考になるのですが、これはApache 2.2系で検証済みのTipsで、Apache 1.3系では上手く動作しないようです。（原因は後述）
メンテナンス中画面を出す正しい作法と.httaccessの書き方 | Web担当者Forum
そこで今回は、Apache 1.3系でメンテナンスモードを表示させる方法をまとめてみます。
以下の条件が今回のポイントです。
- 特定のIPからのアクセスは普通にサイト閲覧が可能
- それ以外のIPからのアクセスなら、メンテナンス画面を表示
- HTTPヘッダに503のステータスコードを返す
やってることは簡単です。それではGO!!
1. メンテナンス時にアップロードするためのディレクトリを作成する
メンテナンス画面の表示に必要なファイル群をまとめるために、以下のようなディレクトリをサーバールートに作成します。
maintenance/
もちろんconstruction/でもtemp/でもなんでも良いです。
2. エラー画面のページを作成する
maintenance/の下にindex.htmlなどの名前で「メンテナンス中」のページを作成します。
できるだけ遊び心をもってデザインをすると、ユーザーは「しょうがないっか～」みたいな感じで思ってくれます。
このときの注意点としては、画像やCSS、JSのファイルまでのパスは/（スラッシュ）のようなルートから始まる書き方でないと、上手くパスが繋がりません。
使用する画像もmaintenance/の中に一緒にしておくと、管理が煩雑にならないと思います。
3. 503エラーを吐く 503.php を用意する
実は先ほどの参考記事だと.htaccessのmod_rewriteの記述で503エラーを出す指定が書かれているのですが、Apache 1.3系では300番台と400番台のエラーしか出せません。
そこで、PHPを使って503エラーを吐かせちゃいましょう。
maintenance/の下に503.phpを作成し、下記の内容を記述します。
1 2 3 4 | <?php header ('HTTP/1.0 503 Service Temporarily Unavailable'); include(dirname(__FILE__) . '/index.html'); ?> |
3行目の/index.htmlは、2.で作成したメンテナンス用のページを指定します。
4. .htaccessに記述する
いよいよ大詰め。サーバールート上の.htaccess内にリダイレクト処理に関する記述を書きましょう。
1 2 3 4 5 6 7 8 9 | RewriteCond %{REQUEST_URI} !\.css$ RewriteCond %{REQUEST_URI} !\.js$ RewriteCond %{REQUEST_URI} !\.jpg$ RewriteCond %{REQUEST_URI} !\.gif$ RewriteCond %{REQUEST_URI} !\.png$ RewriteCond %{REQUEST_URI} !\.swf$ RewriteCond %{REMOTE_ADDR} !=192.168.0.1 #(管理者のIPアドレス) RewriteCond %{REQUEST_FILENAME} !503.php RewriteRule ^.*$ /maintenance/503.php [R,L] |
1行目～6行目は、各画像ファイルなどをリダイレクトの対象からはずすための設定です。
これをしないと画像やCSSなどのファイルもリダイレクトしてしまい、正しく反映できません。
7行目で指定したIPのPCからアクセスするとリダイレクトの対象から外れるので、管理者だけは実際の動作を見ながら作業を行うことができます。
8行目は、リダイレクト後の無限ループを回避するための記述です。
9行目で実際のリダイレクト処理が書かれています。
検索クローラーは503のステータスコードを受け取るとページをキャッシュしないらしいのですが、一応心配な方はrobot.txtに下記を加えておいてください。
1 2 | User-Agent: * Disallow: /maintenance/ |
以上で完成です。
おまけ
メンテナンス画面のデザイン参考にどうぞ。
Effective Maintenance Pages: Examples and Best Practices | Design Showcase | Smashing Magazine
]]>