子テーマ「Luxeritas Child」のカスタマイズ
本ブログでは、テーマとして「Luxeritas:ルクセリタス」を適用しています。テーマ自体が素晴らしく、標準で設定されているものをそのまま利用(インストール、有効化しただけの状態)しても十分満足できるのですが、ブログの特性からちょっとだけカスタマイズが必要のようです。
WordPress では、オリジナルのテーマを修正するために「小テーマ」を作成し、カスタマイズは、その「小テーマ」へ実施することを推奨しています。
通常は、「子テーマ」をブログ管理者が自分で作為する必要があるのですが、「ルクセリタス」では「小テーマ」も提供されれいる・・・これって、とっても珍しいケースだし、また、その機能も素晴らしい!最初に出会ったときには、鳥肌が立ちました・・・
子テーマ「Luxeritas Child Theme」標準メニュー
子テーマ「Luxeritas Child Theme」には、カスタマイズを実施するために、標準でメニュータブを提供しています。これを最初に見つけたときには、本当に感動しました!多くのブログを公開、放置・閉鎖を繰り返し。その理由が、テーマによっては、修正が不可能なほどカスタマイズが必要だったりして、子テーマのメンテナンスが嫌になってしまって・・・
下図、小テーマ「Luxeritas Child Theme」が標準で提供しているメニュータブです。
メニュータブは以下の通り。
- スタイルシート
- Javascript
- Head タグ
- フッター
- アクセス解析(head)
- アクセス解析(body)
- functions.php
- AMP HTML ( body )
- AMP 用スタイル
- 投稿エディタ用スタイル
上記、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 が自動で採番するコードで、各サイドに一つが割り当てられます。