Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@ka24

レンタルサーバーでホームページ運用を始めるまでの導入手順（XREA・WordPress）

Last updated at Posted at 2022-07-03

会社概要を載せたホームページを作りたいという相談を受け、レンタルサーバーのXREAにWordPressを導入する形で実践してみました。
「こうやれば導入できるよ」「セキュリティ対策はこんな感じだよ」「無料だとここまで実現できて、有料にするとこんなことができるよ」「運用面はここを気を付けてね」と説明するために内容をまとめます。
（掲載しているレンタルサーバーのサービス情報や画面キャプチャは、2022/7 時点のものです）

目指すゴール

  • https://XXXXX.shop にアクセスし、ホームページを閲覧できること（ホスト名XXXはご自身で決めた値が入ります）
  • ホームページに会社概要（今回作成するページ）が表示されること
  • 無料で利用できること（ただし今回用いた.shopドメインの無料期間は１年間となっているため、それ以降は更新費用が発生します）
  • 最低限のセキュリティ対策を実施していること
    • SSL対応
    • 不正アクセス対策
    • スパム対策

使用する環境とスペック

項目 XREA Free（今回はこの無料プランを選択） XREA Plus
初期費用 無料 無料
価格（12か月契約時の月額） 無料 210円
容量 1GB 100GB
転送量上限（1日） 1GB / 日 64GB / 日
SSH 〇 〇
広告表示 あり なし
最大ドメイン数 10個 64個
提供サブドメイン × xrea.jp / xrea.bz / xrea.nu / xrea.cc / happy.nu / cute.bz から3個
商用利用 〇 〇

（訴求したい項目を抜粋しました。詳細は https://www.xrea.com/spec/ を参照してください）

導入手順

導入手順の全体感

今回実施する導入手順では、以下の内容を行います。

  • XREAの利用に必要なアカウントを作成する

  • XREAの設定を行う

    1. データベースを作成する
    2. WordPressをインストールする
    3. サイト設定を変更する

  • XREAのサーバーにインストールしたWordPressの設定を行う

    1. 初期設定をする（データベースとの接続、アカウントの作成）
    2. 外観（テーマ）を変更する
    3. 会社概要ページを作成する
    4. 不要なウィジェットを削除する
    5. セキュリティ強化のためのプラグインを導入する

XREAの利用に必要なアカウントを作成する

XREAを利用するためにはバリュードメインのユーザー登録が必要となるため、
公式マニュアルの「1. バリュードメイン ユーザー登録」と「2. XREAのアカウント作成」を実施します。
（公式マニュアルに詳しく載っているため、ここでは詳細を割愛します）

20220701_232017_アカウント作成 _ XREA（エクスリア） - Google Chr.png

XREAのアカウント作成まで完了すると、以下の画面が表示されます。
画面に記載のとおり、反映されるまで時間がかかるため、ここで一息つきます。

