旧サイトで人気があったので、再編して掲載します。
子テーマフォルダ内にCSSやjsフォルダを作成し、ファイルを置いて headerにリンクを出力したい場合、直接header.phpに書く事も出来ますが、アップデートに備えてfunction.jsに記載した方が便利です。
INDEX
CSS/jsをリンクする
※ sample と書かれている部分を書き換えて下さい。2行セットになっています。不要な場合は削除すれはOKです。
function theme_name_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri(); //css挿入
wp_enqueue_style( 'sample', get_stylesheet_directory_uri() . '/css/sample.css' );
wp_enqueue_script( 'jquery'); //js挿入
wp_enqueue_script( 'sample', get_stylesheet_directory_uri() . '/js/sample.js');
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );get_stylesheet_uri は子テーマまでのパスです。親テーマにファイルを置いている場合は、get_template_directory_uri となります。 詳細はChildテーマでパスを指定する時の注意で紹介しています。
URLの追加
例えばGoogle fontとか。
//リンク追加
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
echo '<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP|Sawarabi+Gothic&display=swap" rel="stylesheet">';
}echo ‘ここを書き換えて下さい。’
なかなか上手くいかない場合は、時間をかけずにheader.phpに書き込んでしまった方が楽かもしれません。
コメント ※ハンドルネームでお願いします