Flying Scriptsとは？

Flying Scriptsとは、JavaScriptを読み飛ばすプラグインである。
ユーザーによる操作（マウスホバー、スクロールなど）があるまでJavaScriptを実行しない。

JavaScriptの何が問題なのか？

そもそも、JavaScriptの何が問題なのか？

大量のリソースを消費

まず、JavaScriptは非常に大量のリソースを消費する。
その為、JavaScriptが実行されている間、ページの読み込みが遅くなる。

ページの表示が遅い

ページの読み込みが遅い＝ページが表示するまで時間がかかる。
大分前に「3秒ルール」が言われていたことがあった。

ユーザーが離脱

ページにアクセスして、3秒以内にページが表示しないとユーザーは離脱してしまう。
今はもっと短くなっているようだ。

Googleの評価が下がる

ユーザーが離脱する事で、Googleのそのページに対する評価が下がる。結果、検索順位が下がる。

JavaScriptの読込を送らせる方法

そこで、ページにアクセスると一度にJavaScriptが実行するのではなく、ユーザーによる操作（マウスホバー、スクロールなど）あるまでJavaScriptを実行しないことで、ページの表示速度を優先する必要がある。
JavaScriptの読込を送らせるには、以下の方法がある。

非同期化（async）

HTMLとJavaScriptを非同期で処理する。

遅延（defer）

HTML解析後にJavaScriptを実行する

Flying Scripts

JavaScriptを読み飛ばす。

実際のところ、①非同期化（async）や②遅延（defer）ではPageSpeed Insightsで劇的なスコア改善は見込めない。
そこで、「Flying Scripts by WP Speed Matters」だ。

Flying Scriptsの効果

Flying Scriptsは、ユーザーが何らかのアクションを起こすまでJavaScriptが実行されない。

通常、ユーザーがページにアクセスすると、複数のJavaScriptが実行さる。
それがページの表示速度を送らせる原因になっているのだが、Flying Scriptsは、ユーザーが何らかのアクションを起こすまでJavaScriptをなかったことにしてくれる。

従って、その分、ページの表示速度の足をひっぱらない。
PageSpeed Insightsで劇的なスコア改善が可能だ。

但し、Flying Scriptsのデメリットがないこともない。

Flying Scriptsのデメリット

Flying Scriptsのデメリットとしては、画面表示が崩れてしまう可能性があるということだ。

これに対する対策としては、Flying Scriptsの設定画面で遅延時間をサイト毎に調整する。

次にFlying Scriptsの設定方法について。

Flying Scriptsの設定

インストール

プラグインのインストールは「プラグインを追加」画面で「Flying Scripts」と入力。
「Flying Scripts」が見つかったら、「今すぐインストール」→「有効化」の順にクリック。

Flying Scriptsの設定方法

Flying Scriptsの設定はプラグインページの「Flying Scripts by WP Speed Matters」のすぐ下の「settings」をクリック。

設定するのは以下の項目

Include Keywords

Include Keywordsに読み飛ばしたいjs名を入力する。
js名を見つける一番簡単な方法は、PageSpeed Insightsで「使用していないJavaScriptの削減」をクリック。

表示されたURLを右クリック⇒名前をつけてリンク先を保存
URLの「.jp」を含むファイ名を「Include Keywords」に設定。

Timeout

Timeoutで設定した時間が過ぎると、ユーザーが何らのアクションを起こさなくてもJavaScriptが実行される。
通常は「5s」で設定。

先にFlying Scriptsのデメリットで触れたが、JavaScriptを読み飛ばす事で、サイトの画面表示が崩れる可能性がある。

画面表示の状態を見ながら「Timeout」で設定する時間を調整する。

【「PageSpeed Insights」関連記事】

• ウェブに関する主な指標の評価とは何か？改善するには？【PageSpeed Insights】
• Flying Scriptsプラグインの効果とデメリットとは？ 【WordPress】
• 「使用していない JavaScript の削減」方法～プラグインでスコアが劇的に改善！
• PagespeedInsightのスコアが劇的に改善した方法【28/66から100/100に！】

プラグインの更新は必要？

プラグインの更新の必要性を考える前に、Wordpress本体の「更新（バージョンアップ）」について触れる。

WordPress本体の「更新（バージョンアップ）」の必要性

WordPress本体の「更新（バージョンアップ）」の必要性については以前、記事にまとめた。
結論から言うと、Wordpress本体の「更新（バージョンアップ）」は”必要”である。

WordPress本体の「更新（バージョンアップ）」が必要である大きな理由は以下の2点だ。

そして、結果的にWordpress本体の「更新（バージョンアップ）」はGoogleの評価にもつながる。

※詳しくは⇒WordPressのバージョンアップは必要？バックアップの方法[FTP編]

片やプラグインは更新する必要があるのか？

プラグインの更新の必要性

結論から言うと、プラグインの更新は必要である。

そもそも、プラグインは何故、バージョンアップされるのか？
それは主に以下の理由による。

