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

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で書ける様にします。

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

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください