WordPressを使ったホームページやブログサイトの作り方と手順を解説

WordPressを使うと、簡単にホームページやブログなどのWebサイトを立てることができます。

この記事では、WordPressを使ったホームページやブログの作り方を一から解説しています。

レンタルサーバーでは簡単にインストールできる機能が備わっていることが多いですが、VPSやクラウドサーバーにはないため一から作成しなければなりません。

記事内ではさくらVPSの操作で説明していますが、その他のサーバーを使っている場合でも対応できるように補足を入れています。

ただし、各VPSやクラウドサービスで設定方法が異なる場合があるので、それぞれの環境に置き換えて試してみてください。

作成環境
サーバー環境:さくらのVPS
サーバーOS:Ubuntu

なお、ドメインやサーバー証明書はここでは取り扱いませんので、別記事(作成中)で紹介します。

サーバーの準備

WordPressを使うには、サーバーにいくつかのソフトウェアが必要です。

  • Webサーバーソフト
  • データベースソフト
  • PHP

サーバーにインストールされているかどうかは、手順の中で紹介している方法で確認してみてください。

各ソフトウェアが見つからないようであれば、インストール作業も行いましょう。

コンソールやSSHでサーバーに接続

まずはサーバーに接続しましょう。

さくらVPSの場合は、管理画面のコンソールから接続できます。

さくらVPSの管理画面を開き、「コンソール」>「VNCコンソール」を選ぶとサーバーの接続画面が表示されます。

さくらVPSからサーバーに接続する方法

コンソールのウィンドウが開いたら、ユーザー名とパスワードを入力しましょう。

ログインできればサーバーの操作が可能になります。

一方で管理画面を使わない場合は、TeraTermなどのアプリケーションを使ってパソコン上からSSH接続しましょう。

ファイルアップロードの準備

WordPressをインストールするには、サーバー上にファイルをアップロードする作業が必要なため、ファイル転送ができるアプリケーションをパソコンに準備しましょう。

例えば、以下のようなファイル転送用のアプリケーションがあります。

WinSCP

WinSCPは使いやすく、比較的簡単にファイルのアップロードが行えます。

※他にもFFFTPというファイル転送アプリケーションがありますが、SFTPでの接続がむずかしいのでWinSCPの使用をおすすめします。

以降では、アップロードにWinSCPを使用します。

WinSCPを開くとログイン情報の入力ウィンドウが表示されるので、サーバーのIPアドレスや接続アカウントを入力しましょう。

サーバーにSFTP接続するためのログイン

接続アカウントは、サーバーにログインしたときのユーザー名、パスワードを入力します。

また、サーバーの設定によっては「設定」から秘密鍵の指定が必要です。

サーバーにSFTP接続するための秘密鍵の設定

apache2(Webサーバーソフト)の設定

apache2の確認

まずはWebサーバーソフトがインストールされているか確認しましょう。

さきほどサーバーに接続したコンソール上で、次のコマンドを入力します。

systemctl status apache2

応答があればすでにインストールされています。

該当するソフトがない場合は、下記のように”could not be found.”が表示されます。

もし応答がない場合は次のコマンドでも確認できます。

dpkg -l | grep apache

apache2が表示されたら、すでにインストールされています。

インストールされていない場合は、次のインストール手順を試してみてください。

apache2のインストール手順

サーバーのコンソールで下記のコマンドを入力しましょう。

sudo apt-get install apache2

インストールがはじまるので、処理が終わるまで待ちましょう。

apache2の設定

ディレクトリ(フォルダ)を作成

cd /var/www
sudo mkdir /var/www/domain
sudo chmod -R 755 /var/www/domain

// "domain"の部分は、サーバーに設定したドメイン名に置き換えてください。
// ドメイン未設定の場合は自分でわかりやすい名前を付けましょう。
cd /etc/apache2/sites-available
sudo cp -p 000-default.conf domain.conf
sudo vi domain.conf

// "domain"の部分は一つ上で入力したものと同じ文字列に置き換えてください。

最後のコマンドを入力するとファイルの編集画面に切り替わります。

下記のようなテキストが表示されるので、変更前の青文字の部分を、変更後のように修正します。

// 変更前
<VirtualHost *:80>
…
#ServerName www.example.com
DocumentRoot /var/www/html
…
</VirtualHost>
// 変更後
<VirtualHost *:80>
…
ServerName domain.com
DocumentRoot /var/www/domain
…
</VirtualHost>

// "domain"の部分はディレクトリの作成で入力した文字列に置き換えてください。
// "domain.com"の部分は実際のドメイン名またはIPアドレスに置き換えてください。

