」に独自の項目を追加する方法(Javascript編)投稿日:2016年5月5日カテゴリー:WordPressコメントがありません。まとめ前回、前々回と2回に分けてテーマカスタマイザを使い、[外観][カスタマイズ]に項目を付ける方法を書きました。前回のではテーマカスタマイザで値を変えるたびに再読み込みをしてしまいます。これでは、レスポンスに問題がある気がします。そこで、今回はそれを解消できるよう動的に変化させる方法を書こうと思います。JavaScriptで変更する前回で項目を追加した時のことを思い出してください。);上のコードは前回のままですが、ここで一つポイントになるところがあります。それがadd_settingの’transport’です。前回はここを’refresh’にしたので、カスタマイザで変更するたびに再読み込みしていました。今回はここを’postMessage’に変えてみようと思います。postMessageにすると、JavaScriptを使って動的に変更されるようになります。);JavaScript設置の準備それではJavaScriptで変更するための準備をしましょう。‘four_leaf_clover_customizer_live_preview’の機能をつけたしています。それでは追加した機能の中身を見ていきましょう。ここにはwp_enqueue_script()があります。ここで動的に変更させるためのJavaScriptのファイルをWordPressの中に追加します。wp_enqueue_script()の中身は、どうでしょう。スクリプトのハンドル名として’four-leaf-clover-themecustomizer’としました。追加するファイルをget_template_directory_uri()を使ってテーマのあるフォルダを選択し、[javascript]というフォルダをその中に作って[theme-customize.js]という名前で置くことにします。今回の変更はjQueryを使って行いますのでarray(‘jquery’)としています。最後にtrueとしているのは、この追加を<body>の後ろにするためです。JavaScriptの設定さていよいよJavaScriptを書いていきます。先ほど指定したフォルダ[javascript]とファイル[theme-customize.js]を作成します。初めに関数を設定します。2行目で、今回読み込みたい項目を設置をしたときに決めたadd_settingのID名’four_leaf_clover_text_color_value’を記入し、3行目でnewvalにその値を読み込みます。if文は値が全く入っていないときに初期値を指定をしています。最後に7行目で<body>タグにスタイルシートのcolorに今回の値を当てはめています。この辺はjQueryの書き方になっているので、そっちを調べて見てください。まとめこれで、JavaScriptを使って動的に変化させる方法ができました。最後にすべてのコードをのせておきます。{//この間に設定していきます。{//ここの間に設定していきます。);よかったらクリックしてください。コメントをキャンセルメールアドレスが公開されることはありません。(4)ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。