understrapことはじめ① | understrapの子テーマを作成

このページではunderstrapというテーマを使った場合の子テーマ作成についてまとめています。
wordpress全般での子テーマの作成やベーシックな知見などは下記サイトで詳しく＆分かりやすく解説されていますので、参照になさってください。

子テーマを作ってWordPressの既存テーマをカスタマイズする方法

いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存

下準備

さくらインターネットと契約、ドメイン取得（whois情報公開代行の状況も確認）
さくらインターネットのコントロールパネルからデータベースを設置し、WordPressをインストール
テーマ「understrap」をインストール

understrapを選んだ理由

Bootstrap4を使ったテーマだから
今後、仕事で使いそうだから
ぶっちゃけ弊社社長に研究しとくよう言われたから

understrapの気に入ってる点

Font Awesome v4.7がデフォルトで使える

understrapのイマイチな点

軽くない

Font Awesomeの使い方① | Bootstrap4でFont Awesome v4.7を使用する

使えるようになるまでにちょっと敷居が高いけど、使えるようになるともう手放せないWebアイコンフォント。その代表格といえばFont Awesome!（「オゥサム」と読みます。素晴らしい！最高！って意味）使えるようになったつもりでも、次の案件でまた使えなくなって豆腐（□）が表示されることを繰り返してるので、ここらで復習します。第一回目は「Bootstrap4でFont Awesome v4.7を使用する」です。Font AwesomeとはWebアイコンフォント最大手。一部有料だが無料版でも十分使える。SVGもダウンロードできるので、WEBデザインで使うのも楽ち...

子テーマを作成

色々やり方はありますが、まず自分がやりやすい方法で進めます。

FTPでログインし、wp-content/themes の配下に understrap-child フォルダを作成。

functions.phpを作成

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

正直、functions.phpについてあまり詳しくないので、子テーマ作成時のベーシックな記述を参考にしています。

2020.11.12更新：function.phpと記載してましたが、functions.phpに修正しました。

style.cssを作成

/* 
Theme Name:understrap-child
Template:understrap
*/

今の段階では子テーマを有効化できるようにしたいだけなので、最低限の記述をしています。

functions.phpとstyle.cssをunderstrap-childフォルダ内にアップロードすることで、テーマから作成した「understrap-child」が選択できるようになります。

まだカスタマイズ作業はしていないので、親テーマのstyleがそのまま反映されます。

ダッシュボードからのカスタマイズ

この段階ではまだcssを触っていないので細かいカスタマイズはできませんが、カテゴリー追加、メニュー（グローバルナビ）項目追加などができます。

カテゴリー項目追加/削除

メニュー項目追加/削除

ここでグローバルメニューの編集もできます。
このサイトのようにブログ型表示の場合はいいのですが、サイト型表示で色々凝りたい場合には普通にheader.phpに記述するパターンが多いですね。

サイドメニュー他に項目追加/削除

「外観」の「ウィジェット」から、ここでは「右サイドバー」を触ります。
デフォルトの状態で「検索」「最近の投稿」「最近のコメント」「アーカイブ」「カテゴリー」「メタ情報」が並んでいるので、不必要なものは削除します（必要なら後から再度追加できます）。
特に「保存」等押さなくても反映されますし、空にすると「右サイドバー」自体が非表示扱いとなります。
見出しやリストのデザインはCSSで調整します。

メインビジュアル部やfooterにサイトマップを加えたいなどカスタマイズしたい場合、ここでカスタムHTMLで編集もできますが、テンプレートphpを触った方が早い気がします。