従って、プラグインがバージョンアップされているにもかかわらず、更新しないでおくと、これらの問題が解決されないでトラブルに発生する可能性がある。

そして、プラグインの更新は、結果的にWordpress本体の「更新（バージョンアップ）」同様、Googleの評価にもつながる。

プラグインのバージョンアップを知る方法

プラグインがバージョンアップされた時、我々はそれを知るには2つの方法がある。

サイトのダッシュボード（管理画面）を開いて知る

この場合、しらばらくダッシュボード（管理画面）を開かないサイトに関しては、更新されていない複数のプラグインが溜まることになる。

危険な状態だ。

この問題を解決するには、プラグインがバージョンアップされたら、メールで更新通知を受け取ることだ。

プラグイン更新情報をメールで通知

プラグイン更新情報をメールで通知するには、プラグインを用いる。
ここでは、SiteGuard WP Pluginをご紹介する。
SiteGuard WP Pluginは、有名なセキュリティ対策プラグインである。
その機能の1つに「更新通知」がある。

「更新通知」の内容

プラグインだけでなく、WordPress、テーマの更新情報もメールで通知してくれるので便利だ。

設定方法

SiteGuard WP Pluginをインストール⇒有効化したら、Wordpress管理画面のダッシュボードのメニューの「SiteGuard」→「更新通知」をクリック。
設定はデフォルトで大丈夫だ。

これで、プラグインがバージョンアップされると更新情報がメールで届く。

さて、いよいよ、本題のプラグイン更新方法について。

プラグイン更新方法

プラグインの更新には以下の方法がある。

自動更新は更新の手間がないので楽が、デメリットもある。

プラグイン自動更新のデメリット

プラグイン自動更新設定方法

プラグイン自動更新の設定方法は簡単だ。
各プラグインも右端に自動更新の項目がある。
「自動更新を有効化」をクリックするのみ。

一旦、プラグインの「自動更新を有効化」したが、取り消したい場合は、「自動更新を無効化」をクリック。

また、複数のプラグインでこの設定を行う場合は、設定したプラグインを選択し、一括操作を行う。

さて、プラグイン自動更新の問題点（デメリット）である。

プラグイン自動更新の問題点

プラグイン自動更新の最大の問題点（デメリット）は、以下の2点。

プラグイン更新で不具合発生

実際、当サイトでは、WordPress Popular Postsを更新したところ、文字化けという現象が起きた。
⇒WordPress Popular Posts更新で文字化け･･･原因と対処方法【プラグイン】

ワードプレスは長年使っているが、プラグインの更新で不具合が発生したのは初めて。

しかし、プラグインの更新で不具合が発生するリスクは0ではないことを知っておく必要がある。

プラグインを更新する時の注意点

プラグインの更新で不具合が発生することがまれにある。
大切な事は、不具合が発生した時、速やかに対応できるよう予め準備しておくことだ。

●プラグインの自動更新は設定しない
●プラグインは1つずつ更新する
●プラグインを更新する前にバックアップを取っておく

プラグインの自動更新は設定しない

以上見てきたようにプラグインの自動更新にはデメリットがある。
プラグインの自動更新はしないのが無難だ。

プラグインは1つずつ更新する

従って、従来通り、手動でプラグインの更新を行う事になる。
この場合、複数のプラグインの更新を一括で行う事が可能だが、不具合が発生した時、どのプラグインが問題なのかが分からないので、面倒だが、1つずつ更新してサイト表示に問題がないか確認する。

尚、複数サイトを運営している場合、1サイトでプラグイン更新に問題がなければ、後のサイトは一括更新でOKだ。

但し、念の為、プラグイン更新後にサイトの表示を確認しておこう。

プラグインを更新する前にバックアップを取っておく

プラグインの更新で不具合が発生した時に、元に戻す為にプラグイン等のバックアップを取っておくべきだという意見もあるが、プラグインの更新で不具合が発生する確率は低く、面倒だ。

個人的には、問題が発生した時に、プラグインのバージョンダウンをすれば良いと考えている。

PagespeedInsightのスコアを改善する理由

PagespeedInsightとは？

PagespeedInsightはサイト（ページ）の表示速度（スコア）と改善項目を教えてくれるGoogleのツールです。
サイト（ページ）の表示速度が遅いと、Googleの評価が低くなり、検索結果が上位表示しにくくなります。

スコアの目標

スコアは3段階に分かれており、好ましいのはグリーン（90-100）、NGはレッド（0-49）です。

以下は、モバイル28/PC66からモバイル100/PC100に改善したサイトのスコア。
【モバイル版】

【PC版】

但し、PagespeedInsightのスコアでGoogleの評価が全て決まるわけではありません。

2021年5月からは、モバイル版では「ウェブに関する主な指標」に合格する必要があります。
【関連記事】
Googleページエクスペリエンスとは？レポートの見方・改善方法【徹底解説】

しかしながら、PagespeedInsightのスコア改善は「ウェブに関する主な指標」の改善にもつながります。
※全部ではありません。一部です。

