wordpressのEWWW Image Optimizerというプラグインでエラーがでる

EWWW Image Optimizerでエラーが出るようになりました。このプラグインは、画像ファイルを圧縮してファイルサイズを小さくしてくれます。アップロードしたら勝手に実行してくれます。最新版にアップデートしたことが原因なのかは分かりませんが、突然下記のエラーがでるようになりました。

出現したエラー

解決策

結論的には、エラー文中のReset Countersという文字は実際はリンクが張られているのですが、これをクリックしたら直りました。

同じエラーが出た人が質問していて、このプラグインの作者さんが回答してくれてました。
[Resolved] EWWW Image Optimizer has detected excessive re-optimization of multiple images

I think yours are false positives. You can just hit the reset button, and move on. Looks like you’ve got the scheduled optimizer scanning the theme/plugin folders, so anytime one of those gets updated with unoptimized images, they get re-optimized, so no big deal.

とりあえずリセットボタンを押したら直りました。最初押したときエラー画面になった気がするのですが、もう一度押したらエラーが消えました。

ちなみに、上記英文のfalse positivesというのは、間違ってることを正しいと思ってる状態みたいな感じらしいです。ここに解説がのってました。クリックのことはhitというんですね。

wordpress – 子テーマをつくってスタイル変更する

テーマのスタイルを変更しても更新したら消えちゃうのでこまります。子テーマをつくるといいらしいです。

参考:WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など

wp-content/themeに子テーマ用folderをつくって、その中に、style.cssとfunctions.phpをつくって、style.cssに子テーマの情報(子テーマの名前と親テーマ)を書けばいいようです。

style.cssの中身

これで管理画面に反映しているはず。有効化して、スタイルシートをいじってみます。
親を呼び出さないといけないらしい。スタイルが全く適用されていない。functions.phpに書けばいいらしい。

functions.php

これで親のスタイルが引き継がれるので、あとは、子テーマのstyle.cssを修正することでデザインを変更できます。

WordPress – BackWPupで自動バックアップ

backWPupというプラグインを使うと、データベース、ファイルの定期的バックアップを自動化することができます。設定も非常に簡単なので便利です。

データベースのバックアップは、SQLをそのままバックアップする形式と、XMLをエクスポートする形式の2つがあります。サーバを変えない想定であればSQLバックアップで問題ないし復旧も楽ですが、サーバを変える可能性がある場合は、XMLエクスポートもしておく必要があります。DBの中にサーバのパス情報等が入っているので、サーバを変えた時にそれらを手動で変更しないといけなくなる等の可能性があるからです。

設定方法は下記サイトで詳しく解説してくれています。
BackWPup – WordPressを丸ごとバックアップできるプラグイン

ロリポップの場合、PHPのバージョンは5.4以上に上げておく必要があります。バージョン5.3でDBバックアップを実行しようとすると、下記のようなエラーがでます。

ERROR: No MySQLi extension found. Please install it.

WP-CRONについて

定期実行するための方法は、管理画面の下記で選択します。

backWPup

「with WordPress cron」を選択すると、WordPressに標準搭載されている、擬似的なcronである、WP-CRONが利用されます。これは、wordpressのサイトにアクセスがあった際に、WP-CRONの設定を自動でチェックし、設定されている実行日時が過ぎていれば実行するようにするものです。つまり、アクセスがなければ実行されません。

参考:
[解決済み] BackWPup有料になりました?

google search consoleで「updated がありません」と言われる

googleのsearch consoleで「updated がありません」と言われます。
記事の更新日時を表示しているタグのクラスをupdatedにする必要があるらしい。

タグにupdatedとつけることで、検索エンジン等がこのデータは更新日時を表しているのだなと分かるようになります。このupdatedのようなものを構造化データと呼ぶそうです。

ちなみに、この構造化データについてテストできるツールが下記です。URLを入れると、そのページの構造化データを全部取得・表示し、問題ないか教えてくれます。でもこれで、search consoleでエラーが出ているURLを入力しても、エラーは表示されない。

Structured Data Testing Tool

wordpressの記事更新日時タグのクラスをupdatedにする

wp-contentというディレクトリに、テーマとかプラグインが入っているようです。私は今ampleというテーマを利用していますが、wp-content/themes/ampleにそのテーマのファイルが入っていました。どのファイルに該当箇所があるのか検索します。

$ grep -rn ‘entry-date published’ *
inc/functions.php:415: $time_string = ‘<time class=”entry-date published” datetime=”%1$s”>%2$s</time>’;

ソースコードは下記のようになってました。

作成日時と更新日時が異なる場合のみ、updatedクラスのタグを追加しています。でも画面には作成日時しか表示されないので、updatedクラスのタグはdisplay:noneとかにしてあるようです。全く問題ない気もしますが、更新日時がない場合は、作成日時と同じ日時でupdatedクラスのタグを表示させるようにコードを修正します。

Structured Data Testing Toolでみると、作成日時と更新日時が違う場合でないと、検証結果にupdatedが表示されませんでした。search consoleもすぐにテストできないみたいなので、しばらく時間経ってから確認してみたいと思います。

参考:
WordPress で構造化データエラー(entry-title, updated, author)にハイブリッド対応
WordPressの仕組みを理解する

WordPressを速くする

