子テーマ「Luxeritas Child」のカスタマイズ

2022年07月18日

Luxeritas Child Theme
Luxeritas Child Theme

本ブログでは、テーマとして「Luxeritas:ルクセリタス」を適用しています。テーマ自体が素晴らしく、標準で設定されているものをそのまま利用(インストール、有効化しただけの状態)しても十分満足できるのですが、ブログの特性からちょっとだけカスタマイズが必要のようです。

WordPress では、オリジナルのテーマを修正するために「小テーマ」を作成し、カスタマイズは、その「小テーマ」へ実施することを推奨しています。

通常は、「子テーマ」をブログ管理者が自分で作為する必要があるのですが、「ルクセリタス」では「小テーマ」も提供されれいる・・・これって、とっても珍しいケースだし、また、その機能も素晴らしい!最初に出会ったときには、鳥肌が立ちました・・・

子テーマ「Luxeritas Child Theme」標準メニュー

子テーマ「Luxeritas Child Theme」には、カスタマイズを実施するために、標準でメニュータブを提供しています。これを最初に見つけたときには、本当に感動しました!多くのブログを公開、放置・閉鎖を繰り返し。その理由が、テーマによっては、修正が不可能なほどカスタマイズが必要だったりして、子テーマのメンテナンスが嫌になってしまって・・・

下図、小テーマ「Luxeritas Child Theme」が標準で提供しているメニュータブです。

Luxeritas Child Theme メニュータブ
Luxeritas Child Theme メニュータブ

メニュータブは以下の通り。

  1. スタイルシート
  2. Javascript
  3. Head タグ
  4. フッター
  5. アクセス解析(head)
  6. アクセス解析(body)
  7. functions.php
  8. AMP HTML ( body ) 
  9. AMP 用スタイル
  10. 投稿エディタ用スタイル 

上記、10のメニュータブが提供されています。必要に応じて、必要なタブにオリジナルのコードを加えるだけ。至れり尽くせりの構造になっています。

スタイルシート(style.css)

テーマ「ルクセリタス」は、多くのカスタマイズを想定して、標準で色々と変更できる設定になっています。利用者にとっては、ウェブ知識がなくても、素晴らしいサイトを構築できます。

それでも、ちょっとだけスタイルを変更したい・・・そこで、以下のコードを挿入しています。

/* サイドバーのカテゴリーウィジェットに下線を挿入 */
#side ul li, #col3 ul li {
	list-style-type: none;
	line-height: 2.0;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #ccc;
}
/* サイドバーにあるカテゴリーの最後の下線を消す */
#side ul li:last-child, #col3 ul li:last-child {
	border-bottom: none;
}
/* サイドバーのタイトルに下線を引く */
#side h3, #col3 h3, #side h4, #col3 h4 {
	font-size: 1.8rem;
	font-weight: bold;
	color: #111;
	margin: 4px 0 10px -17px;
	padding: 4px 0 4px 4px;
	border-bottom: 1px solid #601561;
	border-left: 20px solid #601561;
	border-radius: 5px;
}

アクセス解析(head)

ブログを公開して、真っ先に追加した「Google Analytics」用のコードを挿入しました・・・当然ですが、小テーマに標準で提供されている「アクセス解析(head)」タブに以下のコードを追加しています。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-xxxxxxxxxx');
</script>

上記コードの「G-xxxxxxxxxx」は、Google が自動で採番するコードで、各サイドに一つが割り当てられます。