WordPress

【HTML→WordPress】2.CSS、JavaScriptの読み込み方法

HTMLで作成したポートフォリオサイトをWordPress化しています。

前回は、WordPressのテンプレートファイルを作る方法について記事を書きました。

https://keibloglife.com/2019/09/03/wordpress-theme/

 

今回は、CSS、JavaScriptの読み込み方法についてまとめておきたいと思います。

 

CSS,JavaScriptを読み込む方法

css,JavaScriptを読み込む方法は、functions.phpに記述します。

<?php
function my_scripts() {
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/src/css/style.css', array(), '1.0.0', 'all' );
  wp_enqueue_script( 'main-script', get_template_directory_uri() . '/src/js/main.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
?>

 

 

ただ、これだけではindex.phpに反映されません。

index.phpに、コードを記述する必要があります。

ヘッダーとフッターにphpテンプレートタグを挿入

 

</head>の直前に<?php wp_head(); ?>

</body>の直前に<?php wp_footer(); ?>

 

これらを書くことで、functions.phpに記載したCSSとJavaScriptが読み込まれます!