PHPで条件分岐をしてJavaScript(jQuery)を実行する方法。

どうも、「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ベースで動かせばいい話だったというオチ。。笑

以上、ご参考までに!(`・ω・´)ゞ

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!