PagespeedInsightのスコアが劇的に改善した方法

私は複数のサイトを所有しており、同じ施策を行ったところ、いずれのサイトもスコアが劇的に改善しました。
その方法をご紹介いたします。

基本的な対策

いつからか不明ですが、Wordpressの管理画面に「サイトヘルスステータス」という項目が表示され、改善が必要な項目を教えてくれます。
一例では以下のものがあります。

項目として見たことはありませんが、投稿一覧に「公開済み」以外の記事がある場合、削除した方がよいそうです。

改善項目

PagespeedInsightの分析結果に表示される改善項目を改善します。

改善項目はサイト（ページ）によって異なります。
下記は一例です。

何から改善するのか？

改善項目が複数ある場合、何から手を付ければよいのでしょうか？
実は改善項目のレベルもスコア同様、レッド・オレンジ・グリーンの3段階に分かれています。

優先すべきは、レッドの改善項目です。

尚、「最初のサーバー応答時間を速くしてください」がレッドの場合、速いレンタルサーバーに変更すれば改善されるかというと、事は簡単ではありません。

「最初のサーバー応答時間を速くしてください」に関しては、私はまだ改善策を持っていないので、現状では対応していません。

以下は実際に、スコアを改善する為に行なった方法です。

プラグイン

プラグインは、少ない方が良いです。
また、プラグイン同士の相性、あるいは設定によって不具合が生じる場合があります。
基本的に複数のプラグインで同じ設定を行わないことです。

例えば、プラグインに「画像遅延」の機能がある場合、チェックを付けるのは1つのプラグインのみです。

EWWW Image Optimizer

画像の最適化プラグイン。
⇒EWWW Image Optimizerの設定方法と使い方

Flying Scripts by WP Speed Matters

改善項目「使用していない JavaScript の削減」に効果を発揮するプラグイン。
実際は「削除」ではなく「遅延」ですが、スコアが劇的に改善しました。
⇒「使用していない JavaScript の削減」方法～プラグインでスコアが劇的に改善！

Autoptimize

Autoptimizeは、HTMLやCSS、Javascriptなどのリソースを簡単に軽量化・圧縮してくれるWordpressプラグイン（ツール）です。
⇒Autoptimizeの設定方法～設定を誤ると不具合の原因に？【2021年】

WP Fastest Cache

WP Fastest Cacheは、Autoptimizeと相性の良いキャッシュ系プラグインです。Autoptimizeと設定がダブらないことが重要です。
⇒WP Fastest Cacheの設定方法と使い方

【「PageSpeed Insights」関連記事】

• ウェブに関する主な指標の評価とは何か？改善するには？【PageSpeed Insights】
• Flying Scriptsプラグインの効果とデメリットとは？ 【WordPress】
• 「使用していない JavaScript の削減」方法～プラグインでスコアが劇的に改善！
• PagespeedInsightのスコアが劇的に改善した方法【28/66から100/100に！】

Autoptimizeとは？

Autoptimizeは、HTMLやCSS、Javascriptなどのリソースを簡単に軽量化・圧縮してくれるWordpressプラグイン（ツール）です。

Autoptimizeのメリット

Autoptimizeのメリットは、以下の3種類のリソースの最適化（軽量化・圧縮）によって、サイトの表示速度を上げることにあります。

サイトの表示速度が上がると、ユーザビリティの向上に繋がり、検索エンジンから評価され、結果、上位表示しやすくなります。

Autoptimizeの注意点

Autoptimizeの役割はリソースの最適化（軽量化・圧縮）にあると前述しました。

全て解決するわけではない

しかし、注意しなければならないことは、AutoptimizeでHTMLやCSS、Javascriptの問題が全て解決するわけではないという点です。

あくまでも、Autoptimizeがやってくれるのは、リソースの軽量化・圧縮のみであるという点です。

Autoptimizeのデメリット

次に設定の仕方を誤ると不具合の原因になるという点。
これは、同じ目的を複数のプラグインで設定すると不具合が起こしやすい為です。
1つの目的は1つのプラグインのみで設定するのが基本です。

Autoptimizeの導入方法

Autoptimizeを導入するには、Wordpress管理画面（ダッシュボード）の「プラグイン」→「新規追加」で「Autoptimize」を検索。
「Autoptimize」が見つかったら、「今すぐインストール」。
最後に「有効化」をクリックして終了。

次に設定を見ていきます。

Autoptimize設定方法

具体的なAutoptimizeの設定方法の解説に入りますが、ネットでAutoptimizeの設定方法を調べると、サイトによって設定方法が異なる（チェックの有無）場合があります。

JS、CSS&HTML

JavaScript オプション

以下の項目にチェック

但し、別のサイトでは以下の項目にチェックとありました。

「JSファイルを連結」するか「しない」かの問題です。
これに関しては、【Aサイト】と【Bサイト】の設定を各々試してスコアをチェックすると良いと思います。

但し、設定を変更しても、PageSpeed Insightにすぐ反映されないので注意が必要です。

