「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。
*Lightning – シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ
前回に引き続き、Lightningのカスタマイズ「その2」。
今回は主として、WordPress管理画面からのカスタマイズを扱います。
WordPressの入門レベルの内容なので、この程度のことは分かってるよ~という人は、この回はスルーしてください。
前回は、テーマ・プラグイン・子テーマをインストールしたところまで進みました。

これを最終回までに、以下の状態にまでカスタマイズします。
*北福岡歯科クリニック | 北福岡駅より徒歩2分の痛くない歯医者
(架空のサンプルサイトです)

~ 目次 ~
- 固定ページとメニューの作成
- ロゴとキーカラーの設定
- ページを1カラムに変更
- スライドショーに画像設置
- ウィジェットの設置
- 「お問い合わせ情報」の表示
- 今回はここまで
固定ページとメニューの作成
さて、まずは固定ページを5つ作成します。
◇トップ
◇診療案内
◇よくある御質問
◇お問合せ
◇スタッフブログ
そして、「トップ」をフロントページ、「スタッフブログ」を投稿ページにします。
(管理画面「設定」⇒「表示設定」)


続いてメニューを作成します。
(管理画面「外観」⇒「メニュー」)


表示位置はヘッダーのみにします。
フッターには表示しません。
ロゴとキーカラーの設定
ロゴとキーカラー(メインカラー)を設定します。
(管理画面「外観」⇒「カスタマイズ」⇒「Lightning デザイン設定 」)
別途作成したロゴ画像と、キーカラー2色の色番号を入れます。

ロゴは推奨サイズが280×60pxになってますが、それだとやや小さすぎるので横350pxの画像を入れました。
このためレイアウトが狂ってしまうので、後でCSSで調整します。
ページを1カラムに変更
スタッフブログ以外の固定ページを1カラムに変更します。
デフォルトではサイドバーが入った2カラムになっています。
◇トップページ
(管理画面「外観」⇒「カスタマイズ」⇒「Lightning デザイン設定」)
「トップページを1カラムにする」にチェックを入れます。

◇他の固定ページ
(各固定ページの編集画面)
「固定ページの属性」の中の「テンプレート」を”No sidebar”に切り替えます。

スライドショーに画像設置
スライドショーを入れます。
(管理画面「外観」⇒「カスタマイズ」⇒「Lightning トップページスライドショー」)
スライドショーは、PC用とモバイル用の画像の2パターン、それぞれ最大5枚まで設置できます。
また、テキストや半透明色を載せることも可能です。

今回のカスタマイズでは、モバイル用の画像は入れず、以下のPC用画像のみを4枚入れます。
テキストは載せません(文字は画像に組み込んだものです)。

一応、設置完了。
こんな感じになります↓

ちなみに、Lightningのスライドショー設定は残念な部分が多いです。
ここらへんは次回以降に後述します。
ウィジェットの設置
トップページにコンテンツを入れます。
コンテンツは全てウィジットで入れます。
(管理画面「外観」⇒「ウィジェット」)
挿入箇所は「トップページコンテンツエリア上部」。

構成としては、
◇「テキスト」クリニック理念・概略
◇「VK_PR Blocks」クリニックのPR3つ
◇「カスタム HTML」診療・受付時間の表
◇「カスタム HTML」Googleマップ
◇「VK_プロフィール」院長の略歴
◇「VK_FB Page Plugin」Facebookページ
こんな感じです。
それぞれのウィジェットが表示されます。

「お問い合わせ情報」の表示
Lightning特有の「お問合せ情報」を表示させます。
各ページ編集画面の「挿入システムの設定」にて、「お問い合わせ情報の表示」にチェックを入れます。

すると、各ページ下部に以下のように表示されます。

記述内容を変更します。
(管理画面「VK ExUnit」⇒「メイン設定」⇒「お問い合わせ情報」)

表示が変更されました。

今回はここまで
さて、ここまでのカスタマイズ結果です。

そこそこサイトらしい風情になってきました。
でも・・まだまだ貧相です。
それにWP管理画面からいじってるだけなので、このレベルなら「カスタマイズ」とは言えないですねw
ただの「設定」レベルだと思います。
さてさて、次回以降はCSSとPHPファイルによるカスタマイズに入ります。
