どうも、「JavaScriptより〜普通に〜PHPが好き〜」でお馴染みのシェフです。はじめまして。
ちょっと前に、WordPressオリジナルテーマ「4536」に、固定ヘッダーにするかどうか選択できる機能を追加したんですが、JavaScriptのファイルでPHPを使う方法がわからず困ってしまいました。
最初は、JSファイルに<?php //処理内容 ?>と記述するだけでいいのかな？なんて思っていたんですが、上手くいかず。
悩んだ結果、PHPのファイルで条件分岐して、その中でJavaScriptを実行するというシンプルな方法があることに気づいたので、今回はその方法をご紹介します。
PHPのファイルではJavaScriptを動かせる
まず、基本的な知識ですが、拡張子がPHPのファイルでJavaScriptは普通に動きます。
このようなコードですね。
<?php echo test(); ?>
<span>ここにテキストが入ります。</span>
<script>
$(function() {
var header = $('#header'),
$(window).scroll(function() {
if ($(window).scrollTop() > header.height()) {
header.addClass('reduce fixed');
} else {
header.removeClass('reduce fixed');
}
});
});
</script>これは、PHPファイルでHTMLコードを記述できるのと同じです。特殊な記述方法なども特にありません。
ですので、JSファイルでPHPを動かしたい場合、JavaScriptの中でPHPを動かすのではなく、PHPの中でJavaScriptを動かせないか考えるのが1番簡単です。（ベースの言語がPHPの場合）
PHPで条件分岐をしてjQueryを実行
こちらが、PHPで条件分岐をしてjQueryを実行するサンプルコードです。
<?php if ( fixed_header() ) { //固定ヘッダーを有効にした場合だけ実行 ?>
<script>
$(function() {
var header = $('#header'),
$(window).scroll(function() {
if ($(window).scrollTop() > header.height()) {
header.addClass('reduce fixed');
} else {
header.removeClass('reduce fixed');
}
});
});
</script>
<?php } ?>これで、テーマカスタマイザーの固定ヘッダー切り替えを有効にした場合だけ、PHPが実行されます。
もちろん、is_single()で記事ページだけ、!is_home()でトップページ以外のページで…といった条件分岐もできます。
そもそもJavaScriptを読み込む必要がないページもあると思うので、このように条件分岐をして軽量化すると良いかもしれません。
JavaScriptコードを別ファイルに記述すれば管理が楽
また、管理を楽にするために、ファイルを別々にするのもおすすめです。
JSファイルに記述するコード
例として、JSというフォルダの中にfixed_header.jsというファイルを作成して、下記のコードを記述します。
$(function() {
var header = $('#header'),
$(window).scroll(function() {
if ($(window).scrollTop() > header.height()) {
header.addClass('reduce fixed');
} else {
header.removeClass('reduce fixed');
}
});
});PHPファイルに記述するコード
PHP側でやることは、このようにファイルを読み込むだけです。
if (fixed_header()) wp_enqueue_script('fixed_header',get_bloginfo('template_url') . '/js/fixed_header.js', array());まとめ
最初は「JavaScript内でPHPの条件分岐をどうやって…」と深く考えていましたが、PHPベースで動かせばいい話だったというオチ。。笑
以上、ご参考までに！(｀･ω･´)ゞ
