WordPressでホームページを公開してみましょう！【初心者向け】

こんにちは、ダッチ（足立拓也）です。

こちらの記事では、ホームページ制作初心の方向けに、
WordPressを使って自分のサイトを公開するまでの流れを解説していきます。

WordPressでホームページを公開

今回は、
■ドメインやサーバーの選定・取得
■ドメインとサーバーの紐づけ
■WordPressのインストール方法
■WordPressのプラグインやテーマの選定、インストール
までを説明していきます。

完全にWordPress、WEB制作の初級者の方向けの内容になるので、
これからWordPressを使ってブログやサイトを公開しようと考えている方には、
ぜひ目を通して頂きたいです。

もちろん、それ以外の方でも興味を持って頂ければ、
少し長いですが、最後まで目を通して頂ければと思います。

まずは、設置する環境（ドメインやサーバーなど）とホームページ公開完了までの流れをざっくりとみていきます。

今回の解説で利用する環境

今回利用する環境を事前にまとめておきます。
ドメイン：hpkaisetsu.me
レンタルサーバー：エックスサーバー（XSERVER）のX10プラン
使用するCMSツール：WordPress

ホームページを公開するまでの流れ

WordPressを使って、ホームページを公開するまでの流れを紹介します。

方法はいろいろありますし、使用するサーバーによってもいろいろと対応方法が変わってきますが、
今回は、弊社がお客様から設置を請け負った場合の流れを軸にして解説していきます。

流れとしては、
■サーバーの選定、契約
↓
■ドメインの選定、取得
↓
■ドメインとサーバーの紐づけ
↓
■FFFTP、データベースの準備
↓
■WordPressで使用するテーマを選定
↓
■WordPressをインストール
↓
■テーマをインストール
↓
■プラグインをインストール
↓
■脆弱性の対応
↓
■その他、諸々の設定
↓
■記事の投稿とサイトを公開

サーバーの選定、契約

サーバーの選定に関しては、
■サイトの規模は？
■アクセス数はどのくらいを想定している？
■どんな種類のサイトを作成するのか？（メディアサイト？ECサイト？企業サイト？ブログ？など）
■使用する言語は何？（PHP？Ruby？Python？など）
■CMS（WordPress、Joomla、concrete5など）は利用するのか？
■WEBを利用するのか？（Apache？Nginx？）
■データベースは何を利用するのか？（MySQL？PostgreSQL？SQLite？など）
■メールアドレスは使用するのか？
・
・
等、様々な点を考慮して決定します。

ただ、今回は初心者の方向けに書いている記事になります。
また、タイトル通りWordPressというCMSを使ってホームページを公開します。

その為、
・想定しているサイト規模、アクセス数
と、
・WordPressを利用するために必要なPHPとMySQLが利用できるか？
だけ意識して貰えばいいです。

で、今回は、中規模サイト（会社サイトやオウンドメディア、ブログサイトなど）で、1日30,000アクセスくらいを想定してみます。
※実際に1日30,000アクセス稼ぐのは結構ハードルが高いので、あくまで想定と考えてください。

サーバーには、共用サーバー、VPSサーバー、専用サーバー、クラウドサーバーなどいくつかの種類がありますが、
この規模のサイトであれば、共用サーバーで問題ないです。

また、現在の共用サーバーでPHPとMySQLを利用できないサーバーはまず無いので、
念の為にざっと確認する程度でOKです。

それでは、実際にどこのレンタルサーバー（共用サーバー）がいいのかを決めます。

↓

現在は多くのレンタルサーバーが存在していますが、
私がおすすめしているのは、エックスサーバーかmixhost（ミックスホスト）のいずれかです。
※最近は、ConoHa WINGも少しいいかなと思い始めています。
※いずれも、PHP、MySQLは問題なく使用できます。

他にもレンタルサーバーは多数あるので、興味のある方は一度検索して貰えばと思いますが、
金額やスペック、速度、情報量、あと評判などを考慮すると、上記のいずれかになると思います。

これらのレンタルサーバーに関しては以下のページでまとめているので、そちらで確認していただければ思います。
[ 初心者にもおすすめのレンタルサーバー ]

↓

で、今回は、エックスサーバーを利用することにします。

エックスサーバーの申し込み方法は、長くなるので別記事にまとめました。
そちらを参照してください。
[ エックスサーバーの申し込み ]
※今回想定しているサイト規模であれば、一番安い「X10プラン」でOKです。

エックスサーバーの申し込みが完了するとメールでFTP情報などが送られてきます。
そちらは、このあと使うので、無くさないように保存しておいてください。

ドメインの選定、取得

ドメインの選定

ドメインを決める際の注意点は、
■サイトの内容にあった文字列にすること
■長すぎるドメインは避けること
■ハイフン（-）を含める場合には、1つのみにすること
■できれば、comドメインかjpドメインを取得すること
　※空いていなければ、.infoや.netなどでもいいですが、.meや.coもおすすめです。
くらいです。

詳細は以下のページにまとめているので、そちらで確認をお願いします。
[ ドメインはどのように決めればいい？ ]

ドメインの取得

ドメインの取得自体は、難しくないです。
・欲しいドメインが空いているか検索
↓
・空いていれば、取得申請を行う
だけです。

が、ドメインをどこで取得、管理するかは重要です。

私は、お名前.comで取得して管理することをおすすめしています。
[ お名前.com ]

料金の支払先を統一したいという理由で、サーバーとドメインを同一業者でセットで申し込まれる方も多と思いますが、
後々、サーバーを乗り換えるということもあり得ます。

その場合、ドメインをお名前.comで管理しておくと、レコードやネームサーバーの変更も楽です。

お名前.comでのドメイン取得方法は簡単ですが、長くなるので以下の記事にまとめました。
そちらのページを参考に取得してください。
[ お名前.comでのドメイン取得方法 ]

ドメインとサーバーの紐づけ

ドメインとサーバーを紐づける場合には、
・DNSレコードの追加（ドメイン側の設定）
↓
・ドメインの領域設定（サーバー側の設定）
が必要になります。

DNSレコードの追加

サーバーの取得とドメインの取得が完了したら、
次は、そのドメインをサーバーに紐づけて、そのサーバーでホームページを公開できるようにします。

具体的には、ドメインを管理しているコントロールパネルから、
DNSレコードというものを登録します。

DNSレコードにはいくつかの種類があるのですが、
ホームページの公開で必要なレコードは、AレコードとMXレコードというものになります。

お名前.comでのレコードの登録方法については以下のページにまとめているので、
そちらを参照してみて下さい。
[ お名前.comでのDNSレコードの登録方法 ]

※あとで説明しますが、DNSレコードではなく、ネームサーバーを切り替える方法もあります。

ドメインの領域設定

DNSレコードの登録が完了したら、次はエックスサーバー側で該当ドメインの領域設定を行う必要があります。

といっても、エックスサーバーのコントロールパネル内にあるドメイン設定というメニューから、ドメインを追加するだけです。

設定方法については、以下を参照してください。
[ エックスサーバー ドメイン設定 ]

ネームサーバーの登録

上記では「ドメインとサーバーの紐づけ」方法としてDNSレコードの追加について説明しましたが、
ネームサーバーを書き換える方法もあります。

どちらでも難易度は変わらないので、興味のある方は以下を参照してみてください。
[ エックスサーバーのネームサーバーを利用する方法 ]

FTP、データベースの準備

次は、サーバー上にファイルをアップロードするためのFTPアカウントとWordPressなどで使用するデータベースの用意を行います。

【FTPアカウント】
通常、レンタルサーバーであれば、FTPアカウントはサーバーのコントロールパネルから追加、または、確認できます。
もしくは、サーバーの開通時に、メールなどで送られてきます。
※エックスサーバーの場合には、メールで送信されてきます。

分からなければ、サーバーの管理会社に確認すれば、直ぐに教えて貰えると思います。

【データベース】
データベースも、コントロールパネルから、簡単に追加、確認できます。
こちらも、分からければ、サーバー会社に問い合わせれば、教えて貰えるので、問合わせてみてください。

あと、FTPアカウントやデータベースのアカウント情報は、良く使用します。

必ず、安全な方法で、どこかに保存しておくことをおすすめします。
パスワードが分からなくなった場合は、再度設定し直しになるのも面倒ですからね。

このあとは、WordPressの設定に入っていきますが、
まずは、WordPressで使用するテーマというものを選定しておきます。
↓

WordPressで使用するテーマを選定

テーマとは、
WordPressでサイトを公開するために使用するHTMLやCSS、画像、PHPのコードなどが一つにまとまったもので、
サイトのデザインもテーマによって決まります。
※テーマを変更することで、サイトのデザインも変わります。

デフォルトでインストールされているテーマがありますが、
通常はそのまま使用せず、好みのデザインに合わせて別のテーマに変更します。

変更する場合、WordPressで使用するテーマは、
■自作する
OR
■既存の有料テーマを利用する
OR
■既存の無料テーマを利用する
の3パターンが考えられます。

自作すると、時間と工数が掛かるので、おすすめしません。
また、既存の有料テーマを利用すると1万円以上かかります。
ということで、
今回は解説用に使用するので、既存の無料テーマを利用する方法で解説します。

