WordPressをサーバーにUPして公開、メールフォーム設定から完成まで【WP最終第5回】

WEBプログラミング講座、WordPressコースも第5回を迎え、最終回となりました。
今回は、WordPressで作成したHPをサーバーにUPして公開します。
そのうえで、メールフォームの設定等の調整を行い、完成まで行きます。

ファイルのアップロード

アップロード

指定されたディレクトリに、以下の画像の通りファイルをアップロードしましょう。

ローカルDBをサーバー上のDBにコピー

ローカルDBのエクスポート

ローカルのphpMyAdmin>作成したWordPressのDB>エクスポートをクリック。
下のような画面まで遷移が出来たら、『実行』ボタンをクリックしてエクスポートし、sqlファイルをダウンロードします。

sqlファイルのURLを一括置換

エクスポートしたファイルの内容ではWordPressの設定URLがローカルのままなので、インポートしても正しく表示されません。
そこで、エディタでsqlファイルを開き、URLを公開したいURLのものに一括置換します。

公開したいURLは
http://qomolangma.m48.coreserver.jp/wp/yoshiba/
となるので、以下のような置換例になります。

//検索文字列
http://localhost/

//置換文字列
Home

置換方法はAtomの場合、エディタ上でCtrl+Fキーを押して検索ボックスを表示。
以下の画像のように入力できたら『すべて置換』ボタンをクリック。

サーバにDBを作成

利用しているレンタルサーバーの種類にもよりますが、ほとんどのサーバのコントロールパネルでDBが作成できます。
レンタルサーバーのヘルプから手順を読み解き、DBを作成してみましょう。

作成出来たら、以下の情報をメモしておきましょう。

  • 接続ホスト名
  • DB名
  • DBユーザー名
  • DBパスワード

これらは、サーバー上でWordPressを動作させる際に必要なものになります。

メモが終わったら、サーバー上のphpMyAdminにアクセスしログインします。
phpMyAdminがない場合は、サーバーにインストールする必要があるので、レンタルサーバーのヘルプを確認しましょう。

サーバ上のDBでsqlファイルをインポート

サーバー上のphpMyAdmin>作成したDB>インポートをクリック。
下の画像のページに遷移します。

『ファイルを選択』ボタンをクリックし、先程編集したsqlファイルを選択。
選択を終えたら『実行』ボタンをクリックしてインポート完了です。

DB接続設定の編集

ローカルからファイルをアップロードしただけでは、サーバー上のDBには接続できません。
そこで、接続設定ファイルを編集し、正しく接続できるようにしましょう。

wp-config.phpのダウンロード

wordpress>wp-config.phpファイルをFTPでダウンロード。

wp-config.phpの編集

ダウンロードしたwp-config.phpをエディタで開き、以下の箇所を先程メモした接続情報に書き換えます。

/** WordPress のためのデータベース名 */
define( 'DB_NAME', '[DB名]' );

/** MySQL データベースのユーザー名 */
define( 'DB_USER', '[DBユーザー名]' );

/** MySQL データベースのパスワード */
define( 'DB_PASSWORD', '[DBパスワード]' );

/** MySQL のホスト名 */
define( 'DB_HOST', '[接続ホスト名]' );

編集が完了したらファイルをアップロードし、正しく表示されているか確認しましょう。

テーマカスタマイズ内容をコピー

実は、テーマによっては、DBをコピーするだけではテーマに対するカスタマイズ内容が反映されない場合があります。
そこで、プラグインを利用して、正しいカスタマイズ内容をコピーしましょう。

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

左メニュー>プラグイン>新規追加
検索窓にCustomizer Export/Importとはと入力。
下の画像のように表示されたら『今すぐインストール』をクリックし、その後に『有効化』をクリック。

ローカル、サーバー上、双方のWordPressでインストールを行って下さい。

WordPressのテーマカスタマイザー設定を別環境に移行できる「Customizer Export/Import」プラグイン

ローカルからテーマデータをエクスポート

まずはローカルの方のWordPress管理画面を開いてください。
左メニュー>外観>カスタマイズ>エクスポート/インポートをクリック。
画面が切り替わったら、『書き出し』ボタンをクリック。
restaurant-recipe-child-export.datファイルがダウンロードできたらエクスポート完了です。

ローカルからテーマデータをインポート

次にサーバーの方のWordPress管理画面を開いてください。
左メニュー>外観>カスタマイズ>エクスポート/インポートをクリック。
画面が切り替わったら、インポートの下にある『ファイルを選択』ボタンをクリック。
先程、エクスポートしたファイルを選択したら『インポート』ボタンをクリック。