20220701_231325_XREAの管理・購入 _ バリュードメイン (ユーザー名_namid.png

XREAの設定を行う

XREAのコントロールパネルにログインする

XREAのコントロールパネルにログインします。
コントロールパネルは、バリュードメインのページにある「新コントロールパネル」からアクセスできます。

20220701_234847_Snapshot.png

ここで入力するアカウント名は、バリュードメインのユーザー名ではなく、XREAのアカウント名です。

20220701_232435_ログイン _ XREA Control Panel - Google.png

データベースを作成する

コントロールパネルの左メニューにある「データベース」を選択します。
そして「MySQL」を選択し、「データベースの新規作成」ボタンを押下します。

20220701_235746_MySQL _ データベース設定 _ XREA Control Pa.png

任意のパスワードを入力し、「データベースを新規作成する」ボタンを押下します。

20220702_000131_MySQL _ データベース設定 _ XREA Control Pa.png

データベースの作成が完了しました。

20220702_000155_MySQL _ データベース設定 _ XREA Control Pa.png

WordPressをインストールする

コントロールパネルの左メニューにある「サイト設定」を選択します。
サイト一覧からWordPressをインストールするサイトを押下します。
今回は.shopドメインのサイトを選択します。

20220702_001917_サイト一覧 _ サイト設定 _ XREA Control Panel.png

画面下部にスクロールし、CMSインストールの「WordPress」を押下します。

20220702_001805_www.nmdshouten.shop _ サイト詳細 _ サイト設.png

インストールパスを確認し「CMSインストール」ボタンを押下します。

20220702_002027_nmdshouten.shop _ サイト詳細 _ サイト設定 _ .png

WordPressのインストールが完了しました。

20220702_002113_nmdshouten.shop _ サイト詳細 _ サイト設定 _ .png

サイト設定を変更する（SSL設定の有効化、PHPのバージョンアップ）

SSL対応、およびPHPのバージョンアップを行います。
サイト一覧から.shopドメインのサイトを選択し、「サイト設定の変更」ボタンを押下します。

20220702_003939_nmdshouten.shop _ サイト詳細 _ サイト設定 _ .png

転送設定の入力欄を空欄にし、SSLの「無料SSL」にチェックを入れます。
そしてPHPの「php74」にチェックを入れて、「サイト設定を変更する」ボタンを押下します。

20220702_173641_サイト一覧 _ サイト設定 _ XREA Control Panel.png

（補足）PHPのバージョンアップを行う理由は、初期値（php70）のままだとWordPressの管理画面でバージョンが古い旨の警告が出るためです。とはいえ、メジャーバージョンを8に上げるのはWordPressとの互換性の面で不安だったので、今回はphp74を選択しました。

WordPressにアクセスする

5～10程度待ってから、サイト（ https://XXXXX.shop ）にアクセスします。
設定が反映されるまでは403エラーが表示される場合があります。

WordPressのページが表示されたら成功です。

20220702_004935_WordPress › 構成ファイルのセットアップ - Google.png

以上で、XREAの設定は完了です。

XREAのサーバーにインストールしたWordPressの設定を行う

初期設定をする（データベースとの接続、アカウントの作成）

上記画面の「さあ、始めましょう！」ボタンを押下し、データベースの接続設定を行います。
ここでは先ほど作成したデータベースの情報を入力して、「送信」ボタンを押下します。

20220702_005648_WordPress › 構成ファイルのセットアップ - Google.png

「インストール実行」ボタンを押下します。

20220702_005845_WordPress › 構成ファイルのセットアップ - Google.png

次に必要情報の各項目を入力し、「WordPressをインストール」ボタンを押下します。
インストールが完了すると、この画面で入力したメールアドレスに通知メールが届きます。

20220702_010713_WordPress › インストール - Google Chrome.png

インストールに成功しました。「ログイン」ボタンを押下します。

20220702_010756_WordPress › インストール - Google Chrome.png

少し時間がかかるようです。

20220702_010828_メンテナンス - Google Chrome.png

サイト設置が完了した旨の通知メールが届き、画面をリロードするとログイン画面が表示されました。
以降はログイン後の管理画面で設定を行います。

20220702_011115_ログイン ‹ なみだ商会 — WordPress - Google .png

外観（テーマ）を変更する

ホームページの外観を好みのデザインに変更します。
左メニューの「外観」を選択します。

メニュー-外観.png

「新しいテーマを追加」を押下します。

テーマ一覧.png

好きなテーマを選んで「インストール」→「有効化」を行います。

テーマインストール画面.png

テーマ有効化画面.png

サイトにアクセスすると、反映されていることがわかります。

20220702_013444_なみだ商会 – Just another WordPress sit.png

会社概要ページを作成する

会社概要を記したページを作成します。
左メニューの「固定ページ」→「新規追加」を選択します。

20220702_174736_Snapshot.png

以下のようなページを作成します。
テーブルを作成して、必要な項目を記載します。（詳細な手順は割愛します）
作成が完了したら、右上の歯車アイコンを押下します。
メニューが表示されるので、表示状態を「公開」にして「更新」ボタンを押下します。

20220702_175054_固定ページを編集 “会社概要” ‹ なみだ商会 — WordPres.png

次に、作成したページを表示させるための設定をします。
左メニューの「設定」→「表示設定」を選択します。

20220702_175246_Snapshot.png

ホームページの表示で「固定ページ」にチェックを入れ、ホームページは先ほど作成した「会社概要」を選択します。
投稿ページは「－選択－」を選択し、「変更を保存」ボタンを押下します。

20220702_191950_表示設定 ‹ example商会 — WordPress - Goo.png

サイトにアクセスすると、会社概要が表示されていることを確認できます。

20220702_192607_example商会 – Just another WordPress.png

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

今回、サイトの下部にあるアーカイブ、カテゴリー、メタ情報などは不要なので削除します。
左メニューの「外観」→「ウィジェット」を選択します。

20220702_180921_Snapshot.png

初期状態は以下のような構成となっています。
ブログサイドバーとフッター１にある「従来のウィジェット」をすべて削除します。

20220702_181035_ウィジェット ‹ なみだ商会 — WordPress - Googl.png

必要に応じて、フッター１に「ログイン/ログアウト」を追加します。

20220702_181150_ウィジェット ‹ なみだ商会 — WordPress - Googl.png

サイトにアクセスすると、サイトの下部がすっきりしていることを確認できます。

20220702_192628_example商会 – Just another WordPress.png

セキュリティ強化のためのプラグインを導入する

今回は、以下のプラグインを追加します。

  • SiteGuard WP Plugin（不正アクセス対策）
  • Akismet Spam Protection（スパム対策）

まず、SiteGuard WP Pluginを追加します。
左メニューの「プラグイン」を選択し、「新規追加」ボタンを押下します。

20220702_162517_プラグイン ‹ なみだ商会 — WordPress - Google.png

「SiteGuard WP Plugin」でキーワード検索し、該当するプラグインの「今すぐインストール」→「有効化」を実行します。

20220702_163557_プラグインを追加 ‹ なみだ商会 — WordPress - Goo.png

20220702_163639_プラグインを追加 ‹ なみだ商会 — WordPress - Goo.png

有効化を実行すると、Internal Server Errorが出ることがありますが、リロードすると管理画面が表示されます。

20220702_163814_20201118-01-1024x593.png (1024×593.png

次に、Akismet Spam Protectionを追加します。
先程と同様に、「Akismet Spam Protection」でキーワード検索し、該当するプラグインの「今すぐインストール」→「有効化」を実行します。

20220702_164454_プラグインを追加 ‹ なみだ商会 — WordPress - Goo.png

こちらのプラグインはアカウント設定が必要のようです。
「Akismet アカウントを設定」ボタンを押下します。

20220702_164802_Akismet Anti-Spam (アンチスパム) ‹ なみだ商会.png

プランが表示されるので「Get Personal」を選択します。

20220702_164817_Select an Akismet Subscription - G.png

メールアドレス、氏名、ホームページのURLを入力します。
３つのチェックボックスを選択し、料金設定は一番左まで引っ張ります。（ごめんなさい）
その後、「CONTINUE WITH PERSONAL SUBSCRIPTION」ボタンを押下します。

20220702_164958_Select an Akismet Subscription - G.png

メールに確認コードが届くため、入力して「Continue」ボタンを押下します。

20220702_165123_Select an Akismet Subscription - G.png

設定が完了したらAPIキーが表示されるため、APIキーの値を控えます。
左メニューの「プラグイン」を開き、Akismet Anti-Spamの「設定」ボタンを押下します。

20220702_165339_プラグイン ‹ なみだ商会 — WordPress - Google.png

「手動でAPIキーを入力」を選択し、APIキーを入力して「APIキーを使って接続する」ボタンを押下します。

20220702_165408_Akismet Anti-Spam (アンチスパム) ‹ なみだ商会.png

20220702_165426_Akismet Anti-Spam (アンチスパム) ‹ なみだ商会.png

以上で、WordPressの設定は完了です。
必要に応じてプラグインの追加、ページの作成、設定の変更などを実施してください。

（追記）問い合わせフォームのためのプラグインを導入する

追加の要望があり、問い合わせフォームを追加するためのプラグインとして、Contact From 7を追加します。
「Contact From 7」でキーワード検索し、該当するプラグインの「今すぐインストール」→「有効化」を実行します。

20220704_210724_プラグインを追加 ‹ example商店 — WordPress -.png

有効化が完了すると、左メニューに「お問い合わせ」が追加されるので、「お問い合わせ」→「新規追加」を選択します。

20220704_211739_Snapshot.png

コンタクトフォームの作成画面が開きます。
フォームは特に変更したい箇所がなければそのままとし、タイトルだけ入力して「保存」ボタンを押下します。

20220704_211650_コンタクトフォームを追加 ‹ example商店 — WordPre.png

次に自動返信メールの文面を入力します。
メールタブを開き、「メール(2)を使用」にチェックを入れます。

20220704_212604_コンタクトフォームの編集 ‹ example商店 — WordPre.png

メッセージなどを入力して「保存」ボタンを押下します。

20220704_213248_コンタクトフォームの編集 ‹ example商店 — WordPre.png

保存後、ショートコードをコピーします。このショートコードを固定ページに貼り付け、お問い合わせフォームの画面を作成します。

20220704_213508_コンタクトフォームの編集 ‹ example商店 — WordPre.png

左メニューの「固定ページ」→「新規追加」を開きます。

20220704_213753_Snapshot.png

以下のような画面を作成し、「公開」ボタンを押下します。

20220704_214005_新規固定ページを追加 ‹ example商店 — WordPress.png

お問い合わせフォームの画面をメニューに追加します。左メニューの「外観」→「テーマ」を開きます。
（ここからは各自が使用しているテーマに応じた設定となります）

20220704_214741_Snapshot.png

使用しているテーマの「カスタマイズ」ボタンを押下します。

20220704_214838_テーマ ‹ example商店 — WordPress - Goog.png

メニューを選択します。

20220704_214901_カスタマイズ_ example商店 – Just another W.png

位置をトップメニューとし、「項目を追加」ボタンを押下します。

20220704_215033_カスタマイズ_ example商店 – Just another W.png

固定ページの会社概要とお問い合わせフォームを追加し、「公開」ボタンを押下します。

20220704_215122_カスタマイズ_ example商店 – Just another W.png

これで、ホームページにメニューが表示され、お問い合わせフォームが表示されることを確認できました。
試しに送信してみると、送信ボタンの下にメッセージが表示されました。

20220704_215244_お問い合わせフォーム – example商店 - Google Ch.png

XREAの有料プランについて

今回は.shopドメインを使用しました。
.shopドメインは一年間無料で使用できますが、二年目以降は更新費用が 4,378円/年 発生します。
（.shopドメインは自動更新されないため、更新を実施しなければ請求されません）

しかし、一年以上の継続的な運用を前提とするなら、
XREA Freeプランのままドメインの更新費用を支払うよりも最初からXREA Plusプランを選択するのがお得に感じます。
XREA Plusの料金は2,514円/年なので上述の更新費用より安く、さらに広告表示なし等の恩恵もあります。
本格的な運用を始める前に、検討してみるとよいかもしれません。（2022/7 時点の情報です）

今後検討すべきこと

今回は実施しなかったものの、本格的に運用するなら検討すべきと思うことを記載します。

  • ドメイン名の検討
    今回は無料で利用できるもの（.shop）を用いましたが、必要に応じて独自ドメインを取得するなど検討すべきです。

  • 広告の非表示
    XREA Freeプランだと広告が表示されます。企業のホームページであれば、広告の非表示は必須に感じます。

  • ユーザー権限の最適化
    本来、ユーザーごとに必要な最小権限を割り振るべきです。
    例えば日常的な記事の投稿を担うユーザーには、編集者権限をもつユーザーを作成して割り当てるのがよいです。

  • SEO対策
    ホームページへの集客を求めるなら、検索エンジンの検索結果で上位に表示されるために検討すべきです。
    SEO対策用のプラグインがあるため、必要に応じて導入するとよいです。
    また、左メニューの「設定」を開き、「検索エンジンがサイトをインデックスしないようにする」にチェックを入れると、
    Google検索などで出てこなくなります。開設準備中などはチェックを入れておくとよいです。
    20220703_130057_表示設定 ‹ example商会 — WordPress - Goo.png

運用面の検討

  • 定期的なバックアップ
    何らかの攻撃や障害に備えて定期的なバックアップを取っておくと、ダウンタイムを短縮できます。
    これもプラグインがあります。（例： BackWPup – WordPress Backup Plugin ）

  • 脆弱性診断
    URLを入力するだけで診断してくれるサービスや、定期的に診断してくれるサービスがあります。
    プラグインもあるので導入を検討してもよいと思います。（例： WPScan – WordPress Security Scanner ）

  • システムの鮮度維持
    WordPress本体、プラグイン、テーマのバージョンは最新にしましょう。
    WordPressの管理画面にログインして左メニューの「更新」を開くと、最新版の有無を確認できます。
    20220702_161900_WordPress の更新 ‹ なみだ商会 — WordPress .png

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?