ブログを開設して、しばらくはアクセス数も少ないため、スパム対策が十分でなくても怪しいメールなどが送られてくることは少ないです。

ただし、やらなくてもよいということではないです！！

スパムを仕掛ける人達は、常にセキュリティ対策の実施していないサイトを探しているからです。

自分が犯罪者にならないためにもぜひ実施しておきましょう。

当サイトでも、ログインページやコメント入力ページでは、SiteGuard WP PluginでWordPressのセキュリティ対策を簡単に実施で説明しているように設定をしています。

次は、問い合わせフォームでもセキュリティ対策としてreCAPTCHAを設定します。

reCAPTCHAへのサイト登録

ContactForm7でスパム対策をするために、GoogleのサービスであるreCAPTCHAを使用します。

ContactForm7に、設定するために

1. reCAPTCHAにサイト登録
2. ContactForm7への設定情報の取得

を行います。

reCAPTCHAとは

reCAPTCHAとは、公式ページによると悪意のあるソフトウェアや悪意あるユーザが不正な活動をブロックし、正当なユーザのみがログイン、ページの表示ができるようにしてくれるものです。

reCAPTCHAの公式ページ

すごく頭のいい、Googleさんが悪い人たちをブロックしてくれるサービスなんだ。

ContactForm7への設定情報の取得

ContactForm7へ設定するのは、2つ取得します。

• サイトキー
• シークレットキー

これらの設定情報を取得するためにreCAPTCHAのAdminConsoleからサイト情報を登録します。

reCAPTCHAへのサイト登録

サイト情報の登録を行います。

WordPressのメニューにある「お問い合わせ」から「インテグレーション」を選択します。

赤枠内のreCAPTCHAの設定で右上にあるgoogle.com/recaptchaを選択します。

Googleアカウントのログインされていない場合は、ログインするとreCAPTCHAのページが表示されます。

ページ上部の「Admin Console」を選択して管理ページを表示させます。

この時、サイトが登録されていないと、サイト登録ページが表示されます。

サイト登録ページの必要事項を入力します。

• ラベル
  登録するサイト情報の名前を指定します。
  
• reCAPTCHAタイプ
  今回は、v3を使用するので「reCAPTCH v3」を選択します。
  
• ドメイン
  保護する対象のサイトURLを入力します。
  複数のサイトを保護する場合は、「＋ドメインを追加します」を選択します。
• オーナー
  デフォルトでログインしたGoogleアカウントが設定されます。
  何か、アラートがあったら、このメールアドレスに送信されます。
  
• reCAPTCHA利用条件に同意する
  reCAPTCHAを利用するために、同意します。
• アラートをオーナーに送信する
  アラートが発生したら、オーナーにメール送信するか選択します。
  基本、チェックしておいたほうが、何かあったときに素早く対応が取れるのでチェックしておきます。

各項目を入力したら、「送信」を押します。

サイトキー、シークレットキーの取得

サイト情報を登録したら、サイトキーとシークレットキーが表示されます。

再度、サイト情報を修正する場合は、「設定に移動」を選択します。

「アナリティクスに移動」を選択するとreCAPTCHAのAdminConsoleページが表示されます。

これで、ContactForm7に設定する情報が準備できました。

登録済みのサイト情報を編集する

登録済みのサイト情報を再度変更する場合は、修正したいサイト情報を表示されている状態で右上の設定ボタンを選択します。

サイト情報を新規登録するときには、設定できない項目が、修正するときには設定ができるようになっています。

WordPressで、AMPページを作成している場合は、「このキーがAMPページで動作するようにする」もチェックしておいたほうが良いです。

ContactForm7へreCAPTCHA（v3）の設定

reCAPTCHAにサイトを登録したのでContactForm7の設定を行います。

ContactForm7への設定

先ほど、取得したサイトキーとシークレットキーをContactForm7に設定します。

ContactForm7のインテグレーションからreCAPTCHAの「インテグレーションのセットアップ」を行います。

reCAPTCHAのキー情報ページからContactForm7の設定ページへそれぞれの項目へ設定します。

• サイトキー
• シークレットキー

ContactForm7の設定ページ

reCAPTCHAのキー情報ページ

サイトキー、シークレットキーを設定したら「変更を保存」で保存します。

reCAPTCHAの設定が完了しました。

今回設定したキーが不要になった場合は、「キーを削除」でサイトキーとシークレットキーを削除します。

※Invisible reCAPTCHAプラグインを使う時は、このページのキー情報は削除します。

正常に設定ができるとreCAPTCHAのバッチがページの右下に表示されます。

reCAPTCHAの表示をカスタマイズ

reCAPTCHAを使用しているページは、このバッチを表示しなければなりません。

しかし、ContactForm7に設定するとサイト内すべてのページに表示されるようになってしまいます。

また、右下に表示されることによってページトップに移動するボタンとかぶってしまいます。

これは、非常に見栄えが悪いです。

そこで、バッチの表示位置や表示しなければならないページを指定するようにカスタマイズします。

reCAPTCHAバッチの表示位置を変更

表示位置を変更するために、style.cssを変更します。

WordPressの「外観」「テーマエディター」からCSSの編集を行います。

reCAPTCHAバッチは、「grecaptcha-badge」に対してプロパティの設定ができます。

そこで、「style.css」に次のコードを貼り付けます。

/* reCAPTCHA v3　表示位置 */
.grecaptcha-badge{
    margin-bottom: 60px;
}

結果を表示してみます。

きちんと、reCAPTCHAバッチとページトップへ移動するボタンが重ならないで表示されました。

reCAPTCHAバッチの表示・非表示

ContactForm7の問い合わせページのみでreCAPTCHAを使用します。

そのため、問い合わせページ以外は、reCAPTCHAバッチを表示しないようにします。

WordPressの「外観」「テーマエディター」からfunction.phpの編集を行います。

//問い合わせページのみreCAPTCHA表示
add_action( 'wp_enqueue_scripts', function() {
    if(is_page('contact')) return;
  wp_deregister_script( 'google-recaptcha' );
});

この中の「contact」は問い合わせページのパーマリンクのURLスラッグを指定します。

これで、問い合わせページ以外では、reCAPTCHAバッチが表示されなくなりました。

reCAPTCHAの管理画面で状況確認

reCAPTCHAで保護した状況は、AdminConsoleで確認することができます。

Googleアカウントでログインしていない場合は、ログインすると表示されます。

複数のサイト情報が登録されている場合は、赤枠で囲ってあるところで表示するサイト情報を選択します。

このページで、不審なリクエストがあればその対策を行う準備を行います。

まとめ

自分のサイトが知らない間に犯罪者にならないこと、スパムメールなどで迷惑をかけたり、かけられたりしないように手間は、惜しんではいけないですね。

現在では、セキュリティ対策はやって当たり前なのでぜひ実施しておきましょう。
また、最近では簡単にセキュリティ対策ができるようになっています。

PageSpeed Insightsは、こちらです。

PageSpeed Insightsで確認してみたところ、評点としてモバイルが、36点、パソコンが、85点というスコアでした。

モバイルのあまりの評価の低さに愕然としてしまいました。

これがモバイルの点数です。

特にモバイルでは、そこまで悪いスコアではないと考えていたので、少しショックでした。

パソコンの点数です。

こちらも、もう少し良い点数が取れていると思っていたのでショックでした。

モバイルより点数が良いですが、よいという評点ではないので少し残念です。

そこで、簡単にできるレスポンス対応を実施します。

PageSpeed Insightsでは、改善の提案をしてくれているので、それをもとに改善を進めていきます。

原因が何か確認する

まず、モバイルの何が悪いのかをPageSpeed Insightsで確認してみます。

ラボデータとして、6項目Googleとして評価をしています。

特にインタラクティブになるまでの時間が、10秒までかかっています。

インタラクティブになるまでの時間というのは、表示し始めて、ページが完全に表示され、操作が可能になるまでに時間です。

他にも、秒単位で表示されるまでにかかっているということは、結構遅いサイトになってしまっています。

PageSpeedInsightsの改善できる項目から、PageSpeed Insightsのスコア改善を行っていきます。

特に結果が悪そうなところから順番に確認していきます。

• 使用していないJavascriptの削除
  この項目は、不要なJavaScriptを削除して転送量を減らす必要があると指摘されています。
  WordPressで動いている中で、不要なプラグインを減らすか、他のプラグインを減らすとよいとありますが、現在は最低限のプラグインしか動作していないので、不要なJavaScriptを減らすことを解決案1とします。

• レンダリングを妨げるリソースの除外
  First Paintヲリソースがブロックしているので、JavaScriptとCSSを重要なものに絞って配信し、重要度の低いものは、遅延配信するように設定するように指摘されています。
  WordPressのプラグインで解決するよう指摘があります。

