Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

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

INDEX

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で書くという選択肢も。CSSフォルダ内に、mine.scssファイルを作成するだけです。

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる