functions.phpに記述しCSSファイルを読み込んでみる

はじめに

この記事では、Word pressのfunctions.phpに記述し、CSSファイルを読み込むための「サンプルコード」・「記述内容の説明」を掲載しています。

この記事でのキーワード
Word Press関数, Word Press, CSS

サンプルコード

function mytheme_enqueue_styles() {
    wp_enqueue_style('mytheme-style',get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles' );

記述内容の説明

• mytheme_enqueue_styles()
  →これが、スタイルシートを読み込む用途で作成された独自の関数です。
• wp_enqueue_style()
  →WordPressで、テーマやプラグインがスタイルシートやスクリプトを安全に追加できるようにするための関数です。引数には読み込むスタイルシートの名称と場所を指定します。このコードにおける引数 'mytheme-style' は、読み込むスタイルシートのハンドル（名称）です。get_stylesheet_uri() は、現在有効なテーマのメインスタイルシート（通常はstyle.css）のURLを取得します。
• add_action('wp_enqueue_scripts','mytheme_enqueue_styles')→これは、スタイルシートをWebページのフロントエンドに正しく表示するための基本的なフックです。'wp_enqueue_scripts' は、WordPressがCSSスタイルシートとJavaScriptをページに追加する正しいタイミングを表すアクションフックです。2番目の引数 'mytheme_enqueue_styles' は、そのタイミングで実行する関数を指定します。具体的にはWordPressがページをロードし、何かのスクリプトやスタイルをenqueue（追加）するべきタイミングになったとき、このアクションフックが呼び出され、このときにmytheme_enqueue_styles()関数が実行され、テーマのメインスタイルシートが適切にページに追加されます。つまり、このコードを使用することで、WordPressのテーマがメインのスタイルシート（style.css）を正しく読み込むことができます。