• オフスクリーン画像の遅延読み込み
  オフスクリーンの画像などは、遅延読み込みをするように指摘があります。
  これも、WordPressのプラグインを検討するように指摘されています。

• 次世代フォーマットでの画像配信
  サイト内で使用している画像ファイル（JPEG、PNGなど）を圧縮率の高い次世代の画像フォーマット（JPEG 2000、JPEG XR、WebP）を使用することを提案されています。
  一旦、「EWWW Image Optimizer」をインストールしてあるが、さらなる改善として、Compress JPEG＆PNGを導入と、アイキャッチ画像を変更する
  
• 使用していないCSSを削除してください
  こちらも、使用していないJavaScriptを削除するように指摘があるものと同様にで、重要なCSSを読み込み、不要なものを読み込まないようにするように指摘があります。
  
• テキスト圧縮の有効化
  ウェブサーバ上で設定することで、実現できるとのことですが、プラグインでできれば、対応します。

• アニメーションコンテンツでの動画フォーマットの使用
  今回は、アニメーションがないので特に対応しません。

そのほかに、「静的なアセットと効率的なキャッシュ ポリシーの配信」では、64件のリソースが対象となっているので、キャッシュを有効化することで改善できるという指摘もあります。

PageSpeed Insightsのスコア改善対応

現状を、確認してみると簡単な対策として、4点を対応してみます。

1. 画像の圧縮
2. JacaScritとCSSの不要なものを削除、または、遅延読み込みをさせる
3. 画像の遅延読み込みをさせる
4. キャッシュ

プラグインでできる範囲で、高速化対応を行います。

画像の圧縮

画像の圧縮もしてくれるので、「EWWW Image Optimizer」を導入済みでしたが、さらに圧縮率の高い「Compress JPEG & PNG images」を導入します。
※「EWWW Image Optimizer」はどちらかというと、メタ情報の削除用に導入していました。

「Compress JPEG & PNG images」をインストールします。

「Compress JPEG & PNG images」の導入と設定が終わったら、PageSpeed Insightsでスコアを確認してみます。

愕然と改善しました。

プラグインの導入準備として、アイキャッチ画像で1MBの写真を使用していましたが、それらをすべて100KB以下のファイルにしました。
プラグインの導入だけで、PageSpeed Insightsのスコア改善するとしていましたが、こちらは諸事情により修正しました。（あくまで、諸事情です）

• アイキャッチ画像
  写真から、手作りのpngへ変更
  ※プラグインの導入のための準備です。あくまで・・・。
  
• 画像の圧縮
  大きいサイズの画像ファイルを100KB以下になるように圧縮
  数KB～100KB以下になりました。

ちなみに、パソコンのスコアも改善しました。

キャッシュ系のプラグインの導入

PageSpeed Insightsの指摘の解決案の中で、「defer css javascript」でWordPressのプラグインを検索すると候補が出てくるとあったので、実際に検索してみます。

検索してみると、たくさんのプラグインが検索されますが、上位のいくつかで今回の対応ができそうなものを選択します。

• W3 Total Cache
• Hummingbird – Speed Optimize, Cache, Minify & Defer Critical CSS/Javascript
• Autoptimize
• WP Fastest Cache
• Fast Velocity Minify

この中で、ダウンロード数とレビュー数が多いので、「W3 Total Cache」をインストールして高速化をしてみます。
※今後、いくつか試してみたいと思います。

W3 Total Cacheを使った高速化

「W3 Total Cache」を導入し、設定を行います。

設定としては、4種類のキャッシュ設定を行いました。

• Jacascript、CSSのインライン展開
• ページキャッシュの設定
• オブジェクト（画像）キャッシュの設定
• ブラウザキャッシュの設定

「W3 Total Cache」の導入、設定後、PageSpeed Insightsでモバイルのスコアが劇的に改善しました。

ちなみに、パソコンのスコアは同じでした。

まとめ

今回は、画像サイズを小さくすることとキャッシュを使うことで、劇的にPageSpeed Insightsのスコアが劇的に改善しました。

また、プラグインやテーマでJavascriptやCSSをHTMLへ展開してサーバとの通信料を減らすこともPageSpeed Insightsのスコア改善につながったと思います。

大分改善したので、現段階では満足しました。
※スコア100点は目指していきたいと思っています。（とれるかな・・・）

最終的な結果は、愕然と改善しました。

モバイル：36点　→　80点

パソコン：85点　→　95点

特にPCで見るときは特に問題ないですが、モバイル環境で見るときに表示が遅くなってしまいます。

モバイル環境は、今後、重要視される環境ですので快適な表示ができるように画像を圧縮することで改善をしましょう。

WordPressで画像圧縮を行うには、「EWWW Image Optimizer」と「Compress JPEG & PNG images」というプラグインが良く取り上げられます。

この2つのプラグインで画像の圧縮率を比べると「Compress JPEG & PNG images」のほうが断然圧縮率が高くなっています。

「EWWW Image Optimizer」は、無料で画像の圧縮もしてくれますが、画像のメタ情報を自動で削除してくれるツールとして使用したほうが良いです。

ということで、「Compress JPEG & PNG images」をインストールして快適にページを表示できるようにしましょう。

TinyPNG – JPEG, PNG & WebP image compression

Speed up your website. Optimize your JPEG, PNG, and WebP images automatically with TinyPNG.

ja.wordpress.org

Compress JPEG & PNG imagesのインストール

WordPressメニューの「プラグイン」から「新規追加」を選択します。

キーワードに「Compress JPEG & PNG images」を入力して、プラグインを検索します。

「Compress JPEG & PNG images」が検索されるので、「今すぐインストール」を押します。

しばらくするとインストールが完了しますので、「有効化」を押します。

有効化されたら、インストールは完了です。

ここで、「EWWW Image Optimizer」がインストールされ有効化されているとエラーメッセージが表示されますので、「EWWW Image Optimizer」を無効化します。

Compress JPEG & PNG imagesの設定

「Compress JPEG & PNG images」の設定は、左メニューの「設定」から「Compress JPEG & PNG images」を選択し設定ページを表示します。

「Compress JPEG & PNG images」では、アカウント登録しすることで使用することができるようになります。

アカウント登録したら、1ヶ月500枚までの圧縮が無料で行えます。

すでに、アカウントがある場合は、そのアカウントでログインすることで使用できるようになります。

アカウントの登録

「Compress JPEG & PNG images」の設定ページを表示するとアカウントの登録、またはログインします。

まだ、アカウント登録していない場合は、「Register new account」のほうから、アカウント登録を行います。

表示名とメールアドレスの入力を求められているので、それぞれ入力を行います。

メールアドレスは、WordPressに設定してある管理者用のメールアドレスが自動で設定されるので、これで問題なければ、そのまま「Register account」を選択してアカウント登録します。

無事に登録されると、メールが届きます。

設定ページにも登録され、ログインされた状態になります。

New image uploads

画像を圧縮するタイミングを指定します。

インストールした直後は、「Compress new images in the background (Recommended)」に指定されています。

無料で使っている場合の設定は、500枚の制限があるので「Compress new images during upload」か「Do not compress new images automatically」が良いと思います。

• Compress new images in the background (Recommended)
  バックグラウンドで自動的に圧縮します。
  
• Compress new images during upload
  新しい画像をアップロードするときに、圧縮します。
  
• Do not compress new images automatically
  画像の圧縮はしません。
  手動で圧縮します。

Image sizes

圧縮するイメージサイズを指定します。

インストール直後は、すべてのサイズが圧縮対象になっていますが、必要な分だけ圧縮するように指定します。

無料で使用する範囲は、500枚なので、サムネイルなどのそもそもファイルサイズの小さいものは、チェックを外しておきます。

オリジナルのイメージが一番サイズが大きい可能性が高いので「Original Image」は必ず指定します。

Original image

「Image size」で「Original Image」をチェックした場合に設定することができます。

こちらの設定は、特に指定しません。

• Resize the original image
  指定したサイズを超える画像をアップロードした時に、圧縮とリサイズを行います。
  画像処理としては、2枚とカウントされます。
• Preserve creation date and time in the original image
  画像の作成日を残します。
  
• Preserve copyright information in the original image
  画像の著作権情報を残します。
  
• Preserve GPS location in the original image (JPEG only)
  画像の位置情報を残します。

画像のメタ情報は削除して公開したほうが良いので、作成日や位置情報は残さない設定が良いです。

Compress JPEG & PNG imagesの使い方

すでにアップロードした画像の圧縮や、圧縮されている画像の確認は、「メディア」の「ライブラリ」から行います。

メディアの一覧で、「Compression」に、圧縮状態が表示されます。

「Compress」のボタンが表示されている場合は、まだ圧縮されていない画像になります。

Compress JPEG & PNG imagesで画像の圧縮

圧縮する前に、「Compression」の「Detail」を選択して、画像のファイルサイズを確認します。

