WordPressのテスト環境から本番環境への移行手順について〔Search Replace DB〕

エックスサーバーでWordpressサイトをテスト環境から本番環境へ移行する際の手順について共有します。

エックスサーバーでWordpressサイトをテスト環境から本番環境へ移行する際の手順について共有します。

使用環境

WordPress  5.3.2
サーバー エックスサーバー
使用プラグイン Search Replace DB
接続方式 SSH – Tera tarm

1.テスト環境の全ファイルをバックアップ

テスト環境から本番環境へは「ファイル」「データベース」の2つを移行する必要があるのでそれぞれバックアップを取得します。

ファイルをFTP接続でそのままダウンロードしようとすると時間がかかるので、まずTera tarmでSSH接続して、テスト環境のファイルを圧縮します。

tar -zcvf wp.tar.gz[圧縮後のファイル名] wp[圧縮対象のフォルダ]

圧縮できたらFTPで落としてきます。

2.テスト環境のDBをphpMyadminからバックアップ

エックスサーバーのサーバー管理画面からphpMyadminに接続し、テスト環境のデータベースをエクスポートしてきます。

3.本番環境のDBを作成し、バックアップデータをリストア

エックスサーバーのサーバー管理画面で設定対象ドメインを本番ドメインに切り替え、「MySQL設定」から、本番環境のDBとDBユーザーを作成して紐付けます。

作成したDBとユーザーの紐付けが出来たら、最初にバックアップしておいたテスト環境のDBをインポートしてきます。

データベースの設定はこれで完了です。

4.本番環境にテスト環境のバックアップファイルをリストア

次にテスト環境のバックアップファイルをリストアします。

先程FTP接続でテスト環境から落としてきた圧縮ファイルを本番環境にアップします。

次にTera tarm でSSH接続し、アップした階層まで移動してから圧縮ファイルを解凍します。

tar -zxvf wp.tar.gz

これで「データベース」「ファイル」両方のリストアが完了しました。

次に設定ファイル「.htaccess(必要に応じて)」「wp-config.php」の修正をします。テスト環境が他のサーバーだったりすると、.htaccessファイルの記述に差異があったりしますが、参考までにエックスサーバーで簡単インストールからWordpressをインストール」した際の.htaccessの内容は下記になります。

# BEGIN WordPress
# `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>
# END WordPress

wp-config.phpにはデータベースの接続情報の記載があるので、本番環境の接続情報に修正します。

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

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

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

/** MySQL のホスト名 */
define('DB_HOST', 'mysql805b.xserver.jp');

設定ファイルの修正はここまでです。

5.Search Replace DBを使用してURLを本番ドメインに書き換える

これまでの作業を終えて、現状本番環境のデータベース内にテスト環境のURLが含まれている状態なので、Wordpressのプラグイン「Search Replace DB」を使用してURLを書き換えてもらいます。

プラグインのダウンロードはこちら
Database Search and Replace Script in PHP

ダウンロードできたら解凍し、分かりやすいフォルダ名に変えて(ここではSRDとします)本番環境のwp-config.phpと同じ階層にフォルダごとアップします。

アップしたらURLからフォルダに直接アクセスします。

https://本番ドメイン/wp/SRD

まずreplaceの欄に「http://テスト環境ドメイン」を入れて、withの欄に「http://本番環境ドメイン」を入力します。

そしてまず「dry run」をクリックして実際にどのテーブルが変更されるのかを確認します。

問題ないようでしたら「live run」で実際に書き換えていきます。

これでテスト環境から本番環境への移行作業が全て完了となります。

6.その他注意点

上記作業後の注意点として、データベースではなくファイルに直接テスト環境のURLを記載していると残ってしまいます。サイト表示後にChromeのコンソールを確認するなどして、以下の点に注意しておきましょう。

  • テーマファイル内で画像を読み込む際に直接テスト環境のURLを書き込んでいないか。
  • CSSファイルの背景画像読み込みで直接テスト環境のURLを書き込んでいないか。