当サイトの場合、【Bサイト】の設定の方がPCのスコアは良くなりました。

CSS オプション

CSSについては下記の項目をチェックする。

但し、他のサイトでは、以下の2項目のチェックでした。

HTML オプション

HTML オプションでは、下記の項目をチェック。

その他オプション

下記の3項目をチェック。

Images（画像）

「画像の遅延読み込み (Lazy-load) を利用」にチェックを入れるかどうか。
「画像の遅延読み込み (Lazy-load) 」機能は、通常プラグイン「EWWW Image Optimizer」の方が優れていると言われています。

しかし、Autoptimizeで設定した方がスコアが良かったという記事もあります。

「EWWW Image Optimizer」とAutoptimizeのどちらで設定する方が良いのでしょうか？

これに関しては、両方試してみてスコアの良い方を採用するのが賢明です。

又、他にLazy-load系のプラグインを使っている方は、チェックすると動作に問題が生じる可能性があります。

「EWWW Image Optimizer」等で「画像の遅延読み込み (Lazy-load) 」を設定する場合、Autoptimizeではチェックは入れません。
※Lazy-load系のプラグインについては別記事をご参照ください。

他にLazy-load系のプラグインを入れていない場合は、「画像の遅延読み込み (Lazy-load) を利用」にチェックを入れます。

追加の自動最適化

「追加の自動最適化」では、以下の2項目にチェックを入れます。
●Google Fonts
●絵文字を削除

Google Fonts

「Google Fonts」には5項目がありますが、どれを選択する（チェックを入れる）かはサイトによってバラバラです。

絵文字を削除

「絵文字を削除」にチェックするのはどのサイトも共通しています。

さらに最適化！

「さらに最適化」では、有料機能やより硬度な機能になるので、特に設定しなくてOKです。

Autoptimizeで不具合が発生した時の対処方法

Autoptimizeで不具合が発生した時は、以下の2点をチェックしてみてください。

キャッシュ

キャッシュをクリア

プラグインの設定

違うプラグインで同じ機能を設定している⇒どちらかを停止

Autoptimizeの設定

Autoptimizeをデフオルの戻す。

それでも、問題が解消しない場合は、問題のあるリソースの「最適化」を無効にする。

WordPressの表示の不具合の原因は？

WordPressは、何かの更新時に不具合が発生する場合がある。
その時は、不具合が発生した直前に何をしたのかをまず確認する。

不具合が発生した直前に行ったこと

今回は、プラグインを2つ更新していた。
では、2つのプラグインの内、どちらが不具合の原因なのか？
あるいは、プラグイン2つとも問題なのか？

これは1つずつ確認するしかない。

複数サイトを所有していると便利

幸い、私は複数のWordpress（ワードプレス）サイトを所有しており、入れているプラグインもほぼ同じなので検証がしやすい。

その結果、Wordpress Popular Postsを更新すると、不具合が発生することを確認できた。

WordPress Popular Posts

但し、「Wordpress（ワードプレス）サイトは不具合が発生したサイトしか所有していない」場合、どうすれば良いのか？

その場合、プラグインの無効である。

プラグインを無効化

不具合が発生する直前に行ったのが複数のプラグインの更新であったなら、1個ずつ該当ブラグインを無効化して確認する。

で、不具合が発生した原因と思われたプラグインを特定できた場合、次に行うのが、プラグインのバージョンダウンだ。

WordPress Popular Postsの不具合対策

今回、Wordpress Popular Postsの5.3.3から5.3.4にバージョンアップして不具合が発生した。

手っ取り早いのはWordpress Popular Postsのバージョンを5.3.4から5.3.3に戻す事である。

プラグインのバージョンダウンの方法

WordPress Popular Postsに限らず、Wordpressのプラグイン、さらにはWordpressのバージョンでさえ、何かあった時の為に、バージョンダウンが出来る。

ここでは、Wordpress Popular Postsのバージョンダウンの方法を解説。
※他のプラグインはやり方は基本的に同じ。

WordPress Popular Postsバージョンダウンの方法

WordPress Popular Postsの削除

ネットでは、「旧バージョンをダウンロードする前に、Wordpress Popular Postsを削除」を推奨する記事が多いが、別に予め削除しなくても問題はない。

旧バージョンをインストールする時に、置き換えするかどうか聞いてくれるので、置き換えすればよいだけ。

旧バージョンをダウンロード

①ダッシュボードのプラグイン⇒Wordpress Popular Postsの「詳細を表示」をクリック

②右サイドバーの「WordPress.orgプラグインページ」をクリック

③「詳細」→右サイドバーの「詳細を表示」をクリック
画像）
④ページ下部の「上級者向け設定」のプルダウンから最新より1つ前のバージョンを選択
※今回は5.3.3

⑤「ダウンロード」をクリック
⑥適当な場所（デスクトップとか）にファイルを保存

旧バージョンをインストール