無料テーマについては、以下のページでまとめています。
[ 【WordPress】おすすめ無料テーマ｜SEO対策済み・レスポンシブ対応済み ]

今回は、SEOにも強いと言われているLuxeritas Theme（ルクセリタス）というテーマを利用します。

↓

因みに、
本格的にサイトを運営される場合には、
有料のテーマを購入されることをおすすめします。
[ 【WordPress】おすすめ有料テーマ5選｜SEO対策済み・レスポンシブ対応済み ]

使用するテーマが決まれば、次はWordPressをインストールしていきます。
↓

WordPressをインストール

WordPressのインストール方法はいくつかありますが、
最近のレンタルサーバーではコントロールパネル上から簡単にインストールできる機能が付いている場合が多いです。

今回利用するエックスサーバーでも「WordPress簡単インストール」という機能が用意されているので、そちらを利用してインストールします。
インストール方法については長くなるので、別記事でまとめています。
[ エックスサーバー WordPress簡単インストール ]

WordPressのインストールが完了したら、次は、先ほど選定したテーマをインストールします。
↓

テーマのインストール

テーマのインストール方法には、
■WordPess管理画面上から検索してインストールする
■テーマファイルをサイト上からダウンロードしてきてインストールする
の2通りあります。

今回使用する「Luxeritas Theme（ルクセリタス）」はWordPess管理画面上から検索できないテーマになるので、
後者の「テーマファイルをサイト上からダウンロードしてきてインストールする」でのインストールになります。

難し作業ではないので、さくっと終わらせるようにしましょう。

まず、以下のサイトからテーマをダウンロードしてください。
[ Luxeritas Theme ダウンロード ]

「本体」と「子テーマ」がありますが、両方ともダウンロードしてください。
※ファイルはZIP形式で圧縮されています。

次に、WordPress管理画面の「外観」→「新規追加」と画面を遷移してください。
画面左上にある「テーマをアップロード」をクリックすると、ZIPファイルのアップロード画面が表示されるので、
そこからインストールを行います。
「参照...」をクリックして、ダウンロードしたZIPファイルを選択、「今すぐインストール」をクリックするだけなので、インストールは簡単です。

インストールは、「本体」→「子テーマ」の順番に行ってください。
※「子テーマ」は、「本体」が無いと利用できません。
↓
インストールが完了したら、「子テーマ」の方を「有効化」してください。

これでテーマのインストールは完了です。

ユーザー側の公開画面「https://hpkaisetsu.me/」にアクセスしてみてください。
※ドメインは各自の環境のものに置き換えてください。

このような見た目になっていれば、インストールは成功です。

プラグインをインストール

WordPressを利用する場合、プラグイン（拡張機能のようなもの）というものを追加して、WordPress本体には備わっていない機能を追加します。
インストールするプラグインは以下にまとめてあります。
[ WordPressのおすすめプラグイン ]

プラグインのインストール方法は簡単です。
管理画面左カラムに「プラグイン」というメニューがあります。

その中の「新規追加」画面からプラグイン名で検索して、出てきた該当のプラグインを「インストール」ボタンをクリックしてインストールするだけです。

他にもインストール方法はありますが、それらも含めて詳細な方法を以下のページでまとめているので、そちらを参照してください。
[ WordPress プラグインのインストール方法 ]

脆弱性の対応

WordPressは人気のCMSの為に、世界中のハッカーなどから狙われやすいです。
そこで、運用開始前の初期の段階で対応しておいた方がいい脆弱性対応を行っておきます。

■管理画面の「パスワード」を強化
インストール時に複雑なものを設定されている思いますが、もし簡易な「パスワード」を設定されている場合には、必ず複雑な物に変更しておいてください。

パスワードを複雑な文字列にしておけば、運用方法に問題さえなければ、簡単には突破されることはないですが、
余裕があれば以下の対応もおすすめします。
↓

■wp-config.phpへのアクセス制限
WordPressには、「wp-config.php」という様々な情報を記載した重要な設定ファイルがあります。
例えば、データベースのアカウントやテーブルプレフィクスなどが記載されています。

簡単にアクセスされるのは良くないので、.htaccessを使ってアクセス制限を掛けます。
「wp-config.php」と同じ階層に以下の内容を記載した.htaccessをアップするだけです。

※「wp-config.php」は、WordPressのインストールディレクトリに入っています。

■スパム対策のプラグインをインストール
スパム対策のプラグインには「Akismet Anti-Spam」という有名なものがありますが、
私はがおすすめしているのは「Anti-Spam」というプラグインです。

■ログイン履歴を残す
監視のために、ログイン履歴を残しておくことをおすすめします。
方法は簡単で、「Crazy bone」というプラグインをインストールして有効化するだけです。