WordPressでトップページのURLを変更する方法

wordpressは「ドメイン/wp」にインストールするのが通例ですが、サイトにアクセスする際にwpをなくす手順について共有しておきます。環境はエックスサーバーのwordpress簡単インストールを使用した状態です。

wordpressは「ドメイン/wp」にインストールするのが通例ですが、サイトにアクセスする際にwpをなくす手順について共有しておきます。環境はエックスサーバーのwordpress簡単インストールを使用した状態です。


1.管理画面からサイトURLを変更

WordPressの 管理画面>設定>一般 の「サイトアドレス(URL)」項目から、末尾の「wp」を削除して保存します。

2.「.htaccess」「index.php」のディレクトリを修正

次にファイル側 /DocumentRoot/wp 直下の「.htaccess」「index.php」をダウンロードして中身を修正します。まず.htaccessから

// .htaccess
修正前
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>

修正後
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

次にindex.phpの17行目を修正

// index.php
修正前
require( dirname( __FILE__ ) . '/wp-blog-header.php' );

修正後
require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );

2つとも修正出来たら1つ上の階層の /DocumentRoot/直下にアップします。

これで「ドメイン」から直接アクセス出来るようになりました。

WordPressカスタムヘッダの画像をカテゴリ別に出し分ける

Wordpressのカスタムヘッダーに登録された画像はデフォルトで全ページ共通となっているので、表示するページのカテゴリー属性に応じて出し分けてみます。

WordPressのカスタムヘッダーに登録された画像はデフォルトで全ページ共通となっているので、表示するページのカテゴリー属性に応じて出し分けてみます。

使用環境

WordPress  5.2.2
親テーマ Twenty Sixteen
子テーマ カスタマイズの対象となるテーマ

1.管理画面からヘッダー画像を登録

ヘッダー画像を管理画面外観カスタマイズヘッダー画像 からカテゴリ用の画像を登録します。この時現在のヘッダー画像はそのままにしておきます。

2.ファイル側に画像出し分けの条件分岐タグを追加する

親テーマのheader.phpをカスタマイズの対象となる子テーマにコピーしてきます。Twenty Sixteenでは98行目辺りにヘッダー画像表示の記載がありました。

<div class="header-image">
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
  <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
  </a>
</div><!-- .header-image -->

 

上記コードを条件分岐タグのelse: 以降に配置します。今回はカテゴリーに属しているかどうかで判断するのでin_category()を使用します。

// 記事がニュースカテゴリに属している場合
<?php if (in_category('news')) :
  // ニュースカテゴリ用のヘッダ画像を表示(true)
<?php else: ?>
  // 現在のヘッダーとして設定してある画像を表示(false)
<?php endif; ?>

3.デフォルトのコードを修正する

デフォルトのコードを修正しtrue部分に当て込んでいきます。
まず、imgタグのsrc属性で使われている header_image() 関数は
外観>カスタマイズ>ヘッダー画像>現在のヘッダー の画像URLを取得しています。

// 関数
header_image();
// 出力結果
http://サイトURL/wp/wp-content/uploads/2019/07/ファイル名.jpg

その他のアップロード済み画像(カテゴリA、カテゴリB)のURLは
管理画面>メディアから取得します。
取得したURLは変数$image_urlとして代入しておきます。

// アップロード画像URLを変数に代入
$image_url = esc_url( get_bloginfo('url')) . '/wp-content/uploads/2019/08/keyimage_category_a.png';
<img src="<?php echo $image_url; ?>" ・・・

次に、imgタグのsrcset属性で使われているget_custom_header()関数の中身を確認します。

// 関数
get_custom_header(); 
// print_rでの出力結果
(
  [url] => http://サイトURL/wp/wp-content/uploads/2019/08/ファイル名.jpg
  [thumbnail_url] => http://サイトURL/wp/wp-content/uploads/2019/08/ファイル名.jpg
  [width] => 1200
  [height] => 306 
  [ video ] =>
  [attachment_id] => 126
)