①プラグイン⇒新規追加
②プラグインのアップロード⇒ファイルを選択
※先ほど、保存した旧バージョンのWordpress Popular Postsを選択
③今すぐインストール
※この時、予めWordpress Popular Postsを削除していない場合は、置き換えを確認するメッセージが表示されるので、置き換えをクリック。

WordPress Popular Posts不具合の原因は？

最初にWordpress Popular Postsの表示がおかしくなった時点で、ネットでWordpress Popular Postsの不具合の原因を調べてみたが、全く出てこなかった。

しかし、翌日（本日）、再度調べてみたところ、既に問題が解決していた。
プラグインの作者が不具合を修正したようだ。

実際、他の旧バージョンのバージョンダウンしたWordpressサイトのWordpress Popular Postsをバージョンアップ（更新）したところ、問題なく表示した。

尚、不具合の原因は不明。
Wordpress Popular Postsは、バージョンアップすると不具合を発生することがあるようだ。
但し、私は長年、Wordpress Popular Postsを使っているが、今回のような文字化けは初めて。

サポートフォーラムの活用

プラグインで不具合が発生した時は、「サポート」を見ると良いかもしれない。⇒WordPress5.7でバージョン5.3.4が壊れています。【Wordpress Popular Posts】

WordPressプラグイン更新時の不具合対処方法

バージョンダウン

WordPressサイトのプラグインを更新（バージョンアップ）して不具合が発生した場合、まず、バージョンダウンが行なう。

不具合修正を待つ

そして、サポートフォーラムをチェックして、プラグインの不具合が修正されるのを待つ。

修正された情報がアップされたら、プラグインの更新を行う。

「人気記事ランキング」を表示する理由

「人気記事ランキング」を表示する理由は、サイトの回遊率を上げる為と言うのが通説だ。

「関連記事」も同じ。

プラグインを使う方法

固定ページに「人気記事ランキング」を表示する方法をネットで検索すると出てくるのがウィジェットを固定ページに表示する方法だ。

そしてこれを実現する為にはプラグインを使う必要がある。
以下のプラグインがあった。

ウィジェットを固定ページに表示するプラグイン

●Page Builder by SiteOrigin
●Display Posts Shortcode
●Custom Content Shortcode
●Widgetize Pages Light
●Widgets On Pages
●Widget Shortcode
●Elementor Page Builder

いくつかインストールしてみたが、設定がややこしい。
「WordPress 5.3.2から利用可能」というものもある。
※「Widgets On Pages」はプラグインが見つからなかった。

その中で操作が簡単そうだったのが、「Widget Shortcode」。

「Widget Shortcode」

以下のコードをビジュアルエディタに貼り付けるというのだが、何故か、人気記事ランキングが表示しない。

<ul class=”wpp-list”>
<li style=”list-style-type: none;”>
<ul class=”wpp-list”>
<li>{thumb} {title} <span class=”wpp-meta post-stats”>{stats}</span></li>
</ul>
</li>
</ul>

そこで、プラグインを使わないで「人気記事ランキング」を固定ページ（トップページ）に表示する方法を探すことにした。

プラグインを使わない方法

プラグインを使わないで「人気記事ランキング」を固定ページに表示する方法は簡単だ。

以下のコードをテキスタエディタに貼り付けるだけ。
※最初と最後の［］は半角に変えて下さい。
値を変えるだけで細かい設定もできる。

コード

［wpp range=”weekly” thumbnail_width=”75″ thumbnail_height=”75″ order_by=”visitors” limit=”5″ post_type=”post” stats_views=”0″ title_length=”40″ excerpt_length=”45″ stats_comments=”0″ wpp_start=’

‘ wpp_end=”

” post_html=’

• {thumb}

  {text_title}
  {summary}

‘］

コードの解説

●wpp range=”weekly”：ランキングの計測期間
“weekly”＝1週間、”monthly”＝1ヶ月、”all”＝全期間
※但し、「90日（90days）」等日数では設定できない。

●thumbnail_width=”75” thumbnail_height=”75″：サムネイルの画像サイズ
値を変えることでサムネイルの画像サイズを変更できる。
“75” を”60″ や”100″ といった具合。
幅（width）と高さ（height)は同じ値を設定するのが無難だ。

●limit=”5″：表示するランキングの数

●title_length=”40″：タイトルの文字数

●excerpt_length=”45″：説明文の文字数

CSS

上記は人気ランキングらしく、順位を数字で表示する為のコードだ。
見栄えを良くする為の以下のCSSを編集ページの下部にある「この投稿だけの個別css/JS記述欄」に以下のコードを貼る。
<style>
.wpp-list2{
margin: 0!important;
counter-reset: no;
}
.wpp-list2 li{
line-height:1.5em;
margin:0;
padding:0;
}
.wpp-list2 li:before{
content: counter(no);
counter-increment: no;
color: #fff; /*文字色*/
background-color: #84662A; /*背景色*/
text-align: center;
opacity: .999;
float: left;
line-height: 30px;
width: 30px;
height: 30px;
border-radius: 2px;
-moz-border-radius: 2px;
margin-right: -25px;
}
</style>

実際の表示