ここで、圧縮の必要があるか確認して、圧縮する場合はメディアの一覧から「Compress」を押します。

画像サイズにもよりますが、少し待っていると画像の圧縮が完了します。

圧縮が完了すると「Compress」ボタンが消えて、どれぐらいに圧縮されたかが表示されます。

「Detail」を押して、別の画像ですが、どれぐらい圧縮されたかを確認します。

Originalを確認すると、半分ぐらいに圧縮されています。

圧縮した情報の確認

圧縮した画像枚数の確認や、登録したアカウントの確認は、Tynyのホームページから確認できます。

ユーザ登録した時に、送られてきたメールの「Activate your Accoount」のリンクからも表示することができます。

https://tinypng.com/dashboard/api

tinypng.com

このページで、その月に圧縮した画像ファイル数を確認することができます。

ここでは、140枚圧縮してあります。

自分のAPIキーもここで確認することができます。

500枚を超えると無料では、圧縮できなくなるのでこちらで確認して必要分の圧縮をするようにしましょう。

まとめ

500枚まで、無料で圧縮できるので非常に重宝させてもらっています。

無料の範囲で使っているので、

1. 記事を書いて、画像の登録
2. メディアの一覧から、必要な画像を圧縮
   今は、大きなファイルサイズの画像は使用していないので、100Kを超える場合は、圧縮するというルールにしています。

という手順で使用しています。

画像のファイルが多い場合は、できる限り圧縮したほうがよいかもしれませんが、数十Kのファイルであればレスポンスに与える影響も少ないのかなと考えています。

500枚という数字は、多いようで少なく、少ないようで多いので、効率よく使いましょう。

レンタルサーバ側でも、バックアップは取られていると思いますが、プランによってどのようにバックアップがとられているか変わってくるのと、レンタルサーバの担当者の方とやり取りをしながら復元する必要があると思います。

そこで、自分でも何か発生した時に、対策できるように、準備をしておいたほうが素早く対応することができます。

バックアップを取るということは、3つのことができる必要があります。

• バックアップの取得
• バックアップから復元する
• スケジュール

スケジュールしてバックアップを取得できるというのは、100歩ぐらい譲ってなくても構いませんが、バックアップ、復元することは必ずできる必要があります。

バックアップを取得できても、復元することができないでは、意味がありません。

BackWPupも同様のことができますが、無償でリストアをすることができません。
※手間をかければできるようです。

その点、UpdraftPlusは、無償でバックアップ、元に戻す（リストア）、スケジュールをするということができます。

サイトにお金をかけられれば、BackWPupということも可能かと思いますが、無償でできるということで、UpdraftPlusをお勧めします。
※UpdraftPlusも有償プランを使用することで、より細かなバックアップをすることができます。

UpdraftPlus Home

UpdraftPlus is the world's leading WordPress backup, restore & migration plugin. Used on millions of WP sites, you can b...

teamupdraft.com

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

まずは、UpdraftPlusプラグインをインストールします。

プラグインのインストールが初めての場合は、プラグインのインストールする方法を参考にしてください。

WordPressのメニューの「プラグイン」から「新規追加」を選択します。

プラグインの新規追加ページの検索ボックスに「UpdraftPlus」を入力します。

検索結果に「UpdraftPlus」が表示されますので「今すぐインストール」を押しインストールします。

インストールが完了したら「有効化」を押し、有効化します。

「UpdraftPlus」が有効化されて、インストール済みのプラグインの一覧に表示されてインストールが完了し、使用することができます。

最初のバックアップを実行

「UpdraftPlus」のインストールが完了したら、「UpdraftPlus」の設定ページを表示します。

「バックアップ/復元」のページが表示され、初期バックアップの作成を促されるメッセージが表示されています。

「今すぐバックアップ」を押して、バックアップを取得します。

バックアップ対象を選択し、「今すぐバックアップ」を押します。

バックアップが開始されます。

しばらくすると、バックアップが完了します。

バックアップ対象のファイル（サイトの大きさ）によって、バックアップ時間が変わりますが、バックアップが完了するまで待ちます。

バックアップが完了すると「最後のログメッセージ」にバックアップが完了した旨のメッセージが表示されます。

既存のバックアップには、初めてなので1つバックアップが作られています。

これで、バックアップがサーバ内に作成されました。

UpdraftPlusの設定

UpdraftPlusの設定は、設定タブで行います。

バックアップスケジュールの設定

最初は、手動でバックアップを行いましたが、スケジュールに沿ってバックアップを行うようにしなければ、バックアップ忘れてしまったりしないようにします。

また、バックアップの履歴として、何回分保存しておくか、サイトの更新頻度やサーバのスペックにもよると思いますが指定しておく必要があります。

バックアップのタイミングですが、記事の更新頻度、サイトへの書き込みの状況によって、決めます。

更新タイミングは、ファイルもデータベースもリストから選択して決めます。

ファイルのバックアップは、記事の更新頻度に合わせて決めます。

毎日更新するのであれば、毎日バックアップしたほうが良いです。

データベースは、基本的には記事と同様のタイミングでよいと思います。

コメントなどが頻繁に書き込まれるサイトであれば、短いタイミングでのバックアップを実施するようにスケジュールします。

履歴として持っておくバックアップですが、バックアップを取得するタイミングと容量によって決めます。

あまりたくさんの履歴があってもそこまで古いものに戻すことはないので大体、3つぐらいのバックアップの履歴があればよいと思います。
※ただし、サーバに容量に余裕があるか確認してください。

バックアップの保存先

バックアップを取得しても、同じサーバ内にあった場合は、そのサーバが壊れてしまったら、バックアップもなくなってしまいます。

そこで、別の場所にバックアップファイルを保存することが必要です。

UpdraftPlusで選択できる保存場所表示されていますので、保存したい場所を選択します。

バックアップするファイル

バックアップ対象を選択します。

プラグイン、テーマ、アップロード（画像ファイルなど）、wp-contentをバックアップします。
この中で、バックアップ用のファイルなどは、除外します。

データベース暗号化フレーズ

データベース暗号化フレーズの設定は、有料なので、今回は特に設定しません。

メール

バックアップの状況をメールで送信してくれます。

これは、バックアップの状況がわかるのでチェックしておいたほうが良いです。

メールは、サイトの管理者へ送信されてきます。

エキスパート設定

特に設定なしです。

バックアップのリストア

バックアップのリストアは、非常に簡単です。

「バックアップ/復元」タブの既存バックアップの一覧にどのバックアップを戻すのかを選んで、「復元」を選択します。

復元するコンポーネントを選択し、「次」を押します。

次にデータベースから復元するデータを選択します。

基本的にはデフォルトのままです。

もし、選択して戻したい場合は、テーブルを選択して戻すことも可能です。

復元するテーブルを選択したら、「復元」を押します。。

復元が開始されますので、しばらく待ちます。

復元が完了しました。

不要になったバックアップの削除

バックアップをいくつか取得していた場合で、不要になった場合は、不要になったバックアップを削除します。

不要になったバックアップの「削除」を押し、削除します。

まとめ

バックアップは、必要なことですが、不用意に取得するとサーバのリソースを使いすぎて、サイトのレスポンスが落ちたりします。

例えば、サイトへのアクセスが多い時間にバックアップを何度も取得したりするとサーバに負荷がかかり、ページを表示するのが遅くなったりします。

また、履歴をたくさん取得して整理していないと、サーバの容量が不足してしまいます。

レンタルサーバなどで、サーバ自体が壊れてしまい、バックアップがなくなってしまいさーとを戻すことができないということはほとんどないと思いますが、念には念を入れてバックアップを取得して、サーバとは別の場所に置くということで安心できると思います。

これは、これで機能的には問題ありませんが、イメージを記事毎やカテゴリごとに管理したいや、静止画、動画を分けたいなど管理方法を自分で決めたい場合は変更する必要があります。

アップロード先を変更する方法は、標準の機能の中ではできないのでその変更方法を紹介します。

ただ、メディア（静止画、動画含めて）丸ごとアップロード先が変わります。
※細かく変更したい場合は、プラグインを使うことをお勧めします。

「すべての設定」の表示とアップロード先の変更

WordPressの通常のメニューの中には、この「すべての設定」というページは表示されませんが、特定のURLで表示することができます。

メディアのアップロードフォルダを変更する場合は、この「すべての設定」を使用して変更します。

「すべての設定」ページの表示

通常は表示されない「すべての設定」を表示するには、専用のURLから表示します。

別のブラウザタブで、WordPressにログインしている状態であれば、「すべての設定」のページがそのまま表示されます。

ログインされていない場合は、WordPressのログイン画面が表示されるのでログインします。

左側に設定キー、右側に設定値が表示されます。

設定したい項目（設定キー）を探し、右側の設定値を設定していきます。

項目によっては変更できないので、そういった項目は、グレーアウトされています。

