2021/07/21 WordPressが「5.8」にバージョンアップ

新:WordPressテーマ「Lightning」でサイト制作(その10)メニュー・フッター・CTAの作成

新:WordPressテーマ「Lightning」でサイト制作(その10)メニュー・フッター・CTAの作成
ご注意

2021年7月21日のWordPressのバージョン「5.8」への更新に伴って、ウィジェットに大幅な変化がありました。

WordPressを「5.8」にバージョンアップした人は、本記事のウィジェット関連部分が解説と表示が違ってくると思います。

記事は近日中に修正予定ですが、それが待てない人はこちらのプラグインを入れておいてください。
新ウィジェットを旧ウィジェットに戻すプラグインです。

「Lightning」は国産の無料WordPressテーマです。

Lightning – 無料で使える超高機能WordPressテーマ

架空のWEBサイトを制作するという脳内設定シリーズ。
前回に引き続き、Lightningでのサイト制作「その10」。

前回は投稿系ページの設定を完了させました。

これを最終回までに、以下の状態にまで作り上げます。
西本田税理士事務所 | ○○地域での税に関するご相談・税金申告・経理・納税・経営サポート等
(架空のサンプルサイトです)

今回は、
メニュー」「フッター」「CTA
この3つの作成です。

メニューの作成

前回で「セミナー情報」と「税理士ブログ」が作成したので、ここでようやくメニューを作成します。

メニュー自体はWordPressの超基本的な機能なので、作成手順の説明は割愛します。

分からない人は下記解説サイトを参照されてください。

誰でも簡単にできる!WordPressにメニューを追加する方法と便利な設定まとめ

Lightningのメニューの特性

Lightningのメニューは、
Header Navigation」*ヘッダーに表示
Footer Navigation」*フッターに表示
Mobile Navigation 」*ヘッダーに表示(スマホ表示のみ)
の3箇所に作成可能です。

このうち「Mobile Navigation 」は、特に必要無ければ作成しなくてもかまいません。
作成しない場合は、スマホ表示時は「Header Navigation」がヘッダーにハンバーガーメニューで表示されます。

当サイトのメニューの場合は、

Header Navigation
  • トップ:固定ページ
  • 業務内容:固定ページ
  • 料金:固定ページ
  • スタッフ紹介:固定ページ
  • セミナー情報:一覧ページ・カスタムリンク
  • 税理士ブログ:一覧ページ・カスタムリンク
  • お問い合わせ:固定ページ
Footer Navigation
  • プライバシーポリシー:固定ページ

と、しています。

「セミナー情報」「税理士ブログ」の一覧ページURL

ちなみに「Header Navigation」には「セミナー情報」と「税理士ブログ」の一覧ページへのリンクが入っています。

一覧ページのURLは、
パーマリンクを
「日付と投稿名」
「月と投稿名」
「投稿名」
この3パターンのいずれかで選択した場合、

サイトのURL/投稿タイプID/
となります。

当サイトの場合は、
セミナー情報
http://st03-demo.mokuren.ne.jp/wordpress/wp304/seminar/
税理士ブログ
http://st03-demo.mokuren.ne.jp/wordpress/wp304/blog/
です。

フッターの作成

次は「フッター」の作成です。
フッターはウィジェットで作ります。

WordPress管理画面より、
外観」⇒「ウィジェット

ウィジェットの設定画面が開きます。

このウィジェットエリアのうち、フッター系の3つを設定します。

フッターウィジェットエリア1

まず、このエリアには

VK プロフィール」のウィジェットを入れます。

「VK プロフィール」の設定は、

タイトル空欄にする
プロフィール画像ロゴ画像を入れる
プロフィールテキスト
 郵便番号・住所・電話番号・定休日、等を入れる

最後に「保存」ボタンをクリック。

すると、フッターの左側(PC表示の場合)に表示されます。

ちなみに、ビジネス用にSNSのアカウントを持っている人は、

この箇所を有効活用してもいいかもしれません。

例えばTwitterのページを登録すると、以下のようなリンク付きアイコンが表示されます。

フッターウィジェットエリア2

このエリアには

VK 最近の投稿」のウィジェットを入れます。

「VK 最近の投稿」の設定は、

タイトル⇒「セミナー情報
表示形式日付/カテゴリー/タイトル
表示する記事数3(*半角で)
表示したい記事タイプ⇒「セミナー情報

最後に「保存」ボタンをクリック。

すると、フッターの中央(PC表示の場合)に表示されます。

フッターウィジェットエリア3

このエリアには、上記「2エリア」と同様に

VK 最近の投稿」のウィジェットを入れます。

ここの「VK 最近の投稿」の設定は、

タイトル⇒「税理士ブログ
表示形式日付/カテゴリー/タイトル
表示する記事数3(*半角で)
表示したい記事タイプ⇒「税理士ブログ

最後に「保存」ボタンをクリック。

すると、フッターの右側(PC表示の場合)に表示されます。

これでフッターの作成は完了です。

CTA(Call To Action)の作成

最後に「CTA」を作成・設置します。

この箇所です。

全ページのコンテンツ下に配置されています。

「CTA」とは何か?

そもそも「CTA」とは何ぞや?
正式名称は「コールトゥアクション(Call To Action)」です。

WEBサイトやブログなどで、訪問者に「とってもらいたい行動に誘導」する仕掛けのことです。

よくあるのが、

  • お問い合わせページへの誘導リンク
  • 商品の購入
  • お試しセットの申込み
  • メルマガの登録
  • セミナーの申込み
  • 資料請求

ここらへんですね。

以前は、投稿ページのコンテンツ下のみに設置されていることが多かったのですが、最近では固定ページの方にも設置されるようになりました。