尚、上記のコードを実際に表示すると以下になる。
※今回のテーマは「固定ページ」に「人気記事ランキング」を表示することだが、投稿ページの任意の位置にも表示可能だ。

サムネイルが表示しない時は？

サムネイルが表示しない時は、「WordPress Popular Posts」の「ツール」画面で「Lazy Load」が「はい」になっていのが原因であることが大半。
「いいえ」に変更して「適用」をクリックすると、大抵は表示する。

Post Snippetsの保存が出来ないケース

Post Snippetsの使い方

Post Snippetsのインストールや使い方を解説した記事はネットにゴロゴロしているので、ここでは触れない。

使い方は簡単だ。
但し、Post Snippetsを使っている内に「保存できない」場面に出くわすことがある。

Post Snippetsの保存が出来ないケース

Post Snippetsの保存が出来ない以下のケースがあった。

●単純に保存できない。
●「Title」名が「Untitled」のまま
●保存しようとするとエラーが出る

「Post Snippetsが単純に保存できない。」時の原因と対処方法

今まで、保存が出来ていたのに突然、保存が出来なくなる時がある。

原因

これは広告を複数登録していると、どこかで直面する問題だ。
「Post Snippets」はデフォルトで登録できる数に上限が設けられている。
この上限に達すると保存が出来なくなる。

対処方法

この場合、「Post Snippets」上限値を変更することで解決できる。
「php.ini」か「.htacess」にコードを追加するだけ。

php.ini編集

「php.ini」に以下のコードを追加する。

max_input_vars = 10000

「php.ini」と「.htacess」では追加するコードが微妙に違う。
また、「php.ini」で追加するコードの位置も大事だ。
最初、一番下にコードを追加したが、変わらず。

そこで、以下のコードの下に記入したら、保存できるようになった。
※エックスサーバー

post_max_size = 30M
upload_max_filesize = 30M

.htacess編集

「.htacess」に以下のコードを追加する。

php_value max_input_vars 10000

詳しくは下記の記事をご参照ください。

WordPress「投稿の編集」でビジュアル切り替えが出来ない時の解決方法

「Title」名が「Untitled」のまま

悩ましいのがこのケース。
解決するに至るまで3日以上かかった。

一旦、保存が出来るが、「Post Snippets」の「Title」名が「Untitled」のまま。
1つはコレで広告が表示できるが、2個目も「Untitled」なので区別がつかず、2個目以降に登録した広告が表示できない。

あれこれいじっていると、今度は「Title」名が英数字のピュニコードに変換されるようになった。
これでは「Title」名が長く、何の広告か分からない。

原因

原因はバージョンアップで仕様が変わったことにあった。
今までは日本語で「Title」が登録出来たのが日本語が使えないくなった。

対処方法

解決方法は日本語は使わない事。
記号も良いのだが、「」（カギかっこ）はNG。
ピュニコードに変換されてしまう。
基本はアルファベット。
記号はどこまで可なのかは試していないが「_（アンダーバー）」は使える。数字はOK。

どうやら「更新」後に仕様が変わったらしい。
しかし、まさか日本語がNGになるとは。

保存しようとするとエラーが出る

Post Snippetsを保存しようとする下記のエラーが出た。
当然、保存できない。

原因

Post Snippetsだけでなく、他のプラグイン、WidgetやCSSが保存できない場合の原因はWAF設定にあることが多い。

対処方法

WAFとは、プラグインの脆弱性と付いたサーバー攻撃からサイトを守るセキュリティだ。
WAFが初期設定でONになっているか、OFFになっているかはサーバーによって異なる。

私の場合、エックスサーバーからConoha Wingにサーバーを移転したのが原因のようだ。

WAF設定をONからOFFを変更したら、正常に保存できるようになった。
保存が出来たら、WAF設定をONに戻すのが好ましい。

Post Snippetsに変わるプラグインは？

以上、Post Snippetsが保存できない3つのケースについて原因と対処方法を述べた。
まとめると以下になる。

●単純に保存できない⇒Post Snippetsの上限値を変更
●「Title」名が「Untitled」のまま⇒「Title」を英語で登録
●保存しようとするとエラーが出る⇒WAF設定をOFFに変更

厄介だったのが、『「Title」を英語で登録』という解決方法。
今まで、日本語で登録できていたので、このことに中々気が付かなかった。
また、ネットで情報を探しても、全く情報が出てこなかった。

この問題が解決するに時間が掛かった為、その間、別のプラグインと使った。

これもあれこれ情報を集め、実際にインストールして使用感を試してみた。
結局、「Shortcoder」というプラグイン。

「Shortcoder」の使い方

「Shortcoder」の使い方も簡単だ。
「Create shortcode」をクリックして、タイトル名とコードを入力するだけ。
但し、タイトル名は英語だ。
Post Snippetsと違うのは、コードの入力画面が記事の編集画面と同じ点。
「ビジュアル」と「テキスト」の切替ができる。

「Shortcoder」の弱点

