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

最終更新日: 公開日: 2024年03月

前に

のページで 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 となっている点.

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

 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.
※このページと無関係な内容のセールスはご遠慮ください.

 
   
contact
Pagetop