「Crazy bone」については、以下のページも参照してください。
[ 「Crazy Bone」で不正ログインの監視 ]

↓

さらに余裕があれば、WordPressの脆弱性対策についてまとめたページもあるので、そちらもチェックしてみて下さい。
[ WordPressの脆弱性対策を思いつく範囲でまとめてみました！ ]

その他、諸々の設定

それでは、さっそく記事の投稿を行っていきますが、
その前に、管理画面上からいくつかの設定を行っておきます。

パーマリンクの設定

パーマリンクの設定は、管理画面左カラムある「設定」メニュー -> 「パーマリンク設定」から行います。

「パーマリンク設定」画面へアクセスすると、デフォルトでは「基本」にチェックが入っています。
「基本」のままだと、記事URLが「https://hpkaisetsu.me/?p=123」みたいにパラメータがむき出しのURLになってしまい、
SEO上はあまり推奨されません。

「カスタム構造」にチェックを入れて、右側のテキストボックスに「/%postname%/」と登録しておいてください。

この設定にしておけば、
あとで説明しますが、記事投稿時に自由にパーマリンクを設定できるようになります。

「サイトのタイトル」と「キャッチフレーズ」の設定

「サイトのタイトル」と「キャッチフレーズ」の設定を行っておきます。

こちらは、管理画面左カラムある「設定」メニュー -> 「一般」から行います。

「サイトのタイトル」はホームページのタイトルとして、
「キャッチフレーズ」はメタディスクリプションなどで利用されることがあります。

特に利用しない場合もありますが、念の為に設定しておきましょう。

今回は、
「サイトのタイトル」 => サンプルブログ
「キャッチフレーズ」 => こちらは、テスト用のブログサイトです
と登録しておきます。

記事の投稿とサイトを公開

それでは、さっそく記事の投稿を行います。
記事の投稿は、管理画面左カラムある「投稿」メニューから行います。

投稿の画面に遷移すると、記事の一覧が表示されていると思います。
「Hello world!」というタイトルの記事がデフォルトで投稿されていますが、この記事はゴミなので、削除してください。

↓

「新規追加」というリンクをクリックしてください。
以下のような記事の投稿画面に遷移します。

こちらの画面で、記事のタイトルと本文を投稿していきます。

今回は、タイトルに「ホームページをオープンしました。」と登録します。

また、記事の本文には以下の内容を入力してください。
=========================================
ホームページをオープンしました。
初めての投稿記事です。
宜しくお願いします。
=========================================

↓

画面右カラムの一番下に「アイキャッチ」という項目があります。
「アイキャッチ」とは、記事の一覧ページのサムネイルや記事詳細ページのメイン画像などに使用される写真のことで、
こちらも登録を行います。

「アイキャッチ画像を設定」をクリックしてください。
↓

ドラッグ、または「ファイルを選択」をクリックして、ローカルからアイキャッチ画像として使用したい写真を選択します。
↓
アップロードすると、選択した写真が以下のように表示されます。

↓
画面右に表示されている「代替テキスト」を登録します。

「代替テキスト」はimgタグのaltに設定される項目です。
SEO対策にもなるので、きっちりと登録するようにしましょう。

設定が完了したら、「アイキャッチを設定」をクリックして、アイキャッチの設定が完了します。
↓

ここまでくれば、記事の入力は完了です。
↓
画面右側にある「公開」をクリックしてください。
登録が完了して、以下の様な画面に遷移します。

タイトルの投稿用テキストボックスの下に、パーマリンクという項目が追加されていると思います。

パーマリンクとは、各ページのURLの末尾の部分を指します。
例えば、
https://hpkaisetsu.me/cate1/cate2/example/
というURLがあったとすると、
このURLの最後の「example」という部分がパーマリンクになります。

こちらはSEOにもかかわる重要な設定になります。
デフォルトでは記事のタイトルがそのまま設定されてしまうので、必ず適切な内容に書き換えるようにしてください。
右側に表示されている「編集」をクリックすれば、書き換えが可能になります。

今回であれば、「homepage-open」と登録してみます。

登録後、設定したパーマリンクのURL（今回であれば、https://hpkaisetsu.me/homepage-open/）にアクセスしてみます。

テーマには「Luxeritas Theme（ルクセリタス）」を使用しているので、
以下の様な表示になっていると思います。

また、トップページ（今回であれば、https://hpkaisetsu.me/）の表示は以下のようになっていればOKです。

※テーマのバージョンによっては、見た目が変わる場合もあります。

↓

これで、WordPressを使ったホームページの公開まで完了しました。

が、まだ、投稿記事数が1つなのでこのままだと寂しい状況です。
積極的に記事を投稿してサイトの質を上げていくことも意識して下さい。