WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。
調べたらいろいろ出てきて、進まなくなりました・・・
そこで今回は、WordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。
■【10分簡単デモ】WordPressでホームページ作る方法(動画解説版)
関連記事 WordPressブログの作り方
ここではホームページ想定で手順をご紹介していきますが、WordPressでブログを作る場合も大きな手順は基本的には同じです。ASPに登録したり、投稿を使ってブログを書くのが中心になるという若干の違いがあるだけです。
下記に、WordPressブログの作り方をご紹介しています。ホームページではなくブログ型のサイトを作りたい方は合わせてご参考ください。
もくじ [hide]
- 1 【はじめに】WordPressを使ったホームページの作り方概要
- 2 (1/12)レンタルサーバー「ロリポップ」を契約する
- 3 (2/12)独自ドメインを契約する
- 4 (3/12)WordPressをインストールする
- 5 (4/12)WordPressへログインする
- 6 (5/12)独自SSLの設定をする
- 7 (6/12)デザインテンプレート「テーマ」を設定する
- 8 (7/12)投稿でブログを書く
- 9 (8/12)固定ページを作成してメニューバーに設定する
- 10 (9/12)ウィジェットでサイドバーやフッターを設定する
- 11 (10/12)メインビジュアルや色などのテーマの設定を行う
- 12 (11/12)お問い合わせフォームを作成する
- 13 (12/12)WordPressの初期設定をする
- 14 まとめ 使いながら覚えていってホームページを作っていきましょう
【はじめに】WordPressを使ったホームページの作り方概要
WordPressでホームページを作成するためには
はじめに、WordPressでホームページを作成するための概念と大まかな手順について説明してきます。
WordPressでホームページを開設するためには「ドメイン」と「サーバー」を契約したのちに「WordPress」をインストールしてから、ホームページを作っていく形になります。
- レンタルサーバー会社からサーバーを借りる
- ドメインサービス会社からドメインを取得する
- サーバーに中身(WordPress)を構築する
■サーバーとドメイン・中身(WordPress)
- サーバー:インターネット上の建物・部屋のようなもの
- ドメイン:インターネット上の住所のようなもの
- 中身(WordPress):建物・部屋の中にあるコンテンツ・サービスのようなもの
合わせて読みたい記事
サーバー・ドメイン・ホームページなどのより具体的な説明については「【2020年ホームページの作り方総まとめ】ホームページ自作方法を解説」を合わせてご参考ください。
なお、ネットショップを作りたい方はBASEやカラーミーなどのネットショップサービスがおすすめです。下記に有名なネットショップのカラーミーをご紹介していますのでご興味ある方は合わせてご覧ください。
【カラーミーショップ】無料ショップとの違いや特徴を徹底解説
本記事では、WordPressの使い方を含めて下記の順でより具体的に説明していきます。
- レンタルサーバーを契約する
- 独自ドメインを取得・設定する
- WordPressをインストールする
- WordPressにログインする
- 常時SSLを設定する
- WordPressのテーマを決める
- 投稿でブログを書く
- 固定ページ作成とメニューの設定をする
- サイドバーやフッターの設定をする
- メイン画像などのテーマ設定をする
- お問い合わせフォームを作成する
- WordPressの初期設定をする
勘違いしやすいWordPress.orgとWordPress.com
ネットでWordPressで検索すると、wordpress.orgというサイトと、wordpress.comというサイトがヒットします。今回、ご紹介するのは、WordPress.comではありませんのでご注意ください。
WordPress.comは、WordPressを利用してアメブロやFC2、シーサーブログ、はてなブログなどのブログサービスを展開している営利組織です。
基本的に我々がWordPressと呼んでいる方のWordPressはWordPress.orgの配布しているパッケージソフトウェアを指しており、多くのレンタルサーバーではこのパッケージソフトウェアが簡単インストール機能などに組み込まれて利用する形になっています。
項目 | WordPress.org | WordPress.com |
---|---|---|
意味 | WordPressというソフトウェアは配布している組織・サイト。通常WordPressといえばこちらを指します。 | WordPressというソフトウェアを基盤にしたブログサービス |
WordPress.comのサービスを利用しても、独自ドメインでWordPressを利用することができますが、通常レンタルサーバーでWordPressをインストールするのと違って、プラグインやテーマの制限があります。
自由にカスタマイズ・拡張できるのがWordPressのメリットですが、WordPress.com上のWordPressを利用するとそのメリットが半減してしまいますので、WordPress.comを利用してのサイト運営は、あまりおすすめしません。
そもそもWordPressとはどういったもので、メリットやデメリットなどについても知りたい方は「【WordPressとは】ワードプレスの概要と特徴を徹底解説」をあわせてご参考いただければと思います。
(1/12)レンタルサーバー「ロリポップ」を契約する
まず最初に、レンタルサーバーの契約手順から説明していきます。
レンタルサーバーは国内でも100社近くありますが、今回は、一般的なホームページ型のサイトを作る際にコストパフォーマンスの観点でおすすめのレンタルサーバー「ロリポップ!」を使ってホームページの解説手順を説明していきます。
〜対象プラン12ヶ月以上契約でドメイン一つ無料〜
■適用条件
・ライト、スタンダード、ハイスピード、エンタープライズ
・12か月以上の契約期間・自動更新の設定
詳しい適用条件は公式サイトでご確認ください。
↓↓ロリポップで独自ドメイン取得・WordPressインストールする方法詳細こちら↓↓
ロリポップでWordPressを始める方法を徹底解説
(補足)当サイトがおすすめする人気レンタルサーバー5社
レンタルサーバーを提供している会社として、エックスサーバー、ロリポップ!
、さくらのレンタルサーバ
などの老舗3社が有名で、最近では性能機能面でConoHa WING
、mixhost
というレンタルサーバーサービスも人気です。
どれも人気のレンタルサーバーですが、目的に応じておすすめは異なります。スペックも含めたレンタルサーバー詳しい比較は「【おすすめレンタルサーバー比較5社総まとめ WordPress対応】」に掲載していますので、レンタルサーバー契約の前にぜひご覧ください。
(1-1)ロリポップアカウントを開設する
まずはレンタルサーバー「ロリポップ!」にアクセスしてアカウントを作成しましょう。
ロリポップトップページに移動します。「まずは無料でレンタルサーバーを利用しよう」ボタンを選択します。
ここでは、一番人気の「スタンダードプラン」を選択します。
合わせて読みたい記事
下記の記事にロリポップの特徴やおすすめのプランについて説明していますので、プランをどれにするかお悩みの方は合わせてご参照ください。
【ロリポップってどう?】速度性能アップ!レンタルサーバーロリポップの感想
アカウント情報を入力します。初期ドメイン・パスワード・メールアドレスを入力し、規約を確認後「規約に同意して本人確認へ」をクリックします。
初期ドメインについて
初期ドメインはロリポップにログインする際に利用する半角英数のIDです。屋号などの覚えやすい値がおすすめです。
独自ドメインを利用する場合、一般のサイト訪問者にはこのIDは見えませんので、基本的にどんな文字列でも気にする必要はありません。
携帯電話による認証がありますので、電話番号を入力します。
SMS認証コードを入力します。
つづいて、申し込み情報を入力します。
申し込み内容を確認して、利用規約にチェックを入れて「無料お試し開始」ボタンを押下します。
申し込み完了画面で、「ユーザー専用ページにログインする」を押してログインしてください。
(1-2)ロリポップアカウントの契約手続きを完了する
前述のアカウント登録でロリポップを体験版として利用できるようになりました。つづいて、ロリポップの契約手続きを完了する手順を説明していきます。
「ご契約手続きに進む」ボタンを押下します。
1年以上契約・自動更新設定でドメイン1個無料に
ロリポップドメインの新規取得・更新が無料になるサービス『ドメインずっと無料』が2020年9月にスタートされました。
下記の適用条件にしたがて、1年以上契約・自動更新すると独自ドメイン一つ無料で利用できます。詳しくは公式サイトをご覧ください。
『ムームードメイン』の対象ドメインと、『ロリポップ!』のレンタルサーバーの両方を新規でご契約いただく場合、レンタルサーバーをご契約中はドメインを無料でご利用いただける『ドメインずっと無料』の提供を開始しました。
・・・(中略)
ロリポップ!レンタルサーバーにて、以下条件をすべて満たしている必要があります。
- ライト、スタンダード、ハイスピード、エンタープライズのいずれかのプランでのご契約
- 12か月以上の契約期間でのご契約
- 自動更新の設定
2020/09/29 ドメインの新規取得・更新が無料になるサービス『ドメインずっと無料』を提供開始 | ロリポップより引用
お支払いボタンを押下します。
契約期間とお支払い方法を入力して、確認後「契約を確定する」ボタンを押下します。
契約内容を確認後「実行する」ボタンを押下します。
クレジット情報を入力して「送信」ボタンを押下します。
決済が完了します。「戻る」ボタンを押下します。
以上で、レンタルサーバーロリポップの契約手続きは完了です。次に、独自ドメインを契約していきます。
(2/12)独自ドメインを契約する
サーバーの契約が終わったら、次に独自ドメインを契約してきます。
独自ドメインとは「webst8.com」のようなオリジナルのドメイン名です。ドメイン名はインターネット上の住所に相当します。
(2-1)ムームードメインで独自ドメインを取得する
ロリポップの管理画面で、サーバーの管理・設定>独自ドメイン設定を選択します。
独自ドメインの設定画面が表示されます。「ドメインを取得する」をクリックして、ムームードメインでドメインを取得していきます。
格安ドメイン取得サービス─ムームードメイン─
ムームードメインの画面に移動します。取得したいドメイン(xxxx.com/net..のxxxxの部分)を入力して検索してください。
取得できるドメイン一覧が表示されます。取得したいドメインに対して「カートを追加」ボタンを押下します。
カートに追加されました。「お申し込みへ」ボタンを押下します。
ログイン画面が表示されます。初めての方は「アカウント新規登録」を選択してアカウントを新規登録します。
任意のムームーID(メールアドレス)とパスワードを入力して、利用規約確認後に「利用規約に同意して本人確認へ」をクリックします。
アカウント登録情報を入力して進めて行ってください。
ドメイン設定画面が表示されます。初期値の「弊社の情報を代理公開する」「ムームーDNS」のままでOKです。
「弊社の情報を代理公開する」を選択しないと、自分の名前やアドレスなどがインターネット上で閲覧できるようになってしまいます。個人の情報を見せないために、「弊社の情報を代理公開する」を選択しています。
合わせて読みたい記事
Whois情報代理公開に関する詳しい説明「【whois代理公開とは】ドメイン取得時に表示されるWhois代理公開の意味」に記載していますので、詳しく知りたいかたは合わせてご参考ください。
ネームサーバー設定に関する詳しい説明を「【ネームサーバーとは?】ネームサーバー設定の意味と特徴を徹底解説」に記載していますので、こちらも合わせてご参考いただけますと幸いです。
下にあるオプション設定ですが、既にロリポップを契約しているため何も選択しなくてOKです。
クレジットカード情報などを入力して支払い情報を入力したのち、「次のステップへ」を選択します。
宣伝が表示されますが、ここでは何も選択せずに「次のステップ」ボタンを押下します。
入力情報を確認後、利用規約を確認後チェックを入れて「取得する」ボタンを押下します。
ドメインが取得中の画面が表示されます。
ドメイン取得が完了しました。
ムームードメイン側では特に設定は必要ないので、そのままひきつづきレンタルサーバー「ロリポップ」の管理画面でドメインの設定を行なっていきます。
注意
初回ドメイン取得時に「【重要】[ムームードメイン] ドメイン 情報認証のお願い」という下記のようなメールが来る場合があります。
その場合は、メール本文の案内に従ってURLをクリックして認証を済ませてください。
(※)お名前.comなどで過去にドメイン取得したことがある場合は本メールが来ない場合もあります。その場合は何もしなくて構いません。
(2-2)ロリポップで独自ドメインの設定をする
引き続き独自ドメインの設定を行います。独自ドメイン設定を選択します。
先ほどムームードメインで取得したドメイン名を入力します。また、ドメイン名(xxxx.comのxxxxの部分)で公開フォルダ名を入力します(公開フォルダ名の名称は任意の名称でも問題ありません)。
入力後、「独自ドメイン名をチェックする」ボタンを押下します。
先ほどムームードメインで登録したアカウント情報を入力してネームサーバー設定ボタンを押下します。
内容を確認後「設定」ボタンを押下します。
確認画面が表示されます。OKボタンを押下します。
ドメイン設定中になります。反映には1時間ほどかかります。
以下の操作は1時間経過してから行なってください。
(3/12)WordPressをインストールする
つぎに、取得したドメイン名でワードプレスをインストールしていきます。
ロリポップのコントロールパネルで、サイト作成ツール>ワードプレス簡単インストールを選択します。
サイトURL、タイトル、ユーザー名・パスワード、メールアドレスをなど必要情報を入力して、「入力確認」ボタンを押下します。
ワードプレスインストール情報を確認して「承諾する」にチェック後インストールします。
以上でワードプレスのインストールは完了です。
(4/12)WordPressへログインする
(4-1)WordPressへのログインの仕方
■WordPressのログイン方法(動画解説版)
WordPressにログインするためには、まずは自分がインストールしたWordPressのサイトの管理画面URLにアクセスする必要があります。初期状態ではWordpress管理画面のURLは下記になります。
http(s)://WordPressをインストールしたサイトのURL/wp-admin/
(例. https://webst8.net/wp-admin/)
ここで、よくある間違いとして、URL入力時にGoogle検索の候補を選んでしまう人いますが、この方法ではログイン画面にいけないのでご注意ください。
ログインのURLは通常検索エンジンにヒットしない設定で非公開になっていますので、検索でURLを調べてもヒットしませんのでご注意ください。
上記の管理画面URLにアクセスすると下記のログイン画面が表示されます。WordPressをインストールした際に入力したユーザーID(またはメールアドレス)とパスワードを入力するとログインすることができます。
管理画面に入れればOKです。
ログインできないときは?
WordPressにログインできないとき、WordPressのログインに関する詳しい説明やログインできないときの対処法などは「【ログインできない?】WordPress(ワードプレス)のログイン方法をやさしく解説」をご参照ください。
(4-2)WordPressの管理画面と覚えておきたい重要な使い方
それではここからは、WordPressのダッシュボードの基本的な見方について説明していきます。
■WordPressの管理画面の見方(動画解説版)
ダッシュボードとは、WordPressの管理画面のことです。元々は自動車の「計器盤」のことを指していたようで、情報をまとめて表示するツールという意味です。
下記は、WordPressのダッシュボード(初期設定状態)です。大きく、「上部メニューバー」「左メニューバー」「真ん中の設定画面」の3つのレイアウトに分かれています。
左管理メニューバーでは、投稿や固定ページ、外観、プラグインなどWordPressの重要な管理操作を行うことができます。
まずは管理画面とトップページの切り替え方法を覚えておきましょう。
左上のサイトのタイトル名>サイトの表示をクリックするとトップページに移動します。同様に、サイトのタイトル名>ダッシュボードをクリックすると管理画面(ダッシュボード)に移動します。
つぎに、WordPress管理画面の主な名前と意味について覚えておきましょう。
WordPress 管理画面 (ダッシュボード)
項目 | 内容 |
---|---|
投稿 | ブログは投稿で作成します。時系列で最新情報が一番上に表示されていきます。お知らせ情報やブログなど投稿機能を利用するのが一般的です。 |
固定ページ | 固定ページは会社情報やお問い合わせなどの単体ページで決まった箇所に表示しておきたいページで利用します。ページ作成の機能自体は投稿とほぼ同じですが、投稿と違って一覧のなかには表示されません。 |
外観 |
その名の通り、外観ではサイトの外観(デザイン)系の設定を行います。テンプレートやメニューバーなどもここで設定できます。
|
プラグイン | スマートフォンでいうアプリの追加機能です。お問い合わせ機能やサイトマップなどWordPress自体が持っていない機能をプラグインという形で追加することができます。 |
設定 | サイト名・キャッチフレーズやURLの構造設定、トップページの表示設定などの各設定ができます。 |
関連記事
本記事では割愛しますが、ダッシュボードの各項目と意味については「【WordPressダッシュボードとは?】管理画面の見方と意味を解説」で詳しく説明していますので、ダッシュボードの各項目を詳しく知りたい方はあわせてご参照ください。
(5/12)独自SSLの設定をする
さて、ここでは初心者にとって少し難しい言葉が出てきますが、WordPressを操作してホームページを作っていく前にて常時SSLの設定をしていきます。
SSL化とはURLが「https」から始める通信にすることで、通信データが暗号化されてアドレスバーに鍵マークが表示されるようになります。
通信をSSL化(HTTPS)をすることで、通信データを保護し、クレジットカードのような他人に知られると悪用される重要な情報を守ります。
手順としては大きく下記の3つになります。
- 「ロリポップ」でSSLの設定を行う
- 「WordPress」でSSLの設定を行う
- 「.htaccess」で常時SSLの設定を行う(※注)
(※注)単純にSSL化のみ実施した場合は、httpでもhttpsでもどちらでもアクセスできる状態で、ある意味不完全な状態です。そこで「http」でリクエストされたアクセスを「https」化した通信へ転送した設定(どんなアクセスでもhttps(SSL)で通信を強制することを常時SSLといいます。
(5-1)「ロリポップ」でSSLの設定を行う
ロリポップの管理画面から、「セキュリティ」を選択し「独自SSL証明書導入」をクリックします。
対象のドメイン(wwwありなし両方)にチェックを入れて、独自SSL(無料)を設定する」をクリックします。
(※)ロリポップの無料SSLは、一度設定すると解除できませんのでご注意ください。
設定には5〜10分程度かかり、SSL設定作業中と表示されます。しばらく待ちましょう。
5〜10分後に更新ボタンを押してSSL保護有効と表示されれば設定完了です。
(5-2)WordPressでSSLの設定を行う
次に、WordPressでもSSLの設定を行います。ダッシュボードから「設定」を選択し「一般」をクリックします。
「WordPressアドレス(URL)」、「サイトアドレス(URL)」を「http://~」から「https://~」に変え、「変更を保存」をクリックします。
(※)本操作で誤った内容を入力・保存すると、WordPressにアクセスできなくなる場合があるため、慎重に行いましょう。
変更を保存します。
一旦ログアウトされるので、再度ログインしましょう。
管理画面のアドレスがhttpsになっていることが確認できたらOKです。
(5-3)「.htaccess」ファイルに常時SSLの設定を行う
最後に、常時SSLの設定を行なっていきます。ここまでの設定だけでは、まだ「http」と「https」のURL両方にアクセスすることができる状態です。
そこで「http」でリクエストされた通信も「https」として通信させる設定を行っていきます(常にSSL通信になるので常時SSLといいます)。設定を行うには、サーバー上にある「.htaccess」という重要なファイルを編集する必要があります。
「.htaccess」ファイルを開き、その先頭に「http」へアクセスした場合、「https」に転送するコードを書き加える必要があります。
ここでは、ロリポップFTPを利用して、サーバー内の.htaccessを編集する方法を紹介します。サーバー管理>ロリポップ!FTPを選択します。
ロリポップFTPの画面が開きます。対象のドメイン用フォルダをクリックします。
.htaccessをクリックします
.htaccessの編集画面が表示されます。
誤った入力をすると、「.htaccess」ファイルが機能せず、最悪の場合、Webサイトが表示されない可能性もありますので、コードを変更したり、書き加える前に必ずバックアップを取っておきましょう。
.htacessに書き加えるコードは、以下のとおりです。コピーしてください。
上記のコードをコピー後に.htaccessの編集画面の一番上に追記後、保存します。
- 「< IfModule mod_rewrite.c > *** 」の部分は、「***を処理する機能を定義する」という内容が書かれています。
- 「mod_rewrite」とは、「条件を満たした場合に記載したURLに転送する機能」の意味です。
- 「RewriteEngine」とは、「有効(ON)・無効(OFF)の設定」で、「有効(ON)」にします。
- 「RewriteCond」とは、「条件を設定する」という意味です。
- 「 %{HTTPS} off 」とは「https でない場合(SSLではない場合)」という意味です。
- 「RewriteRule 」とは、「ルールを設定する」という意味です。
- [ R = 301 , L ]の「R = 301」は「永続的に転送する」という意味であり、「L」は「ルールを終了する」という意味です。
以上のコードで「http」でアクセスがあった場合、「https」へ転送しますというルールを設定しています。
最後に「http://自分のドメイン名」でアクセスしてみましょう。httpsにリダイレクトされて入れば完了です。
(6/12)デザインテンプレート「テーマ」を設定する
まずはWordPressのテーマのインストールを行いましょう。WordPressで利用する「テーマ」とは、一言で言うとデザインのテンプレートのことです。
■WordPressのテーマのインストール方法(動画解説版)
人に例えると、「服」のようなイメージになります。テーマ(服)を変更することで、見た目や外観の変更・関連機能を変更することができます。
WordPressでは、無料・有料含めて様々なテーマがリリースされています。利用者は多数あるテーマの中から自分に合うデザイン・機能のテーマを利用することができます。
WordPress テーマ 追加画面
ここでは、WordPress初期状態のテーマから無料テーマ「Lightning」を適用する例で説明していきます。
WordPressの管理画面上の外観>テーマを選択します。
新規追加ボタンを押下します。
検索窓で探しているテーマを入力します。ここでは有名な無料テーマ「Lightning」を使います。「Lightning」と入力して表示された下記のテーマをインストールします。
有効化します。
以上でテーマの適用は完了です。トップページを参照するとテーマが適用されて、見た目がガラリと変わっていることがわかります。
合わせて読みたい記事
公式以外のテーマの場合:zipファイル化されたテーマをアップロードする(主に有料テーマはこちらの方法)という方法もあります。
サイトからダウンロードしたzip形式のテーマをインストール・設定する方法については、「【初心者向け】WordPressのテーマのインストール・設定方法を徹底解説」をご参照ください。
合わせて読みたい記事
●今回は無料版Lightingで説明していますが、Lightningにはより高機能な「Lighting Pro」という上位版テーマがあります。Lightning Proについては「【Lightning Proってどう?】無料版との違いやデメリットも解説」をあわせてご参照ください。
そのほかのおすすめテーマは下記をご参照ください。
●タイプ別WordPressおすすめ有料テーマ8選をご紹介
(7/12)投稿でブログを書く
テーマの設定が終わったら、WordPressのブログ機能である「投稿」の使い方を覚えていきましょう。
■WordPressの投稿機能の使い方(動画解説版)
■WordPressのブロックエディターの使い方(動画解説版)
投稿はブログとして利用できる機能です。一般的には、お知らせやコラム、技術情報や時事情報などで使われることが多いです。
投稿を新規追加するには、投稿>投稿一覧をクリックします(投稿>新規追加でもOK)。
投稿一覧画面が表示されます。「新規追加」ボタンを押下します。
はじめてブロックエディターの画面を開いた時には、ガイドが表示されます。今回ば「×」を押していったん閉じます。
下記のような編集画面が初期状態で表示されます。大きく、メインのエディターエリアと上部ツールバー、右のツールバーがあります。
(※)上記はWordPress5.5の画面です。バージョンによって若干の差異があるのでその場合はご自身のご利用の画面に合わせて読み替えてください。
まずはタイトルと文章を書いたのち公開をして表示を確認してみましょう。
次に見出しを挿入してみましょう。+ボタンを押して、「見出し」を選択します。文末の+から末尾に追加することもできますし、ブロック間の間にカーソルを合わせて表示される+からブロックを間に挿入することもできます。
(※)見出しは本の章のようなものです。見出しは階層を持つことができます。h1が本のタイトルに相当して、H2は第1章・第2章、H3は第1-1章、第1-2章のような階層です。
次に画像を挿入してみましょう。右下+ボタンを押して「画像」を選択、自分の好きな画像を選択します。必要に応じて右ツールバーから画像ブロックの設定もできます。
実際にホームページを作って行く際に、良い画像がなくて素材不足になることがよくあります。また、ネットで検索して出てきたものは著作権で保護されているものもたくさんあるので安易に使ってはいけません。
ネットには、自由に使えて商用利用可能な画像素材サイトもたくさんあります。「【おすすめ素材サイト総まとめ】ホームページで使えるフリー・有料素材25選」にホームページ作成に使えるおすすめ素材サイトを一挙紹介していきますので、是非ご参考ください。
ページを公開しても良い場合は、「公開」ボタンを押下して保存しましょう。ページが公開されて一般の人も閲覧できるようになります。
合わせて読みたい記事
投稿エディターの詳しい使い方は「【2020年版】WordPressブロックエディターの使い方を徹底解説」をあわせてご参照下さい。
2018年12月末にリリースされたWordPress5.0から新しいエディター「ブロックエディター」が標準エディターになっています。
2018年以前はWordのようなエディター(クラシックエディター)が標準となっていました。
旧エディター(クラシックエディター)の方にあえて戻したい場合は、プラグイン「Classic Editor」を利用することで従来のエディターに戻すことができます。ただし、今から新しくWordPressを覚えるなら、ブロックエディターで覚えると良いでしょう。
(8/12)固定ページを作成してメニューバーに設定する
次に、固定ページを作成してメニューバーを設定していきましょう。
■WordPress 固定ページの作り方(動画解説版)
次に、下記のようにワードプレスでメニュー(グローバルナビゲーション)を作成するやり方をご紹介します。(※)メニューの位置や見え方はテーマによって異なります。
今回メニューを作成する大きなステップは下記の通りです。
メニューバーを作成する概要手順
- 事前に各メニューリンク先となる固定ページを作成する
- メニューバーを作成する。1で作成した各固定ページをメニュー項目として配置する
(8-1)固定ページを作成する
まずは固定ページを作成していきます。ワードプレスの固定ページとは、「会社情報」や「お問い合わせ」のように、ページ単体で完結できるページで利用します。
■例)固定ページで作成したお問い合わせページ
「投稿」と同様にページを作成する機能に「固定ページ」という機能があります。
一般的に固定ページでは「会社情報」や「お問い合わせ」などページ単体で独立している内容で、メニューバーなど決まった位置に表示しておきたいページで固定ページで利用します。固定ページで作成したページは投稿一覧の中には表示されません。
「投稿」はカテゴリーやタグによりページ同士をジャンル分けして一覧表示することができるのに対して、「固定ページ」は通常カテゴリーやタグという概念がなく、ページ単体で独立しています。
項目 | 投稿 | 固定ページ |
---|---|---|
特徴 |
ブログのようなコンテンツは投稿で作成する 例)コラム、技術情報、お知らせ・ニュース、イベント、商品ページなど |
ページ単体で完結できるようなコンテンツを書くのに向いている。 例)トップページ、会社情報、お問い合わせ、アクセス、採用情報、ランディングページなど |
できること |
|
|
できないこと |
|
|
固定ページは、投稿と違ってページを作成しても投稿一覧の中には表示されませんので、自分でメニューバーなどに表示する設定が必要です。
固定ページは固定ページ>新規追加から作成することができます。
固定ページの使い方は、投稿とほぼ同様なのでここでは割愛します。固定ページの詳しい使い方は「【2020年版】WordPress固定ページの使い方を徹底解説」をご参照ください。
まずは事前準備として、ここでは下記の固定ページを作成しておきます。
事前に作成しておく固定ページの例
- HOME
- お問い合わせ
- お客様の声
- スクール受講生の声
- セミナー受講生の声
- 法人様の声
- ブログ
- 会社情報
固定ページ>固定ページ一覧をみると下記のような状態になっているように、固定ページを作成してみてください。
(8-2)メニューバーを作成する
固定ページを一通り作成できたらメニューを作成していきます。
■WordPressメニューバーの作り方・カスタマイズ方法1(動画解説版)
■WordPressメニューバーの作り方・カスタマイズ方法2(動画解説版)
■WordPressメニューバーの作り方・カスタマイズ方法3〜ヘッダーメニューとフッターメニューを使い分ける方法〜(動画解説版)
手順としては、まず(1)箱(入れ物)となるメニューを作り、(2)その中に先ほど作った固定ページ(メニューアイテム)を割り当てて、(3)最後に作成したメニューをどこに表示するという順番になります。
管理画面から外観>メニューの設定を選択します。
WordPress 外観>メニュー
まずメニューを作成します。ここでは、「メインメニュー」(※)と入力してメニューを作成ボタンを押下します。
(※)名称はなんでもOKです。
メインメニューが作成されました。以下はメニューバーの構成です。左側のメニューアイテム(項目)があります。任意のメニューアイテムを作成したメニューに設定し、最後に位置を決めて保存することができます。
ここでは事前に作った固定ページの項目をチェックして、「メニューに追加」ボタンを押下します。
(※)固定ページがたくさんあり表示されていない固定ページがある場合は「全て表示」タブを選択すると全て表示されます。
追加したメニューは、ドラッグ&ドロップでメニューの順番を変えることができます。
最後にメニューの設定を行います。ここではHeader NavigationとFooterNavigationにチェックを入れて最後にメニューを保存ボタンを押下します。
(※)Header NavigationとFooterNavigationという名称はご利用のテーマによって違います。また、テーマによっては1つしかチェックができない場合も3つある場合もあります。
以上で、メニューの追加は完成です。
本例では、ヘッダーの位置とフッターの位置に配置できるので、両方にチェックを入れてメインメニューを表示しています。
ヘッダーとフッターの両方に作成したメインメニューが表示される
ここでは、メニューバーを作り固定ページを割り当てる設定方法を簡単に説明しました。
他にも任意のURLを設定したり(カスタムリンク)、投稿カテゴリーや個々の投稿ページなどをメニューバーに割り当てることもできます。
詳しい使い方は「WordPressヘッダーメニューバーの作り方と設定方法」を合わせてご参照ください。
(8-3)表示設定で、固定ページをトップページに割り当てる
表示設定から作成した任意の固定ページをトップページに割り当てることができます。ここでは、固定ページをトップページに割り当てる表示設定を行なっていきます。
ダッシュボードの設定>表示設定を選択します。
表示設定が表示されます。
初期設定は、トップページの表示が「最新の投稿」一覧が表示される設定になっています。
トップページに事前に作成した固定ページ「HOME」を割り当てます。
「投稿ページ」に事前に作成した固定ページ「ブログ」を割り当てましょう。
設定が完了したら最後に変更を保存しましょう。
以上で設定は完了です。トップページに「HOME」の内容が、「ブログ」にはブログ一覧が表示されて入れば完了です。
(9/12)ウィジェットでサイドバーやフッターを設定する
次に、外観>ウィジェットからサイドバーやフッターを設定していきましょう。
■【WordPressウィジェットとは】ウィジェットの使い方(動画解説版)
ワードプレスにおけるウィジェットとは、ブログパーツ(部品)のことです。ワードプレスでは、バナーやテキスト、検索窓や投稿一覧など任意のパーツをサイドバーなどに追加することができます。
ウィジェット(パーツ)の一例
- テキスト・画像
- 最新の投稿一覧
- お問い合わせ情報・バナー
- 検索窓
WordPressでは、ウィジェットというページの特定部分の表示をカスタマイズできる機能があります。サイドバーやフッターなどの部分でウィジェットでバナーを追加したり、投稿一覧を表示したりなど設定することができます。
ウィジェットの追加方法について説明して行きます。ウィジェットは外観>ウィジェットから設定します。
左側の追加したいウィジェットタイプを選択してドラッグ&ドロップで任意の箇所にウィジェットを追加します。
ウィジェットタイプを選択して、任意の箇所にウィジェットを追加します。
下記はテキストタイプのウィジェットです。設定後に保存して完了です。
トップページで、サイドバーにテキストウィジェットが追加されたことを確認して完了です。
WordPressウィジェットの詳しい使い方については「初心者でもわかるWordPressウィジェットの使い方を徹底解説」を合わせてご参考ください。
(10/12)メインビジュアルや色などのテーマの設定を行う
次に、メインビジュアルや色などのテーマの設定を行っていきましょう。
外観>カスタマイズから、テーマカスタマイザーを開くことができます。
テーマカスタマイザーは、テーマのレイアウト・表示に関する設定を行う機能です。
トップページスライドショーを変更する
Lightningの場合は、「Lightning トップページスライドショー」からスライドショーの設定変更ができます。
実際に変更してみましょう。下記のようにスライドショーの画像を変更して「公開」ボタンを押せば完了です。
ここではLightningの詳しい使い方は割愛しますが、Lightningの使い方については「WordPressテーマLightning(ライトニング)の使い方【VK All in one Expansion Unitも解説】」をご参照ください。
(11/12)お問い合わせフォームを作成する
次に、お問い合わせフォームを作成しておきましょう。ここでは有名なお問い合わせフォームプラグイン「Contact Form 7」を利用してお問い合わせフォームを作成する例をご紹介したいと思います。
■Contact Form 7の使い方・その1(動画解説版)
■Contact Form 7の使い方・その2(動画解説版)
(参考)WordPressのプラグインとは?インストール方法と注意点(動画解説版)
本手順の事前準備として、はじめに「お問い合わせ」という本文なしの固定ページを作成しておいてください(前述の固定ページ作成手順ですでに作成している場合は不要です。)
つづいてお問い合わせフォーム「Contact Form 7」をインストールしていきます。
管理画面でプラグイン>新規追加を選択してください。
「Contact Form 7」と入力して検索します。富士山の絵が出てきている「Contact Form 7」をインストールします。
お問い合わせフォーム「ContactForm」を有効化します。
ContactForm7を有効化すると、左側の管理メニューに「お問い合わせ」が出現しています。コンタクトフォームを選択します。
お問い合わせが出現。コンタクトフォームを選択
「コンタクトフォーム 1」の右側にある[]内のショートコードをコピーします。
[]内のショートコードをコピー
任意のページにコピーしたショートコードを貼り付けます。ここでは、事前に作成した固定ページ「お問い合わせ」に貼り付けています。ウィジェット>ショートコードから埋め込みましょう。
(補足)旧エディターをご利用の場合
従来のクラシックエディターご利用の方は、そのままショートコードを貼り付けましょう。
任意のページにコピーしたショートコードを貼り付ける
プレビューを表示してお問い合わせフォームが表示されていれば完了です。実際にフォームに入力して問い合わせしてみましょう。
初期状態では、ワードプレスインストール時に設定したメールアドレス宛に問い合わせ内容が通知されていればOKです。(届いていない場合は迷惑メールも確認してみてください)
Contact Form 7では、フォームの入力項目の追加や通知メールの設定、サンクスメールの設定など色々な設定ができます。ここでは、割愛しますが「WordPress お問い合わせフォームの作り方 プラグインContact Form 7」で詳しく説明していますので、ぜひご参考にしてください。
WordPressおすすめプラグインのについては、「【2020年度】WordPressのおすすめプラグインを利用シーン別に徹底解説!」に記載していますので、いろいろプラグインをみてみたい方は合わせてご参照ください。
(12/12)WordPressの初期設定をする
最後に、WordPressの初期設定を行っていきましょう。
WordPress導入直後は、バックアップ設定やセキュリティ、SEO対策の設定が何もなされていませんのでこれらの対応を中心にしていきます。
本サイトでおすすめする初期設定は下記の通りです。
- (済み)常時SSLを設定する
- サイト名とキャッチフレーズを設定する
- パーマリンクを変更する
- バグ修正パッチプラグインを当てる
- バックアップ設定をする
- セキュリティ対策をする
- SEO対策をする
- パフォーマンス改善の設定をする
WordPress開始後だいぶ経過してしてから設定を実施するよりも、なるべく最初に設定しておいた方が楽ではありますが、SEO対策などの初期設定系の内容は、初心者には少し意味のわからない設定も多いです。
まずはWordPressの操作に慣れたい人は一旦飛ばして、もう少しWordPressを触って慣れてから初期設定を進めると良いと思います。
WordPressの初期設定の具体的なやり方は「【初心者向け】WordPressのおすすめ初期設定を徹底解説」をご参照のうえ設定ください。
まとめ 使いながら覚えていってホームページを作っていきましょう
まとめです。今回は、WordPressでホームページを作りたい初心者を対象にホームページの作り方をご紹介しました。
WordPressでホームページを開設するためには「ドメイン」と「サーバー」を契約したのちに「WordPress」をインストールしてから、ホームページを作っていく形になります。
より具体的には、WordPressの使い方を含めて下記の順で説明しました。
- レンタルサーバーを契約する
- 独自ドメインを取得・設定する
- WordPressをインストールする
- WordPressにログインする
- 常時SSLを設定する
- WordPressのテーマを決める
- 投稿でブログを書く
- 固定ページ作成とメニューの設定をする
- サイドバーやフッターの設定をする
- メイン画像などのテーマ設定をする
- お問い合わせフォームを作成する
- WordPressの初期設定をする
今回は以上になります。最後までご覧いただきありがとうございました。
合わせて読みたい記事
なお、本記事の説明した内容以外のWordPressの使い方全般を、「【WordPress使い方総まとめ】ワードプレスの使い方を徹底解説」に記載しています。
WordPressの使い方を把握しておきたい方は合わせてご参照ください。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。