WordPressでホームページを作る手順(Lightning ver.7対応)

WordPress個別サポート

WordPressでホームページを作成する手順を紹介します。WordPress初心者の方でも迷わないようにすべての手順について画面を掲載しています。

所要時間は1時間から2時間くらいでホームページのたたき台を作っていきます。本格的な学習に進む前に短時間でコツをつかみたい方におすすめです。作成するサイトのイメージは次のようになります。

WordPress+Lightningで作るホームページの例
WordPress+Lightningで作るホームページの例

作成するホームページのイメージビジネスサイトを構築できるテーマとして人気のLightningを使ってホームページのデザインを仕上げていきます。

まずは短時間でこのレベルのホームページまでを構築して一段落してからゆっくりカスタマイズのイメージをふくらませたりブログ記事などを書く体制を整えていきましょう。

WordPressによるホームページ作成講座も開講しております。先に受講してから復習用にこの記事を読んでいただくのも効果的です。ご検討ください。

検証に使った環境は次のとおりです。

この記事で使った環境
  • WordPressバージョン:WordPress 5.3
  • テーマ:Lightning 7.3

ホームページ作成に必要な準備

作業前にWordPressのインストールまでを完了してください。まだインストールしていない方や、よくわからないときは以下のページも参考にしてください。いずれのレンタルサーバーも無料で使える試用期間があります。

エックスサーバーでWordPressをインストールする方法
さくらインターネットでWordPressをインストールする方法

管理画面とサイトの確認

