ロゴ

WordPressでCSSを読み込む方法

WordPressでCSSを読み込む方法

WordPressを使ってオリジナルテーマ制作時、style.cssを作成してindex.phpにlinkタグを使ってみるとCSSが効かない!?

となったので今回はWordPressでCSSを読み込む方法をお話ししていきます。

調べた結果、HTMLとは別に読み込ませる方法があったんです。

そのやり方がこれです!

function.phpへCSSの読み込み

まず、functions.phpというファイルを作成します。

そこに下記のコードを記述していきます。

// CSSの読み込み
<?php
function my_enqueue_styles() {
    
    wp_enqueue_style( 'style' , get_stylesheet_uri(), 'all' );
   
}


add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
?>

my_enqueue_stylesという関数を作って

その中にwp_enqueue_style ( $handle , $src ,$media )というテンプレートタグを記述していきます。パラメータは他にもありますけどCSSを読み込ませるだけならこれで大丈夫です。

add_actionの説明

add_action( $hook_name , $callback )

$hook_name
コールバックを追加するアクション名

$callback
アクションが呼び出されたときに実行されるコールバック

こんなふうに書くとCSSが適応されます。

オリジナルテーマ初心者にとってはむずかしいですね。

私の失敗が皆さんのお役に立てれば幸いです。