この中で attachment_id をカテゴリAヘッダー画像用に差し替えたいので、attachment_url_to_postid()関数を使って先述の$image_urlからIDを取得します。

// カスタムヘッダーに登録している画像のURLから添付IDを取得
$attachment_id = attachment_url_to_postid( $image_url );
<img ・・・ srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $attachment_id ) ); ?>"

imgタグの修正はこれで終わりにします、次にヘッダ画像のリンク先を変更します。

4.ヘッダ画像のリンクをカテゴリ一覧に変更する

デフォルトのままだとリンク先がトップページになっているので、カテゴリ一覧に遷移する様修正します。

// お知らせカテゴリーの ID を取得
$category_id = get_cat_ID( 'news' );
// カテゴリーIDから URL を取得
$category_link = get_category_link( $category_id ); ?>
<a href="<?php echo esc_url( $category_link ); ?>" title="お知らせカテゴリ一覧">

 

5.修正後のソースコード

修正後のコードは下記の通りになりました。

<div class="header-image">
    <?php if (in_category('news')) :
        // カスタムヘッダーに登録している画像のURLから添付IDを取得
        $image_url = esc_url( get_bloginfo('url')) . '/wp-content/uploads/2019/08/keyimage_category_a.png';
        $attachment_id = attachment_url_to_postid( $image_url );
        // 指定したカテゴリーの ID を取得
        $category_id = get_cat_ID( 'news' );
        // このカテゴリーの URL を取得
        $category_link = get_category_link( $category_id ); ?>
        <a href="<?php echo esc_url( $category_link ); ?>" title="お知らせ一覧">
        <img src="<?php echo $image_url; ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
        </a>					
    <?php else: ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
  <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
  </a>
    <?php endif; ?>
</div><!-- .header-image -->

他に良いやり方があればコメント頂けると嬉しいです。

WordPressカスタムフィールドを追加して商品一覧の価格を表示する

Wordpressサイトで商品一覧ページを作る時、商品名説明文価格は表示したいです。

デフォルトでは商品名・説明文記事タイトル・本文抜粋に置き換えられますが、価格はカスタムフィールドを追加する必要があります。

使い方はWordPress Codex に掲載があるので、今回は実際にやった手順を共有します。

WordPressサイトで商品一覧ページを作る時、商品名説明文価格は表示したいです。

デフォルトでは商品名・説明文記事タイトル・本文抜粋に置き換えられますが、価格はカスタムフィールドを追加する必要があります。

使い方はWordPress Codex に掲載があるので、今回は実際にやった手順を共有します。

使用環境

WordPress  5.2.2

1.管理画面からカスタムフィールドを追加

カスタムフィールドはデフォルトで非表示になっているので、投稿編集ページの表示オプションからカスタムフィールドオンにします。

投稿編集画面下部にカスタムフィールドが出現するので新規追加をクリック

項目名・表示する値を登録

項目名は価格にしました。

管理画面の設定はこれで終わりです。次はテンプレートファイルに関数を記載します。

2.フロントで表示するためにファイル側を設定する

get_post_meta() 関数ループ内に記載してカスタムフィールドの中身(メタデータ)を取得します、$key項目名を代入しておきます。

$key="価格";
$price = get_post_meta($post->ID, $key, true);

カスタムフィールドの値があった時のみHTMLタグも含めて表示したいので条件分岐タグ内で$price変数を出力します。

$key="価格";
$price = get_post_meta($post->ID, $key, true);
if ( $price ) : ?>
    <span class="price"><?php echo $price.'円'; ?></span>
<?php endif;?>

これだけです、他に良いやり方があれば教えて頂けると嬉しいです。

Contact form7 からの問い合わせメールが迷惑フォルダに入る