このページは、すべての設定情報が表示されていますので間違えて更新するとWordPressが動かなくなったり、壊れてしまいます。

もう一度、慎重に、バックアップを取ったうえで変更することをお勧めします。

メディアのアップロード先の変更

メディアのアップロード先の変更をするために、「すべての設定」の中にアップロード先に関する2つの項目に設定を行う。

• upload_path
  メディアのアップロード先の相対パス
• upload_url_path
  メディアのアップロード先の絶対パス

アップロード先の作成

メディアをアップロード先のフォルダを事前に作成します。

FTP等のツールでメディアファイルをアップロードしたいフォルダを作成します。

「image」フォルダにメディアファイルをアップロードする設定をすることとします。

※アップロード先のフォルダ名は、任意の名前を付けてください。

アップロード先の設定

「すべての設定」を表示して、アップロード先を設定します。

upload_path　　　image
upload_url_path　https://○○○/image

※「image」は先ほど作成したアップロード先のフォルダです。

設定したら、ページ下にある「変更を保存」をクリックして変更を保存します。

ファイルのアップロード

メディアのアップロード先が変更できたので、画像ファイルをアップロードしてみます。

「メディア」のページから、画像ファイルをドラッグしてアップロードします。

ファイルがアップロードされているか、確認してみると、先ほど設定したフォルダの中にアップロードされていることが確認できます。

メディアの設定メニュー

「すべての設定」でアップロード先の設定をすると、メディアの設定ページが変更になります。

設定前と設定後で比べてみると、2項目増えています。

• アップロードするファイルの保存場所
• ファイルへの完全な URL パス

ページで確認してみると「すべての設定」設定前の「設定」の「メディア」ページにはありません。

「すべての設定」で、upload_pathとupload_url_pathを設定した場合の「設定」の「メディア」ページで確認すると、表示されています。

まとめ

これでメディアのアップロード先は変更できるようになりました。

今回の方法では、アップロード先が1つなので、メディアの種類によって場所を変更したりしたい場合は対応できません。

さらに細かい管理をしたい場合は、プラグインを入れて管理する必要があります。

また、WordPressの「すべての設定」ページは、気を付けて使用しないとサイト自体が壊れてしまうので、変更する場合はローカル環境などで十分検証して実施してください。

VirtualBoxとVagrantとVCCWでローカルにWordPress環境を作成する方法

VirtualBoxとVagrantとVCCWを使用してWordPressのローカル環境をWindows10上に作成する手順の説明です。数多くあるWordPressの設定やプラグインのインストール、動作検証を手軽に行えるようにローカル環境を作ります。

gogohito.com

2020.05.01

EWWW Image Optimizerを使う目的は、画像のメタ情報の削除と画像の最適化の2種類あります。

一つ目の画像のメタ情報の削除というのは、位置情報などの情報が残っているとそこから位置を特定されたりしてしまいます。

これらのメタ情報を自動的に削除し、セキュリティの向上します。

もう一つは、画像の最適化することです。

サイトの表示で、表示されるまでに時間がかかるページは自分で見るときでも避けてしまいます。

ページの読み込みが遅い原因として、画像の読み込みが遅いというものがあります。

ページは、きれいに作りたいのできれいな画像を使って作成するとどうしてもサイズの大きな画像をいくつも張り付けたくなります。

そこで、画像を圧縮、最適化することで対策を行います。

SEOでもページの表示が速いというのは、サイトの評価で非常に重要です。

WordPressでは、この画像圧縮と最適化を行うためのプラグインがEWWW Image Optimizerがあります。

このプラグインを導入し、画像圧縮と最適化を行います

EWWW Image Optimizer

より小さな画像、より速いサイト、より幸せな訪問者。ロケット工学の学位を必要としない、包括的な画像最適化です。

ja.wordpress.org

EWWW Image Optimizerのインストール

まずはインストールするプラグイン（「EWWW Image Optimizer」）を検索します。

「プラグイン」の「新規作成」を選択します。

プラグインの検索ページのキーワードに「EWWW Image Optimizer」を入力し検索します。

「EWWW Image Optimizer」が検索されますので、「今すぐインストール」を押してインストールを行います。

しばらくすると、インストールが終わりますので、「有効化」を押します。

有効化すると、EWWW Image Optimizerが開始されます。

EWWW Image Optimizerの設定

「EWWW Image Optimizer」の設定は、左メニューの「設定」から「EWWW Image Optimizer」を押します。

EWWW Image Optimizerの設定ページを表示すると、ページの上部に最適化の環境がどこまでそろっているのかが表示されています。

最適化のステータス状況（左側に圧縮状況、右側にリサイズ）が表示されています。

最適化が行われるとその最適化によって削除されたサイズが表示されます。

最適化が実施された状況についても「最適化された画像を表示する」のリンクから確認・操作することができます。

圧縮の状況

圧縮の状況には、圧縮するための環境がどこまでそろっているかが表示されています。

EWWW Image Optimizerをインストールしただけの状態では、5%となっています。

サーバに「jpegtran」、「optipng」、「gifsicle」のコマンドががインストールされていれば、20%で表示されます。（1コマンド増えるごとに5%増えます）
※Xserverを使用していますが、これらのコマンドはインストールされています。
　レンタルサーバにインストールされているかは確認はしてください。

これらのコマンドがインストールされていない場合は、vagrantとVCCW環境にjpegtran、optipng、gifsicleのインストール方法を参考にインストールしてください。

「jpegtran」、「optipng」、「gifsicle」のコマンドをインストールすると圧縮のステータスは、20%になります。

APIキー、またはEasy IOのプレミアム圧縮を有効にすると100%になると思われます。

※すみません、ここだけ有料のため現時点では未確認です。

APIキーは、ベーシックの設定ページで設定します。

Easy IOの設定は、イージーモードの設定ページでそれぞれ設定します。

リサイズの状況

リサイズの状況では、リサイズするための環境がそろっているかが表示されています。

リサイズの状況でも、EWWW Image Optimizerをインストールしたデフォルトの状態では、20%と表示されます。

「リサイズ設定」で最大画像サイズで最大画像サイズを設定したら50%まで表示されます。（プラス30％されます）

Easy IOを有効にしたら、100%として表示されると思われます。

※すみません、ここだけ有料のため現時点では未確認です。

ベーシックの設定

ベーシックの設定では、メタデータの削除設定や、画像（JPG、PNG、GIF、PDF）の最適化レベルを設定します。

「メタデータの削除」にチェックが入っていることを確認してください。

このチェックが入っていることで画像に入っているメタデータを削除してくれます。

ほかのメニューは、デフォルトのままで問題ありません。

「Optimization API Key」は、「APIキーを購入してください」のリンクから購入ページへ遷移して購入してください。

このキーを購入することで、画像の圧縮率が上がる（と思われます）。
※プレミアム圧縮が使えるようになりますので・・・。

イージーモードの設定

イージーモードの設定は、「Easy IO」の購入がされていないと「Easy IO」のチェックが設定できません。

「遅延読み込み」は、選択できます。
遅延読み込みをすることで、ページ読み込みの改善を図る場合は、チェックを入れてください。

上級者向けの設定

上級者向けの設定は、デフォルトのままで問題ありません。

リサイズの設定

リサイズの設定もデフォルトのままです。

画面のリサイズを設定すると最適化ステータスのリサイズのパーセントが上がります。
※必要があれば設定してください。

デフォルトのままです。

リサイズを無効化する場合は、必要なものをチェックしてください。

変換の設定

変換の設定では、「コンバージョンリンクを非表示」にチェックを入れます。

これにチェックを入れることで「png」と「jpg」の変換を自動的にされないようにします。

それ以外の設定は、「コンバージョンリンクを非表示」にチェックを入れていないときに設定をします。
今回は、何もチェックしないです。

WebPの設定

WebPは、JPEGやPNGよりも圧縮率の高い画像フォーマットを使用するときの設定になります。

WebPを使用する場合は、こちらを設定します。

特に設定はなしです。

EWWW Image Optimizerを使用する上で、必要な設定は以上です。

画像圧縮と最適化の使い方

画像圧縮とメタ情報の削除は、サイトにアップロードした時点で自動的に実行されます。

自動的に最適化が行われますが、一括で最適化を行ったり、最適化の履歴情報を削除したりすることができます。

また、最適化されている状況を確認するには、メニューの「メディア」から「ライブラリ」を選択します。

登録されているメディアの一覧が表示され、右側に圧縮など最適化された状況が表示されます。

画像が最適化された状況として、どれぐらいのサイズが圧縮されたか、再度最適化をするかが表示されます。

「一括最適化」の方法

登録済みの画像は、基本的には自動で最適化されますが、それらの画像を再度、最適化するには「一括最適化」を実施します。

WordPressのメニューの「メディア」から「一括最適化」を選択します。

一括最適化をs字するための画面が表示されます。

