個人的プログラムの備忘録

プログラム初心者の自分の為に書く備忘録なのでこのサイトに載っているコードで不具合が起きても責任は取れませんので自己責任でお願いします。

WordPressで外部js,cssを読み込む方法

      2015/12/23

まず作ったファイルを使ってるテーマの中にあるjsフォルダ、cssフォルダにアップロードしておく。
基本的に読み込ませる場所は

header.php

の中に

<?php wp_head(); ?>

という記述があるからその直後に読み込ませるようにする。

Javascriptを読み込ませたいなら(仮に作ったファイル名をtest.jsとして)

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/test.js"></script>

とする。

CSSなら(ファイル名test.css)

<link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/test.css" />

で読み込むようになる。

ただこのやり方だと親テーマのフォルダを参照するので子テーマを使っていて子テーマに新たにjsフォルダを作ったりした場合は上記の書き方だと参照しないので

<link type="text/css" rel="<?php echo get_stylesheet_directory_uri(); ?>/css/test.css" />
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/test.js" />

これで子テーマのフォルダを参照しにいってくれる。

 - Wordpress

Sitio web optimizado por: Diseño Web
Plugin Modo Mantenimiento patrocinado por: Wordpress modo mantenimiento