※コンソールでのファイル編集のやり方

編集画面で「i」を入力すると、編集モードに切り替わります。

編集が終わったら「:wq」と続けて入力しEnterを押すと、編集内容が保存され元の画面に戻ります。

最後は設定ファイルを有効にするために、次のコマンドを入力します。

sudo a2ensite domain.conf
sudo a2dissite 000-default.conf

これでapache2の設定は終わりです。

apache2の起動と確認

ソフトの確認で使用したコマンドを再度入力して、Webサーバーが動作しているか確認しましょう。

systemctl status apache2

動いていなければ、次のコマンドでWebサーバーを起動させます。

systemctl start apache2

これでサーバー上のWebサイトにアクセスできるようになります。

実際にブラウザからアクセスしてみましょう。

http://設定したドメイン名

まだドメイン取得や設定が終わっていない場合は、IPアドレスでも確認が可能です。

次のコマンドでサーバーのIPアドレスを確認しましょう。

hostname -I
>XXX.XXX.XXX.XXX // IPアドレスが表示されます。

表示されたIPアドレスを使った下記のようなURLに、ブラウザからアクセスします。

http://サーバーのIPアドレス

下のようなページが表示されれば、Webサーバーの起動は成功です。

ページが表示されない場合は、サーバー側でWebサイトへのアクセスが拒否されている可能性があります。

さくらVPSの場合は、管理画面のパケットフィルター設定を確認してみましょう。

接続可能ポートに「Web」が入っていなければWebサイトにアクセスできませんので、「パケットフィルターを設定」から追加しましょう。

さくらVPSの管理画面のパケットフィルター(ファイアウォール)設定

ページが表示されたら、Webサーバーの設定はひとまず完了です。

MariaDB(データベース)の設定

ここではデータベースソフトのMariaDBを扱います。

MariaDBはMySQLと互換性のあるデータベースで、WordPressにも利用できます。

MariaDBの確認

同じようにデータベースソフトの有無を、次のコマンドで確認しましょう。

systemctl status mariadb

応答がない場合は、次のコマンドを試してみてください。

dpkg -l | grep mariadb

mariadb-serverが表示されたらインストール済みです。

MariaDBの起動と設定

まずはデータベースが動作しているか確認しましょう。

systemctl status mariadb

応答がない場合は、次のコマンドでデータベースを起動させます。

systemctl start mariadb

起動できたら、データベースにログインしましょう。

sudo mariadb -uroot -p

// 上記コマンドを実行したあと、パスワードを入力します。
// パスワードなしの場合は、入力せずEnterだけを押します。

続いて、WordPress用のデータベースを作成します。

create database wordpress;

// wordpressの部分はデータベース名なので、好きな名前を付けます。

次にユーザーを作成し、アクセス権限を付与します。

create user 'user'@'localhost' identified by 'password';
grant all privileges on wordpress.* to 'user'@'localhost';

// userにはユーザー名、passwordにはパスワード、wordpressにはデータベース名を入力します。

PHPの設定

PHPの確認

PHPも同じように確認しましょう。

dpkg -l | grep php

PHPの場合は、php7やphp8などバージョンの数字がついています(数字がない場合もあります)。

いずれかのバージョンがインストールされていれば問題ありませんが、WordPressのカスタマイズを行うときにバージョン情報が必要になるので憶えておきましょう。

PHPの動作確認

設定が終わったら、PHPのプログラムが正しく動くか確認しましょう。

メモ帳などでtest.phpという名前でファイルを作り、次のコードをコピーして貼り付けます。

<?php echo date("Y-m-d H:i:s"); ?>

続いて、作成したファイルをWinSCPなどでサーバーにアップロードしましょう。

WinSCPでサーバーに接続すると、下記のような画面が表示されます。

左側には自分のパソコン内にあるファイル、右側にはサーバー内のファイルが表示されます。

左側のパネルでtest.phpのあるフォルダ階層に移動し、右側のパネルでWebサーバーのルート階層に移動しましょう。

それぞれ目的の階層が表示できたら、左側のファイル欄でtest.phpを選択してから、その上にある「アップロード」ボタンを押しましょう。

サーバーへのアップロードが開始され、処理が終わると右側のファイル欄にコピーされるのが確認できるかと思います。

アップロードができたらWebサーバーの動作確認のときと同様に、ブラウザで下記のいずれかのURLにアクセスしてみてください。

http://設定したドメイン名/test.php
※ドメイン未設定の場合はIPアドレスに置き換えてください。

下記のように、現在日時が表示されたらPHPは動作しています。

WordPressインストール

WordPressのダウンロード

まずはWordPressを公式サイトからダウンロードしましょう。