「最適化されていない画像をスキャンする」を選択して、最適化されていない画像がないかチェックします。

チェックした結果、最適化できる画像が発見された場合は、何ファイル最適化できる可能性があるか表示されます。

「○○点の画像を最適化」を押すことで、一括で最適化が開始されます。

一括最適化が行われると、その状況が画面へ表示されます。

どの画像がどれだけ圧縮されたのかが、1画像づつ表示されます。

最適化状況の確認

最適化されている画像を確認することと、最適化した履歴情報を削除するには、ツールの「EWWW Image Optimizer」を選択、または最適化ステータスの「削除結果」にある「最適化された画像を表示する。」のリンクを選択することで指示ページが表示されます。

「最適化画像を表示」で、最適化した画像を確認することができます。

「最適化履歴を消去」で最適化した履歴情報を削除します。

「最適化画像の表」を選択すると最適化された画像の一覧が表示されます。

「最適化履歴の消去」を選択すると最適化された画像の情報が削除されます。

最適化された画像の情報が残っている場合は、再度最適化はされません。

履歴情報を削除してから、「一括最適化」で最適化を行います。
※ただ、一度最適化されているので、設定を変更しない限り、変化はありません。

まとめ

無料で、EWWW Image Optimizerを使う主な理由はメタ情報を削除してくれることにあると思います。

圧縮もされますが、そこまで高い圧縮率を出しているわけではないです。

無料でも、よいファイル圧縮のサイトがあるのでファイル圧縮であればそちらのサイトを利用したほうが良いです。

あくまでもメタ情報の削除することで、セキュリティ的な使い方だと思います。

プラグインの設定方法やどのように動くかを確認するためには、インストールして、実際の動きをいろいろ試す必要があります。

その時にインターネット上に公開している環境しかないとその環境で確認作業を行うしかありません。

ただ、これほど恐ろしいことはありません。万が一、プラグインの設定方法を間違えたり、何かを削除してしまったりして折角作ったサイトが動かなくなってしまうかもしれません。

そこで、プラグインの設定や動作を試す環境があれば自由に確認することができます。

検証用の環境として別環境をローカルに環境に作ることをお勧めします。

仮想ソフトにVirtualBox、仮想化ソフトにVagrant、ローカル環境としてVCCWを使用してローカル環境を構築する方法を説明します。

WordPressのローカル環境の種類

WordPressで簡単にローカル環境を作るためには、いくつかの方法があります。

それぞれ、作成する人のスキルや用途によって選択するものが変わり、必要なものを使ってみてください。

ローカル環境の種類

WordPressでローカル環境を作るために代表的に4つの方法があります。

Local by Flywheel（LOCAL）、VCCW、XAMPP、XAMPの仕組みを使うことでローカル環境を作れます。

Local by Flywheelが一番簡単にローカル環境が構築できます。

他の3つは、仮想化ソフトウェアをインストール後、いくつかの手順を踏む必要があることと、少し技術的な知識も必要になります。

VirtualBoxとVagrantとVCCWでローカル環境の作成

VirtualBoxとVagrantとVCCWでローカル環境を作成する手順は、4ステップになります。

1. VirtualBoxのインストール
2. Vagrantのインストール
3. Vagrantプラグインのインストール
4. WordPress（VCCW）のインストール

VirtualBoxのインストール

まずは、仮想化ソフトウェアのVirtualBoxのインストールをします。

インストールは、Windows10にVirtualBox（Ver6.1)をインストールする方法を参考にインストールしてください。

Vagrantのインストール

続いてVagrantのインストールを行います。

インストールは、仮想環境ツールvagrantのインストールと使い方を参考にインストールを行ってください。

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

Vagrantのインストールが完了したら、hostsファイルに作成した仮想環境のIPアドレスを自動的に追加してくれるプラグインをインストールします。

インストールするプラグイン：vagrant-hostsupdater

vagrant plugin install vagrant-hostsupdater

WordPress（VCCW）のインストール

ローカルに作成するWordPressの環境は「wp-test.com」というサイトとして構築します。

VCCWの配置するフォルダの作成

VCCWを配置するために任意場所にフォルダを作成します。

今回は、Dドライブに「vagrant」フォルダを作成します。

mkdir \vagrant\
cd \vagrant\

Boxの登録

Vagrantは、Boxという単位で仮想環境を管理しています。

このBoxというのは、仮想環境のベースとなる情報がとなっており、そのBoxをVagrantが使用して共有された仮想環境を作っていきます。

このBoxであるWordPressの環境を、VCCWサイトからダウンロードしてきます。

「vccw-3.21.1.zip」をダウンロードして、解凍します。

解凍すると「vccw」フォルダがあるので、先ほど作成したvagrantの作業フォルダへコピーし、フォルダ名を変更します。

─vccw
  │  .editorconfig
  │  .gitignore
  │  ansible.cfg
  │  LICENSE
  │  README.md
  │  Vagrantfile
  │  
  └─provision
      │  default.yml
      │  playbook.yml
      │  
      └─playbooks
          │  commands.yml
          │  middleware.yml
          │  wordpress.yml
          │  
          └─templates
                  .bash_profile
                  .gemrc
                  .my.cnf
                  .npmrc
                  browse-command.php
                  composer.json
                  extra-wp-config.php
                  guest-wp-cli-config.yml
                  index.php
                  mailcatcher.service
                  multisite-htaccess
                  site.conf
                  vccw.sh
                  wp-cli.yml

「vccw」フォルダを「wp-test.com」へリネームします。

rename vccw wp-test.com
cd wp-test.com

次にBOXをvagrantに登録します。これでvagrantに仮想環境の枠ができます。

vagrant box add vccw-team/xenial64
※VCCWをZIPでダウンロードしていたら不要

vagrantに登録できました。

VCCWによるローカル環境のインストールと起動

「\wp-test.com\provision」フォルダの中にある「default.yml」をコピー、編集して「site.yml」を作成します。

作成した「site.yml」を「wp-text.com」フォルダ直下にコピーします。

# encoding: utf-8
# vim: ft=ruby expandtab shiftwidth=2 tabstop=2

#
# General Settings
#
wp_box: vccw-team/xenial64

#
# Virtual Machine Settings
#
memory: 1024
cpus: 1

#
# Network Settings
#
hostname: wp-test.com
ip: 192.168.33.10

#
# Vagrant Hostsupdater Aliases
# Manage additional entries in the /etc/hosts file using vagrant-hostsupdater
#
hostname_aliases:
  - www.wp-test.com
#  - some.subdomain.vccw.test

#
# WordPress Settings
#
version: latest
lang: ja
title: Welcome to the VCCW
multisite: false
rewrite_structure: /archives/%post_id%

#
# WordPress Path
#
wp_siteurl: ''  # Path to the WP_SITEURL like "wp"
wp_home: ''     # Path to the WP_HOME like "wp"

#
# WordPress User
#
admin_user: admin
admin_pass: admin
admin_email: vccw@example.com

#
# WordPress Database
#
db_prefix: wp_
db_host: localhost
db_name: wordpress
db_user: wordpress
db_pass: wordpress

#
# WordPress Default Plugins
# Plugin's slug or url to the plugin's slug.
#
plugins:
- logbook

#
# WordPress Default Theme
# Theme's slug or url to the theme's .zip.
#
theme: ''

#
# WordPress Options
#
options:
  blogdescription: Hello VCCW.

#
# WordPress Multisite Options
#
multisite_options: {}

#
# The values of wp-config.php
#
force_ssl_admin: false
wp_debug: true
savequeries: false

gitignore: https://raw.githubusercontent.com/github/gitignore/master/WordPress.gitignore

#
# Additional PHP code in the wp-config.php
#
extra_wp_config: |
  // Additional PHP code in the wp-config.php
  // These lines are inserted by VCCW.
  // You can place additional PHP code here!

#
# Theme unit testing
#
theme_unit_test: false
theme_unit_test_uri: https://raw.githubusercontent.com/WPTRT/theme-unit-test/master/themeunittestdata.wordpress.xml
# theme_unit_test_uri: https://raw.githubusercontent.com/jawordpressorg/theme-test-data-ja/master/wordpress-theme-test-date-ja.xml

#
# DB will be reset when provision
#
reset_db_on_provision: true

#
# RubyGems
# Wordmove will be forcibly installed.
#
ruby_gems:
  - bundler
  - wordmove

mailcatcher: true

wp_i18n_tools: true

#
# NPM modules
#
npms: []

#
# composer
#
composers:
  - phpunit/phpunit:5.6
  - squizlabs/php_codesniffer:~2.0
  - wp-coding-standards/wpcs:*
  # - phpmd/phpmd:*
  # - sebastian/phpcpd:*
  # - phploc/phploc:*
  # - phing/phing:*

#
# wp-cli package commands
#
wp_cli_packages:
  - https://github.com/vccw-team/wp-cli-scaffold-movefile/archive/master.zip