詳しくは下記を参照されてください。

CTA(Call To Action)の意味を理解してページの効果を上げる方法

このサイトのCTAの場合は、税理士事務所の業務内容などを説明した後に、
お気軽にお問い合わせください
と、リンクボタンでお問い合わせページに誘導。
そこからの顧客確保を意図しています。

ここはそれぞれのサイトの特性に合わせてリンク先を決めてください。

自社商品の販売ということでアマゾンや楽天の商品販売ページにつなげたり、メルマガの登録サイトにつなげたりと、工夫は自由自在です。

CTAの新規追加

では、具体的にCTAを作成していきます。

WordPress管理画面より
CTA」⇒「新規追加

設定画面を開くと、以下のようになってると思います。

「CTA Contents」は使わない

ちなみに設定画面下部には「CTA Contents」の箇所があります。

「CTA Contents」を使うと、CTAの作成が超簡単になるのですが、色の変更やパーツの配置が調整できないので当サイトでは使いません。

画面の邪魔になるので、「CTA Contents」の右上の「▲」マークをクリックして、折りたたんでおいてください。

ブロックエディターでCTAを作成

ここから通常のコンテンツと同様に、ブロックエディターでCTAを作成していきます。

ページ内のコンテンツを作るのと同じ要領で作っていきます。

タイトル⇒「CTA01」と記載。
(タイトルはサイトには表示されません)

その下の「」ボタンをクリック。
PR Content」ブロックを入れます。

こういう画面になるので

画像あらかじめ用意した画像を入れます
タイトル⇒「お気軽にお問い合わせください
本文電話番号と受付時間を入れます

そして右側のブロック設定欄から「ボタン設定

ボタンの文字⇒「メールはこちら
リンクURLお問合せページのURLを記入
ボタンの色カスタムカラーアクションカラー(#ee964b)

アイコン:文字の前⇒「アイコンを選択」をクリック

メールマークをクリック。

アイコン:文字の後⇒空欄にします

同じく右側のブロック設定欄から「レイアウト設定

レイアウトタイプ⇒「

「PR Content」ブロックをグループ化

さらに「PR Content」ブロックにて、

オプション⇒「グループ化」をクリック

これで「PR Content」ブロックがグループ化されます。

このグループ化したブロックを、右側のブロック設定欄にて

色設定


背景色カスタムカラー薄いアクションカラー(#fff7ef)

間隔

パディング20(*半角で)

で、画面の右上「公開」ボタンをクリック。

これでCTAの作成は完了。

何故わざわざ「グループ化」するかというと、「PR Content」ブロックでは背景色を設定できないからです。

グループ化することによって、それに一回り大きなブロックを被せて、そのブロックに背景色を付けたわけです。

CTAを設置

次に、各ページにCTAを設置します。

WordPress管理画面より、
EXUnit」⇒「メイン設定

「Call To Action」
(これが表示されてない場合は「その4」の VK All in One Expansion Unit の設定が間違っている可能性があります)

投稿CTA01
固定ページCTA01
セミナー情報CTA01
税理士ブログCTA01

最後に「変更を保存」をクリック。

すると、全ページにてページ下部にCTAが表示されました。

後は必要に応じて、各人の好みでCTAの前後に余白を入れて調整してください。

「CTA Contents」でCTAを入れた場合

ところで上記で、折りたたんで使わなかった「CTA Contents」ですが、これを使ってCTAを作成した場合、以下のような表示になります。

こちらの方が作成自体は超簡単なのですが、ちょっと地味です(^_^;)

やはりCTAはアクションカラーで目立たせたいので、当サイトでは使いませんでした。

ですが、簡単作成が好みの方はこちらを使ってみるのも良いかと思います。

CTAを使い分けるのも可

CTAは複数種類作成することが可能です。
ページの種類に応じてCTAを使い分けるのも良いかと思います。

例えば、CTAを
「CTA01」
「CTA02」
と、2つ作って

投稿ページは「CTA01」、固定ページは「CTA02」を使うなど。

また、CTAをブロックエディターで作成できるため、どういう内容にして、どこにリンクを貼るのか、そこらへんは自由自在です。

それぞれのサイトに合わせて、いろいろと工夫してみてください。

今回はここまで

今回は、
「メニュー」
「フッター」
「CTA」
を作成しました。

次回は、トップ以外の固定ページのコンテンツを作成します。
ここは簡潔に解説します。

ken
ここ3~4年ぐらいで、CTAを付けるサイトが激増しましたね。
関連記事
新:WordPressテーマ「Lightning」でサイト制作(その12)応用編・CSSカスタマイズ
新:WordPressテーマ「Lightning」でサイト制作(その11)各固定ページの作成
新:WordPressテーマ「Lightning」でサイト制作(その9)カスタム投稿の作成・他
新:WordPressテーマ「Lightning」でサイト制作(その8)続々続・トップページのコンテンツ作成
新:WordPressテーマ「Lightning」でサイト制作(その7)続々・トップページのコンテンツ作成
新:WordPressテーマ「Lightning」でサイト制作(その6)続・トップページのコンテンツ作成
新:WordPressテーマ「Lightning」でサイト制作(その5)トップページのコンテンツ作成
新:WordPressテーマ「Lightning」でサイト制作(その4)プラグインの設定
新:WordPressテーマ「Lightning」でサイト制作(その3)テーマの設定
新:WordPressテーマ「Lightning」でサイト制作(その2)プラグインのインストールとサイト構想
新:WordPressテーマ「Lightning」でサイト制作(その1)準備編
Lightning G3 :WordPressテーマ「Lightning」が大幅リニューアル!
テーマの知識が無いと困る!? 今後のWordPress制作
PRリンク

シェアしてね!