wordpress

understrapことはじめ② | cssで子テーマをカスタマイズするには

Pocket
LINEで送る

前回の記事ではbootrstrapの子テーマを反映させるとこまでやりました(Blog始めたばかりで慣れてなく、細切れにし過ぎてました。反省……)。

今回は子テーマ反映後の作業になります。

前置き

understrapは基本的にscssで開発していくテーマのようですが、私はまだscssまで勉強できていないのです。そのため、今回はcssで作業を進めたいと思います。

さらに前置き

私のブログではunderstrapの解説は初級〜中級の内容なので、検索でこのページにいらした方には物足りない内容の可能性があります。その場合は、下記サイトで中級〜上級レベルの解説がされてますので参照になさってください。

一般的なやり方ではうまく行かない

他のテーマの場合、基本的に子テーマ作成時に作ったstyle.cssに変更したい内容を記述していけば反映されます。
しかしunderstrapの場合、style.cssにどんだけ思いの丈を記述しても、反映してくれることと反映してくれないことが出てきます。

understrapのバージョン

2019/5/13あたりにunderstrapv0.9.3にバージョンアップされました。
それまでのverでは(バグだったようですが)head内でunderstrap-child/css/theme.min.cssを参照するよう指定されており、親テーマからコピペで移動してきたtheme.min.cssに変更したい内容を追記していけば反映されましたが、突然該当参照リンクがunderstrap/css/theme.min.cssと親テーマ内のtheme.min.cssへと変更されました。
知らずにバージョンアップしたら、それまで変更を加えていたstyleが全部なくなって親テーマに戻っていてビックリしましたわ。

v0.9.3では、head内で子テーマのstyle.cssの下に親テーマのtheme.min.cssが参照されるため、上書きされてしまいます。かといって親テーマ内を触りたくはない。

そのためカスタマイズ用のcssを別に作成し、function.phphead内にそのcssへの参照リンクを追加させる方法を取ろうと思います。

function.phpに追記してカスタマイズ用cssを参照させる

//headにタグを追加
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
  echo '<link rel="stylesheet" href="/wp/wp-content/themes/understrap-child/css/theme-child.css" />
  ';
}

上記をfunction.phpphpタグの中に追記します(cssの場所と名前とidは任意です)。

のちのち階層を変える可能性がある場合は、中級な書き方になりますが、

//headにタグを追加
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
echo '
  <link rel="stylesheet" href="', $uri = get_stylesheet_directory_uri() ,'/css/theme-child.css" />
';
}
と、スタイルシートディレクトリのURIを取得する記述の仕方をすると、後で楽です。

これにより、ちょっと他のcss群と離れてしまいましたが、上書きされない位置に子テーマ用の参照リンクが反映されました。

さて、いよいよcssに記述してきます。
先ほど指定したcss/theme-child.cssにざっと変更したい箇所を記述してアップロードします。

ここでは、TOPページは後回しにして、簡単に進められる投稿ページ(single.php)から調整してみます。

Before
After

ちょっと雰囲気変わりましたね。

この調子でcssで変更できる箇所をカスタマイズしていきます。

おまけ:footerのコピーライトを編集する

この記事ではcssのみでカスタマイズすると言いつつ、上のキャプチャで編集しちゃってたので言及します。
さっさと変えておきたいfooterのコピーライト部分は、footer.phpを親テーマから子テーマへ複製してきて編集します。

単純にコピーライトのみにしたいなら、footer.php内の

<div class="site-info">
  <?php understrap_site_info(); ?>
</div><!-- .site-info -->

を、

<div class="site-info">
  © (任意のサイト名か団体名)
</div><!-- .site-info -->

に書き替えて上書きアップします。

次の記事では、テンプレートphpやプラグイン・ウィジェットを編集します。
ブログ型表示サイトの場合は、大体完成に持っていけるんじゃないかと思います。

Pocket
LINEで送る

back to top