WordPressでホームページを公開

今回は、ざっくりとですが、WordPressを使って自分のサイトを公開するまでの流れを解説していきます。

ドメインやサーバの選定・取得から、WordPressのインストール方法、プラグインやテーマの選定、インストールまでを説明していきます。
完全にWordPress、WEB制作の初級者の方向けの内容になるので、
興味のある方は目を通して頂ければと思います。

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

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

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

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

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

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

流れとしては、
■サーバの選定、契約

■ドメインの選定、取得

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

■FFFTP、データベースの準備

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

■WordPressをインストール

■テーマをインストール

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

■脆弱性の対応

■その他、諸々の設定

■記事の投稿やコンテンツの追加

■サイトを公開

サーバの選定、契約

サーバの選定に関しては、
■サイトの規模は?
■アクセス数はどのくらいを想定している?
■どんな種類のサイトを作成するのか?(ECサイト?企業サイト?ブログ?など)
■使用する言語は何にするのか?(PHP?Ruby?Python?など)
■CMS(WordPress、Joomla、concrete5など)は利用するのか?
■どのようなソフトを利用するのか?(Apache?Nginx?)
■データベースは何を利用するのか?(MySQL?PostgreSQL?SQLite?など)


等を考慮して決定します。

今回は、タイトル通りWordPressでサイトを組むことを想定しています。
WordPressはプログラム言語にPHP、データベースとしてMySQLを使用するので、PHPとMySQLが使用できることを確認します。
※ただし、現在のレンタルサーバでPHPとMySQLを利用できないサーバは無いので、念の為にざっと確認する程度でOKです。

規模感は、例えば、1日30,000アクセスくらいを想定します。
※因みに、実際に1日30,000アクセス稼ぐのは結構ハードルが高いので、あくまで想定と考えて下さい。

この規模のサイトであれば、VPSサーバや専用サーバではなく、共用サーバで問題ないです。

次に、どこの共用サーバがいいのかを決めますが、
弊社では、共用サーバをすすめる場合には、エックスサーバさくらインターネットのどちらかです。
[ 【レンタルサーバ】おすすめの共用サーバ ]

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

今回は、エックスサーバを利用することにします。
サーバの申し込み方法は以下にまとめてあるので、そちらを参照してください。
[ エックスサーバの申し込み ]
※今回は解説用に利用するサーバなので、一番安い「X10プラン」を利用します。

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

ドメインの選定、取得

ドメインの選定

ドメインを決める際の注意点は、
■サイトの内容にあった文字列にすること
■長すぎるドメインは避けること
■ハイフン(-)を含める場合には、1つのみにすること
■できれば、comドメインかjpドメインを取得すること
くらいです。

[ ドメインはどのように決めればいい? ]

ドメインの取得

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

が、どこで管理するかは重要です。

私は、お名前.comでの管理をおすすめしています。
[ お名前.com ]

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

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

お名前.comでのドメイン取得方法は簡単です。
以下のページを参考に取得して下さい。
[ お名前.comでのドメイン取得方法 ]

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

ドメインとサーバを紐づける場合には、
・DNSレコードの追加(ドメイン側の設定)

・ドメインの領域設定(サーバ側の設定)
が必要になります。

DNSレコードの追加

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

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

登録するレコードは、
AレコードMXレコードというものになります。

お名前.comでのレコードの登録方法については以下でまとめています。
[ お名前.comでのDNSレコードの登録方法 ]

ドメインの領域設定

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

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

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

ネームサーバの登録

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

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

FTP、データベースの準備

FTPアカウントとデータベースの用意を行います。

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

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

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

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

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

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

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

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

無料テーマについては、以下のページでまとめています。
[ 【SEO対策済み】おすすめの無料WordPressテーマ ]

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

WordPressをインストール

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

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

テーマのインストール

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

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

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

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

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

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

インストールは、「本体」→「子テーマ」の順番に行ってください。
※「子テーマ」は、「本体」が無いと利用できません。

インストールが完了したら、「子テーマ」の方を「有効化」して下さい。
WordPress テーマのインストール 子テーマを有効化
これでテーマのインストールは完了です。

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

このような見た目になっていれば、インストールは成功です。
Luxeritas Theme(ルクセリタス)

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

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

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

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

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

脆弱性の対応

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

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

この段階で必ずやっておくべき対応は、「パスワード」を強化のみですが、
余裕があれば以下の対応もおすすめします。

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

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


Order deny,allow
Deny from all

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

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

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

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

その他、諸々の設定

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

パーマリンクの設定

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

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

「カスタム構造」にチェックを入れて、右側のテキストボックスに「/%postname%/」と登録しておいてください。
WordPress パーマリンクの設定変更

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

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

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

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

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

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

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

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

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

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

「新規追加」というリンクをクリックして下さい。
以下のような記事の投稿画面に遷移します。
WordPress 記事投稿画面
こちらの画面で、記事のタイトル本文を投稿していきます。

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

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

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

アイキャッチ画像の選択
ドラッグ、または「ファイルを選択」をクリックして、ローカルからアイキャッチ画像として使用したい写真を選択します。

アップロードすると、選択した写真が以下のように表示されます。
選択したアイキャッチ画像

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

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

アイキャッチ画像の設定完了

ここまでくれば、記事の入力は完了です。

画面右側にある「公開」をクリックして下さい。
登録が完了して、以下の様な画面に遷移します。
WordPress 記事投稿完了

タイトルの投稿用テキストボックスの下に、パーマリンクという項目が追加されていると思います。
WordPress 記事投稿完了
パーマリンクとは、各ページのURLの末尾の部分を指します。
例えば、
https://hpkaisetsu.me/cate1/cate2/example/
というURLがあったとすると、
このURLの最後の「example」という部分がパーマリンクになります。

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

今回であれば、「homepage-open」と登録してみます。
WordPress パーマリンクの設定

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

テーマには「Luxeritas Theme(ルクセリタス)」を使用しているので、
以下の様な表示になっていると思います。
WordPress 記事詳細ページ

また、トップページ(今回であれば、https://hpkaisetsu.me/)の表示は以下のようになっていればOKです。
WordPress サイトトップページ
※テーマのバージョンによっては、見た目が変わる場合もあります。