本記事では、WordPressでCSSを読み込む方法についてまとめています。
目次
wp_enqueue_style
CSSを読み込むには、wp_enqueue_style関数を使います。基本的な使い方は以下の通りです。
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style(
$handle, #スタイルシートの一意な名前を指定。
$src = '', #スタイルシートまでのパスを指定。
$deps = array(), #先に読み込ませたいスタイルシートがある場合は、引数$handleの名前を指定。
$ver = false, #スタイルシートのバージョンを指定。キャッシュ無効化の目的でクエリ文字列としてURLに追加される。
$media = 'all' #スタイルシートのメディアタイプを指定。
);
});wp_enqueue_scriptsとは？
フロントエンドに表示されるスクリプトとスタイルをキューに入れるときに使用するフックです。フック名にscriptsと記載されているため、スクリプトのみで使用すると思いますがスタイルでも使用可能です。
関連記事
【WordPress】JavaScriptを読み込む方法 | Web忍
本記事では、WordPressでJavaScriptを読み込む方法についてまとめています。 wp_enqueue_script JavaScriptを読み込むには、wp_enqueue_script関数を使います。基本的な使…
【実践編】CSSを読み込ませる
テーマ内にある「/build/style-index.css」ファイルを読み込ませる場合は、以下のように記述します。
<?php
define('CUSTOME_THEME_VERSION', wp_get_theme(wp_get_theme()->get('Version')));
function enqueue_files() {
wp_enqueue_style('webnin-main-css', get_theme_file_uri('/build/style-index.css'), array(), CUSTOM_THEME_VERSION, 'all');
};
add_action('wp_enqueue_scripts', 'enqueue_files');上記コードが実行されると、headタグ内に以下のコードが生成されスタイルシートを読み込みます。
<link rel="stylesheet" id="webnin-main-css-css" href="http://localhost:8888/webnin-article/wp-content/themes/webnin/build/style-index.css?ver=1.0.0" type="text/css" media="all">
