ローディング中

【WordPress初心者向け】phpファイル内の変数を外部jsファイルで使う

皆さんこんにちは、個別指導塾コミット塾長、AWESOME開発担当の船津です。

今回はphpの変数に依存したjsを外部化したいけど、どうしたらいいかわからないとお困りの方に向けた記事です

jsでやりたいこと

  • ボタンを押すと記事の投稿IDを取得
  • IDをajaxでお気に入り登録するphpにPOSTする

元のコード

例えばテンプレートにこんな感じでコードが書かれていることを想定します。

 

ついでにpost先のコードも書いておきましょう

ファイル構成

  • wp-content/themes/hoge_theme/blog.php(上記ファイル)
  • wp-content/themes/hoge_theme/res.php(POST先ファイル)

外部化を済ませたコード

なんとなくテンプレートの下に長い記述があるのは気持ち悪いので外部化を済ませましょう
冗長になるのでscriptタグ以降のみを書きます。

blog.php

external.js

Php取得した値をDataの中に代入して受け渡すイメージですね。

ファイル構成

  • wp-content/themes/hoge_theme/external.js(外部化したjsファイル)
  • wp-content/themes/hoge_theme/blog.php(上記ファイル)
  • wp-content/themes/hoge_theme/res.php(POST先ファイル)

おわり

動いたでしょうか?
テンプレートファイルにjsを書くのは多少仕方ないところがありますが、メンテナンスするのが面倒になるので出来る限り共通化して外部ファイルにしていきましょう。

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.