[WordPress] Understrap Childをカスタマイズする

Bootstrapを使用したwordpressのテーマはいろいろあります。WP Bootstrap Starterを使用していましたが、公式サイトが長い事真っ白画面のままなので、初心者にはとっつきにくいUnderstrapを使ってみようと思います。実は、以前ギブアップした事があります。Understrap Childはどの.cssに書けば書き換えが出来るのか分かりにくいので、ザックリとオリジナルの.cssファイルを読み込ませる事で簡単にしました。SASSを使ってより便利に！

Understrap Childのダウンロード

understrap-child-themes　からダウンロードし、wp-content/themesフォルダに置き、子テーマを有効にします。

CSSを読み込ませる

Understrap Childのfunction.phpを開き、headerにオリジナルのCSSを読み込ませる様に次のコードを書き足します。

この例では、CSSフォルダの中にmine.cssをリンクする場合です

//オリジナルCSSを追加
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
echo '
<link rel="stylesheet" href="', $uri = get_stylesheet_directory_uri() ,'/css/mine.css" />
';
}

mine.cssを作る事を忘れないで下さい。wp-content/themes/任意の名前の子テーマフォルダ/CSS/mine.cssとします。

SASSで書いてみる

ここからはオプションですが、ついでに、先ほどのmine.cssをscssで書ける様にします。

あわせて読みたい

Visual Studio Code (VSC)とSASSの環境とコンパイル SASSを使うなら、エディターは Visual Stidio Code (VSC)が超簡単！無料ですし、初心者でも怖がらずにインストールできるのでお勧めです！Atomよりも軽い様にも思います…

環境が出来ている様であれば、SASSで書くという選択肢も。CSSフォルダ内に、mine.scssファイルを作成するだけです。