「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。
＊Lightning – シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ
前回に引き続き、Lightningのカスタマイズ「その２」。
今回は主として、WordPress管理画面からのカスタマイズを扱います。
WordPressの入門レベルの内容なので、この程度のことは分かってるよ～という人は、この回はスルーしてください。
前回は、テーマ・プラグイン・子テーマをインストールしたところまで進みました。
これを最終回までに、以下の状態にまでカスタマイズします。
＊北福岡歯科クリニック | 北福岡駅より徒歩2分の痛くない歯医者
（架空のサンプルサイトです）
～ 目次 ～
- 固定ページとメニューの作成
- ロゴとキーカラーの設定
- ページを１カラムに変更
- スライドショーに画像設置
- ウィジェットの設置
- 「お問い合わせ情報」の表示
- 今回はここまで
固定ページとメニューの作成
さて、まずは固定ページを５つ作成します。
◇トップ
◇診療案内
◇よくある御質問
◇お問合せ
◇スタッフブログ
そして、「トップ」をフロントページ、「スタッフブログ」を投稿ページにします。
（管理画面「設定」⇒「表示設定」）
続いてメニューを作成します。
（管理画面「外観」⇒「メニュー」）
表示位置はヘッダーのみにします。
フッターには表示しません。
ロゴとキーカラーの設定
ロゴとキーカラー（メインカラー）を設定します。
（管理画面「外観」⇒「カスタマイズ」⇒「Lightning デザイン設定 」）
別途作成したロゴ画像と、キーカラー２色の色番号を入れます。
ロゴは推奨サイズが280×60pxになってますが、それだとやや小さすぎるので横350pxの画像を入れました。
このためレイアウトが狂ってしまうので、後でCSSで調整します。
ページを１カラムに変更
スタッフブログ以外の固定ページを１カラムに変更します。
デフォルトではサイドバーが入った２カラムになっています。
◇トップページ
（管理画面「外観」⇒「カスタマイズ」⇒「Lightning デザイン設定」）
「トップページを１カラムにする」にチェックを入れます。
◇他の固定ページ
（各固定ページの編集画面）
「固定ページの属性」の中の「テンプレート」を”No sidebar”に切り替えます。
スライドショーに画像設置
スライドショーを入れます。
（管理画面「外観」⇒「カスタマイズ」⇒「Lightning トップページスライドショー」）
スライドショーは、PC用とモバイル用の画像の２パターン、それぞれ最大５枚まで設置できます。
また、テキストや半透明色を載せることも可能です。
今回のカスタマイズでは、モバイル用の画像は入れず、以下のPC用画像のみを４枚入れます。
テキストは載せません（文字は画像に組み込んだものです）。
一応、設置完了。
こんな感じになります↓
ちなみに、Lightningのスライドショー設定は残念な部分が多いです。
ここらへんは次回以降に後述します。
ウィジェットの設置
トップページにコンテンツを入れます。
コンテンツは全てウィジットで入れます。
（管理画面「外観」⇒「ウィジェット」）
挿入箇所は「トップページコンテンツエリア上部」。
構成としては、
◇「テキスト」クリニック理念・概略
◇「VK_PR Blocks」クリニックのPR３つ
◇「カスタム HTML」診療・受付時間の表
◇「カスタム HTML」Googleマップ
◇「VK_プロフィール」院長の略歴
◇「VK_FB Page Plugin」Facebookページ
こんな感じです。
それぞれのウィジェットが表示されます。
「お問い合わせ情報」の表示
Lightning特有の「お問合せ情報」を表示させます。
各ページ編集画面の「挿入システムの設定」にて、「お問い合わせ情報の表示」にチェックを入れます。
すると、各ページ下部に以下のように表示されます。
記述内容を変更します。
（管理画面「VK ExUnit」⇒「メイン設定」⇒「お問い合わせ情報」）
表示が変更されました。
今回はここまで
さて、ここまでのカスタマイズ結果です。
そこそこサイトらしい風情になってきました。
でも・・まだまだ貧相です。
それにWP管理画面からいじってるだけなので、このレベルなら「カスタマイズ」とは言えないですねｗ
ただの「設定」レベルだと思います。
さてさて、次回以降はCSSとPHPファイルによるカスタマイズに入ります。
院長は女医さんの設定にしておきました。
この記事は内容が古くなっています。
最新バージョンのLightningと合わない箇所が多々あると思います。
新しいLightningによるサイト制作シリーズはこちらから。