WordPressを使っていると、既存テーマをそのまま用いて入れ込むだけでもかなりの完成度になるのですが、jQueryやcssのプラグインを用いてさらにカスタマイズしたくなってきます。
その際に新しくjsファイルやcssファイルを読み込ませるのですが、毎回毎回headerに書いていると読み込みが遅くなったりheaderのコードが読みにくくなったりと少々面倒なことになってきます。
なので、オススメはfuctionsに書き込むことです。
しかし注意しなければならないことが１点。
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]
１行ずつ細かく見ていきましょう。
[php] /*１行目*/function sample_styles() {
[/php]
ここの箇所では、sampleの箇所が任意のところです。
今はsampleとしていますが、testでもaaaでもなんでも構いません。
wp_enqueue_style( ‘sample1’, get_bloginfo( ‘template_url’) . ‘/css/sample.css’, array(), null, ‘all’);
[/php]
ここがメインの箇所となるのですが、cssによっていじる必要のある箇所は「sample1」、「css/sample.css」の２箇所くらいです。
sample1に関して
こちらは１行目同様適当な値で構いません。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]
４行目では、「sample_styles」の箇所だけ注意してください。
１行目に書いた、「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]
こちらも１行ずつ細かく見ていきましょう。
[php] /*１行目*/function sample_scripts() {
[/php]
ここの箇所では、sampleの箇所が任意のところです。
今はsampleとしていますが、testでもaaaでもなんでも構いません。
CSSとの違いはCSS「styles」かJS「scripts」の違いとなってきます。
wp_enqueue_script( ‘sample2’, get_bloginfo( ‘template_url’) . ‘/js/sample2.js’, array(), false, true );
[/php]
ここがメインの箇所となるのですが、jsによっていじる必要のある箇所は「sample2」、「/js/sample2.js」の２箇所くらいです。
sample2に関して
こちらは１行目同様適当な値で構いません。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を記す必要が出てきます。
add_action( ‘wp_enqueue_scripts’, ‘sample2_scripts’);
[/php]
４行目では、「sample2_scripts」の箇所だけ注意してください。
１行目に書いた、「samplesample2_scripts_styles」と同じように書いてください。
「wp_enqueue_scripts」に関してはこのままで大丈夫です。
以上が自作のcssとjsをfunctionsで読み込ませる方法です。
初めてだとわからないことだらけですが、やっていくうちに身についていくので、色々挑戦してみるのも面白いです。
こちらを参考にさせていただきました。
WordPress – 独自のCSSやJSを読み込む
