wordpress

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

Pocket
LINEで送る

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

下準備

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

understrapを選んだ理由

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

子テーマを作成

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

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

function.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')
);
}
?>

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

style.cssを作成

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

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

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

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

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

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

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

メニュー項目追加/削除

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

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

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

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

シンプルなリストではなくサムネイル画像も付けたい、タグのデザインを変えたいなどあったら、「Recent Posts Widget Extended」「Simple Tags」といったプラグインを併用します。

次回、cssでのカスタマイズに入ります。

Pocket
LINEで送る

back to top