style.cssを読み込みたい WordPress
利用シーン
- 独自テーマを作成する時には必須の作業
- 既存のテーマで、テンプレートファイルにタグが残っていて、修正したい時
使用するWordPress関数
-
wp_head()
wp_headアクションフックを開始する -
add_action()
アクションフックに処理を追加する -
wp_enqueue_style()
HTMLにタグを挿入する -
get_stylesheet_uri()
style.cssのパスを取得する
使用例
HTMLにが含まれていても、テーマにするとCSSファイルは正しく読み込まれない場合がある。
確実にstyle.cssを読み込ませるために、テンプレートファイルを編集する。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS演習</title>
<?php wp_head(); ?>
</head>
functions.php
<?php
function enqueue_script() {
// CSS
wp_enqueue_style('main-css', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');
style.cssのスタイルが適用されているのがわかる。