【WordPress】ページにjavascriptやCSSの読み込みタグを挿入したい時

前に

【WordPress】全てのページにタグ(HTMLのコード)を挿入・設置したい時

WordPress で動作しているページのすべてに共通のタグ(HTMLのコード)を埋め込みたい時にどこに挿入すればよいかを説明する． Googleタグマネージャーを挿入するプラグイ

 https://www.rectus.co.jp/archives/2122

2021/03/09

のページで header.php に直書きする方法は紹介したが，WordPress の場合，javascript や CSS の読み込みのタグの場合，functions.php に書くことが推奨される．

javascript のタグを挿入したい場合

javascript のファイルを読み込ませたい場合は script タグを使う．

例えば，

<script type="text/javascript" src="https://www.rectus.co.jp/js/test.js" async></script>

のようなタグを挿入したい時は

function my_wp_enqueue_scripts() {
  wp_enqueue_script('testjs', 'https://www.rectus.co.jp/js/test.js', array(), null, array('strategy'  => 'async',));
}
add_action('wp_enqueue_scripts','my_wp_enqueue_scripts');

と書けばよい．

気を付ける点は wp_enqueue_script と script となっている点．

css のタグを挿入したい場合

CSS のファイルを読み込ませたい場合は link タグを使う．

例えば，

<link rel='stylesheet' href='https://www.rectus.co.jp/css/test.css' type='text/css' media='all' />

のようなタグを挿入したい場合は

function my_wp_enqueue_scripts() {
  wp_enqueue_style('testcss', 'https://www.rectus.co.jp/css/test.css', array(), null);
}
add_action('wp_enqueue_scripts','my_wp_enqueue_scripts');

と書けばよい．
気を付ける点は wp_enqueue_style と style となっている点．

上記のように複数のファイルを読み込ませたい場合は一つの関数の中に書くことはいうまでもない．