#
# Linked Clone for Vagrant v1.8
#
linked_clone: false

#
# Advanced Settings
#

#
# PHP ini values
#
php_ini:
  date.timezone: UTC
  default_charset: UTF-8
  mbstring.language: neutral
  mbstring.internal_encoding: UTF-8
  post_max_size: 1024M # Same with VVV
  short_open_tag: Off
  session.save_path: /tmp
  upload_max_filesize: 1024M # Same with VVV
  xdebug.remote_enable: true
  xdebug.remote_host: 127.0.0.1
  xdebug.remote_port: 9000
  xdebug.profiler_enable: true
  xdebug.idekey: VCCWDEBUG
  xdebug.remote_connect_back: true
  xdebug.remote_autostart: true

synced_folder: wordpress
document_root: /var/www/html

この「site.yml」ファイルの中で、各自の環境に合わせて変更します。

変更箇所は、6ヶ所を変更します。

本番に近い形にする場合は、もう少し変更する必要があるかもしれませんが、プラグインの動作検証やWordPressの設定確認だけであれば、このぐらいで大丈夫です。

Virtual Machine Settings

この項目は、VitrualBoxに登録されるときの仮想環境に割り当てるメモリサイズ、CPU（コア数）を指定します。
memory: 1024
cpus: 1

Network Settings

この項目は、ホスト名とIPアドレスを指定します。
ローカルに作成するWordPressのホスト名（VCCWフォルダをリネームした名前）を指定します。
hostname: wp-test.com
ip: 192.168.33.10

Vagrant Hostsupdater Aliases

ホスト名のエイリアスを指定します。hostnameに「www.」をつけたものを指定します。
hostname_aliases:　www.wp-test.com

WordPress Settings

設定するWordPressのバージョンと言語の指定をします。
言語は、デフォルトでは「en_US」になっているので「ja」（日本語）に変更します。
version: latest
lang: ja

WordPress User

WordPressへログインするユーザ、パスワード、メールアドレスを指定します。

ローカル環境なので、デフォルトでも問題ありません。
admin_user: admin
admin_pass: admin
admin_email: vccw@example.com

WordPress Database

WordPressのDBへのユーザ、パスワードを設定します。

こちらも、ローカル環境なのでデフォルトで問題ありません。
db_prefix: wp_
db_host: localhost
db_name: wordpress
db_user: wordpress
db_pass: wordpress

「site.yml」ファイルの設定が終わったら、「vagrant up」コマンドでVCCWを起動します。

初回は、VirtualBoxへのVCCWのインストールがありますので時間がかかりますが、2回目以降は、起動のみなのでそこまで時間はかかりません。

vagrant up

コマンドを実行します。

実行ログの表示が止まったら、VCCWのインストールと起動が完了です。

PS D:\vagrant\wp-test.com> vagrant up                                                                                   Bringing machine 'wp-test.com' up with 'virtualbox' provider...
==> wp-test.com: Importing base box 'vccw-team/xenial64'...
==> wp-test.com: Matching MAC address for NAT networking...
==> wp-test.com: Checking if box 'vccw-team/xenial64' version '20180107' is up to date...
==> wp-test.com: Setting the name of the VM: wp-test.com
==> wp-test.com: Clearing any previously set network interfaces...
==> wp-test.com: Preparing network interfaces based on configuration...
    wp-test.com: Adapter 1: nat
    wp-test.com: Adapter 2: hostonly
==> wp-test.com: Forwarding ports...
    wp-test.com: 22 (guest) => 2222 (host) (adapter 1)
==> wp-test.com: Running 'pre-boot' VM customizations...
==> wp-test.com: Booting VM...
==> wp-test.com: Waiting for machine to boot. This may take a few minutes...
    wp-test.com: SSH address: 127.0.0.1:2222
    wp-test.com: SSH username: vagrant
    wp-test.com: SSH auth method: private key
    wp-test.com:
    wp-test.com: Vagrant insecure key detected. Vagrant will automatically replace
    wp-test.com: this with a newly generated keypair for better security.
    wp-test.com:
    wp-test.com: Inserting generated public key within guest...
    wp-test.com: Removing insecure key from the guest if it's present...
    wp-test.com: Key inserted! Disconnecting and reconnecting using new SSH key...
==> wp-test.com: Machine booted and ready!
==> wp-test.com: Checking for guest additions in VM...
    wp-test.com: The guest additions on this VM do not match the installed version of
    wp-test.com: VirtualBox! In most cases this is fine, but in rare cases it can
    wp-test.com: prevent things such as shared folders from working properly. If you see
    wp-test.com: shared folder errors, please make sure the guest additions within the
    wp-test.com: virtual machine match the version of VirtualBox you have installed on
    wp-test.com: your host and reload your VM.
    wp-test.com:
    wp-test.com: Guest Additions Version: 5.2.2
    wp-test.com: VirtualBox Version: 6.1
==> wp-test.com: [vagrant-hostsupdater] Checking for host entries
==> wp-test.com: [vagrant-hostsupdater] Writing the following entries to (C:/Windows/system32/drivers/etc/hosts)
==> wp-test.com: [vagrant-hostsupdater]   192.168.33.10  wp-test.com  # VAGRANT: b4d0d89d1a675fc7416c2bf23f20b044 (wp-test.com) / 491d7719-7427-4477-86dc-5fd3fca528f3
==> wp-test.com: [vagrant-hostsupdater]   192.168.33.10  www.wp-test.com  # VAGRANT: b4d0d89d1a675fc7416c2bf23f20b044 (wp-test.com) / 491d7719-7427-4477-86dc-5fd3fca528f3
==> wp-test.com: [vagrant-hostsupdater] This operation requires administrative access. You may skip it by manually adding equivalent entries to the hosts file.
==> wp-test.com: Setting hostname...
==> wp-test.com: Configuring and enabling network interfaces...
==> wp-test.com: Mounting shared folders...
    wp-test.com: /vagrant => D:/vagrant/wp-test.com
    wp-test.com: /var/www/html => D:/vagrant/wp-test.com/wordpress
==> wp-test.com: Running provisioner: ansible_local...
    wp-test.com: Running ansible-playbook...

PLAY [all] *********************************************************************

TASK [Gathering Facts] *********************************************************
ok: [wp-test.com]

TASK [Place a ~/.bash_profile] *************************************************
changed: [wp-test.com]

TASK [Place a ~/.bash.d/] ******************************************************
changed: [wp-test.com]

TASK [Place a ~/.bash.d/vccw.sh] ***********************************************
changed: [wp-test.com]

TASK [Download the Composer] ***************************************************
changed: [wp-test.com]

TASK [Run the Composer installer] **********************************************
changed: [wp-test.com]

TASK [Create a ~/.composer/] ***************************************************
changed: [wp-test.com]

TASK [Place a composer.json] ***************************************************
changed: [wp-test.com]

TASK [Install Composer libraries] **********************************************
changed: [wp-test.com] => (item=phpunit/phpunit:5.6)
changed: [wp-test.com] => (item=squizlabs/php_codesniffer:~2.0)
changed: [wp-test.com] => (item=wp-coding-standards/wpcs:*)

TASK [Install the WP-CLI] ******************************************************
changed: [wp-test.com]

TASK [Create a ~/.wp-cli/] *****************************************************
changed: [wp-test.com]