TOPページの表示を確認し、ローカルと同じ表示に切り替わっていれば、インポート完了です。

以上でサーバーへのアップロードは完了となります。

メールフォームの設定

メールフォームプラグイン『Contact Form 7』

最初にWordPressを準備した際に、インストールしたプラグインです。
作成者が日本人の方だけあって、説明は日本語で書かれており、使い勝手がとても良いです。

人によってはメールフォームを設置しない方もいるでしょうが、当プラグインの設定方法を紹介します。

設定

細かい設定は説明ページを参考にするとして、デフォルトで用意されているフォームを利用して解説します。
左メニュー>お問い合わせ>Contact form 1をクリック。

フォーム

ページが遷移した時に表示されているフォームは、メールフォームの入力画面の設定になります。
のように、カッコで囲まれた箇所以外であれば、どこに文字を打っても構いません。
英語で表示されている部分を日本語に変更することもできます。

簡単に各項目を説明すると

  • your-name:問い合わせ者の名前
  • your-email:問い合わせ者のメールアドレス
  • your-subject:問い合わせ題名
  • your-message:問い合わせ内容
  • submit:送信ボタン
  • *:入力必須設定

となります。
中でも、問い合わせ題名というのは受信するメール題名に使われますが、これは混乱のもとになるので、削除してもいいかもしれませんね。

メール

『メール』タブをクリックして表示しましょう。
こちらの設定は、送信されるメールの設定です。
問い合わせ者にも確認メールを飛ばすことが出来たり、正しく設定を行う必要がある個所です。

入力枠はそれぞれ

  • 送信先:運営者のメールアドレス
  • 送信元:運営者の情報
  • 題名:受信するメールの題名(your-subjectを入れても良い)
  • 追加ヘッダー:追加のメッセージヘッダー項目 (Cc や Bcc など) を挿入することができる
  • メッセージ本文:送信するメール内容

となります。
少々わかりづらい部分があるので、以下の入力例を参考にしてください。

//送信先
contact@qomolangma.jp

//送信元
酒処ちょもらんま<contact@qomolangma.jp>

//題名
【酒処ちょもらんま】お問い合わせを受け付けました

//追加ヘッダー
Reply-To: [your-email]

//メッセージ本文
◆お問い合わせ内容
お名前 :[your-name]
メールアドレス:[your-email]
内容:
[your-message]	

自動返信メール

問い合わせ者への自動返信メールは、メール (2) を使用にチェックを入れると利用できるようになります。
こちらも以下の入力例を参考にしてください。

//送信先
[your-email]

//送信元
酒処ちょもらんま<contact@qomolangma.jp>

//題名
【酒処ちょもらんま】お問い合わせを受け付けました

//追加ヘッダー
Reply-To: contact@qomolangma.jp

//メッセージ本文
お問い合わせいただき、ありがとうございます。
以下の内容でお問い合わせを受け付けました。

============================

◆お問い合わせ内容
お名前 :[your-name]
メールアドレス:[your-email]
内容:
[your-message]

酒処ちょもらんま

以上でメールフォームの設定が完了となりますが、設定したい項目が沢山出てくることもありますので、以下の使い方ページや記事を参考にしてください。
使い方 | Contact Form 7 [日本語]
【WordPress】Contact Form 7の使い方と簡単なカスタマイズ方法のご紹介 | ぽこみち日和

公開してからの作業

サーバーにUPして表示された時点で、全世界への公開は終わっていますが、検索結果に表示されるまでは多少時間がかかります。
テストサイトとしての公開ですので、SEO対策(検索結果上位表示の為の施策)などは講義内容に含んでおりませんが、興味がある方は、以下の記事を参考にするとよいと思います。

WordPress初心者におすすめ!SEO対策プラングイン3選 : ビジネスとIT活用に役立つ情報
WordPress初心者がやっておくべき基本のSEO対策3つのこと

まとめ

全5回の講義はいかがでしたでしょうか。
短期間で完成させるというのはかなり難しく、思うようにいかなかった方もいるかと思います。
色んな感想があると思いますが、一通りWordPressに触れていただきました。

できることなら、これで終わりにしないでください。
公開したことによって、どこからでもアクセスできるので、他人に意見を聞いたり、スマートフォンで触れることによって気付くこともあるでしょう。
公開して完了ではなく、これから試行錯誤し、修正していくことによってより良いHPを目指してください。