【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を書くのは多少仕方ないところがありますが、メンテナンスするのが面倒になるので出来る限り共通化して外部ファイルにしていきましょう。

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →