lightningというwordpressテーマのカスタマイズ例を作ってみました!

スポンサーリンク




Wordpressでコーポレートサイトを作っているんだけど、自作は無理だし、無料のテーマ使いたい。Lightningって無料らしいけど、どれぐらいカスタマイズできるのかな。

今回はこのような声にお答えして、Wordpressの無料テーマlightningを使用してデモサイトを作成してみました。

LightningはWordpressの公式無料テーマだけあって、

・ウィジェットやプラグインが多くあり、
・管理画面からも操作がしやすく、
・プログラミングの知識がさほどなくてもそれなりなコーポレートサイトが簡単にできる

という点で良いですね。

ただあまりにもLightningが使いやすいので、

わかる人にはすぐlightning使ってるなとわかってしまうというデメリットもあります。

実際に私は色々とWebサイトを調べることがあるのですが、

見た瞬間「あ。Lightning使ってるな」と思うことが多いです。

という訳で今回はこのLightningをカスタマイズして歯医者さんのホームページを作成してみました。

Lightningを使ってみようかなという方の参考になればと思います。※テキストや写真は仮置きです。

Lightningでカスタマイズして行きたいけど、自分でやるのはめんどくさい!という方や、カスタマイズをしようとしているけどやり方がわからない!という方はお問い合わせまでご相談ください。

デモサイトはこちら

今回は架空の歯科を想定して、以下のページを作成しました。

・トップページ
・医院紹介
・スタッフ紹介
・診療案内
・診療の流れ
・ブログ
・採用情報

画面はタブレットやスマホなどに表示を対応させています。

以下はLightningの公式のデモサイトです。参考までに。

参考:https://demo-ja.lightning.nagoya/

WordPressテーマLightningのカスタマイズの過程

1:テーマ色の変更、スライドの設定
2:不要なウィジェット削除
3:フッター設置
4:子テーマの用意
5:ヘッダーのカスタマイズ(電話番号やSNSボタン追加)
6:フロントページのカスタマイズ
7:下層ページのカスタマイズ

1〜3まではHTML、CSS、FTP、phpなどの知識がなくても大丈夫ですが、4以降でHTML、CSS、phpを編集していく必要があります。

使用しているプラグインは以下の通りです

・VK All in One Expansion Unit
・Contact form7

スポンサーリンク

Lightningのページのカスタマイズの注意点や制作のポイント

Lightningはデフォルトでかなり使いやすいワードプレステーマですが、以下のような点では一工夫が必要になります。

・全幅のコンテンツ

Lightningではタブレットやスマホの表示に対応しているのですが、 containerクラスが指定してあるので、ある程度の余白が入っています。

人によっては全幅で背景を画像にしたいという方もいると思いますが、その場合は各phpファイルの

をコメントアウトしましょう。

・要素に動きをつける

例えばスタッフページ(https://demo.ma-ca-ro-ni.com/aries/staff/)の場合は、丸になっている写真を押すとそのスタッフの詳細までスルスルっとスクロールするのですが、このような動きをつけるのもLightningの標準ではできない機能です。

この場合は、header.phpでjsの読み込みとfooter.phpでJqueryを記入させる必要があります。
JQueryはこのような感じです。

・共通ヘッダーの一文や、電話番号、SNSアイコン

こちらもLightningのプラグインではできない内容になります。
公式サイトでは、共通ヘッダーに電話番号やバナーなどを設置できるプラグインが出ているのですが、有料です。

なので、自力でしたいという方は、header.phpをいじる必要があります。
詳細はlightningでヘッダーに電話番号やSNSボタンを表示する方法【デモあり】をご覧ください。詳細なカスタマイズ方法を書いています。

ただ、管理画面やウィジェットで完結できるようには作り込んでないので、実施される際は編集するファイルに注意してくださいね。

スポンサーリンク

Lightningのカスタマイズよりは有料テーマを買った方が早いという事実

正直な想いをぶっちゃけると、Lightningのカスタマイズをするぐらいなら有料テーマを買った方が良いです。

世の中にはEmanonストークのように、コードをいじることなくカスタマイズできる箇所が多いユーザーフレンドリーなテーマが多く存在しています。

それらのテーマは10,000円前後で購入が可能です。

Lightningのカスタマイズをする場合、カスタマイズの規模にもよりますが、ある程度の時間を要します。

Lightningのカスタマイズを行うのがあなたもしくは外注さんで、その時給を仮に2,500円だとすると4時間で10,000円です。

外注する場合はあなたのコミュニケーションコストもかかりますね。

正直なところ4時間でLightningのカスタマイズ・・・はそんなに何も変わらないですね。

作業者にもよりますが、トップページデザインぐらいとかで終わるのではないでしょうか。

Lightningのカスタマイズをもじゃもじゃとするぐらいなら良質でカスタマイズしやすい有料テーマをさくっと買ってしまった方が良いでしょう。

Lightningのカスタマイズをしたいと思っている方の多くは

ビジネスサイトを構築して、ネットでの集客をし、売上を増加させることが最終的な目標であると思います。

これまでWEB制作に関わってきてデザインに執拗にこだわり、本質的なことを考えない(ネット集客数と売上増加にどれぐらいサイトが貢献したのか)方をそれなりに見てきましたが・・

デザインやカスタマイズで時間を使ったり、外注して制作費と自分のコミュニケーションコストをかけるぐらいなら、良質でカスタマイズしやすい有料テーマをつかって、サイトのコンテンツを充実させ、いち早く世に出し、ABテストをしながら改善していく方が建設的だと思います。

以下は私のオススメのテーマです。

Emanon Business
個人事業主や中小企業向けのサイトです。

リンクのデモサイトをみてもらうとわかりますが、すでにLP(ランディングページ)のようなデザインになっています。

また、SEO内部対策があらかじめ施されており、集客に特化したWordPressテーマです。自分でこれをやるにしても、外注するにしても相当な労力なので、買ってしまった方が楽ですね。

WordPressテーマ「ストーク」
このブログでも使用しているテーマです。色の設定やサイドバーの設定などが楽すぎて泣けます。愛用者が多いので、ちょっとしたカスタマイズ情報がネットにたくさん転がっているのも良い点です。

Lightningのカスタマイズ承ります

という訳今回はLightningのカスタマイズ例をご紹介しました!

基本的にはLightningのカスタマイズをごにゃごにゃ頑張るぐらいなら有料テーマを買ってしまった方がビジネスが加速するのでは、と思っていますが、

それでもLightningのカスタマイズをしたい!LightningをWordpressに導入したけどやりたいことができない!こんなことしたいけどphpファイルをいじるのはいやだな・・めんどくさいなという方はお問い合わせからどうぞ!


スポンサーリンク


スポンサーリンク