スタバの記事・Wordpressに関する記事を書いています

「wp_enqueue_script」でcss・jquery外部ファイルをfunctionsで読み込ませる

WordPressを使っていると、既存テーマをそのまま用いて入れ込むだけでもかなりの完成度になるのですが、jQueryやcssのプラグインを用いてさらにカスタマイズしたくなってきます。
その際に新しくjsファイルやcssファイルを読み込ませるのですが、毎回毎回headerに書いていると読み込みが遅くなったりheaderのコードが読みにくくなったりと少々面倒なことになってきます。

なので、オススメはfuctionsに書き込むことです。
しかし注意しなければならないことが1点。
fuctionsはWordpressの中核ともいえる場所なので、いじるのをミスるとサイトが真っ白になったりエラーコードが出てなんのこっちゃとなる恐れがあるので、バックアップは必ず取るようにしましょう。

さて、自作のCSSとjavascriptを読み込ませるコードについてです。

CSSファイルの読み込ませ方

[php] function sample_styles() {
wp_enqueue_style( ‘sample’, get_bloginfo( ‘template_url’) . ‘/css/sample.css’, array(), null, ‘all’);
}
add_action( ‘wp_enqueue_scripts’, ‘sample_styles’);
[/php]

1行ずつ細かく見ていきましょう。

[php] /*1行目*/
function sample_styles() {
[/php]

ここの箇所では、sampleの箇所が任意のところです。
今はsampleとしていますが、testでもaaaでもなんでも構いません。

[php] /*2行目*/
wp_enqueue_style( ‘sample1’, get_bloginfo( ‘template_url’) . ‘/css/sample.css’, array(), null, ‘all’);
[/php]

ここがメインの箇所となるのですが、cssによっていじる必要のある箇所は「sample1」、「css/sample.css」の2箇所くらいです。

sample1に関して

こちらは1行目同様適当な値で構いません。cssのファイルが増えてくるとこれ何のファイルだっけ?となってくるため、何のファイルかの詳細を書くといいかもしれません。

get_bloginfo( ‘template_url’)

ここはテーマファイルを読み込むまでのルートです。
[php]/ms-redesign.com/○○/wp-content/themes/ms-redesign[/php] を記してくれます。

※○○に関しては使用しているサーバーによって変わってくるので、○○としています。
Xserver:public_html
sakura:www
など。

/css/sample.cssに関して

上記のget_bloginfo( ‘template_url’)でテーマまでのルートを記してくれているので、その後の使用したいcssのファイルまでのルートをここに記します。
自分はテーマの中の「css」ファイルの中にcssを入れ込むので/css/sample.cssと記しています。
これで使用したいcssのルートの完成です。
/ms-redesign.com/○○/wp-content/themes/ms-redesign/css/sample.css

array(), null, ‘all’

こちらに関してはデフォルトのままで構いません。

[php] /*4行目*/
add_action( ‘wp_enqueue_scripts’, ‘sample_styles’);
[/php]

4行目では、「sample_styles」の箇所だけ注意してください。
1行目に書いた、「sample_styles」と同じように書いてください。
「wp_enqueue_scripts」に関してはこのままで大丈夫です。

JSファイルの読み込ませ方

[php] function sample_scripts() {
wp_enqueue_script( ‘sample2’, get_bloginfo( ‘template_url’) . ‘/js/sample2.js’, array(), false, true );
}
add_action( ‘wp_enqueue_scripts’, ‘sample2_scripts’);
[/php]

こちらも1行ずつ細かく見ていきましょう。

[php] /*1行目*/
function sample_scripts() {
[/php]

ここの箇所では、sampleの箇所が任意のところです。
今はsampleとしていますが、testでもaaaでもなんでも構いません。
CSSとの違いはCSS「styles」かJS「scripts」の違いとなってきます。

[php] /*2行目*/
wp_enqueue_script( ‘sample2’, get_bloginfo( ‘template_url’) . ‘/js/sample2.js’, array(), false, true );
[/php]

ここがメインの箇所となるのですが、jsによっていじる必要のある箇所は「sample2」、「/js/sample2.js」の2箇所くらいです。

sample2に関して

こちらは1行目同様適当な値で構いません。jsのファイルが増えてくるとこれ何のファイルだっけ?となってくるため、何のファイルかの詳細を書くといいかもしれません。

get_bloginfo( ‘template_url’)

ここはテーマファイルを読み込むまでのルートです。
[php]/ms-redesign.com/○○/wp-content/themes/ms-redesign[/php] を記してくれます。

※○○に関しては使用しているサーバーによって変わってくるので、○○としています。
Xserver:public_html
sakura:www
など。

/js/sample.jsに関して

上記のget_bloginfo( ‘template_url’)でテーマまでのルートを記してくれているので、その後の使用したいjsのファイルまでのルートをここに記します。
自分はテーマの中の「js」ファイルの中にcssを入れ込むので/js/sample2.jsと記しています。
これで使用したいcssのルートの完成です。
[php]/ms-redesign.com/○○/wp-content/themes/ms-redesign/js/sample2.js[/php]

array(), false, true

こちらに関してはデフォルトのままで構いません。
唯一いじる必要が出てくる箇所は、falseのところです。
jsはファイルによって、動く環境下が異なってきます。新しいversionだと動かなくても、古いversionだと動くことがあります。
なので、それによってversionを記す必要が出てきます。

[php] /*4行目*/
add_action( ‘wp_enqueue_scripts’, ‘sample2_scripts’);
[/php]

4行目では、「sample2_scripts」の箇所だけ注意してください。
1行目に書いた、「samplesample2_scripts_styles」と同じように書いてください。
「wp_enqueue_scripts」に関してはこのままで大丈夫です。

以上が自作のcssとjsをfunctionsで読み込ませる方法です。
初めてだとわからないことだらけですが、やっていくうちに身についていくので、色々挑戦してみるのも面白いです。

こちらを参考にさせていただきました。
WordPress – 独自のCSSやJSを読み込む

最新情報をチェックしよう!