お問合せフォームプラグイン Contact form7 を入れた後、Gmail宛の問い合わせメールが迷惑フォルダに入る事に気付きました。

原因としてはContact form7側で設定した送信元と、実際に送信されるメールサーバーが異なっていた為、Gmail側でスパム判定されてしまったようです。

WP Mail SMTP プラグインを試したら無事届いたので設定手順を共有します。

お問合せフォームプラグイン Contact form7 を入れた後、Gmail宛の問い合わせメールが迷惑フォルダに入る事に気付きました。

原因としてはContact form7側で設定した送信元と、実際に送信されるメールサーバーが異なっていた為、Gmail側でスパム判定されてしまったようです。

WP Mail SMTP プラグインを試したら無事届いたので設定手順を共有します。

使用環境

サーバー CPIサーバー
メールサーバー G-suite

1.WP Mail SMTPの設定

プラグインをインストール後、設定画面で送信者名を入力

次に、使用するメーラーGmailを選択します。

メールが送信されなかった時に消失するのを防ぐ為、返信先項目はチェックを入れておきます。

ここで、GmailのクライアントIDクライアントシークレットの入力項目が出てきます。
この項目に必要な情報を用意するにあたり、web application を作成するためのGoogle account を使用する必要があります。

2.Google Account での Web application の作成

新しいタブで sign into your Gmail account and access Gmail’s application registrationを開きます。
WP Mail SMTPの設定画面には後ほど戻ってくるので開いたままにしておきます。

リンクを開き、Gmail accountにログインしたら”APIを有効にする – Google API Console”画面に遷移します。

ドロップダウンにデフォルトで「プロジェクトの作成」が選択されているので、そのまま続行ボタンをクリックします。

このボタンをクリックすると、Googleから”APIは有効になっています”と言われます。設定ページに進むために、認証情報に進むボタンをクリックします。

次のページに於いて、Googleが認証することの手助けとなる、いくつかの質問を受けます。

  • 使用するAPI →Gmail API
  • APIを呼び出す場所 →ウェブブラウザ(Javascript)
  • アクセスするデータの種類 →ユーザーデータ

これらの質問に上記内容で回答し、必要な認証情報ボタンをクリックします。

このボタンをクリックすると、OAuth 同意画面の設定画面がポップアップで開くので同意画面を設定をクリックして進みます。

この時新しいタブ プロジェクトへの認証情報の追加 が開きますが、後で設定するのでそのままにしておきます。

今回はG suiteを使用しており、@gmail.comのメールアカウントを使用していないので下記の画面に遷移します。アプリケーションの種類内部を選択し、アプリケーション名はあなたのサイト名を入力します。

次に、承認済みドメインの項目までスキップして、サイトのドメインを入力します。この時 http:// 又は https://は含めません。

その下の[アプリケーション ホームページ] リンク、[アプリケーション プライバシー ポリシー] リンク、[アプリケーション利用規約](省略可) リンクの項目は、サイトURLを入力します。

入力が出来たら保存します。

この時認証情報画面に遷移するので、一旦そのままにしておき、以前開かれた別のタブプロジェクトへの認証情報の追加に切り替えます。

名前は任意で入力し、承認済みのJavaScript生成元はサイトのURLを入力します。

承認済みのリダイレクト URI欄には、WP MAIL SMTPの設定画面のAuthorized redirect URI からコピーして貼付けて、更新ボタンをクリックします。

これで、クライアントIDを作成できます。

3.認証とメール送信テスト

作成したクライアントIDとクライアントシークレットは編集ボタンから確認できます。

WordPressのWP MAIL SMTP設定画面にもどり、クライアントid・クライアントシークレットを入力して、Authorization項目のボタンをクリックします。

Googleのログイン画面に遷移するので、ログインして同意すれば認証完了です。

最後に、WP MAIL SMTPの設定画面からメール送信が問題ないかテストできます。

他の対策も知ってるよって方いたら教えて頂けると嬉しいです。