WordPressが遅すぎるので速くしてみます。

参考:WordPress高速化|1秒前半で表示する誰でもできる簡単な方法

画像を圧縮したり、スタイルシートとかも圧縮したり一つにまとめたり、headerに書かないようにしたり、キャッシュ使ったりします。WordPressは色々なプラグインがありますので、上記を参考にとりあえずプラグインを入れてどの程度速くなるか確認してみます。

現時点の速度はどのくらいなのか?

GoogleのPageSpeed Insightsで解析してもらってみます。

3.8秒で応答するらしい。画像圧縮とかキャッシュとかできてないと言われている。下の画像はパソコンで見たときの結果ですが、スマホでも同じような点を指摘されている。点数は50点とPCよりも悪い。ユーザー エクスペリエンスは95点になっている。

pagespeed_pc

画像の圧縮

上記参考サイトで紹介されている、EWWW Image Optimizerというプラグインを使ってみる。

コンテンツに使用する画像を一枚ずつ、いちいち圧縮していると効率が悪い。そこで、自動的に画像サイズを圧縮してくれるのが、EWWW Image Optimizer というプラグインだ。

参考:EWWW Image Optimizer の設定方法と使い方

上記のとおりインストールと設定しました。既存画像も全部圧縮しました。1点上がった。

pagespeed_score_pc2

画像の読み込みを後回しにする

Lazy Loadというプラグインを使うといいらしい。
インストールして、有効化しました。2点上がった。スマホも2点上がって52点になった。

pagespeed_score_pc3

キャッシュを使う

WordPressには、この仕組みを簡単に導入できるプラグインがある。それが W3 Total Cache だ。今まで、キャッシュによる高速化をやったことがない方は、これを導入するだけでサイト表示スピードの劇的な高速化を実感できるだろう。

参考:W3 Total Cache のおすすめの設定方法

Head Cleanerを使う

参考:Head Cleaner の最も理想的な設定方法

キャッシュとHead Cleanerを参考サイトのとおりに設定しました。ありがたい参考サイトです。CDNサービスの設定はまだしていません。

ここまでで、81点になりました!スマホは、71点。ユーザーエクスペリエンスは99点。pagespeed_score_pc4

WordPress ContactForm7からのREST

ContactForm7のフォーム情報をサーバに飛ばす

WordPress ContactForm7は、/includes/classes.phpがメインっぽいファイルで、WPCF7_ContactFormクラスに色々な処理が記載されている。
function setup_posted_data()で、メールフォームのフォーム情報をゲットして、WPCF7_ContactForm::posted_dataに格納している。
$posted_dataの中身は、$posted_data[$name] = $valueといった形になっている。
フォームのnameが、subjectであった場合、subjectへの記載内容は、$this->$posted_data[‘subject’]で取得できる。
function submit()で、エラー等がない場合にメール送信処理をしている。
メール送信処理は、do_action_ref_array( ‘wpcf7_mail_sent’, array( &$this ) );っぽい。
do_action_ref_arrayはWordPressの関数で、指定したアクション$tagに登録された関数を実行する。(参照:WordPressのプラグインを作る際に覚えておくと便利な関数まとめ

どこ探しても、wpcf7_mail_sentを設定している箇所がない。
http://wordpress.org/support/topic/plugin-contact-form-7-php-after-form-submit これを見ると、functions.phpに下記のような設定すると、submit時の追加処理ができるっぽいことが書いてある。

ということで、下記functions.phpに下記にように記載すると、実際にできた。

ContactForm7の情報をcakePHPで受け取る

参考;RESTリクエストとレスポンスオブジェクト

/app/Config/routes.phpに、下記を追加

コントローラーに下記を追加

postメソッドの場合、function add(addアクション)が動作するので、function addで、下記のようにする。

WordPress Debugモード

wp-config.phpに、下記記載をする。

define(‘WP_DEBUG’, true);は、デフォルトで記載があり、false設定されているが、その他2行は記載がない。
define(‘WP_DEBUG_LOG’, true);は、有効化すると、/wp-content/ ディレクトリに debug.log が作成され、そのファイル内にエラー内容が記録される。
define(‘WP_DEBUG_DISPLAY’, true);は、有効化すると、画面上にエラーが表示される。

参考:WordPressのデバッグモード

WordPress ローカル環境でプラグインがインストールできない

ローカル環境は、Mac OS X 10.8.3で、サーバはXAMPPです。
WordPressの管理画面で検索して、インストールしようとしたら、サーバーにFTPアクセスする必要があるといわれてしまいインストールできない。
プラグインのzipフィアルを落としてきて、アップロードしようとしても、アクセス権限がないといわれてインストールできない。

結局、いろいろなブログを調べて、wp-config.phpに下記を追記した。これでFTPモードではなく、直接DLに切り替わるらしい。

そして、XAMPPのhtdocs以下すべてのディレクトリとファイルの所有者とグループをwwwにして、パーミッションを777にしたら、両方の方法ともにインストールができるようになった。

ここまでしなくても出来るのかもしれない。
インストールが終わったら、所有者とグループを元に戻さないとEclipseで作業できない。

preタグで囲めば自動的にハイライトしてくれるプラグイン『Crayon Syntax Highlighter』

Crayon Syntax Highlighter