TASK [Install WP-CLI packages] *************************************************
changed: [wp-test.com] => (item=https://github.com/vccw-team/wp-cli-scaffold-movefile/archive/master.zip)

TASK [Setup a bash completion for the WP-CLI] **********************************
changed: [wp-test.com]

TASK [Create `wp-cli` dir] *****************************************************
ok: [wp-test.com]

TASK [Place a `wp browse` command.] ********************************************
changed: [wp-test.com]

TASK [Place a ~/.gemrc] ********************************************************
changed: [wp-test.com]

TASK [Install Wordmove] ********************************************************
changed: [wp-test.com]

TASK [Install Ruby gems] *******************************************************
changed: [wp-test.com] => (item=bundler)
skipping: [wp-test.com] => (item=wordmove)

TASK [Place a ~/.npmrc] ********************************************************
changed: [wp-test.com]

TASK [Install npm packages] ****************************************************

TASK [Check the `phpcs` exists.] ***********************************************
changed: [wp-test.com]

TASK [Setup the WordPress coding standard] *************************************
changed: [wp-test.com]

TASK [Checkout the WordPress i18n Tools] ***************************************
changed: [wp-test.com]

TASK [Remove unused files if exists] *******************************************
changed: [wp-test.com] => (item=.wget-hsts)

RUNNING HANDLER [wp-cli-config] ************************************************
changed: [wp-test.com]

RUNNING HANDLER [wp-cli-local-config] ******************************************
ok: [wp-test.com]

PLAY [all] *********************************************************************

TASK [Gathering Facts] *********************************************************
ok: [wp-test.com]

TASK [Allow remote connections to MySQL] ***************************************
changed: [wp-test.com]

TASK [Place ~/.my.cnf] *********************************************************
changed: [wp-test.com]

TASK [Create SSL dir] **********************************************************
changed: [wp-test.com]

TASK [Create SSL keys] *********************************************************
changed: [wp-test.com]

TASK [Replacing the Apache User] ***********************************************
changed: [wp-test.com]

TASK [Replacing the Apache Group] **********************************************
changed: [wp-test.com]

TASK [Place /etc/apache2/sites-available/site.conf] ****************************
changed: [wp-test.com]

TASK [Disable keepalive] *******************************************************
changed: [wp-test.com]

TASK [Setup timeout] ***********************************************************
changed: [wp-test.com]

TASK [Enable virtual host for WordPress] ***************************************
changed: [wp-test.com]

TASK [Update php.ini] **********************************************************
changed: [wp-test.com] => (item={'value': False, 'key': u'short_open_tag'})
changed: [wp-test.com] => (item={'value': u'1024M', 'key': u'upload_max_filesize'})
changed: [wp-test.com] => (item={'value': u'neutral', 'key': u'mbstring.language'})
changed: [wp-test.com] => (item={'value': u'UTC', 'key': u'date.timezone'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_enable'})
changed: [wp-test.com] => (item={'value': 9000, 'key': u'xdebug.remote_port'})
changed: [wp-test.com] => (item={'value': u'UTF-8', 'key': u'default_charset'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_connect_back'})
changed: [wp-test.com] => (item={'value': u'VCCWDEBUG', 'key': u'xdebug.idekey'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_autostart'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.profiler_enable'})
changed: [wp-test.com] => (item={'value': u'UTF-8', 'key': u'mbstring.internal_encoding'})
changed: [wp-test.com] => (item={'value': u'/tmp', 'key': u'session.save_path'})
changed: [wp-test.com] => (item={'value': u'127.0.0.1', 'key': u'xdebug.remote_host'})
changed: [wp-test.com] => (item={'value': u'1024M', 'key': u'post_max_size'})

TASK [Update php.ini for cli] **************************************************
changed: [wp-test.com] => (item={'value': False, 'key': u'short_open_tag'})
changed: [wp-test.com] => (item={'value': u'1024M', 'key': u'upload_max_filesize'})
changed: [wp-test.com] => (item={'value': u'neutral', 'key': u'mbstring.language'})
changed: [wp-test.com] => (item={'value': u'UTC', 'key': u'date.timezone'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_enable'})
changed: [wp-test.com] => (item={'value': 9000, 'key': u'xdebug.remote_port'})
changed: [wp-test.com] => (item={'value': u'UTF-8', 'key': u'default_charset'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_connect_back'})
changed: [wp-test.com] => (item={'value': u'VCCWDEBUG', 'key': u'xdebug.idekey'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_autostart'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.profiler_enable'})
changed: [wp-test.com] => (item={'value': u'UTF-8', 'key': u'mbstring.internal_encoding'})
changed: [wp-test.com] => (item={'value': u'/tmp', 'key': u'session.save_path'})
changed: [wp-test.com] => (item={'value': u'127.0.0.1', 'key': u'xdebug.remote_host'})
changed: [wp-test.com] => (item={'value': u'1024M', 'key': u'post_max_size'})

TASK [Install mailcatcher] *****************************************************
changed: [wp-test.com]

TASK [Add mailcatcher to service] **********************************************
changed: [wp-test.com]

TASK [Start mailcatcher] *******************************************************
changed: [wp-test.com]

TASK [Update php.ini for mailcatcher] ******************************************
changed: [wp-test.com]

TASK [Update php.ini for mailcatcher for cli] **********************************
changed: [wp-test.com]

RUNNING HANDLER [restart apache] ***********************************************
changed: [wp-test.com]

RUNNING HANDLER [restart mysql] ************************************************
changed: [wp-test.com]

PLAY [all] *********************************************************************

TASK [Gathering Facts] *********************************************************
ok: [wp-test.com]

TASK [Create Database] *********************************************************
changed: [wp-test.com]

TASK [Create MySQL user] *******************************************************
changed: [wp-test.com]

TASK [Change owner of the /var/www/html/] **************************************
ok: [wp-test.com]

TASK [Remove index.html from document root] ************************************
ok: [wp-test.com]

TASK [Run `wp core download`] **************************************************
changed: [wp-test.com]

TASK [Create temporary file for extra-php in wp-config.php] ********************
changed: [wp-test.com]

TASK [Run `wp core config`] ****************************************************
changed: [wp-test.com]

TASK [Run `wp db reset`] *******************************************************
changed: [wp-test.com]

TASK [Run `wp core install`] ***************************************************
changed: [wp-test.com]

TASK [Create index.php for wp_siteurl] *****************************************
skipping: [wp-test.com]

TASK [Move index.php for wp_siteurl] *******************************************
skipping: [wp-test.com]

TASK [stat] ********************************************************************
ok: [wp-test.com]

TASK [Create `.gitignore`] *****************************************************
skipping: [wp-test.com]

TASK [Move `.gitignore`] *******************************************************
skipping: [wp-test.com]

TASK [Run `wp core language install`] ******************************************
changed: [wp-test.com]

TASK [Run `wp plugin install`] *************************************************
changed: [wp-test.com] => (item=logbook)

TASK [Run `wp plugin install wp-multibyte-patch`] ******************************
changed: [wp-test.com]

TASK [Run `wp theme install`] **************************************************
skipping: [wp-test.com]

TASK [Install `wordpress-importer`] ********************************************
skipping: [wp-test.com]

TASK [Download WordPress theme unit test data] *********************************
skipping: [wp-test.com]

TASK [Import WordPress theme unit test data] ***********************************
skipping: [wp-test.com]

TASK [Run `wp options update`] *************************************************
changed: [wp-test.com] => (item={'value': u'Hello VCCW.', 'key': u'blogdescription'})

TASK [Get the timezone] ********************************************************
changed: [wp-test.com]

TASK [Update timezone] *********************************************************
changed: [wp-test.com]

TASK [Get the date format] *****************************************************
changed: [wp-test.com]

TASK [Update date format] ******************************************************
changed: [wp-test.com]

TASK [Run `wp rewrite structure`] **********************************************
changed: [wp-test.com]

TASK [Flush rewrite rules] *****************************************************
changed: [wp-test.com]

TASK [Run `wp core multisite-convert`] *****************************************
skipping: [wp-test.com]

TASK [Create `.htaccess` for multisite] ****************************************
skipping: [wp-test.com]

TASK [Move `.htaccess` for multisite] ******************************************
skipping: [wp-test.com]

TASK [Setting up WordPress multisite options] **********************************

TASK [Check `wp scaffold movefile` exists.] ************************************
changed: [wp-test.com]

TASK [stat] ********************************************************************
ok: [wp-test.com]

TASK [Create a Movefile] *******************************************************
ok: [wp-test.com]

PLAY RECAP *********************************************************************
wp-test.com                : ok=69   changed=59   unreachable=0    failed=0

PS D:\vagrant\wp-test.com>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

正常に実行が終わるとVirtualBoxに仮想環境「wp-test.com」が追加されて、実行されていることが確認できます。

ローカル環境のWordPressへのアクセス

ローカル環境のセットアップが正常に完了したか確認するためにWordPressへアクセスしてみます。

「http://www.wp-test.com」でローカル環境にアクセスしてみてください。

WordPressの初期画面が表示されます。

今度は、「http://wp-test.com/wp-login.php」でWordPressの管理画面にログインしてください。

「site.yml」の「WordPress User」で指定したユーザ・パスワードでログインします。

成功していた場合は、変更したユーザ、パスワードを使います。

無事にログインできました。

まとめ

VirtualBoxとVagrantとVCCWを使用してWordPressのローカル環境を作りましたが、VMWareでも同様にローカル環境を作ることができるので、また、チャレンジしたいと思います。

また、簡単に作成するのであれば、Local by Flywheel（LOCAL）を使ったほうが簡単に作成できると思います。

XAMPPやMAMP、VirtualBox＋Vagrantの組み合わせで、WordPress以外のOSを使ってみることも楽しいと思います。

目的に合わせて必要なツールを選択して、ローカル環境を作成してください。

プラグインのテスト、テーマの開発、学習を行ってより良いサイト作りができると思います。

この便利なプラグインをインストールすることで、やりたいこと（機能）を増やしていけます。

基本機能（WordPress）に、機能を追加していく、追加する機能のことをプラグインといいます。

WordPressだけでもページを作ることができますが、さらに便利に、きれいに、安全なサイトを作るために多くのプラグインをインストールしていきます。

WordPressではプラグインを、非常に簡単にインストールすることができます。

また、インストールする手順は同じなので、その方法をまとめておきます。

プラグインの検索

まずは、インストールするプラグインを検索します。

検索するには、WordPressメニューの「プラグイン」から「新規作成」を選択します。

プラグインの新規追加ページが表示されます。

新規追加ページのプラグインの検索ボックスにプラグインの名前を入力します。

例）「WP Revisions Control」を入力しています。

検索結果に、プラグインが表示されます。

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

プラグインが検索されたら、インストールを行います。

プラグインに「今すぐインストール」を押します。

プラグインの有効化

しばらくすると、インストールが終わりますので、「有効化」を押します。

有効化が完了すると、インストールしたプラグインが使用可能になります。

プラグインの一覧に表示されます。

一覧上では有効なプラグインは、青色で表示されています。

インストールされているが使用していない（停止中）のプラグインは、白抜きで一覧表示されています。

必要なくなったら、各プラグインにある「停止」を押して使用できない状態にします。（青色→白色になります）

プラグイン自体が、不要になった場合は「削除」を押すことでWordPressから削除してくれます。

プラグインのインストール後の作業

プラグインをインストール後、プラグインによっては設定が必要になります。

左メニューや、プラグインの一覧からそれそれのプラグインの設定画面が表示できるので、設定を行います。

設定ができれば、いよいよその機能が使えるようになります。

まとめ

必要なプラグインは人それぞれ違うと思いますが、必ず必要なものもありますので必要に応じてインストールしてください。

この機能は、保存するたびに番号が付けられいつでも保存してあるリビジョンに戻ることができます。

但し、このリビジョン付けはWordPress標準では、永遠に履歴が増えてしまい、WordPressの負荷（DB容量）がかかってしまいます。
また、履歴もそこまで多くは必要ありません。
※そこまで古いものへ戻すことはありません。

そこで、必要な分のリビジョンだけ残しておくことができるように制御します。
その機能を提供するのが「WP Revisions Control」です。

WP Revisions Control

投稿タイプごとに残すリビジョン数を制御。

ja.wordpress.org

リビジョンを管理するプラグインではもう一つRevisions Controlというのがありますが、V5.4のWordPressでは、テストされていないとありますし、更新が2年以上されていないのでWP Revisions Controlを使います。

※2年以上更新がないというのは、ソフトとして安定しているからという理由もあると思います。

インストール

初めてプラグインのインストールする場合は、【WordPress】プラグインのインストールする方法を確認してください。

まずはインストールするプラグイン（「WP Revisions Control」）を検索します。

「プラグイン」の「新規作成」を選択します。

プラグインの検索ページのキーワードに「WP Revisions Control」を入力し検索します。

「WP Revisions Control」が検索されますので、「今すぐインストール」を押してインストールを行います。

しばらくすると、インストールが終わりますので、「有効化」を押します。

有効化すると、リビジョン管理の制御が開始されます。

設定

「WP Revisions Control」の設定は、どのリビジョンまでを保存するかを設定します。

設定は、WordPressメニューの「設定」から「投稿設定」を選択します。

「投稿設定」ページの下のほうに「WP Revisions Control」の項目があり、リビジョンの設定ができます。

投稿、固定ページ、カスタムCSSのリビジョンを指定できます。
デフォルトでは、5が設定されています。

※リビジョンは、5つあれば問題ありません。

使い方

投稿ページや固定ページ、カスタムCSSのそれぞれのページには、リビジョンが表示されています。

保存されたリビジョンは、日付とともに表示されています。

この日付のリンクを押すと現在編集中の記事と保存されているリビジョンの記事との比較が表示されます。

差異がある部分について、色分けして表示されます。

各ページでも、リビジョンの操作と保存リビジョン数を個別で操作することができます。

Purge these revisions

現在のすべてのリビジョンを削除するには、「Purge these revisions」ボタンを押します。

Limit this post to

また、「Limit this post to」にリビジョンを入力することで、いくつまでリビジョン管理するかを個別の記事に指定できます。

まとめ

今回は、「WP Revisions Control」をインストールしてリビジョン管理することにしました。

「Revisions Control」も同様の機能を提供しています。

「Revisions Control」では、「WP Revisions Control」と同じリビジョン管理機能にプラスして、リビジョンを選択して削除するなどの機能があります。

使用しているWordPressのバージョンや好みによってどちらのプラグインを使用するかが変わると思います。

利用しやすいほうで、管理してください。

サイトを開設したら、サイト訪問者とのコミュニケーションツールとして、問い合わせ、アンケート、資料請求など様々なやり取りが必要になります。

その為に「Contact Form 7」を使用して、簡単に、さまざまなフォームで問い合わせフォームを作成することができます。

「Contact Form 7」では、問い合わせの種類により、専用のフォームを作成することが可能になります。

Contact Form 7

お問い合わせフォームプラグイン。シンプル、でも柔軟。

ja.wordpress.org

また、この「Contact Form 7」では、他のプラグインやサービスと連携することで、簡単にスパムや自動化された嫌がらせのブロックを行うことも可能になります。

インストール

初めてプラグインのインストールする場合は、【WordPress】プラグインのインストールする方法を確認してください。

【WordPress】プラグインをインストールする方法

WordPressでプラグインをインストールする方法です。プラグインのインストールは、基本的に同じように実施します。

gogohito.com

2020.04.25

まずはインストールする「Contact Form 7」プラグインを検索します。

WordPressのメニューの「プラグイン」から「新規追加」を選択します。

表示されたプラグインの検索ページで、キーワードに「Contact Form 7」を入力し検索します。

「Contact Form 7」が検索されますので、「今すぐインストール」を押してインストールを行います。

しばらくすると、インストールが終わりますので、「有効化」を押します。

有効化すると、インストールは完了です。

お問い合わせフォームの作成

インストールが終わったら、以下のステップでお問い合わせフォームを作成します。

シンプルなものであれば、ほぼデフォルトでできてしまいます。

フォーム（お問い合わせフォームの作成）

問い合わせ用のフォームの作成を行います。

WordPressメニューの「お問い合わせ」から、「新規作成」を選択します。

デフォルトのコンタクトフォームとしての必要な項目がセットされた状態でコンタクトフォームが表示されます。

デフォルトのコンタクトフォームは、このような問い合わせフォームとなっています。

新規のコンタクトフォームのタイトルに名前を付けます。
名前を付けたら、各項目のカスタマイズを行います。

コンタクトフォームに追加、カスタマイズできる項目は表の項目です。

どの項目も*は必須項目となります

必要な項目をコンタクトフォームへ配置し、問い合わせフォームを作ります。

問い合わせの内容としては、名前（ニックネームなど）、問い合わせ内容を返信するためのメールアドレス、題名、問い合わせ内容があればよいと思います。

カテゴリなどで、問い合わせの分類も項目としてあると、管理するときにわかりやすいです。

メール（自動返信用のメールの編集）

メール設定では、サイトから問い合わせを送信した時に、サイト管理者へ自動的に送信されるメールがデフォルトで作成されます。

メッセージ本文には、管理者として必要な情報として、差出人、題名、本文があればよいです。
その他にも必要な項目があれば、設定します。

追加ヘッダーの「Reply To:」に相手先のメールアドレス（ここでは、your-email）を設定しておくことで、問い合わせメールを返信するときに「宛先」に自動的に設定してくれます。

ファイルを添付するような問い合わせの場合は、本文の中にメールを送信するタグもセットする必要があります。

問い合わせのお礼メールを「メール（２）」で設定します。

「メール（２）を使用」のチェックを入れます。

メール（２）の各項目を設定していきます。

本文も少し工夫が必要です。

メッセージ（各種メッセージの設定）

メッセージの設定は、コンタクトフォームでの入力が意図しなかった場合や処理が終わったときに表示されます。

サイトによって、自分らしさを出すために変更してみてもよいと思います。

参考までに、デフォルトのメッセージはこのようになっています。

その他の設定

その他設定では、読者限定モード、メールスキップ、承認確認の挙動変更の設定をすることができます。

各設定項目は、表のようになります。

お問い合わせフォームの追加

作成したコンタクトフォームを、固定ページに設定してお問い合わせページを完成させます。

固定ページに設定するショートコードは、コンタクトフォームプラグインの画面上部にあるショートコードをコピーします。

次に固定ページを新規で作成し、先ほどコピーしたショートコードを貼り付けます。

これだけで、お問い合わせフォームが完成しました。

まとめ

シンプルな問い合わせフォームができました。

この後のさらなるカスタマイズとしては、スパムや嫌がらせ対策を進めることと、サンクスページを表示する必要があります。

特にサンクスページは、問い合わせの後に訪問者へ感謝を示すだけではなく、次なるアクションを促すことができる非常に良い仕組みです。

また、セキュリティ対策も実施しておいたほうが良いです。

Googleのサービスである「reCAPTCHA v3」と連携させることで、スパムから守ることができます。

是非、設定しましょう。