WordPressでのJavascriptの読み込み方法について解説します。

WordPressのお作法にのっとた実装方法になります。

functions.phpにJavaScriptの読み込み処理を追加する

functions.phpにJavascriptの読み込み処理を追加します。

functions.phpの場所はこちら

[WordPressのインストールディレクトリ]/wp/wp-content/themes/[使用しているテーマ]/functions.php

ファイルの編集方法がわからない場合、下記の記事を参考にしてください。

functions.phpへの追加の例は下記のようになります。

function add_js() {
	wp_enqueue_script('custom_js', get_template_directory_uri() . '/custom_js.js');
}
add_action('wp_enqueue_scripts', 'add_js');

この例だと、下記に配置したcustom_js.jsというjavascriptファイルを読み込むという処理になります。

[WordPressのインストールディレクトリ]/wp/wp-content/themes/[使用しているテーマ]/

メソッド名（add_jsの部分）、識別子（custom_js）やファイル名（custom_js.jsの部分）はお好みに変えて大丈夫です。

JavaScript読み込み処理の解説

詳しく処理の解説をしていきます。

wp_enqueue_script()

スクリプトをインクルードするWordPressのメソッドです。
依存関係などを考慮してスクリプトをインクルードしてくれるので、WordPressでJavaScriptを読み込むなら、このメソッドを利用してインクルードした方が良いです。

参考：リファレンス

get_template_directory_uri()

テンプレートのディレクトリを取得するメソッドです。

参考：リファレンス

取得するディレクトリは下記。

WordPressのインストールディレクトリ]/wp/wp-content/themes/[使用しているテーマ]/

functions.phpの場所と一緒です。
今回の例では、このディレクトリにJavaScriptファイルを配置しています。

add_action()

メソッドをアクションにフックさせる関数です。

参考：リファレンス

今回の例では、wp_enqueue_scriptsアクションに、自作メソッドをフックさせています。

wp_enqueue_scriptsは、フロントのみに適応なので管理画面には影響を与えないとう性質です。

アクションの種類については、下記を参照してください。

まとめ

WordPressが用意しているお作法に則った方法のご紹介でした。

複数JavaScriptを読み込ませたい場合は、add_js()にwp_enqueue_script()のコールを増やせばOKです。

少しでも参考になれば幸いです。

最後までお読み頂きありがとうございました。

WordPressでは投稿編集画面で直接PHPを書いても動作しません。

正しくPHP処理を動作させる為の２つの方法をご紹介します。

【２つの方法】ショートコードとExec-PHP

メジャーなやり方として２つの方法があります。

• プラグインで投稿にPHPを埋め込めるようにする
• WordPress標準機能の「ショートコード」を利用する

プラグイン”Exec-PHP”で投稿にPHPを埋め込めるようにする

この方法はとても簡単です。
Exec-PHPというプラグインをインストールしてしまえば、投稿画面からPHPのコードを埋め込む事が可能になります。

<?php echo 'hello'; ?>

このようなコードを投稿画面で書けば動きます。

WordPress標準機能のショートコードを利用する

WordPressの標準のショートコードという機能を利用してPHPを埋め込む事も出来ます。

直接投稿にPHPを書き込めるわけではなく、別ファイルに記述したPHPのメソッドを投稿から呼び出すという方法になります。

PHPファイルを修正する事になるので、プログラミング知識のない方にはハードルが高いかもしれません。

どちらを選ぶか

プログラミングやPHPの知識があるなら、WordPress標準機能の「ショートコード」を。
プログラミングやPHPがよくわからず、難しいことをしたくないなら「Exec-PHP」もありだと思います。

なぜかというと、プラグインを利用した場合はセキュリティが甘くなってしまうようです。

また、プログラミングするなら別ファイルにプログラミングした方がやりやすいです。

ですので、なるべくショートコードを使うのが好ましいですが、技術的なハードルから「Exec-PHP」を利用するケースもあるかなと思います。

ショートコードの使い方

functions.phpにメソッドを実装とショートカット登録

まずは、functions.phpにPHPメソッドを実装します。

functions.phpの場所はこちら

[WordPressのインストールディレクトリ]/wp/wp-content/themes/[使用しているテーマ]/functions.php

※ファイルの編集方法がわからない方は下記の記事が参考になります。

functions.phpにメソッドを実装したら、add_shortcode()でショートカット登録してあげる必要があります。

http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_shortcode

現在時刻を表示するショートカットを登録したければ下記のようになります。

function printDate() {
	return date('Y/m/d H:i:s');
}
add_shortcode('printDate', 'printDate');

ここでコーディングミスするとワードプレスが表示されなくなります。
念のため「functions.php」をバックアップしておきましょう。

投稿から呼び出す

投稿から呼び出すと時は、タグ名を[]でくくればOK。

タグ名は、add_shortcode()の１番目の引数です。

先程のサンプルを呼び出すには下記のようになります。

[printDate]

まとめ

WordPressでPHPを扱う方法でした。

少し手間はかかりますが、できればショートコードの方を利用しましょう。

少しでも参考になれば幸いです。

最後までお読み頂きありがとうございました。