①テストサイトを作ろう【WordPressテーマの自作】

公開日:2021年8月29日 テーマ作り
①テストサイトを作ろう【WordPressテーマの自作】

今回のテーマ作りでは、順を追って1つ1つの部品を理解しながら進めていっていただきたいので、いきなり今稼働しているサイトへの実装はできません(実装してもある程度進まないと表示されないので意味がありません)。まずは、テーマを作るためのサイトを作りましょう。

知識のある方の場合、パソコン上にバーチャルサーバーを導入してローカルで作る(意味分かる?)とお考えの方もいらっしゃると思いますが、ローカル環境とレンタルサーバーの環境が異なると、サーバーの仕様によるトラブルなのか、テーマの不具合によるトラブルなのかの判別ができませんので、今稼働しているサイトが収容されているサーバーへ別のサイトを手動インストールする方法をおすすめします。

なお、手動インストールをしたことがない、難しいという方は今後のトラブル対処などで躓く可能性がありますから、ここでは簡易的に手順を列記していく形とさせていただきます。

本ページおよび、制作過程のページは、実際に作成しながら進めています。前後ページへの挿入を行う必要性、内容を忘れないように書き留めていく必要があることから、公開済みの状態で内容を充実させていっていますので、お見苦しい点が多々あるかとは思いますが、ご容赦ください。

1.レンタルサーバーでテストサイト用のデータベースを作成する

現在稼働しているサイトで契約しているサーバーで、新しくテストサイト用のデータベースを作成します。

WordPressの設定ファイル(wp-config.php)上の接頭辞を変えて現状のデータベース上にテストサイト用のデータを格納することも可能ですが、誤った操作などによって稼働中のサイトでトラブルが発生する可能性をゼロにするため、新規にデータベースを追加することをおすすめします。

データベースを作成したら、データベースにユーザーを割り当て、「データベース名」「データベースの場所(別のサーバーなのか、同一サーバーなのか)」「ユーザー名」「パスワード」をメモ帳などへ保存しておきます。

2.WordPressの入手と設定ファイルの準備

WordPressの公式サイトから最新版のWordPressを入手します。

ダウンロードが終わったら、パソコン上で解凍します。

解凍したファイルの中にある「wp-config-sample.php」を「wp-config.php」へリネームします。

「wp-config.php」を開き、以下の部分を変更します

define( 'DB_NAME', 'database_name_here' );

のdatabase_name_hereを先ほど保存した 「データベース名」 に書き換えます

define( 'DB_USER', 'username_here' );

のusername_hereを先程保存した「ユーザー名」に書き換えます

define( 'DB_PASSWORD', 'password_here' );

のpassword_hereを先程保存した「パスワード」に書き換えます

define( 'DB_HOST', 'localhost' );

のlocalhostを先程保存した「データベースの場所」に書き換えます(同一サーバーの場合はそのままでOK)

$table_prefix = 'wp_';

のwp_の部分を任意の文字列へ書き換えます

この変更は通常パソコンに標準で搭載されているメモ帳などのエディタでも大丈夫かとは思いますが、できれば、TerapadEmEditorなどテキストエディタ(どちらも無料です)を使うようにしましょう。

この「wp_」がこれからインストールするサイトのデータテーブルすべての先頭に接頭辞として付きます(例:wp_optionsなど)。そのままでも構いませんが、誤って他のサイトのデータを上書きしてしまわぬよう、「test_」など分かりやすいものにすることをおすすめします。

3.ファイル類のアップロードと新規インストール

FTPクライアントツールで目的の場所(現在稼働しているサイトの場所)を開きます。

新しくディレクトリ(フォルダ)を作成します。フォルダ名は「testdrive」などが良いかも知れません。

作成したディレクトリを開き、パソコン上にあるファイル・フォルダをアップロードします。

パソコンによっては解凍時に「wordpress」というフォルダができ、その中に「wp-admin」フォルダや「index.php」などがある場合がありますが、アップロードするのは「wp-admin」「wp-include」「wp-content」とその他のファイル類であることに注意してください(「wordpress」フォルダをアップロードしないでください)

