WordPressのテーマ「Lightning」カスタマイズのあれこれ

個人的にも使用頻度の多い、WordPressの公式テーマ「Lightning」。Bootstrapベース+「VK All in One Expansion Unit」でカスタマイズしやすく、企業や店舗のコーポレートサイト制作に非常に相性の良いテーマです。
コーディングによるカスタマイズが殆ど必要ないくらい高機能ですが、実際にサイト制作していると、どうしても痒いところに手が届かないこともありますので、備忘録的にカスタマイズの手順をまとめてみます。

カスタマイズを行う際には、必ずバックアップを行い、ローカル環境などの開発・検証用のWordPressを用意してからにしましょう。

1.ロゴの大きさを調整したい

Lightningのロゴ画像の推奨サイズ は、 280×60pxとなっています。大きめのロゴ画像を挿入すると、縮小されてしまいます。元々横長のロゴ画像であれば特に問題ないかもしれませんが、高さがあるロゴ画像の場合などは縮小されてしまい、バランスが悪くなります。そういった場合には以下のCSSを追加することで、原寸のままロゴを挿入することが可能です。

前提条件:
WordPress4.7以降
Lightning ver3.0.0以降

カスタマイザーの追加CSSに記載すれば、元画像どおりのサイズで表示されます。

 

なお、子テーマをインストールして、その中にあるstyle.cssに上記のコードを追加するという方法でも構いません。子テーマのインストール・設定については以下の記事が詳しく記載されています。

WordPressで子テーマを作成してカスタマイズする方法
https://webst8.com/blog/wordpress-child-themes/

2.コピーライトを消したい

Lightningはインストールすると、以下のコピーライトが自動的に挿入されます。

モックアップサイトや個人のブログであれば、このままでも特に問題はないかもしれませんが、コーポレートサイトのような商用サイト制作の場合には、「Powered by WordPress with Lightning Theme & VK All in One Expansion Unit by Vektor,Inc. technology.」の部分を削除(消したい)という要望が多いように思います。

PHPファイルから該当部分を削除するという方法でも出来ますが、テーマのアップデートがあった場合には上書きされてしまいますので、ここは有料にはなりますが、以下のプラグインを導入することをお勧めします。一度購入すると、複数サイトで利用してもライセンスポリシー上はOKのようです。

コピーライトカスタマイザー
https://lightning.nagoya/ja/plugins/lightning_copyright_customizer

 

3.グローバルメニューのフォントサイズを大きくしたい

Lightningのデフォルトのグローバルメニューではメニューの文字が小さいというご意見を伺うこともあります。デフォルトでは14px。この場合にも追加でカスタマイザーの追加CSSに以下のようなコードを追加することで文字を大きくすることが可能です。

 

 

4.画面スクロール時のヘッダー固定を解除・ヘッダーの高さ自動調整機能をオフにする

Lightningのデフォルト機能では、ヘッダー部分がスクロール時に画面上部に固定されるのが特徴です。この機能はサイトロゴやグローバルメニュー(Header Navigation)が常に表示されるため便利な機能だと個人的には思いますが、この機能は不要というご意見も一定程度あるようです。その場合には、子テーマのfunctions.phpに記述すればヘッダー固定を解除することができます。

なお、ヘッダーの高さ調整をオフにしたい場合、やはり同様に子テーマのfunctions.phpに以下のコードを記述します。

 

参考サイト
https://lightning.nagoya/ja/archives/remove-header-fixed

 

5.ヘッダーの色を変更したい

Lightningのデフォルトのヘッダーは白色で、カスタマイザーから色を自由に変更することは現時点ではできません。しかし、ヘッダー左側に挿入するロゴ画像と同色にしたいなどの要望もあります。
その場合には、追加CSSあるいは子テーマのstyle.cssに以下のコードを記述します。

 

赤字の部分がカラーコードになります。この部分にご自身が変更したいカラーコードを入れればOKです。

Before

After

まとめ

Lightningの場合、元々の標準機能が高機能でかなりの部分がノンコーディングでデザインの微調整が可能ですが、どうしてもという場合にはCSSを追加したり、PHPプログラムを追加することで、さらに自由度が高まります。
なお、繰り返しになりますが、カスタマイズを行う際には必ずバックアップを取ってから行いましょう。