まずは、作業に使う管理画面(ダッシュボード)と作成するサイトを切り替える方法から見ていきましょう。
ダッシュボードとサイトとは
  • ダッシュボード --- ホームページ作成に使う管理画面のことです。
  • サイト --- 実際に作成するホームページのことです。
  1. 管理画面(ダッシュボード)の確認
    WordPressの管理画面(ダッシュボード)を開いてください。レンタルサーバーでWordPressをインストールした場合は一般的に「管理画面URL」「管理者ページURL」などのメニューから開けるようになっています。

    WordPressのダッシュボード(管理画面)
    WordPressのダッシュボード(管理画面)
    ダッシュボードのURLは「サイトアドレス+wp-admin」(例:http://example.com/wp-admin)です。このURLに直接アクセスしてダッシュボードを開くこともできます。
  2. サイトの表示
    ダッシュボード左上のサイト名にマウスオーバー(カーソルを重ねる)したときに表示される「サイトを表示」をクリックして、サイトを表示しましょう。

     「サイトを表示」をクリック
    「サイトを表示」をクリック
  3. テスト用の記事の確認
    インストール直後はサイトのトップページに「Hello world!」と表示されているはずです。これはテスト表示用のブログ記事です。

    テスト表示用の記事「Hello world!」
    テスト表示用の記事「Hello world!」
  4. ダッシュボードに戻る
    もう一度サイト名にマウスオーバーして表示される「ダッシュボード」をクリックするとダッシュボードに戻ることができます。

    ダッシュボードに戻る
    ダッシュボードに戻る
WordPressではダッシュボードで作業してサイトを確認し、またダッシュボードに戻って作業の繰り返しです。さっそくホームページ作成を始めましょう。

デザインの切り替え

サイトの中身を作る前にデザインを切り替えてみましょう。WordPressサイトのデザインを決めるテンプレートは「テーマ」とよばれています。好きなテーマを自由に選ぶことができますが、ここでは、ビジネスサイトを簡単に構築できることで大人気のテーマ「Lightning」を使います。
  1. 使用中のテーマの確認
    現在使用中のテーマを確認するため「外観」-「テーマ」メニューを開きます。

    「外観」-「テーマ」メニューへ
    「外観」-「テーマ」メニューへ

    左上にサムネイルが表示されているテーマが現在使用中のテーマです。ここではTwenty Twentyというテーマが使用中になっています。

    現在使用中のテーマ(デザインテンプレート)
    現在使用中のテーマ(デザインテンプレート)
  2. テーマの新規追加
    別のテーマ(デザインテンプレート)に切り替えるため、「新規追加」をクリックします。

    テーマの新規追加
    テーマの新規追加
  3. テーマの検索
    画面右側の「テーマを検索」からテーマを検索します。

    テーマの検索
    テーマの検索
  4. Lightningの検索
    ここではテーマにLightningを使いたいので「Lightning」(またはlightning)と入力すると、検索結果にLightningが表示されます。

    テーマ(Lightning)の検索結果
    テーマ(Lightning)の検索結果
  5. テーマのインストール
    見つかったテーマ「Lightning」にマウスオーバーして「インストール」をクリックします。

    テーマ(Lightning)のインストール
    テーマ(Lightning)のインストール
  6. テーマの有効化
    インストールが完了したら「有効化」をクリックします。これでサイトのテーマがLightningに切り替わります。

    テーマ(Lightning)の有効化
    テーマ(Lightning)の有効化

    すでにLightningがインストール済みの場合は「テーマのインストールに失敗しました。」と表示されます。その場合、「外観」-「テーマ」メニュー(1)を開いてインストール済みのLightningのサムネイルにマウスオーバーして「有効化」(2)をクリックします。

    インストール済みのLightningを有効化する
    インストール済みのテーマを有効化する場合
  7. 使用中のテーマの確認
    テーマを有効化した後、「外観」-「テーマ」を開くとテーマがLightning(1)に切り替わったことがわかります。

    使用中のテーマがLightningに切り替わっている
    使用中のテーマがLightningに切り替わっている

    同時に、テーマと一緒にプラグインをインストールするようにメッセージ(2)が表示されます。無視しても問題ありませんが、練習も兼ねてプラグインをインストールしてみましょう。

    プラグインとは拡張機能のことです。WordPressの機能を増やして使いやすくしたり、作業時の問題を解決できます。
  8. 推奨プラグインのインストール
    上記の(2)「プラグインのインストールを開始」をクリックすると、必須プラグインのインストール画面が開くので「インストール」をクリックします。

    プラグインのインストール
    プラグインのインストール
  9. プラグインの有効化
    インストールが完了したら必須プラグインのインストール画面に戻ります。

    プラグインインストール画面に戻る
    プラグインインストール画面に戻る

    「有効化」をクリックします。これでプラグインが使用可能になります。

    プラグインの有効化
    プラグインの有効化
  10. 切り替えたテーマの確認
    これで新しいテーマ「Lightning」への切り替えが完了しました。画面左上のサイト名にマウスオーバーすると表示される「サイトを表示」をクリックして雰囲気を確認しましょう。

    「サイトを表示」をクリック
    「サイトを表示」をクリック

    どうでしょうか。まだ初期状態ですが、なんとなくホームページができそうなイメージがわきませんか?

    テーマをLightningに切り替えた状態
    テーマをLightningに切り替えた状態
これで、デザインの切り替えが完了しました。続いて、サイトの中身を作っていきましょう。

ブログ記事(投稿)の作成

WordPressで作成できるページは主に2種類あります。1つはブログ記事(投稿)、もう1つは普通のページ(固定ページ)です。まずはブログ記事から作成してみましょう。
WordPressで作成する2種類のページ
  • 投稿 --- ブログ記事
  • 固定ページ --- ブログ記事ではない普通のページ(例:会社概要、サービス紹介)
  1. ブログ記事をメンテナンスする「投稿」メニュー
    ブログ記事を管理するメニューが「投稿」メニューです。新たなブログ記事を作成するにはダッシュボードに戻って「投稿」‐「新規追加」メニューをクリックします。

    「投稿」‐「新規追加」メニューをクリック
    「投稿」‐「新規追加」メニューをクリック
    「投稿」にマウスオーバーすると「新規追加」などのサブメニューが表示されます。いったん「投稿」をクリックして表示されたサブメニューを選んでも同じことです。
  2. 記事のタイトル・本文を入力
    開いた画面(投稿の編集画面)でブログ記事のタイトル(1)と本文(2)を入力します。

    投稿のタイトルと本文を入力
    投稿のタイトルと本文

    タイトル(1)と本文(2)を入力したイメージは次のようになります。

    投稿のタイトルと本文を入力
    投稿のタイトルと本文を入力
  3. 画像の追加
    本文は文章だけでなく画像や箇条書きなど複数のパーツ(ブロック)を組み合わせて構成することができます。試しに本文の下に画像を追加してみましょう。それには、画面上部のブロックの追加アイコン(ブロックの追加)をクリックします。

    ブロックの追加
    ブロックの追加

    「よく使うもの」の下にある「画像」をクリックします。

    画像ブロックを追加
    画像ブロックを追加

    「よく使うもの」に「画像」が見当たらない場合はブロック選択リストを下にスクロールして「一般ブロック」から「画像」を選択してください。

    「一般ブロック」から「画像」を選択
    「一般ブロック」から「画像」を選択
  4. 画像ファイルの選択
    画像ブロックが追加されるので「アップロード」をクリックして使用中のPCから適当な画像を選択しましょう。

    「アップロード」をクリック
    「アップロード」をクリック
    この画面に画像をドラッグアンドドロップすることもできます。
  5. 画像のアップロード
    PCから画像ファイルを選択(ダブルクリックまたは「開く」をクリック)すると、その画像がアップロードされます。

    画像のアップロード
    画像のアップロード

    アップロードが完了すると、タイトルや文章の下に画像が表示されます。

    本文に画像が追加される
    本文に画像が追加される
  6. 画像の設定
    画像ブロックの右側にあるサイドバーから画像のサイズなどを設定できます。

    画像の表示設定(代替テキストが重要)
    画像の表示設定(代替テキストが重要)
    設定項目の中で比較的重要なのは「ALTテキスト」(代替テキスト)(上記画像の下線部分)です。本来の機能は、何らかの事情で画像が表示されないときに代わりに表示される文字を入力しておく(例:先日のセミナーの様子)項目ですが、「重要」というのはSEO対策で必須の入力項目だからです。今すぐ理解する必要ありませんがサイト制作を進めていく過程で集客を意識するころに思い出してください。

    ブロックの順番を入れ替えるには、ブロック左上のハンドルをドラッグするか上下アイコンをクリックします。

    ブロックの順番を入れ替える
    ブロックの順番を入れ替える

    ブロックの削除、複製などは「詳細設定」(3点リーダー)から設定できます。

    ブロックの詳細設定
    ブロックの詳細設定
  7. 投稿一覧と一緒に表示される「アイキャッチ画像」
    投稿を作成する際、もう1つ重要な画像があります。「アイキャッチ画像」です。これは投稿一覧と一緒に表示される小さい画像です。次のようなイメージです。

    投稿一覧時に表示されるアイキャッチ画像
    投稿一覧時に表示されるアイキャッチ画像

    アイキャッチ画像を登録するにはサイドバー上部の「文書」をクリックし、下部の「アイキャッチ画像」をクリックしてメニューを開きます。

    「アイキャッチ画像」セクションを開く
    「アイキャッチ画像」セクションを開く
  8. アイキャッチ画像の設定
    「アイキャッチ画像を設定」をクリックして開いた画面から、「ファイルをアップロード」(1)をクリックして新たな画像をアップロードするか、「メディアライブラリ」(2)をクリックしてアップロード済みの画像(3)を選択します。

    アイキャッチ画像の選択
    アイキャッチ画像の選択
    どの画像をアイキャッチ画像に設定するかは自由です。投稿内で使っていない画像を選択しても問題ありません。

    画面右下の「アイキャッチ画像を設定」をクリックすると設定完了です。

    アイキャッチ画像を設定
    アイキャッチ画像を設定

    アイキャッチ画像を設定すると投稿の編集画面にサムネイルが表示されます。

    アイキャッチ画像の設定完了
    アイキャッチ画像の設定完了
  9. 投稿の公開
    投稿のタイトル・本文・アイキャッチ画像が設定できたら、ひとまず、画面右上の「公開する」ボタンをクリックして投稿を公開してみましょう。

    「公開する」をクリック
    「公開する」をクリック

    確認メッセージが表示され、「公開」をクリックすると投稿が公開されます。

    投稿の公開
    投稿の公開
    いきなり公開したくないときは「公開する」ボタンの左にある「下書きとして保存」ボタンをクリックしましょう。投稿は保存されますが公開はされません。
  10. 投稿の確認
    投稿を公開できたら、「投稿を表示」をクリックして投稿を確認しましょう。

    「投稿を表示」をクリック
    「投稿を表示」をクリック

    画面に投稿が表示されます。

    投稿が表示される
    投稿が表示される
  11. 投稿一覧の確認
    画面上部の「HOME」をクリックしてトップページを見てみましょう。

    「HOME」をクリックしてトップページを表示
    「HOME」をクリックしてトップページを表示

    トップページの下にある投稿一覧(ブログ)を見ると、アイキャッチ画像と共に投稿のタイトルや本文の抜粋が表示されているはずです。

    アイキャッチ画像付きで投稿が一覧表示される
    アイキャッチ画像付きで投稿が一覧表示される

    まだ1件書いただけなので雰囲気が出ませんが、何件も投稿を作成していくと新しい順に投稿が一覧表示されることがわかります。

    投稿は新しい順に一覧表示される
    投稿は新しい順に一覧表示される

これで投稿ができました。あとは文章を考えたり画像を作成してコツコツと記事を書いていきましょう。

テスト表示用の投稿「Hello world!」などの不要な投稿は「投稿」‐「投稿一覧」メニューでタイトルにマウスオーバーして「ゴミ箱」をクリックすれば削除できます。

テスト投稿「Hello world!」の削除
テスト投稿「Hello world!」の削除

カテゴリーの作成

ブログ記事が増えてくるとカテゴリーで分類したくなります。そこで、投稿を分類するカテゴリーを作成しましょう。
  1. カテゴリーを作成する「投稿」‐「カテゴリー」メニュー
    カテゴリーを作成するため、画面左上の「管理画面」をクリックしてダッシュボードに戻って「投稿」‐「カテゴリー」メニューを開きましょう。

    「投稿」‐「カテゴリー」メニューを開く
    「投稿」‐「カテゴリー」メニューを開く
  2. 既存カテゴリーの編集
    開いた「カテゴリー」メニューには、すでに「未分類」というカテゴリーが作成されています。この「未分類」をクリックしてカテゴリー名を変更しましょう。「未分類」にマウスオーバーして表示される「編集」をクリックしても大丈夫です。

    既存の「未分類」カテゴリーをクリック
    既存の「未分類」カテゴリーをクリック
  3. 「未分類」カテゴリーの変更
    カテゴリーの名前(1)とスラッグ(2)が共に「未分類」になっているので任意の名前に変更しましょう。名前(1)は日本語(例:最新情報)、スラッグ(2)はアルファベット(例:news)で入力します。英単語でなくても大丈夫です。名前は画面に表示され、スラッグはURLの一部(例:http://example.com/category/news)になります。

    「未分類」カテゴリーの変更
    「未分類」カテゴリーの変更
    カテゴリーはブログ記事のジャンルのことです。たとえば、お知らせ、イベント情報、キャンペーン情報、新商品情報、おすすめ商品などです。
  4. カテゴリーの更新
    カテゴリー名とスラッグを入力したら、画面下の「更新」ボタンをクリックします。「未分類」カテゴリーの名前とスラッグが変更されます。

    カテゴリー名とスラッグが変更される
    カテゴリー名とスラッグが変更される
  5. カテゴリーリンクの色分け
    カテゴリー編集メニューについて他の項目(「親」「説明」)の用途は今は考えなくても大丈夫ですが、カテゴリーリンクを色分けしたければ「色」で設定しておくと良いかもしれません。

    カテゴリーリンクを色分けできる
    カテゴリーリンクを色分けできる
  6. 新たなカテゴリーの追加
    ついでに、「新規カテゴリーを追加」から新たなカテゴリーを追加してみましょう。名前(1)は日本語で、スラッグ(2)は英数字で入力します。

    新たなカテゴリーの追加
    新たなカテゴリーの追加
    2つ以上の単語でスラッグを入力する場合はハイフンで区切ります。たとえば、「event-info」や「customer-voice」などです。
  7. 追加されたカテゴリーの確認
    入力できたら、画面を下にスクロールして「新規カテゴリーを追加」ボタンをクリックすると新たなカテゴリーが追加されます。

    追加されたカテゴリー
    追加されたカテゴリー
    カンの良い方は「最新情報」カテゴリーにチェックボックスがないことに気づいたかもしれません。これは、最初から存在するカテゴリーは削除できないことを示しています。
  8. カテゴリーを指定したブログ記事の作成
    カテゴリーを選んでブログ記事を書く練習をしてみましょう。それには、「投稿」‐「新規追加」メニューを開いて投稿のタイトル・本文・アイキャッチ画像などを設定し、「文書」タブを開いて画面下から任意のカテゴリーをチェックします。

    投稿のカテゴリーをチェック
    投稿のカテゴリーをチェック

    あとは通常通り「公開する」ボタン(および「公開」ボタン)をクリックすれば完成です。

  9. 投稿のカテゴリーの確認
    「投稿を表示」などをクリックして、公開した投稿を表示してみましょう。選択したカテゴリーのリンクが表示されるはずです。クリックすると、そのカテゴリーの記事を一覧表示できる仕組みです。

    投稿のカテゴリーの確認
    投稿のカテゴリーの確認
    カテゴリーリンクが表示されるかどうかはテーマ(デザインテンプレート)によります。これはLightningの例です。
投稿をカテゴリーで整理できれば、ひとまずブログとしては十分です。続いて、ブログ記事ではない「普通のページ」を作りましょう。

普通のページ(固定ページ)の作成

WordPressで作成できる2種類のページのうちブログ記事ではない「普通のページ」(例:会社概要、商品紹介)を作りましょう。
  1. 「普通のページ」を作成する「固定ページ」メニュー
    WordPressで作成する「普通のページ」は「固定ページ」とよばれます。ダッシュボードに戻って「固定ページ」‐「新規追加」メニューを開いて普通のページを作成しましょう。

    「固定ページ」‐「新規追加」メニューへ
    「固定ページ」‐「新規追加」メニューを開く
  2. 固定ページのタイトル・本文の入力
    固定ページ作成画面の使い方は基本的に投稿と同じです。固定ページとして作成したいページのタイトル(例:会社概要)(1)を入力し、本文(2)を組み立てます。

    固定ページのタイトルと本文を入力
    固定ページのタイトルと本文を入力
    固定ページのタイトル候補をリストアップしておきます。
    ・会社概要・所在地・ごあいさつ・会社の歴史
    ・商品紹介・商品1・商品2
    ・サービス紹介・サービス1・サービス2
    ・料金表・お問い合わせ・よくある質問・プライバシーポリシー
  3. 表(テーブル)ブロックの追加
    投稿作成の説明では通常の文章(段落ブロック)や画像ブロックを追加する方法を紹介したので、ここでは会社概要などで役立つ表ブロックを追加してみます。それには、ブロックの追加(ブロックの追加)をクリックして、「フォーマット」から「表」を選択します。

    表ブロックの追加
    表ブロックの追加

    続いて開く設定画面で表の列数と行数を選択(1)し、「表を作成」(2)をクリックします。列数や行数は後で変更できるので、適当でも構いません。

    作成する表の設定
    作成する表の設定

    空の表が追加されるのでデータを入力しましょう。会社情報や料金表など表形式で見せたいときに活用できます。

    表データの入力
    表データの入力

    表の列や行を追加したり削除するには表の上にあるメニューをクリックします。

    列や行の追加・削除
    列や行の追加・削除

    表ブロックの使い方について詳しくは以下のページも参考にしてください。
    テーブル(表)を作る方法

  4. ページのURL(パーマリンク)の変更
    現状では固定ページのURLは「http://example.net/会社概要」のように日本語が混じった状態になってしまうので、「http://example.net/company」のようにアルファベットに変更しておくと便利です。それには、いったん「下書きとして保存」をクリックしてページを保存します。

    ページを下書きとして保存
    ページを下書きとして保存

    タイトルの枠をクリックするとパーマリンク(このページのURL)が表示されます。このURLを変更するため「編集」をクリックします。

    パーマリンクの「編集」をクリック
    パーマリンクの「編集」をクリック

    任意の英数字(ここでは「company」)を入力(1)して「保存」ボタン(2)をクリックします。これにより、パーマリンク(ページのURL)が「http://example.net/company/」のようになります。

    ページのURL(パーマリンク)の変更
    ページのURL(パーマリンク)の変更
  5. 固定ページの公開
    完了後、画面右上の「公開する」ボタン(および「公開」ボタン)をクリックして固定ページを公開しましょう。

    完成したら「公開」ボタンをクリック
    完成したら「公開する」ボタンをクリック
  6. 固定ページの表示
    「固定ページを表示」をクリックして固定ページを表示してみましょう。

    固定ページを表示する
    固定ページを表示する
  7. 表示された固定ページ
    作成した固定ページが表示されます。

    表示された固定ページ
    表示された固定ページ
    「なぜ表に枠線が付かないのか」「なぜタイトルがセンタリングされてしまうのか」などデザインについて今は気にしない方がよいでしょう。時間が経てばわかってくるので、今はコンテンツ制作に集中しましょう。
ここまで、サイトの中身になる投稿や固定ページを作成しました。続いて、作成したコンテンツを表示するためのメニューを作っていきましょう。

メインメニュー(ナビゲーション)の作成

作成した固定ページやカテゴリーはメニューに整理してナビゲーションを構成することができます。ここまで完了すれば、ホームページらしい雰囲気が出てきます。

画面右上にメニューを設置
画面右上にメニューを設置

メニューに固定ページを追加

  1. テスト用の固定ページの準備
    メニューの雰囲気がわかるように、ダッシュボードに戻って「固定ページ」‐「新規追加」メニューから固定ページを何ページか準備しておきましょう。テスト用なので本文は空で構いません。タイトルを入力し、パーマリンクを英数字に変更するだけで大丈夫です。

    メニュー作成用に固定ページを準備
    メニュー作成用にタイトルだけの固定ページを準備
    作成した固定ページは「固定ページ」‐「固定ページ一覧」メニューで確認できます。
    固定ページのタイトル候補をリストアップしておきます。
    ・会社概要・所在地・ごあいさつ・会社の歴史
    ・商品紹介・商品1・商品2
    ・サービス紹介・サービス1・サービス2
    ・料金表・お問い合わせ・よくある質問・プライバシーポリシー

    「サンプルページ」など不要なページを削除したい場合は、ページタイトルにマウスオーバーして「ゴミ箱」をクリックします。

    不要なページを削除
    不要なページを削除
  2. オリジナルメニューを作成する「外観」-「メニュー」
    テスト用の固定ページを何ページか準備できたら、オリジナルメニューを作成するため「外観」-「メニュー」メニューを開きます。

    「外観」-「メニュー」へ
    「外観」-「メニュー」へ
    自分で作るオリジナルメニューは「カスタムメニュー」とよばれることもあります。また、ホームページ上部にある全ページ共通のメニューは「グローバルメニュー」や「グローバルナビゲーション」といいます。
  3. メニュー名の入力
    任意のメニューの名前(1)を入力(例:メインメニュー・ヘッダーメニューなど)し、「メニューを作成」ボタン(2)をクリックします。

    新たなメニューの作成
    新たなメニューの作成
    メニュー名はホームページ上には表示されません。「menu1」や「メニュー1」「グローバルナビゲーション」など自由な名前で大丈夫です。

    すでに作りかけのメニューが表示されている場合は「新しいメニューを作成しましょう」をクリックしてゼロからメニューを作成しましょう。

    新規メニューを作成
    ゼロから新しいメニューを作成する場合
  4. 固定ページをメニューに追加
    メニューに追加したい固定ページ(1)をチェックして、「メニューに追加」(2)をクリックします。

    固定ページをメニューに追加
    固定ページをメニューに追加
    このページリストに表示されるのは作成済み・公開済みのページのみです。作成したはずのページがリストに見当たらない場合、「すべて表示」をクリックしてみてください。

    メニュー構造の下に固定ページが追加されます。メニューに表示されるページです。

    メニューに追加された固定ページ
    メニューに追加された固定ページ
  5. 表示順の変更
    追加された固定ページはマウスで上下に移動して表示順を変更することができます。最も上の項目がメニューの左端に表示されます。

    メニューの表示順の変更
    メニューの表示順の変更
  6. ドロップダウンの設定
    親子関係(ドロップダウン)にしたいメニューは、少し右にドラッグしてドロップします。この例では、「会社概要」にカーソルを合わせると「アクセス」が表示されるドロップダウンメニューになります。

    ドロップダウンメニューの設定
    ドロップダウンメニューの設定

    ドロップダウンメニューの動作イメージは次のようになります。親項目(会社概要)にカーソルを合わせると子項目(アクセス)が表示される仕組みです。

    ドロップダウンメニューの動作イメージ
    ドロップダウンメニューの動作イメージ(会社概要/アクセス)

    ドロップダウンメニューの典型的の活用例は、サービス紹介にマウスオーバーすると具体的な商品やサービスが表示されるメニューです。

    ドロップダウンメニューの活用例
    ドロップダウンメニューの活用例(サービス紹介/具体的なサービス)

    この場合、「サービス紹介」ページだけではなく、具体的なサービスのページ(例:Excel講座、Access講座、サービスA、サービスBなど)を作成(公開)してから作業する必要があります。

    ドロップダウンメニューの色は「外観」-「カスタマイズ」メニューの「Lightningデザイン設定」で変更できます。

    ドロップダウンメニューの色設定
    ドロップダウンメニューの色設定

    「キーカラー」がマウスオーバー時の色、「キーカラー(暗)」がメニューの色になりますが、これらの色設定はサイト全体の色設定(例:ページタイトルの背景色)と連動しているので注意してください。

  7. メニューの表示位置の設定
    このメニューを表示する位置(ヘッダー・フッターなど)を設定します。それには、画面を下にスクロールして「メニューの位置」のチェックボックスから選択します。ここではヘッダーのメニューとして表示したいので「Header Navigation」をチェックします。

    メインメニューの表示位置の選択
    メインメニューの表示位置の選択
    メニューを表示できる場所(メニューの位置)はテーマによって異なります。Lightningではヘッダーとフッターに表示可能ですが、フッターメニューのないテーマもあります。
  8. メニューの保存
    作業が完了したら「メニューを保存」ボタンをクリックします。

    メニューの保存(完成)
    メニューの保存(完成)
  9. メニューの確認
    これでメニューは完成です。サイトを表示してメニューを確認しましょう。

    作成されたメインメニュー
    作成されたメインメニュー

メニューにカテゴリーを追加

  1. メニューには投稿のカテゴリーなども追加できます。もう一度、ダッシュボードの「外観」-「メニュー」メニューに戻って、固定ページのチェックボックスの下に見える「カテゴリー」(1)をクリックしましょう。メニューに追加したいカテゴリー(2)をチェックして「メニューに追加」(3)ボタンをクリックします。
    カテゴリーをメニューに追加
    カテゴリーをメニューに追加
  2. チェックしたカテゴリーがメニューに追加されます。
    メニューに追加されたカテゴリー
    メニューに追加されたカテゴリー
  3. メニューを保存してサイトを表示してみましょう。メニューにカテゴリーが追加されています。クリックしたカテゴリーの投稿のみが表示される仕組みです。
    メニューにカテゴリーが追加される
    メニューにカテゴリーが追加される

メニューにリンクを追加

  1. メニューには外部サイトへのリンクも追加できます。もう一度、ダッシュボードの「外観」-「メニュー」メニューに戻って、固定ページのチェックボックスの下に見える「カスタムリンク」(1)をクリックしましょう。メニューに追加したいリンクのURL(2)とリンク文字列(3)(リンクに表示する文字)を入力して「メニューに追加」(4)ボタンをクリックします。
    リンクの追加
    リンクの追加
  2. メニューにリンク項目が追加されます。
    リンクが追加される
    リンクが追加される
  3. リンクを新たなウィンドウで開く設定
    外部サイトへのリンクは他のメニュー項目と違い、クリック時に新たなページを開きたいところです。同じページで外部リンクを開くと、お客様がサイトから出ていってしまいます。そこで、画面を一番上までスクロールして右上の「表示オプション」をクリックし、「リンクターゲット」をチェックします。

    「表示オプション」‐「リンクターゲット」をチェック
    「表示オプション」‐「リンクターゲット」をチェック
  4. 新たなウィンドウで開くように設定
    画面を下にスクロールしてメニューに追加したリンク項目の右端にある「▼」をクリックして設定画面を開き、「リンクを新しいタブで開く 」をチェックします。これでリンク項目のクリック時に新たなタブが開くようになります。

    リンクを新たなウィンドウで開く設定
    リンクを新たなウィンドウで開く設定

    設定後、メニューを保存してサイト表示に戻り、追加されたリンクの動作を確認しましょう。

    外部サイトへのリンク
    外部サイトへのリンク

「ブログ」メニューの作成

クリックすると全カテゴリーの投稿が一覧される「ブログ」メニューを作るには次のような作業が必要です。

クリックすると投稿が一覧表示される「ブログ」メニュー
クリックすると投稿が一覧表示される「ブログ」メニュー
  1. 固定ページで「トップページ」と「ブログ」を作成
    「固定ページ」‐「新規追加」メニューから、「トップページ」と「ブログ」というページを作成しておきます。

    「トップページ」と「ブログ」というページを作成
    「トップページ」と「ブログ」というページを作成
    本文は空で大丈夫です。

    その際、ブログのパーマリンクは「http://example.net/blog」のように英数字に直しておきましょう。

    ブログページのパーマリンクは「blog」に
    ブログページのパーマリンクは「blog」に
  2. 固定ページ「ブログ」をメニューに追加
    「外観」-「メニュー」メニューを開いて、固定ページの「ブログ」をメニューに追加します。

    固定ページ「ブログ」をメニューに追加
    固定ページ「ブログ」をメニューに追加

    先に追加したカテゴリーメニューと共にドロップダウンメニューにしておくと便利です。「ブログ」では全カテゴリーの新着情報、ドロップダウンメニューでは個別のカテゴリー記事が一覧表示される仕組みです。

    ブログとカテゴリーメニューをドロップダウンメニューに
    ブログとカテゴリーメニューをドロップダウンメニューに
  3. メニューを確認
    メニューを保存して、「ブログ」がメニューに追加されたことを確認します。まだ設定していないのでクリックしても投稿は一覧表示されません。

    グローバルメニューに「ブログ」が追加される
    グローバルメニューに「ブログ」が追加される
  4. 「設定」‐「表示設定」メニューでホームページの表示を設定
    「設定」‐「表示設定」メニューを開いて「ホームページの表示」で「固定ページ」を選択します。

    「ホームページの表示」を「固定ページ」に
    「ホームページの表示」を「固定ページ」に
  5. ホームページと投稿ページを選択
    「ホームページ」で「トップページ」を選択、「投稿ページ」(投稿が一覧されるページ)で「ブログ」を選択します。

    「ホームページ」と「投稿ページ」を選択
    「ホームページ」と「投稿ページ」を選択

    「変更を保存」ボタンをクリックすると設定完了です。

  6. 「ブログ」メニューの確認
    「ブログ」メニューをクリックしてみましょう。カテゴリーに関係なく、すべてのカテゴリーの投稿が表示されるはずです。

    全カテゴリーの投稿が表示される「ブログ」メニュー
    全カテゴリーの投稿が表示される「ブログ」メニュー
これでメニュー(カスタムメニュー)は完成です。続いてサイト設定などを進めていきます。

サイト設定の変更

ここまでの作業で投稿や固定ページを作成してメニューに整理したので見た目はホームページらしくなります。ただし、いくつか変更した方が良い項目があるので見ていきましょう。すでに設定済みの場合は作業不要です。

サイトURL(パーマリンク)の設定

    1. 現在のURLの確認
      作成済みの投稿を見てURLをチェックしましょう。「?」が付いていてブログっぽいURLになっている場合もあります。

      現在の投稿のURLをチェック
      現在の投稿のURLをチェック

      固定ページのURLも見てみましょう。「?」が付いていて「会社概要」ページのために入力したスラッグ「company」が反映されていない場合もあります。

      現在の固定ページのURL例(スラッグが反映されていない)
      現在の固定ページのURL(スラッグが反映されていない)

こうしたURLの設定は変更することができます。

  1. URLの設定を変更する「設定」‐「パーマリンク設定」メニュー
    各ページのURL設定を変更するため「設定」‐「パーマリンク設定」メニューを開きます。

    「設定」‐「パーマリンク設定」メニューへ
    「設定」‐「パーマリンク設定」メニューへ
  2. パーマリンク設定の変更
    「パーマリンク設定」の「共通設定」が「基本」になっている場合、「http://example.com/?p=123」のようにブログっぽいURLになってしまいます。そこで、「基本」以外(例:数字ベース)(1)に切り替えます。

    パーマリンク設定を「デフォルト」以外に
    パーマリンク設定を「デフォルト」以外に
    「数字ベース」がベストというわけではありません。あくまで初期設定の「基本」から変更する例として紹介しています。
  3. 変更したパーマリンク設定の保存
    設定を保存するため、画面を下にスクロールして「変更を保存」ボタンをクリックします。

    パーマリンク設定の保存
    パーマリンク設定の保存
  4. 変更後のパーマリンクの確認
    サイトを表示して個別の投稿を確認してみましょう。URLから「?」が消えて「example.net/archives/16」のようになっているはずです。

    URL設定の変更後
    URL設定の変更後

    固定ページも表示して確認しましょう。URLから「?」が消えて固定ページの作成時に入力した文字が反映されて「example.com/company」のようになります。

    固定ページのパーマリンク設定が反映される
    固定ページのパーマリンク設定が反映される

これでサイトのURL設定は完了です。

サイト名とキャッチフレーズの設定

作成中のホームページのタイトル(サイト名)とサイトの説明(キャッチフレーズ)の設定を確認しておきましょう。
  1. 「設定」‐「一般」メニューへ
    サイト名とキャッチフレーズを設定するため「設定」‐「一般」メニューを開きます。

    「設定」‐「一般」メニューへ
    「設定」‐「一般」メニューへ
  2. サイトのタイトル(1)はWordPressをインストールしたときに入力したホームページの名前です。問題なければそのままでも構いませんが集客やSEOを意識するなら業種や地域名を入れておく(例:サンプルPC教室【銀座・パソコン教室】)と検索で引っ掛かりやすくなります。
    キャッチフレーズ(2)はサイトの簡単な説明ですが初期設定では「Just another WordPress site」になっています。テーマによって使われる場所が異なりますが、ひとまず適当な文言に変更しておきましょう。

    サイト名とキャッチフレーズの設定
    サイト名とキャッチフレーズの設定
    キャッチフレーズの下にあるWordPressアドレスとサイトアドレス(3)の2つは絶対にお試しで変更しないでください。トラブルが起きる場合があります。

サイドバー(ウィジェット)の設定

全ページの右(または左)には新着情報やバナーリンクなどを設置できます。この場所は「サイドバー」(ウィジェット)とよばれ、「外観」-「ウィジェット」メニューで設定します。

アイデア次第で活用できる「サイドバー」
アイデア次第で活用できる「サイドバー」

サイドバー、トップページ、フッターの各ウィジェットの設定方法を説明します。

サイドバー(ウィジェットメニュー)の使い方

  1. サイドバー(ウィジェット)設定画面を開く
    サイドバーを設定するため、「外観」-「ウィジェット」メニューを開きます。

    「外観」-「ウィジェット」メニューへ
    「外観」-「ウィジェット」メニューへ
  2. ウィジェットメニューの構成
    ウィジェットメニューは左側が使用可能なパーツ(ウィジェット)、右側がパーツを設置する場所(ウィジェットエリア)という構成になります。

    ウィジェット設定画面の構成
    ウィジェット設定画面の構成
  3. ウィジェットの設置
    画面左のパーツを画面右のウィジェットエリアにドラッグアンドドロップしてサイドバーの表示内容を組み立てていきます。以下の例では新着情報を表示する「VK最新記事」ウィジェットを「サイドバー(共通上部)」に設置しています。

    ウィジェットを設置
    ウィジェットを設置
    「サイドバー(共通上部)」とは、全ページの上の方に表示されるサイドバーという意味です。「サイドバー(トップページ)」のように特定のページのみに表示されるサイドバーもあります。サイドバーの数や名称はテーマによって異なります。

    設置後のイメージは次のようになります。特別な設定をしなくても新着情報が表示される状態になっていますが、▼をクリックして設定画面を開いて表示内容を設定することもできます。

    ウィジェットの設置後
    ウィジェットの設置後
  4. サイドバーの確認
    サイトを表示してサイドバーに設置したパーツ(最新記事の表示)を確認しましょう。

    サイドバーの表示確認
    サイドバーの表示確認
  5. サイドバーウィジェットの削除
    不要なサイドバーウィジェットは設定画面を開いて削除できます。またはウィジェットを画面左にドラッグして画面上部に「無効化」のようなメッセージが表示されたタイミングでドロップしても消えます。

    ウィジェットの削除
    ウィジェットの削除

    WordPressのインストール直後などは不要なウィジェットが残っている場合があるので削除しておきましょう。たとえば、この記事を読んでWordPressを始めた場合、「フッター上部」に「アーカイブ」「カテゴリー」「メタ情報」が残っているかもしれません。これらは不要なので削除しましょう。

    不要なウィジェットを削除
    不要なウィジェットを削除

トップページウィジェットの設定

ウィジェットメニューではサイドバーだけでなくトップページやフッターなども設定できます。ただし、どの部分をウィジェットで設定できるかはテーマによって異なります。
  1. トップページに新着情報を表示
    「外観」-「ウィジェット」メニューを開いて、新着情報を表示するウィジェットをトップページに設置します。それには、「LTGコンテンツエリア投稿ウィジェット」を「トップページコンテンツエリア上部」にドラッグアンドドロップします。

    トップページに新着情報を設置
    トップページに新着情報を設置
  2. 表示内容の設定
    設置したウィジェットは初期設定のままでも新着情報として機能しますが、表示内容を設定することもできます。

    LTG コンテンツエリア投稿ウィジェット
    LTG コンテンツエリア投稿ウィジェット
    LTG コンテンツエリア投稿ウィジェットの表示設定
    • 表示形式(1) --- 画像付きかシンプルなタイトル一覧か
    • タイトル(2) --- 「最新の記事」「新着情報」などを入力
    • 表示件数(3) --- 投稿の表示件数
    • カスタム投稿タイプ/カスタム分類(4) --- 表示を絞り込みたい場合

    (4)についてはサイト制作に慣れてきて「カスタム投稿タイプ」や「カスタム分類」の意味がわかったら活用してみましょう。今は「新着情報を絞り込める」くらいの理解で大丈夫です。

フッターウィジェットの設定

全ページの最下部に表示されるフッターウィジェットを設定してみましょう。使い方は自由ですが、ここでは3つのフッターに会社情報(1)、地図(2)、運営者プロフィール(3)を設置します。
フッターウィジェットの設定例
フッターウィジェットの設定例
  1. 会社情報の設置
    左側のフッターに会社情報を入力するためテキストウィジェットをフッターウィジェットエリア1に追加します。ドラッグアンドドロップするには距離が遠いので、画面左下にあるテキストウィジェット(1)をクリック、フッターウィジェットエリア1を選択(2)、「ウィジェットを追加」(3)をクリック、の方法で設置した方が楽です。

    テキストウィジェットの設置
    テキストウィジェットの設置

    選択したテキストウィジェットにタイトル(1)、本文(2)を入力し、「保存」ボタン(3)をクリックすると設定完了です。ここでは会社情報を入力しましたが使い方は自由です。

    テキストウィジェットの設定
    テキストウィジェットの設定

    サイトを表示してフッターを確認しましょう。

    フッターに設置された会社情報
    フッターに設置された会社情報
  2. Googleマップの設置
    フッターの中央(フッターウィジェットエリア2)に会社の地図を設置してみましょう。それにはGoogleマップのサイトを開き、目的の住所を入力します。

    Googleマップで住所を入力
    Googleマップで住所を入力

    地図が表示されます。

    目的の住所をGoogleマップで開く
    目的の住所をGoogleマップで開く

    地図の左から「共有」メニューをクリックします。

    地図の共有
    地図の共有

    「地図を埋め込む」をクリックします。

    「地図を埋め込む」をクリック
    「地図を埋め込む」をクリック

    「<iframe…」のHTMLコードをコピーします。

    GoogleマップのHTMLをコピー
    GoogleマップのHTMLをコピー

    このコードをウィジェットにペーストします。それには、WordPressのダッシュボード(「外観」-「ウィジェット」メニュー)に戻り、カスタムHTMLウィジェットをフッターウィジェットエリア2に設置します。

    カスタムHTMLウィジェットを設置
    カスタムHTMLウィジェットを設置

    設置されたウィジェットにGoogleマップのHTML(1)をコピーペーストして「保存」ボタン(2)をクリックします。

    GoogleマップのHTMLをコピーペースト
    GoogleマップのHTMLをコピーペースト

    サイトを表示してフッターを確認しましょう。

    フッターに地図が表示される
    フッターに地図が表示される
  3. 運営者プロフィールの設置
    フッターの右側(フッターウィジェットエリア3)に運営者プロフィールを設置してみましょう。それには、VKプロフィールウィジェットをフッターウィジェットエリア3に追加します。

    プロフィールウィジェットの設置
    プロフィールウィジェットの設置
    「VKプロフィール」がない場合、推奨プラグイン(VK All in One Expansion Unit)がインストールされていないことが考えられます。「3 デザインの切り替え」まで戻ってインストールしてみてください。

    画像を追加したり、プロフィール文を入力して「保存」ボタンをクリックすると設定完了です。

    プロフィールウィジェットの設定
    プロフィールウィジェットの設定

    サイトを表示してフッターを確認しましょう。

    運営者プロフィールが表示される
    運営者プロフィールが表示される
ここまでの作業でコンテンツ(ページ・メニュー・ウィジェット)の作り方を説明しました。各ページの中身は時間をかけて構想を練りながら作り込んでください。ここからはサイトのデザインを設定していきます。

デザインの設定

Lightningでは「外観」-「カスタマイズ」メニューからデザインをカスタマイズできます。すべて紹介できませんが主なパーツの設定方法を説明します。

ヘッダーロゴ画像

「外観」-「カスタマイズ」-「Lightningデザイン設定」メニューの「ヘッダーロゴ画像」から、画面上部に表示するロゴ画像を設定できます。ロゴ画像の推奨サイズは幅280px、高さ60pxです。これと異なるサイズでも表示可能ですが縮小表示される場合があります。

ヘッダーロゴ画像の設定
ヘッダーロゴ画像の設定

表示結果は次のようになります。

ヘッダーロゴの表示結果
ヘッダーロゴの表示結果

スライドショー

「外観」-「カスタマイズ」-「Lightningトップページスライドショー」メニュー、トップページに表示するスライドショーを設定できます。

スライド画像は5枚(スライド[1]~スライド[5]まで)、PCとモバイルで別々に設定できます。スライドショーではなく静止画像にしたい場合は、スライド[1]のみを設定([2]~[5]の画像は削除)してください。

スライドショー画像の設定
スライドショー画像の設定

初期設定ではスライドショー画像に重ねる文字が設定されているので、変更するか不要であれば削除しましょう。

スライドショーに重ねる文字
スライドショーに重ねる文字

トップページPRブロック

「外観」-「カスタマイズ」-「LightningトップページPR Block」メニューではトップページに3つの横並びブロックを設置できます。サービスページへの誘導など、使い方はアイデア次第です。タイトル、説明文を入力、必要に応じてリンク先を設定するだけで使え、アイコンは変更できます。

トップページのPRブロック
トップページのPRブロック

アイコンを変更するには、「Icon List」をクリックしてアイコンのサイトを開きます。

「Icon list」をクリック
「Icon list」をクリック

開いたアイコンのサイト(Font Awesome)から、使いたいアイコンをクリックします。

使うアイコンをクリック
使うアイコンをクリック

画面上部からアイコンのHTMLをコピーします。

アイコンのHTMLをコピー
アイコンのHTMLをコピー

WordPressのダッシュボードに戻り、既存のアイコンのコード(例:fas fa-check)を上記のHTMLに置き換えます。

アイコンのHTMLをコピーペースト
アイコンのHTMLをコピーペースト

「class="???"」の「???」の部分のみを残して他の文字を削除します。

アイコンのクラス名を残す
アイコンのクラス名を残す

アイコンが切り替わります。

アイコンが変更される
アイコンが変更される

「公開」ボタンをクリックすると設定完了です。

PRブロックが不要の場合は画面上部の「PR Blockを表示する」のチェックを外します。

アイコンの代わりに画像を使いたいとか、3つだけでなく3列×2で6つにしたい場合は「外観」-「ウィジェット」メニューで使える「VK 3PRエリア」が便利です。

VK 3PRエリアも便利
VK 3PRエリアも便利

Lightning Pro(有料版)の活用

ここまで説明してきたテーマ「Lightning」は無料版ですが、有料版の「Lightning Pro」もあります。

Lightning Proではサイト制作に便利なモバイル固定メニューや投稿のグリッド表示、フッターコピーライトの編集機能などがサポートされており、より柔軟なデザイン設定が可能になります。

たとえば、スマホサイトのフッターに固定されるメニューも簡単に設置できるようになっています。

モバイル固定メニューが使える「Lightning Pro」
モバイル固定メニューが使える「Lightning Pro」

詳しくは、以下のページをご覧ください。

Lightning Proの強力な便利機能

また、Lightning Proの拡張デザインスキン「Lightning Fort」を使うと、ヘッダー右上に電話番号を表示することができます。

お問い合わせ情報がヘッダーに表示される「Lightning Fort」
お問い合わせ情報がヘッダーに表示される「Lightning Fort」

詳しくは、以下のページをご覧ください。

ヘッダーに電話番号やお問い合わせボタンを表示できるLightning Fort

機能の拡張(プラグインの使い方)

WordPressで特別に実現したいことがあれば「プラグイン」という拡張機能をインストールすることになります。ここでは問い合わせフォームを例にプラグインの使用方法を説明します。
  1. 機能を拡張するため「プラグイン」‐「新規追加」メニューへ
    プラグインをインストールするため、「プラグイン」‐「新規追加」メニューを開きます。

    「プラグイン」‐「新規追加」メニューへ
    「プラグイン」‐「新規追加」メニューへ
  2. インストールするプラグインの検索
    画面右上の「プラグインの検索」にプラグインの名前を入力します。

    プラグイン名の入力用のテキストボックス
    プラグイン名の入力用のテキストボックス

    ここではメールフォーム用のプラグインである「Contact Form 7」と入力してEnterキーを押します。

    「Contact Form 7」プラグインを検索
    「Contact Form 7」プラグインを検索
    ここではプラグインの名前がわかっているので「Contact Form 7」と入力しました。名前がわからない場合はGoogleなどで「WordPress 問い合わせフォーム プラグイン」など、実現したいことを検索キーワードにしてプラグイン名を探してみましょう。ほとんどの要件で「このプラグインがおすすめです!」のようなブログ記事が見つかるはずです。
  3. プラグインのインストール
    見つかった場合は「いますぐインストール」をクリックします。

    プラグインをインストール
    プラグインをインストール
    「インストール済み」と表示される場合は「プラグイン」‐「インストール済みプラグイン」メニューに移動して、該当するプラグイン(ここではContact Form 7)の「有効化」をクリックします。
  4. プラグインの有効化
    インストールが完了したら「有効化」をクリックします。

    プラグインを有効化
    プラグインを有効化
  5. 「お問い合わせ」メニューへ
    Contact Form 7プラグインを有効化すると「お問い合わせ」というメニューが追加されます。その中の「コンタクトフォーム」をクリックします。

    「お問い合わせ」‐「コンタクトフォーム」メニューへ
    「お問い合わせ」‐「コンタクトフォーム」メニューへ
  6. ショートコードのコピー
    「コンタクトフォーム1」の右側にあるショートコードをコピーします。このコードを固定ページの本文にペーストすればメールフォームが表示される仕組みです。

    メールフォーム用のショートコードをコピー
    メールフォーム用のショートコードをコピー
    ショートコードとは、複雑な命令を簡単に呼び出すための短いコードです。
  7. 固定ページ「お問い合わせ」の作成
    「固定ページ」‐「新規追加」メニューを開いて問い合わせページを作成します。タイトル(1)に「お問い合わせ」と入力し、本文(2)には上記のステップでコピーしたショートコードをペーストします。いったん下書きとして保存し、パーマリンク(3)をアルファベットに変更して「公開する」ボタンをクリックすれば完了です。

    お問い合わせページの作成
    お問い合わせページの作成

     

  8. 問い合わせフォームの確認
    「固定ページを表示」をクリックして問い合わせフォームを確認しましょう。

    問い合わせページの表示
    問い合わせページの表示
  9. うまくいっていれば次のような問い合わせフォームが表示されます。
    作成された問い合わせフォーム
    作成された問い合わせフォーム

     

  10. メール送信のテスト
    あとはメールが届くかテストしてみてください。

    メール送信のテスト
    メール送信のテスト

    うまくいけばメールが届きます。

    レンタルサーバーによっては試用期間ではメール送信できない場合があります。
  11. 問い合わせページのURLを設定
    問い合わせフォームが表示できたら、そのページのURLをコピーしてダッシュボード内のメニューにペーストしましょう。

    問い合わせフォームのURLをコピー
    問い合わせフォームのURLをコピー

    ペースト先は「ExUnit」-「メイン設定」‐「お問い合わせ情報」メニューの「お問い合わせ先URL」です。URLをペーストして「変更を保存」ボタンをクリックします。

    お問い合わせページのURLを設定
    お問い合わせページのURLを設定
  12. お問い合わせボタンの設置
    上記の設定はサイドバーに設置するお問い合わせボタンと連動します。「外観」-「ウィジェット」メニューで「VKお問い合わせボタン」をサイドバーに設置してみましょう。

    サイドバーにお問い合わせボタンを設置
    サイドバーにお問い合わせボタンを設置

    サイトを表示して確認してみましょう。サイドバーにお問い合わせボタンが表示され、クリックするとお問い合わせページに移動します。

    サイドバーにお問い合わせボタンが表示される
    サイドバーにお問い合わせボタンが表示される
  13. メール送信先の設定
    Contact Form 7によるメールの送信先はWordPressをインストールしたときに入力した管理者のメールアドレスになっていますが、変更できます。それには、「お問い合わせ」‐「コンタクトフォーム」メニューで「コンタクトフォーム1」の「編集」をクリックします。

    コンタクトフォームの編集
    コンタクトフォームの編集

    「メール」タブの「送信先」にメールが届く設定になっています。確認してください。

    メールの送信先
    メールの送信先

    変更後は画面右上の「保存」ボタンをクリックします。

まとめ

お疲れ様でした!これでホームページ作成の説明は終了です。まだまだ紹介したい機能は山ほどありますが、2万文字を超えているのでキリの良いこのあたりで作業をいったん終わりにします。

さらに学習を深めたい方は、「いちばんやさしいWordPressの教本 第4版 5.x対応」をおすすめします。

ホームページ作成手順の復習・発展学習に

ひとまず、ここまでの作業で普通のページ、ブログ記事、問い合わせフォームで構成されるホームページのたたき台が立ち上がったかと思います。

WordPress+Lightningで作るホームページの例
WordPress+Lightningで作るホームページの例

あとは少しずつカスタマイズしたりブログ記事やページを増やしてサイトを充実させていきましょう。カスタマイズの例を紹介します。

  • 予約システムやショッピングカートを追加したい
  • デザインを修正したい(文字サイズ・色・背景画像など)
  • 表・箇条書き・バナー広告を入れたい
  • 「スタッフブログ」などのオリジナルメニューを追加したい

これらのカスタマイズを含めてWordPress個別サポートで対応しております。気軽にご利用ください。

WordPressによるホームページ作成講座も開講しております。先に受講してから復習としてこの記事を読んでいただくのも良いと思います。自由に講座をご活用ください。

WordPressの使い方