アップロードが完了したら、以下のURLを開きます

https://現在稼働しているサイトのドメイン/作成したディレクトリ

※ドメインが「hogehoge.com」、ディレクトリが「testdrive」の場合は以下のようになります

https://hogehoge.com/testdrive

非SSLサイトの場合はhttp://hogehoge.com/testdriveとします

インストールページが開いたらOKです、必要な事項を入力してインストールを完了しましょう!

「検索エンジンがサイトをインデックスしないようにする」のチェックを外すと作成したサイトが検索エンジンにクロールされ、ウェブ検索の対象にされてしまう可能性がありますので、チェックは外さないようにしてください

もしも「データベース接続エラー」と表示されたら、先ほどの「wp-config.php」で書き換えた内容に間違いがあります。よくあるのは各書き換え項目前後の「’」を削除してしまうケースです。

「404」エラーの場合はURLに誤りがあります

「403」エラーの場合は、サーバー設定を見直す必要があるかも知れません

その他インストール時のエラーについてはいろいろなページで対処方法が紹介されていますので、ググって調べてください

インストールが完了したら、できれば以下のアクセス制限と最低限のセキュリティ設定をしましょう

インストール後の設定

管理ユーザーのメールアドレスを再設定しましょう

WordPressはインストール時に設定したメールアドレスを「サイトのメールアドレス」と「最初の管理ユーザーのメールアドレス」両方に使用します。

サイトのメールアドレスは、ユーザーへ何かを通知する際のメールアドレスということになり、不正アクセスを試みる際にこのメールアドレス+パスワードでアタックしてくることが多いです。

従って、インストール時のままの設定ではログインに必要な情報のうちの1つを安易に開示してしまっていることとなり、セキュリティ上問題が大きいですから、必ず管理ユーザーのメールアドレスは別のもの、できれば別ドメインのアドレスにすることをおすすめします。

公開サイトでも基本事項なので、今稼働しているサイトでも確認してください(経験上共通の方が非常に多いです)。

テストサイトは自分以外アクセスできないようにしましょう

基本的に今回のようにテーマ制作などの目的で作成したテストサイトは、自分以外にアクセスする人はいない(アクセスする必要はない)と思いますから、自身以外のアクセスは拒否するようにしましょう。

拒否するには、テストサイトのindex.phpと同じ階層にある.htaccessというファイルを編集して行います。

一度パソコンへ.htaccessファイルをダウンロードします。

テストサイトを操作する拠点からこちらのサイトへアクセスし、表示されるIPアドレス(今接続している場所のIPアドレス)を控えてください。

また、サーバーのコントロールパネルで、サーバーのIPアドレスを調べ、控えておきます(こちらのページで調べることもできます)。

.htaccessファイルをテキストエディタで開きます

以下のコードを一番上の行へ貼り付けます

# AccessControl IP/HOST
order deny,allow
deny from all
allow from xxx.xxx.xxx.xxx
allow from xxx.xxx.xxx.xxx

2つの「xxx.xxx.xxx.xxx」へ、操作する拠点のIPアドレス、サーバーのIPアドレスをそれぞれ入れて保存します。

通常は操作する拠点のIPアドレスのみを許可すれば問題ありませんが、稀にWordPressの機能やプラグインによってはサーバー内のIPアドレスを許可していないと不具合を起こす場合がありますから、トラブルを未然に防ぐ目的からサーバーIPアドレスも許可しておきます。

これでテストサイトがインストールされ、自身以外からはアクセスできず、メールアドレスによるログインセキュリティの欠如もカバーできました。

サイトへの支援をお願いします

サイトへお越しいただきありがとうございました。
テーマを無料で提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

  •  白黒ハチワレ猫の【モモ】とのんびり暮らしながらフリーランスでサイト制作のお手伝いをしています。
    ブログツールでありながら本格的なウェブサイトに必要な機能を追加できるWordpressの良さを活かした楽しく便利なサイト作りのお手伝いをさせていただいております

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。