Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

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

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

understrap カスタマイズ

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ファイルを作成するだけです。

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX