WordPressでスタイルシートを読み込むには、wp_enqueue_style()
関数を使用します。
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
$handle | スタイルシートのハンドルとして使われる一意の名称 |
$src | スタイルシートの URL |
$deps | このスタイルシートが依存する他のスタイルシートのハンドル配列 |
$ver | スタイルシートのバージョン番号を指定する文字列 (初期値はWPのバージョン) |
$media | スタイルシートが定義されているメディアを指定する文字列(例: ‘all’、’screen’、’print’) |
引数はたくさんありますが、通常は$handle
と$src
があれば問題なく利用できます。
例えばGoogle fontsのNoto Sans JPとRobotoを利用する場合は下記になります。
wp_enqueue_style(
'googlefonts',
'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap'
);
ところが出力されたソースコードを確認してみると、最後のfamilyパラメータ、この場合Noto Sans JPのみが残り、Robotoが読み込まれていません。
<link rel='stylesheet' id='googlefonts-css' href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP%3Awght%40400%3B700%3B900&display=swap&ver=6.0' type='text/css' media='all' />
wp_enqueue_style関数では、$ver
を指定しない(falseの)場合、現在インストールされているWordPressバージョンと同じバージョン番号が自動的に追加されます。その際、URLに複数のfamilyがあると最後のfamilyだけに書き換えられます。これは$ver
にnull
を指定することで回避できます。
wp_enqueue_style(
'googlefonts',
'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap',
array(),
null //バージョンを追加しない(調整を防ぐ)
);
ソースコードを確認するとNoto Sans JPとRoboto、両方が読み込まれているのを確認できました。
<link rel='stylesheet' id='googlefonts-css' href='https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap' type='text/css' media='all' />