TORIYAMAHONPOS WordPressのまめ知識
の記事
TORIYAMA Yuko
古いバージョンのIE(Internet Explorer)にHTML5を認識させるというhtml5.jsというものを、みなさまご利用でしょうか？WordPressでもそうでなくても、もういらないのでは？と思いつつさよならできない私です。
WordPressのテーマを作るにあたって、
クライアントがIE9未満のバージョンであったなら、header.phpに以下を記述する。
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
実際にはもう必要ないかと思われるものの、公式のtwentyなんとかのテーマにも相変わらずこのように書いてある。
TORIYAMA Yuko
めずらしくWordPressの子テーマを作ってる。子テーマはまずCSSのカスタマイズから始まる。さらにカスタム投稿タイプやショートコードなど使いたい場合は、functions.phpを用意する。そして今回、子テーマでJavaScriptを追加しようとしてひっかかったことがある。
子テーマのCSSやテンプレートは自動的に優先される。ではJavaScriptはどうか？
子テーマ(bird-child)に js/script.js を追加したい場合、
wp_enqueue_script( 'bird-child', get_stylesheet_directory_uri() .'/js/script.js', array( 'jquery' ), '1.00');
いつもの記述では思うように動かなかった。出力されたHTMLを確認すると親テーマのJavaScriptに依存しているのに、子テーマのJavaScriptが先に読み込まれてしまっているようだ。JavaScriptの順番を変更することなどできるのだっけ？と考えた。
TORIYAMA Yuko
2014年4月26日(土) KDDIウェブコミュニケーションズにて開催された「春のJavaScript祭り」に参加した。大型連休の初日となるなか、大勢のJavaScript好きが麹町に集まった。
主催のITかあさんとはWordPressのイベントで知り合った。エネルギッシュなエンジニアでBuddyPressの勉強会でもお世話になっている。私がWordPress以外のイベントに参加するのは珍しく、どんな人達が集まるのか？楽しみにしながらスタッフとして参加した。
(さらに…)
TORIYAMA Yuko
ジオタグのついた写真を地図上に表示する自作プラグインを手直しようと調べているうちに、Google Maps APIはV3になっていることが分かった。2009年のことらしいから、Google Mapにだいぶ触れていなかった、あるいは使うことがあっても以前のコードを流用していたのか。
V3になって大きく変わったのは、APIキーが不要になったことである。APIキーはサイトごとに申請する必要があったため、テストサイトなんかでは地図を表示できないことがあった。さらにスマホ対応や、ストリートビューが利用できるようになっている。
JavaScriptライブラリの組み込みは以下の記述となる。
[PHP]
[/PHP]
sensor=falseのところは、GPS対応のデバイスであればtrueにしていろいろできる。JavaScriptでの記述にけっこう変更点があるものの、これを機会に活用したい。
TORIYAMA Yuko
現在のブログのホームURLを知るには、テンプレートタグのhome_url()である。これをJavaScriptから知るにはどうしたらよいのか？JavaScriptから動的に画像を差し替えたり、ajaxを使う際にはホームURLがわからないと困るのだ。
このようなときはあらかじめテーマに、hidden属性で home_url() を掃き出しておくことにしている。例えば、
[PHP]
のようにホームURLが分かる。
ただしHTML上ではどうしてこんなところにhiddenがあるのか、ということになるため収まりが悪い。もう少しスマートな方法はないものか。
TORIYAMA Yuko
プラグインより新規投稿画面にだけJavsScriptを追加したい場合には、admin_print_scripts-post-new.php というアクションフックがあると分かった。たとえば、新規投稿画面であらかじめ特定のカテゴリーを選択状態にしておくということができる。こんなことをしなくてもデフォルトのカテゴリーは設定できるが、投稿元によってカテゴリーを変更したかったのだ。
[PHP]
function my_scripts_new(){
$file = WP_PLUGIN_URL . ‘/’ .dirname(plugin_basename( __FILE__ )) .’/example.js’;
wp_enqueue_script(‘wp-multilingual_new.js’, $file);
}
add_action(‘admin_print_scripts-post-new.php’, ‘my_scripts_new’);
[/PHP]
似た処理で、新規投稿画面のフッタにだけ処理を加えるということもできる。その場合は、admin_footer-post-new.php というアクションフックが利用できる。
[PHP]
function my_footer_new(){
// 処理
}
add_action(‘admin_footer-post-new.php’, ‘my_footer_new’);
[/PHP]
TORIYAMA Yuko
テーマやプラグインでJavaScriptを追加したい場合は、アクションフックのwp_print_scriptsを利用する。管理画面の場合は admin_print_scripts になる。ただしここでやると、管理画面のすべてのページで読み込まれてしまう。これを、たとえば新規投稿画面のみで宣言したい場合には、以下のようなフックを利用するとよい。
[PHP]
add_action(‘admin_head-post-new.php’, ‘my_admin_script’);
[/PHP]
admin_head- に その画面のphpファイル名をつなげたフックが発生するのだ。似たようなことで、自作したプラグインの設定画面では、以下のようなフックが発生する。設定画面がmypluginというプラグインのmy_main.phpというファイルの例だ。
プラグインの設定画面だけで使いたいCSSやJavaScriptがある場合は、ここで追加するとよい。
[PHP]
add_action(‘admin_head-toplevel_myplugin/my_main’, ‘my_admin_script’);
[/PHP]
TORIYAMA Yuko
WordPressとは切っても切れないjQueryである。これといった参考書が見つからないままWebの情報で済ませてたところ、オライリーから真打ち登場だ。
新宿のブックファースト(コクーンタワー)で買ったところ、オライリー謹製ブックカバーが付いてきた。ちょっと嬉しいけど、表紙のイタチっぽいやつがかわいすぎちゃうからカバーはしない。(虫とか爬虫類のときに使うことにする)
TORIYAMA Yuko
jQueryでJSONPを扱うのに、ちょっとはまったのでメモ。
jQueryでJSONP形式のWeb APIを利用する場合は、$.ajaxか $.getJSONメソッドで処理を行う。URLパラメータに渡すcallback=? という記述がミソで、このときWeb API側がどのようなコールバックの名前を設定しようとも 自動的に function(data){ のところに返ってくる。
[sourcecode language=’php’]
$.getJSON( “http://example.com/service/?callback=?”,
null,
function(data){
// 処理
});
[/sourcecode]
さて、はまったのはWeb上に用意されているJSONP形式のファイルを扱う場合だ。データの更新頻度が少ない場合は、たまに更新される静的なJSONPファイルを扱うほうがだんぜん早い。
…ということでやってみると、ファイルの中にあらかじめコールバック(“mycallback”とする)の名前が埋め込まれているためか、上記のスクリプトではレスポンスがない。正しくは 「ない」のではなくて 別関数として function mycallback() を用意しておけば、そこに返ってくる。function(data){ へは返ってこない。当然といえば当然なのか。しかし、せっかくjQueryなんだからあくまでもスマートに記述したいのだ。いろいろやってみて以下のようなスクリプトに到達した。
[sourcecode language=’php’]
$.getJSON( “http://example.com/service/example.json?callback=?”,
null,
mycallback = function(data){
// 処理
});
[/sourcecode]
Webや書籍でこのような例が見つからない。あまりやらない方法なのかな？
TORIYAMA Yuko
テーマやプラグインでJavaScriptを読み込む場合は、アクションフックのwp_print_scriptsを使用する。
[sourcecode language=’php’]
function add_myscript() {
wp_enqueue_script(‘myscript’, ’JavaScriptのフルパス’);
}
add_action(‘wp_print_scripts’, ‘add_myscript’);
[/sourcecode]
jQueryに依存したJavaScriptを読む込む場合は以下のようになる。wp_enqueue_script(‘jquery’);を行うことで、jQueryが2重に読み込まれることがなくなる。
[sourcecode language=’php’]
function add_myscript() {
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘myscript’, ’JavaScriptのフルパス’, array(‘jquery’));
}
add_action(‘wp_print_scripts’, ‘add_myscript’);
[/sourcecode]