WordPressテーマ「Lightning」をカスタマイズ(その2)WP管理画面からのカスタマイズ

WordPressテーマ「Lightning」をカスタマイズ(その2)WP管理画面からのカスタマイズ

「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ファイルによるカスタマイズに入ります。

 

ken
院長は女医さんの設定にしておきました。

 

関連記事

WordPressテーマ「Lightning」をカスタマイズ(その9)よくある御質問ページの作成

2017.10.16

WordPressテーマ「Lightning」をカスタマイズ(その8)スライドショーの調整・他

2017.10.09

WordPressテーマ「Lightning」をカスタマイズ(その7)全幅コンテンツの実装

2017.10.02

WordPressテーマ「Lightning」をカスタマイズ(その6)インフォメーションの設置

2017.09.25

WordPressテーマ「Lightning」をカスタマイズ(その5)3PRの変更・その他

2017.09.18

WordPressテーマ「Lightning」をカスタマイズ(その4)見出しの変更・その他

2017.09.08

WordPressテーマ「Lightning」をカスタマイズ(その3)フォントの変更・クレジットの非表示

2017.09.04

WordPressテーマ「Lightning」をカスタマイズ(その1)準備編

2017.08.21

テーマの知識が無いと困る!? 今後のWordPress制作

2017.08.09