最初は便利に思えたが、計算式のコードで躓いた。
「テキスト」で入力しても保存すると、コードが一部欠落する。
Post Snippetsではこういうことが起きない。

結局、「Post Snippetsが保存できない」問題が解決するまで、いくつか広告を登録したが、2つも同じ種類のプラグインは必要ないし、動作が遅くなるので、一旦登録した広告を「Post Snippets」に再登録し、「Shortcoder」そのものを削除する作業が行っているところだ。

複数のサイトで複数の広告を登録したので時間がかかる。

プラグインが原因？

ネットで情報を調べてみると、下記のプラグインが関係している可能性があることが判明。

●PS Disable Auto Formatting
●WP Multibyte Patch
●WordTwit Twitter Plugin

しかし、私のサイトには、「WP Multibyte Patch」こそあるものの、他のプラグインは入れていない。
「WP Multibyte Patch」は「有効化」してないので影響はないはず。

さらに調べてみると、「キャッシュ系プラグイン」が原因とも。
しかし、「キャッシュ系プラグイン」も入れていない。

一体何が原因なのだろうか？

直前に行った動作は何か？

こういった問題が発生した時は、「その症状が出る前に行った動作」が原因になっていることが多い。

大抵、それはphpに関するものだ。

私の場合、「ビジュアルに変更できない」「文字数が表示しない」「メディアを追加ができない」といった症状が発生する直前に行ったのは、ショートコード管理プラグイン「Post Snippets」にショートコードを1個追加したことだった。

そこで、「Post Snippets」を「停止」してみる。
すると、ビジュアルに変更ができた。
そして、「メディアを追加」も出来、文字数も表示。

ただ、「Post Snippets」は必要なので、ずっと停止する訳にはいかない。
そこで、一旦、「Post Snippets」を削除し、再インストールしてみようと考えた。

「Post Snippets」の何が問題なのか？

削除する前に、データをまず、エクスポート。
次に「削除」。

「Post Snippets」を削除

ところが、以下の表示が出て削除が出来ない。

何度も試すうち、削除はできたが、再度、「Post Snippets」をインストールし「有効化」をクリックすると、次のメッセージが表示される。

あれこれいじっていると、以下のメッセージも。

「Post Snippets」に追加したショートコードを削除

WordPressの「記事の編集」画面でビジュアルの変更等が出来なくなったのは、「Post Snippets」にショートコードを1個追加してからだ。

そこで、その1個を削除してみた。
すると、「記事の編集」画面でビジュアルの変更等が出来るようになった。

この問題は「Post Snippets」上限値が原因なのは間違いない。

「Post Snippets」上限値を変更

「Post Snippets」はデフォルトでは登録数に限りがあり、上限値を超えると追加が出来なくなる。
WordPressサイトで「Post Snippets」を利用していると、この問題は必ず直面する。

通常は、追加できなくなるので問題に気付くのだが、今回は、登録は出来たので、上限値が関係しているとは思わなかった。

「Post Snippets」の登録数は、php.iniか.httaccesにコードを追加する事で増やす事ができる。

php.ini編集

方法は簡単だ。
レンタルサーバーの管理画面の「php.ini編集」に以下のコードを追加するだけ。

php_value max_input_vars 10000

エックスサーバーの場合、「PHP」の「php.ini設定」をクリック。

「php.ini設定」の「php.ini直接編集」タブをクリック。
「php.ini設定内容」の任意の場所に上記のコードを追加し、「確認画面へ進む」→「確定する」。

ところが、「投稿の編集」でビジュアル変更が出来ない。
よく見ると、以下の表示があった。

「設定の反映には最大5分程度かかります。」

しばらくして、試すが切り替えが出来ない。
再度、追加するコードに関する記事を見直してみたら重大なことに気が付いた。

php.ini編集と.htacessで追加するコートが異なる

私は、php.ini編集も.htacessも追加するコードは同じだと勘違いしていた。
追加するコードは各々異なる。
※少し違うだけなので混同しやすい。

●php.ini編集⇒max_input_vars = 10000
●.htacess⇒php_value max_input_vars 10000

正しいコードを入力したところ、「Post Snippets」を有効化しても、編集画面の切替が出来るようになった。
メディアの追加、文字数表示も正常だ。

WordPress「投稿の編集」でビジュアル切り替えが出来ない時の解決方法【まとめ】

今回、WordPress「投稿の編集」でビジュアル切り替えが出来ないのは「Post Snippets」の上限値が原因であった。

しかし、これは私のケース。

大事なことは、「その症状（エラー）が出る直前に何をしたか」、ということ。
その症状（エラー）が出る直前に行った操作がエラーの原因になっていることが多い。
※というか、原因の大半はそうだろう。

通常はphpがらみだ。

基本は、その症状（エラー）が出る直前に行った操作を取り消す。
このことで、症状は大抵、収まるはず。

WordPress Popular Postsは保存できない

WordPress Popular Postsは人気記事を表示してくれるWordPressのプラグインです。

通常は、一瞬で「保存」出来ますが、グルグルと回って、いつまでたっても保存できない、といった症状が発生しました。