WordPress公式サイト

サイトを開くと中央あたりに下のようなダウンロードボタンがあるので、クリックしてダウンロードしましょう。

WordPressの最新版のダウンロード先

ダウンロードができたらファイルを解凍し、フォルダの名前を「app」に変更しましょう。

WordPressのアップロード

WordPressフォルダのアップロードは、PHPの動作確認のときと同じ要領です。

左側のパネルでさきほどのWordPressのフォルダの階層に移動し、右側のパネルでWebサーバーのルート階層に移動します。

それぞれ目的の階層が表示できたら、左側のファイル欄でWordPressフォルダ「wp」を選択してから、その上にある「アップロード」ボタンを押しましょう。

アップロードが終わると、右側のファイル欄にWordPressフォルダがコピーされます。

WordPressの初期設定

まずは、下記のURLにブラウザでアクセスしてみましょう。

http://設定したドメイン名/wp
※ドメイン未設定の場合はIPアドレスに置き換えてください。

下記のようなページが表示されるので、「さあ、始めましょう!」をクリックしましょう。

続いて、WordPressのデータベース情報を入力します。

データベースの設定のところで作成したデータベース名、ユーザー名、パスワードをそれぞれ入力します。

その他の項目は入力せず、「送信」をクリックします。

ページが切り替わったら、「インストール実行」をクリックしましょう。

最後に、Webサイトのタイトル、管理画面のログインアカウント(ユーザー名、パスワード)、通知を受信するメールアドレスを入力します。

Webサイトの準備に時間がかかりそうなら、「検索エンジンがサイトをインデックスしないようにする」を選択しましょう。

この設定はあとから変更できるので、WordPressのURL設定(パーマリンク)、ドメイン、サーバー証明書などWebサイトのURLに関わる設定を終わらせてから再度変更しましょう。

「WordPressをインストール」をクリックするとインストールがはじまり、次のページに移ります。

左下の「ログイン」をクリックすると、WordPress管理画面のログインページに移ります。

さきほど入力したユーザー名、パスワードを入力してログインできれば、WordPressのインストール完了です。

まとめ

この記事では、WordPressを使ってWebサイトを一から作る方法を紹介しました。

レンタルサーバーによっては簡単にインストールできる機能もあるため、一から作成するケースは多くはないかもしれません。

ただ、自分で作成することでWordPressがどんな仕組みなのかがわかりますし、何かの不具合が起こったときの対処も理解しやすくなります。

また、WordPressテーマや機能などのカスタマイズにも役立ちます。

この記事を参考にして、ホームページやブログをぜひ作成してみてください。

WordPressで「返答が正しい JSON レスポンスではありません」が出て、記事を投稿できないときの対処方法

WordPressを立てていざ投稿しようとすると、次のようなエラーが表示されることがあります。

「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」

このエラーの影響で、記事の新規投稿だけでなく更新も行えなくなります。

この記事では、上記のようなエラーを解消して正常に投稿できるようにする方法を紹介します。

エラーの原因と対処方法

ブラウザでエラーを見てみると、更新処理に必要なアクセス先が見つからずにエラーになっているようです。

管理画面にアクセスできるのに記事の更新だけできない場合は、WordPress内部でリンクがおかしくなっている可能性があります。

これを解消するには下記を確認してみましょう。

  • WordPressのパーマリンク設定を確認
  • .htaccessが設置されているか
  • サイトルートのindex.phpに誤りがある

以降で一つずつ見ていきましょう。

WordPressのパーマリンク設定を確認

パーマリンク設定ページのパーマリンク構造が「基本」以外になっている場合は、「基本」に変えると解消することがあります。

パーマリンク設定の変更によって記事投稿ができるようであれば、Webサーバ側で設定した内容が影響している可能性が高いです。

ただし、パーマリンク構造が「基本」だとURLがわかりにくくSEO的にも良くないので、他の方法での解決を試してみましょう。

.htaccessを確認する

WordPressのサイトルートに.htaccessファイルがなかったり、記述に誤りがあったりするとエラーになります。

設置されていない場合は、以下のようなファイルを.htaccessとして作成します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

index.phpに誤りがある

WordPressアドレスを変更している場合は、index.php内のリンクも変更する必要があります。

index.php内のURLが次のようにWordPressアドレスになっているか確認してみましょう。

/** Loads the WordPress Environment and Template */
require __DIR__ . '/app/wp-blog-header.php';

まとめ

「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」のエラーが表示される場合は、更新処理のURLをうまく辿れないことが原因です。

URLに関係する.htaccessやWordPressの設定を見直すことで解消することがあります。