【2022年12月23日更新】「Lightning G3 クイックスタート」のアップデート（2022年12月20日）により、CTA機能の設定が変更されたため、記事の内容を修正しました。
上記に伴い、2022年12月20日以前にダウンロードしたデモサイトのデータをご利用の方は、CTA機能については ベクトレ　Lightning 基本設定解説 CTAの設定 をご参照ください。

この記事のレベル

初心者	（4.0）
重要度	（3.0）
難しさ	（2.0）

こんにちは、編集長のカワウソです！

「WordPressでホームページを作りたいけど、実際に何から始めればよいのか分からない……」とお悩みではありませんか？

そこで今回は、WordPressテーマ『Lightning（ライトニング）』で、ホームページを作る手順を全12回に分けて解説。

この第12回目の記事では、SNSへのリンクやCTAを作る方法を解説します。

この記事を読めば、WordPressのテーマ『Lightning』で、ぺージを作る方法が分かります。

実際に作りながら進めれば、『Lightning』はもちろん、WordPressの基本操作も覚えられるでしょう。他のテーマを利用する時にも役に立つため、ぜひ参考にしてください。

それではどうぞ！

先に作る完成形をイメージしよう

下記から完成イメージを確認してください。

今回は、トップページの下部にSNSへのリンクとCTAを作ります。また、サイトマップページも作成します。

WordPressのテーマには『Lightning（ライトニング）』を使用しています。
WordPressのテーマとは、ホームぺージのデザインプレート（雛形）のことです。

編集作業の前に必要な準備

まず、ページを編集する前の準備について解説します。

WordPressとLightningのインストール

前提として、以下の作業が完了しているかご確認ください。

前回の記事は、以下からご覧いただけます。

画像のダウンロード

CTAで使用している画像のサンプルファイルをご用意しました。見よう見まねで作ってみたい方は、ダウンロードしてご利用ください。

下記のリンクからダウンロードできます。ファイルはzip形式で圧縮されています。展開してからご利用ください。

画像提供元：Unsplash（アンスプラッシュ）

SNSとCTAの前知識

まず、『Lightning』のデモサイト のSNSとCTAについて、解説します。

こちらをクリック して、『Lightning』のデモサイトにアクセスしてください。

トップページのフッター上部には、以下の2つが表示されていますよね。

このSNSとCTAは、トップページだけでなく、他のぺージにも共通して表示されています。

仕組みとしては、推奨プラグイン『ExUnit（VK All in One Expansion Unit）』による、以下3つのCTA機能を使ってフッター上部に表示させていますよ。

サイドメニューのCTA

ExUnit > メイン設定 > Call To Action

固定ぺージ下部の「CTA設定」

※詳しい編集方法は、のちほど解説します。

ただ今回は、SNSを全ページに表示する必要がありません。
そのため、SNSはトップページだけに表示されるようにアレンジしてみますね。

完成形イメージ

CTAはユーザーをコンバージョンに導く役割があるため、そのまま全ぺージで表示されるようにします。

なお「CTA」のボタンには、以下2つのぺージへのリンクを設置します。

完成形イメージ

では、トップページのコンテンツの並び順で解説していきます。

トップページに【SNS】を作成

まずトップページに、下記のコンテンツを作成しましょう。

完成形イメージ

以上でトップページの編集は完了です！

CTAを作成して設置

次に、下記コンテンツを作成します。

完成形イメージ

ここでは、以下の順で作業します。

CTAを新規追加する

これで、CTAの新規追加は完了です。

作成したCTAに表示を切り替える

今作成したCTAに表示を切り替えます。

なお、CTAの機能については、『Lightning』の開発元が提供するオンライン学習サービス『ベクトレ』に解説動画があります。必要に応じて参考にしてください。

▶ ベクトレ　Lightning 基本設定解説 CTAの設定

サイトマップページを調整する

最後に、サイトマップページの調整をします。

まず、ホームページでサイトマップといえば、以下の3つがあります。

これから解説するのはサイトマップページのことです。

ホームぺージの構成図については以下の記事で詳しく解説しています。

サイトマップページへのリンクは、フッターのメニューにあります。クリックして確認してみましょう。

完成形イメージ

このサイトマップページは自動生成されます。

サイトマップページの左側は固定ぺージ一覧で、右側はお知らせ（カテゴリ＋タグ）です。

左側ついては、この時点では、各項目が完成後のサイトマップぺージで表示されている順番と異なって表示されているでしょう。

そのため、あとでそれぞれ順番を指定していきます。

サイトマップページ右側については、投稿一覧とカテゴリーへのリンクです。

この連載企画のなかの「お知らせ（ブログ）編」では、WordPressの「投稿」機能を利用してお知らせ記事を作成する手順を解説しました。

公開済みのお知らせ記事にカテゴリーが設定されていると、サイトマップページにカテゴリーが自動表示される仕組みとなっています。

※お知らせ記事ひとつひとつはサイトマップページに表示されません。
※タグはこの連載企画で利用しなかったため、表示されていません。

また、どこをどう設定すればサイトマップページが自動生成されるのかも確認してみましょう。

ページ上部の「固定ページを編集」をクリックします。

固定ページの本文欄は空です。

ページ下部にある「VK All in One Expansion Unit」をクリックして開き、中の「挿入アイテムの設定」をさらにクリックして開きます。

「HTMLサイトマップの表示」にチェックが入っています。

ここにチェックを入れることで、この固定ページにサイトマップが自動表示される仕組みとなっています。

これは、推奨プラグインの機能を利用しています。

確認が済んだら、ブラウザの戻るボタンをクリックして戻ってください。

それでは、固定ページ側を調整してみましょう。

固定ページの順序を調整する

サイトマップページでの固定ページの並び順は、ダッシュボードの固定ページ一覧の順が反映されます。

完成形イメージ

この記事では、WordPressの標準機能を利用して、固定ページ一覧の並び順を調整する方法を解説します。

まとめ

今回の記事では、『Lightning』を使って、SNSへのリンクやCTAを作る方法を解説しました。

また、サイトマップぺージの編集方法も解説したので、参考になったのではないでしょうか。

今回の記事で、連載企画「WordPressとLightningでホームページを自作する方法！」は終了です。

全12回にわたって『Lightning』と主にWordPressのブロックエディタの使い方をメインに解説しました。

「記事のとおりにやってみたらホームページができた！」となれば大変嬉しいです。この連載企画が少しでもお役に立ちますように。

不明点がある方は、ツイッターDM( @kawauso_xsv )までお気軽にどうぞ！

なお『Lightning』公式サイトには、『Lightning』に関するサポート情報を一覧で確認できるサポートページがあります。こちらもぜひご覧ください。

そのほか、『Lightning』の有料契約である『Vektor Passport（ベクトル パスポート）』については、以下の記事で詳しく解説しています。

サポートが充実したり、魅力的な機能が追加されたりするので、ぜひ契約を検討してみてください。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

※ 2024年10月時点、W3Techs調べ。

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！