WordPress のテーマ Lightning はなかなか魅力的なテーマだと思います。そこで、当サイトをLightning に移行しカスタマイズすることにしました。
Lightning のカスタマイズについては、Lightning の公式ページの他に、西沢直木氏他の投稿があります。
Lightningのフッターのカスタマイズ(ウィジェットの列数変更など)
次のブログでもカスタマイズ方法が紹介されています。
さらに、Lightning は、カスタマイズしやすいように作られていて、このような設定ガイドも公開されています。
しかし、これらのカスタマイズではできないこともあって、私なりにやってみました。
コンテンツ Lightning のの子テーマ作りは簡単 Lightning のスタイルシートは特殊なところにある カスタマイズ例：ページタイトルの調整 jQuery を使用する場合は正しい WorPress の jQuery ライブラリ読み込みをする
Lightning のの子テーマ作りは簡単
Litning 公式ページの「設定ガイド」を開くと、次の子テーマ用のサンプルが用意されてダウンロードできるようになっています。
次のファイルがダウンロードされるので、子テーマのフォルダに収めます。
特徴的なのは、通常子テーマには必要な、style.css に @import url(); の指定がないことです。
Lightning のスタイルシートは特殊なところにある
通常テーマのスタイルシートはテーマフォルダの直下に style.css として存在します。ところが Lightning のこの style.css を開いてみると、このように何も書かれていません。
これでは、CSS を変更したくてもどのように変更していいかわかりません。
それではどこにあるかというと、特殊なところにあります。サイトのソースを表示してみると、
このように、テーマの下に design_skin/origin/css/style.css と記述されています。これを開いてみると細かな CSS が書かれています。ここから変更したいCSS 部分を子テーマの style.css にコピーして変更することにします。
<<追記>>
この記事を書いた2017年6月の時点では、上の場所にこのテーマの完全な style.css がありました。しかし、現在の style.css の中身は空っぽです。他に移動したようです。
子テーマにCSSを追加するには、やはりインスペクターでCSSを検索して書き込むしかないようです。
インスペクターはブラウザーに用意されていて、調べたい部分を右クリックして表示されるメニューで、
Google Chrome ならば「検証」
Safari ならば「要素を調査」
Internet Explorer ならば「要素の検査」
をそれぞれクリックすると、対象の HTML と CSS が表示されます。いずれも、Google Chrome でF12 を押した時に表示される、デベロッパー・ツールと同じものです。
この使い方については、西沢直木氏の下記ページを参照するのがよいでしょう。
BizVektor に限らず、どのテーマでも応用できるものです。
カスタマイズ例：ページタイトルの調整
Lightning のページタイトルは特殊で、なかなか良いのですがこのサイトにはバランスが良くありません。フォントも縦幅も大きすぎると思います。
Chrome のWebデベロッパーツールで該当するのは page-header クラスで指定されていることがわかりますので、先ほどのスタイルシートを探しますと、次の定義が見つかります。
この部分を子テーマの style.css にコピーして、 font-size や lne-height などいろいろ試して調整してみます。結局このように font-size を下げれば良いバランスになりました。
Lightning の見出しも特殊な設定をしていますので、h1～h6 を探して変更することができます。
jQuery を使用する場合は正しい WorPress の jQuery ライブラリ読み込みをする
Lightninng は WordPress に組み込まれている jQuery ライブラリを読み込むようになっていません。ですから、Lightninng テーマを使って jQuery を使用するときは、正しく WordPress の jQuery ライブラリを読み込む必要があります。そうでないとおかしな動きをして、解決に手間どることがあります。私もこのために、長い時間を無駄にしました。その状況を下記にまとめておきました。
具体的には、header.php の<head>～</head>で、<?php wp_head(); ?>より前に jQUery ライブラリを読み込む関数を次のように記述します。
<?php wp_enqueue_script(‘jquery’); ?>
さらに、jQuery のコード中の $ を jQuery に書き換えます。これで jQuery が正しく動作するようになります。
お知らせ
会員数150万人突破！日本最大級のクラウドソーシングサービス「クラウドワークス」メールアドレスのみの簡単登録で今から在宅ワークを始められます。