Post Snippetsを保存しようとするとエラーが出る

Post Snippetsを保存しようとすると以下のエラーメッセージが出ました。

ドキっとしますね。

追加CSSを保存しようとするとエラーメッセージが出る

追加CSSを修正して、保存（「公開」をクリック）しようとすると以下のエラーメッセージが出ました。

元に戻ろうとすると、さらに以下のメッセージが表示されます。

WordPressのプラグイン・追加CSSの保存が出来ない時の対処方法

修正前に戻す

とりあえず、修正前に戻すには2つの方法があります。

●更新ボタンをクリック
●元のページに戻る（←）

上記の操作を行うと、修正はなかったことになり、元の状態に戻ります。

ちなみに、更新ボタンをクリックすると、以下のメッセージが表示します。

いずれも、「このページを離れる」「再読み込み」をクリックして下さい。
とりあえず、エラーメッセージは表示されなくなります。
※但し、修正もできません。

では、修正をするにはどうするのか？

WAFをOFFにする

プラグインや追加CSSを保存できない原因はWAFにありました。

WAFとは、Web Application Firewall (ウェブアプリケーションファイアウォール)の略で「ワフ」と読みます。

WordPressのプラグインの脆弱性を突いた攻撃からサイトを守る為のセキュリティシステムです。

移転したレンタルサーバーのセキュリティを調べてみると、WAFがONになっていました。

以下はサーバー処理速度No.1のレンタルサーバー「ConoHa WING 」の管理画面です。

「利用設定」をOFFにします。

プラグイン等の保存が完了したら、WAFをONに戻します。

• WP Fastest Cacheのインストール方法
• WP Fastest Cacheの設定方法
• .htaccessに元々追加コードを記述している場合の注意点

WP Fastest Cacheのインストール方法

WP Fastest Cacheのインストール方法は以下の通りです。

①ワードプレス（WordPress）のメニューの「プラグイン」のプルダウンメニューあるいは、「プラグイン」ページの一番上にある「新規追加」をクリック。

②「プラグインを追加」ページの「プラグインの検索」窓にWP Fastest Cacheと入力。

③候補がいくつか表示されますが、WP Fastest Cacheのすぐ下の「今すぐインストール」をクリック。

④インストールが完了すると、「有効化」という文字が表示されます。
「有効化」をクリック。
文字が「有効」に変わります。

続いて設定に入ります。

WP Fastest Cacheの設定方法

WP Fastest Cacheの設定をするには、インストール済みプラグイン（プラグイン一覧ページ）のWP Fastest Cacheの文字の下の「設定」をクリック。

「設定」ページが開きます。

【設定方法】
他のプラグインに比べると、設定する項目が多いです。
といっても難しくはありません。

①「言語」のプルダウンメニューから「日本語」を選択し「変更を保存」をクリック。

②「設定」タブ
必要な個所にチェックを入れる。
何処にチェックを入れるかについてはネットの情報は様々。
私は以下の項目にチェックを入れていますが、問題は発生していません。

◇Preload
「Preload」にチェックを入れると、ウインドウが開きます。
必要な項目にチェックを入れ「OK」をクリック。
※私は6つの項目にチェックを入れています。

◇新しい投稿
「新しい投稿」にチェックを入れると、ウインドウが開きます。
上下のどちらかのチェックボックスにチェックを入れ「OK」をクリック。
※私デフォルト（Clear All Cache）のままです。

◇Update Post
「Update Post」にチェックを入れると、ウインドウが開きます。
上下のどちらかのチェックボックスにチェックを入れ「OK」をクリック。
※私デフォルト（Clear Cache of Post/Pages）のままです。

③「キャッシュの削除」タブ
「キャッシュの削除」「キャッシュと圧縮されたCSS/JSファイルを削除する」を各々クリック

③「キャッシュの有効期限」タブ
右端にある「Add New Rule」をクリック。

「If REQUEST_ULI」の右にあるプルダウンメニューから「全て」を選択。
「Then」のの右にあるプルダウンメニューから「Once Every 10 Days」を選択。※これでなくても構いません。

.htaccessに元々追加コードを記述している場合の注意点

「サイトのページ読み込み（表示）速度を改善する方法(2)～スコア85［PageSpeed Insights］に役立つプラグインと.htaccessコード」では、.htaccessにコードを追加することで、PageSpeed Insightsの「最適化についての提案」で表示されることのある以下の項目に対応した。

①圧縮を有効にする
②ブラウザのキャッシュを活用する

しかし、WP-Fastest-Cacheの上記の設定を行うと、.htaccessにコードが追加され、<ifModule mod_deflate.c>～</ifModule>と<IfModule mod_expires.c>～</IfModule>のコードがダブるので、先に追加したコードを削除する必要がある。

この時、誤って以下のコードも削除してしまうと404エラーが発生し記事が表示されなくなるので、注意して欲しい。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /public_html/
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /public_html/index.php [L]
</IfModule>
# END WordPress