![[用語] PSI; PageSpeed Insights [WordPress] [2022/09/04]](https://harikiri.diskstation.me/myblog/wp-content/uploads/2021/04/1D3DD662-8755-453F-BB35-D35DDF461F9C.jpeg)
PSI; PageSpeed Insights
- ホームページの表示速度をスコア化してくれるツール
- PageSpeed Insightsで、サイトのアドレスを入力するとサイトのスピードを測ってくれる
- モバイル端末とPCに分けて評価される
- モバイル端末の評価では，ホームページにAMPを導入しているとスコアが高くなる
編集履歴
2022/09/04, Mr. Harikiri
タグ: AMP
-
![[用語] PSI; PageSpeed Insights [WordPress] [2022/09/04]](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAU9AQAAAAA2EmbpAAAAAnRSTlMAAHaTzTgAAAFQSURBVHja7cEBDQAAAMKg909tDjegAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4M7qkAAXe1B3gAAAAASUVORK5CYII=)
[用語] PSI; PageSpeed Insights [WordPress] [2022/09/04]
-
[WordPress] AMP プラングインの運用 – DS920+のシステムメモリ(4GB)を8GBに増設すると一括検証可能数は、デフォルト「8」から「> 41」に増加 [2022/02/06]
はじめに
AMP プラグインを運用していく場合、最も時間がかかる処理は、AMP検証です。AMPプラグインがインストールされている場合、投稿の編集ページの右上に丸印で稲妻マークがあります。これをクリックすると、現在のバージョン(Version : 2.2.1)では、そのページについて再検証が実施されるようになっています。この方法で1つずつページを検証することも可能ですが、1000もページがあるとその作業は、退屈極まりないものになります。
そこで、AMP->「AMP検証済みURL」ページから以下の作業で効率よく再検証することにします。
このページを表示されて、表示オプションから表示数を100にすれば、100のページが表示できます。この状態で、左の「URL」のチェックボックスをチェックして表示されている全てのページを選択状態にします。その上に表示されている一括操作を「再検証」にして、その右横に表示されている「適用」ボタンをクリックすれば、一括の再検証が可能です。この機能を効果的に使えば、AMPページの管理はだいぶ楽になります。でも、自宅のSynology NASにWordPressを導入している場合、NASのシステム要件によっては、以下に説明したような制約がありました。対応策がやっと発見できたので、以下に解説してみたいと思います。
AMP検証済みURLの更新
新しいプラグインを導入したり、プラグインの更新をした場合、それまでのAMP検証済みのページは古くなります。そのため、AMP PluginによるAMP検証が再度必要です。
以前、WordPressを導入していたNASは、DS918+でした。メモリーは、2つのスロットにアクセスできるので、標準の4GBを取り外し、8GB x 2で合計16GBにアップグレードしていました。その場合、一括して実施できるAMP検証のページ数は、最大「100」が可能でした。
昨年、WordPressをDS918+からDS920+に載せ替えました。システム構成は、フルスペックとなったDS918+からすると、デフォルのままで、唯一、ストレッジをHDDではなく、4スロットともSSD: 1TB x 4 (slot)にアップグレードしていました。ところが、DS920+では、一括でAMP検証が可能なページ数は、どうしても「8」でした。これでは、全てのページを処理するには同じ操作が結構な回数になります。退屈極まります。
今回、ふとアイデアが浮かんだので、システムメモリの増加を試みました。メーカー (Synology)が推奨しているメモリ : 4GB 1枚(Synology)を追加 (デフォルトのメモリスロットにはアクセスできない)しました。
その結果、もう一つの懸案事項として取り組んでいるPageSpeed Insightでのスコアには変化がありませでした。
しかし、前述で説明したAMP検証が可能なページ数は、少なくとも「40」に増加しました。一括の検証処理の過程でどうしても続行できない場合があるため、全てのページの処理が終わる前の処理の途中で一括の再検証処理が停止してしまうことがあります。その場合、スムースに処理できる予定の可能数よりも少なくなることがあります。40よりも最大可能な一括検証数が多い可能性もまだあるので、今後確認しようと思っています。
因みに、AMP再検証の処理が継続しているかは、Synology NASのDSMにログインして、リソースモニターを起動して、CPUの稼働状況とネットワーク状況をグラフと数字で確認すれば判断が付きます。処理が終了した場合、CPUの稼働状況(%)、ネットワーク状況(KB/s)も一気に低下します。
[s-text id=37723]
[s-text id=37714]
まとめ
システムのメモリ容量がAMPプラグインの動作にここまで関係することは意外でした。
型番 仕様 タイプ D4NESO-2666-4G DDR4-2666 260pin Non-ECC Unbufferd SO-DIMM 4GB https://www.synology.com/ja-jp/products/DDR4https://www.synology.com/ja-jp/products/DDR4 AMP Plugin
https://ja.wordpress.org/plugins/amp/編集履歴
2022/02/07, Mr.HARIKIRI
-
[WordPress] AMP対応化で、使用しているその他のプラグインによるエラーが出ないようにするために – プラグイン別 [2020/11/16]
はじめに
AMPプラグインをインストールしている場合、投稿/ページを公開/更新した際に、AMPの検証/再検証が行われます。サイト毎に使用されているプラグインがAMPに沿ったコードを作るわけでは無いため、AMPの仕様に沿わない場合があります。その結果として、「makeupエラー」や「スクリプトエラー」などがアラートされる訳です。これらのエラーは、AMPにおいてなるべく出なくすることが良いと考えます。そのエラーとなったコードを削除した場合にどうなるのかは、表示させたりしてその結果を確認しないと分かりません。
- AMP (Accelerated Mobile Pages)はGoogleが提唱する高速化の仕様であり、以下のような制約が設定されている
- JavaScript は使用禁止
- CSS は head セクション内にインラインで 75,000 バイト(約 75KB) 以下
- img タグは amp-img に置換
- frameタグはamp-fameに置換
- フォームや video、audio タグを利用するには専用のライブラリをロードしSSL 環境行う
- すべての仕様に準拠する必要がある
- AMP の詳しい仕組み
以下の情報は、AMPプラグインを使用している前提で、その他のブラグインの使用として、エラーが出ないように工夫してきた、知識情報です。
あるプラグインを使用する場合、使用していもエラーが出ないもの、使用すると前述のようなエラーが出るものなど、基本的にやってみないと分からないものばかりです。
機能を充実したり、見栄えを良くしたりするために、色々なプラグインを使用することは、速度の制約となるという、トレードオフの関係にあります。その規律(ルール)となっているのが、AMPプラグインです。AMPプラグインは、速度の制約となるものをエラーとして知らせます。エラーとならない使い方、すなわち、機能の有効化/無効化が、AMPプラグインで設定が可能です。
AMPエラーが出たとしても、そのプラグインを使用したい場合は、AMPページでの、そのプラグインの使用を無効化することで、AMPに非対応にできます。この最終手段により、そのプラグインを使用できます。
以下は、そのプラグインを使用して、且つ、AMP対応にしたい使い方について、プラグイン別に示しました。
基本的な設定方法
- 使用したいプラグインを有効にして、目的のページに使用し、AMPページを更新する
- AMPの検証済みURLを表示
- 当該ページが赤フラグ(エラー)となっていれば、そのAMPページを表示させる
- エラー(削除提案が出ている)について、削除のチェックをつけ、更新ボタンを押す
- ページを表示して、表示状況を確認する
- 問題があれば、削除提案のチェックは外す
- 問題なければ、その後の操作は必要ない。その更新内容を受け入れることになる
- エラーになった機能の削除を受けてれた場合は、そのプラグイでエラーとなっていた機能を削除したその操作は、今後のその他のAMPページでも自動的に採用されるので、同様のエラーとはならず、デフォルトで削除チェックが付いた状態で更新される。
- 削除をチェックして更新した場合、その設定は、全てのAMPページに及ぶため、その他のAMPページは、「最新でない結果」というフラグが付く
- 「最新でない結果」は、全て再検証する必要がある
- AMPの検証済みURLを表示させ、オプションで表示数を100に設定する。
- 最後のページを表示させて、全てをチェックして100ページを選択状態にした上で、再検証を選択し実行する。
- 一つ前の100ページ分のリストに移動して、同様に、全てをチェックして100ページを選択状態にした上で、再検証を選択し実行する。
- 以上を繰り返し、一つ前の100ページ分のリストを表示する番号として、最後の1までは実施せず、3番目で留めておく
- その理由は、この再検証のタスクは、リアルタイムで実施されていないので、100ページの処理には、数十分かかるため、すでに完了したページが100ページ分のリストに表示される可能性があるため、複数回の無駄な再検証を避けるためである。
WordPress プラグイン別
現在は、以下、1つのプラグインのみです。
Content of Table Plus
- 目次の表示/非表示機能を使わない設定にする
- AMPプラグインが提案するエラーが出る機能を削除設定で更新
- 以後、新しいページに、以上の設定が自動的に採用される
以上
編集履歴 2020/11/16 Mr.Harikiri 2020/12/11、追記 (基本的な設定方法) 2021/09/13,AMPの制限について追記
-
[WordPress] 高速化プラグイン「AMP」と定期的に全てのページの静的キャッシュ作成プラグイン-「WP Super Cache」で再構成した [2021/11/05]
ID22640
はじめに
このblogは、レンタル・サーバーではなくSynology NASを使っています。やはり、性能的にはレンタル・サーバーに勝てません。そこで、自宅のNASを使ったblogでは、以下のような工夫が必要になってきます。
- ベージ表示などのレスポンスの改善
- セキュリティの確保
- NASの管理を含めたWordPressの管理
この記事では、ページのレスポンスを向上させる2つのプラグインとして、「AMP」と「キャッシュ」・プラグインを組み合わせてについて解説しています。以前は、AMP対応をせずにページレスポンスの改善を目指していたので、AMPプラグインを使用せず、Autoptimizeプラグインを使用していました。現在では、AMP対応にしてページのレスポンスの改善を図っています。
- AMPプラグイン
- WP Super Cache
- WP Optimize
- WP Rocket
ついでに、AMPプラグインで何度も生じている「検証済み」の問題についても経験談を載せています。
これらのページレスポンスの向上プラグインなどのSoftwareの適用以前に、ネットワーク回線やHardwareスペックアップの問題もありますが、ここでは述べていません。
ページのAMP化のみでもレスポンス改善は十分高い
AMPプラグインは、HTMLを高速化するために元のHTML文やJavaScriptなどをサブセットに変換します。それがblogのページになります。投稿/ページの編集を終えて、「公開」すると、このタイミングでAMP化の変換が行われます。変換時間は、AMP化を適用していない場合と比較して、5~10秒程度余分の時間を要します。変換時間を要しただけのレスポンス改善は、目を見張ります。当サイトでは、モバイルの場合、GoogleのSpeedPage Insightsを使って測定すると、5~10倍のポイントアップが見られました。それでも、当サイトのMobileで閲覧した場合、30~40%でした。100%が最高値なのでまだまだです。PCでは、80%程度です。
更にレスポンス改善するには、「キャッシャ」プラグインを追加します。そうすると、Mobileでは、50~60%に改善されました。キャッシュ・プラグインには、WP Super Cacheプラグイン、WP-Optimizeプラグインがありますが、主に、WP-Optimizeを使っています。
今回の記事では、WP Super Cacheにするメリットについて解説します。
キャッシュプラグインを追加する
キャッシュプラグインにも種々ありますが、これまでに色々試しました。その結果、ここ半年間使用し続けたのは、「WP-Optimize」プラグインでした。WP-Optimzieでは、データベースの最適化やデータベース・テーブルがアントールされているテーブルなのか、無効化されているプラグインのデータベース・テーブルなのか、すでに削除されているプラグインに関するデータベース・テーブルなのか、を示してくれます。この情報を確認しながら、データベース・テーブルを削除したり管理することができます。WP-Optimizeは、データベース管理プラグインであると認識するのが妥当です。WP-Optimizeは、キャッシュ機能もありますが、これまでに試したキャッシュ・プラグインの中で僅差ですが、最もレスポンス改善効果があったため、今回まで、キャッシュ機能も有効にしていました。
プラグインは専用機能がいい
WP-Optimizeプラグインには、多数の機能が搭載されています。キャッシュ機能には「プリロード」機能も使えます。全ての投稿/ページのキャッシュする機能です。
今回、WP-Super Cacheプラグインをネットで発見して、キャッシュ・プラグインとして使用することにしました。その理由は、プラグインは多機能でない方が管理がし易いと考えているからです。それに、付属的な機能では、微調整ができないことが大です。WP-Optimizeのプリロード機能では、繰り返すプリロードの時間設定しかできず微調整ができません。もう少しでも攻め込みたい。やはり、専用機能に特化したプラグインを指向したいと思います。
ただし、ネットで調べてみると、WP Super Cacheのプリロード機能、その他の機能は使用しないことを推奨しているようです。WP-Optimizeのブリロード機能を使用しても、キャッシュ機能が効いていないようです。と言うのは、WP-Optimizeでブリロードした後に、PageSpeed Insightsでランダムにベージ/投稿を選んで測定したところ、モバイルで50程度、PCで80程度とPCの測定値が低くなりました。間髪入れず、もう一度測定すると、モバイル50程度、PCで95程度と改善しました。何度やってもこの傾向は、どのページでも同様でした。
結論としては、WP-OptimizeもWP Super Cacheも、プリロード機能は、使用しない方が良いということです。
WP Super Cacheの設定のほんとのところ
- プリロード機能は使用しない
- 理由 : 古いキャッシュの表示が起こる場合がある
- 投稿またはページが公開されたときにすべてのキャッシュファイルをクリアする機能は使用しない
- 理由 : 新しい投稿を作成するたびに、WPスーパーキャッシュが数分間効果的に無効になってしまうためです
WP Super Cacheの推奨設定
結局推奨設定は、以下の図の通りになります。プリロードの使用を推奨していないのは残念です。
上記推奨設定のサイト
https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://support.tigertech.net/wp-super-cache&prev=search&pto=aueWP Super Cache
WP Super Cacheプラグイは、プラグインのキャッシュ/ブリロードに特化しています。多数の設定項目があり微調整も可能です。初心者には優しくて、デフォルトの設定についての解説もわかりやすいです。プリロードのキャッシュファイルの圧縮の設定もできます。
繰り返すプリロードの時間の設定は、ももちろん可能です。初期値は600分です。プリロード処理が開始される時、及び100や200毎に、メールを飛ばす機能もあります。機能していることが分かるので安心ですし管理に役立っています。
今回、WP Super Cacheの試用を開始しましたが、これまで使用していたWP-Optimizeの設定は、キャッシュを無効化し、データベース管理機能のみを使用している状態に設定しました。
SpeedPage Insightsによるレスポンスの測定結果は、従前の設定の場合と比較して同等の結果でした。しばらく攻め込んでみたいと思います。結果は、随時、追記していきます。
WP-Optimize
WP-Optimizeは、キャッシュ機能だけではなく、データベース管理、イメージ圧縮などの複数の機能を備えています。
WP Rocket
kinstaというレンタルサーバーがあります。日々、パフォーマンス改善を進めていて、WP Rocketによるキャッシュ機能に関する記事がありました。その記事では、プリロード機能は、逆にパフォーマンス低下になるので、有効化しないことを推奨しています。プリロード機能は、理想としては良い機能なのですが、実際には、技術として実用化はまだのようです。
Kinsta and WP Rocket: Now Speeding up WordPress Together, 2020/10
https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://kinsta.com/blog/wp-rocket/&prev=search&pto=aueWP Super CacheとWP-Optimizeの比較
約900ある投稿とページをプリロードする時間を比較しました。先ず、全ての投稿とページについて、AMPで再検証します。全てが完了してから、ブリロード機能を実行しました。その結果、WP Super Cahceでは約50分、WP-Optimizeでは約25分でした。WP-Optimizeの方が高速でした。
設定の際に思いもよらず得られた懸案の解決
AMPの再検証エラー問題
AMPプラグインを使用していて、数ヶ月前の9/21に投稿/ページの「再検証」が、以下のエラーログと共に不可になっていました。
- cURL error 28: Operation timed out after 15001 milliseconds with 0 bytes received. Please check your Site Healthto verify it can perform loopback requests. If you are stuck, please search the support forum for possible related topics, or otherwise start a new support topic including the error message, the URL to your site, and your active theme/plugins. Please include your Site Health Info.
ネットで調べてみましたが、DNSが悪いので、ローカルにDNSを立ち上げろとか、AMPのサポートでは、AMPプラグインによる不具合ではないとか、結局、原因を見つけることは、できずにいました。
WP Super Cacheのワーニングのお陰
WP Super Cacheを導入後、blogのフォルダーにパーミッション設定がおかしいので修正するように、というようなワーニングが出ました。そこで、NASにログインして、chmodコマンドで、そのフォルダーのパーミッションを設定して確認をしている時に、それは起きました。
WordPressの管理者画面の左のメニューが、突然シンプルになりました。原因は、プラグインの全てが無効になっていた事でした。パーミッションの設定を間違えたことで、WordPressがプラグインにアクセスできなくなり、それを受けてWordPressが全てのプラグインを無効化したものと考えられました。
その後の対応
パーミッションを元に戻して、プラグインが認識されるようにしました。無効化になっているプラグインの全てを1つ1つ有効化していきました。
その結果
AMPプラグインで不可であった「再検証」が問題なく機能するようになっていました。これまでは、なんだったのか?
キャッシュのブリロード
再検証を完了した後は、WP Super Cacheによる「ブリロード」を実行しました。
広告表示の確認
Advanced Adsは、AMPページ対応の広告表示プラグインです。色々な設定が可能です。これらの表示について、実際の投稿/ページを表示させて確認しました。
まとめ
今回は、AMPプラグイン導入していることを前提に、キャッシュ・プラグインの変更について解説しました。また、相変わらず、AMPプラグインにおける「検証済み」において検証ができない記事があります。また、リストにすら表示されない問題もあります。その問題となる要因は、画像数が多かったり、記事が大きかったり、など色々と考えられます。一方で、シンプルな文字のみの投稿、文書量が少ない、埋め込みリンクがない場合には、ほとんどは問題が生じることはありません。マシンのパワー不足があるのかもしれません。今後も検討を続けます。
以上
編修理歴
2020/11/07、はりきり(Mr) 2020/11/15、追記 (プルロード機能は使えない) 2020/12/11、追記 (文言整備)
-
[WordPress] 「AMP」対応奮闘記 – プラグインAMPはVer.2.20になったけれど。[2022/01/05]
ID22520
はじめに
AMPページに対応すべく奮闘しています。当サイトで記事にしたAMP関連と情報リンクをまとめました。AMPプラグインはVer. 2.2.0になりました。プラグインをアップデートした際、またもや、「検証済みURL」での投稿の非表示の問題が出ました。対応策を見つけて何とか全ての投稿ページを検証済みURLのリストに登録させることができました(直近の対応)。
Google Search Console
Google Search ConsoleのAMP項目に、「エラー」、「有効(警告あり)」および「有効」があります。有効(警告あり)では、画像の大きさ関連のものが多く、推奨サイズを使うようにコメントが出ていることがあります。そのような場合には、投稿のアイキャッチ画像のサイズが小さいことが考えられます。当サイトでは、画像の最適化には「EWWW Image Optimizer」プラグインを使用していますが、画像のアップロード時にリサイズする設定において、推奨サイズ以下のサイズに設定されていることがあるので確認してみます。サイズが1200 x 675を推奨しているようなので、これより大きいサイズを設定し直します(例えば、2000 x 2000)。
すでにWordPressにアップロードした画像を大きいサイズにリサイズすることはできないので、改めて同じ画像を元サイズを大きくするか、多いサイズが既にあれば、それをWordPressにアップロードして、更に、アイキャッチ画面に設定しなおしなす。
AMPプラグインの「更新済みURL」が作成されない問題と対策
AMPプラグインが正常に動かないことが多々あります。未だに完全解説には至っていませんが、以下の記録を続けてその内完全な解決策を見出せることを願いつつ、活動を続けていきたいと思います。
おそらくは、AMPプラグインとその他使用しているプラグインとの相性の問題があると考えています。
AMPプラグインのバージョンは、初期のバージョンアップの頻度からすると、現在は、その頻度は低くなっています、また、バージョンもだいぶ上がっています。また、使用経験も積み重ねているものの、このAMPプラグインについては、まだまだ挙動が読めません。まだまだ開発途上ということですね。
2020/09/13
投稿は存在しているのに、AMPの更新済みURLが作成されていなと、AMPプラグインの関連するページの各種操作において、タイムエラーなどを起こす。また、更新済みURLが作成されていないことは気持ちが悪いなどのデメリットがある。
- 現象 : 投稿を新規に公開する場合、他のサイトを参照するプラグインを使用して多数のリンクを貼っていると、AMPのデータペースを作成/更新できなくなることがある
- 具体例 : Advance Gutenberg Blocksプラグインの「Plugin」を使って、あるプラグインのリンクを10個張っている投稿の作成において、それを公開/更新した時、完了までの時間が非常に長くなる。投稿自体は作成/更新できるが、AMPの「検証済みURL」は作成されない。
- 対策 : 投稿の公開/更新の最初に、原因であるAdvance Gutenberg Blocksの「Plugin」を取り除いて公開/更新を行って、AMPの「更新済みURL」が作成されたことを確認した後、原因であるそれを追加して投稿を公開/更新する
AMP: a well-lit path to optimizing for Google’s page experience signal
https://blog.amp.dev/2020/05/28/amp-page-experience/?utm_source=amp_newsletter&utm_medium=email&utm_campaign=amp_highlights_20126252AMPページに対応するプラグインは、このリンクにリストされています。
「CoBlocks」には、アコーディオン・ブロックがあるので、助かっています。
https://amp-wp.org/ecosystem/plugins/2021/10/10
自宅のblog Serverを2台目として購入したDS920+に移行した時に、AMPの検証済みリストが出なくなってしまいました。データベースから消えたのか、データベースには存在するが、何らかの問題がありリスト化できないのか、理由はわかりません。
以前に、再検証済みのリストを表示されるようにできた経験があります。その方法は、作業中の不手際でフォルダのアクセス権の設定(777とか664とかの設定)でミスした結果、全てのプラグインの無効化が生じた時です。その後、レスキュー作業で全てのプラグインの有効化を行なったことで解決した過去の経験です。具体的には、「WP Super Cache」プラグインを導入後、blogのフォルダーにパーミッション設定がおかしいので修正するように、というようなワーニングが出ました。そこで、NASにログインして、chmodコマンドで、そのフォルダーのパーミッションを設定して確認をしている時に、それは起きました。
現在、過去の記事については、AMPの検証済みリストとして全く表示されないものの、新規に作った投稿では、AMPの検証済みリストに現れます。このことを利用して、投稿を一つ一つ開いて「更新」することで、AMPの検証済みリストに現れるようにできます。この作業は結構骨が折れます(2021/10/10 by MR.HARIKIR)。
結局、一つ一つ投稿を開いては更新する作業を850行いました。完全な力技で対応してしまいました。本当は、こんなことはしたくはなかったのですが、他に解決策を見つけられず仕方くな実施しました(2021/11/05)。
2021/01/05 : AMP Ver.2.20
まだ、「検証済みURL」の問題は続いています。いっそのこと、有償版がある「AMP for WP」に乗り換えようとインストールして評価してみましたが、Free版では少しも速度アップは確認できませんでした。評価は、Page Speed Insightsを使用しています。
対策(2022/01/05): 「検証済みURL」が作成されない場合、
(1)AMPのデータベースが壊れている可能性があるので、「忘れる」処理をした後、投稿のページで更新する。
(2)直近のプラグインの更新により「検証済みURL」が消えてしまいました。AMPデータベースが壊れた可能性/仕様の変更があります。実施した対応は、以下の通りです。キャッシュプラグインの少なともデータベースを無効にしてから、投稿ページを一つずつ開く操作を実施すると「検証済みURL」にリストされことを確認できたので全ての投稿ページに実施することにしました。素早く操作するには以下の方法が可能です。「投稿一覧」から一つずつ開き、その投稿の編集ページが開いたら直ぐにブラウザの戻るボタンで「投稿一覧」に戻るを繰り返して、一つ一つの投稿ページを開く処理する方法をとることです。連続操作できる数はNASの処理能力に依存します。投稿ページが開く速度が低下してきたら(5秒以上)、一旦休止してください。因みに、AMP関連のデータベースは、AMPプラグインの削除で削除されない仕様であることは開発者の間では知られていますが、その改善対応は未だ不十分の状況のようです。そのような状況下、プラグインのアップデートにより挙動の変化が毎回起こっています。まあ、ユーザーの立場で追従するのは大変です^^)。3つのURL
AMP対応にすると3つのURLができます。以下の参考文献に詳しく書かれています。
AMP URLの正体
https://developers-jp.googleblog.com/2017/02/whats-in-amp-url.html編集履歴
2020/09/13 はりきり(Mr) 2020/12/13 Mr.Harikiri 2021/02/11 追記 (Google Search Consoleのエラーや警告に対応する方法) 2021/10/10,追記(AMP 検証済みリストが表示されない場合のとりあえずの対処法を「その他、問題解決」に記載) 2021/11/05,追記(検証済みリストにリストさせるために、一つづつ記事を更新する作業を実施) 2022/01/05,追記(AMPプラグインVer.2.20での「検証済みURL」の問題に対する対応策)
-
[WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – [2020/09/11]
ID22353
はじめに
現在、皆さんが、このサイトに来て見てみいるページ表示に関わるWordPressテーマ、およびプラグインのリストを公開します。これからWordPressでサイトの構築をされる方の参考になれば幸いです。
システム構成
Synology NAS
- 2020/12現在
- DS920+ (DS918+からWordPressを載せ替え, 2020/07)
- Disk Station Manager, Version 6.2.3-25426 Update 2 (2020/12現在)
WordPress
- Version : 5.6-ja
- Theme : Twenty Twenty
- Editor : Gutenberg (標準エディタ)
表示に関係するプラグイン・リスト
- AMP
- ページのAMP化
- Advanced Ads – Ad Manager & AdSense (有料)
- 広告の自動挿入、手動挿入
- Flex Posts – Widget and Gutenberg Block
- ポスト・リスト表示(カスタマイズあり)
- Table of Content Plus
- ページへの自動的な目次の挿入
- EWWW Image Optimizer (有料)
- 全てのイメージを圧縮・最適化とLady Loadなど
- Default featured image
- feature imageを設定していない場合のDefault imageを自動設定
- Flying Analytics by WP Speed Matters
- レスポンス改善
- Insert Pages
- 表示のカスタマイズ
- Share Buttons by AddThis
- TwitterなどのSNSへの投稿
以上
編集履歴 2020/07/11 Mr.HARIKIRI 2020/12/15、現状にupdate
-
[WordPress] 広告プラグイン – Advanced Ads Pro (有料版)の応用機能(Header/Footerにコードを挿入) [2020/05/03]
充実する広告表示機能を応用
Advanced Adsプラグインは、Google Adsenseの対応に注力しているドイツ製のプラグインです。
今回は、Advanced Adsのホームページを元に応用できる機能について紹介します。
Header/Footerにコードをどのように挿入するか
専用のプラグインを使わなくても、Advanced Ads(有料版)を使用しているなら、その機能の応用でコードをどこにでも挿入することも可能です。
Advanced Adsで選べる「広告タイプ」は、7種類あります。
- プレーンテキストとコード
- ダミー
- リットコンテンツ
- 画像広告
- 広告グループ
- AMP
- アドセンス広告
今回紹介する内容は、「プレーンテキストとコード」を選択して「広告」を作り、Header/Footer部にコードとして「配置」を作れば、Header/Footer部にそのコードを自動的に挿入させることが可能です。
プレーンテキストとコード広告の作り方
もちろん、広告としてつくることもできますが、今回想定しているのは、以下のようなネットワークから指示されてコードをHeader/Footerに挿入する場合です。
- Google Search Console
- Google Analytics
- Google AdSense
- Bing Webmaster Tools
- Alexa
- Facebook,
操作方法
概略
先ず、広告を「プレーンテキストとコード」を選択して作り、配置を「Header」として作る。
- Advanced Ads → 広告(Ads) → 新しい広告
- 「タイトル」入力
- 広告タイプを「プレーンテキストとコード」にする
- 「次に」
- 「広告パラメータ」にコードを挿入
- 最低限、以上の設定で広告の作成を完了してします
- Advanced Ads → 配置 → 配置の新規作成
- 配置の種類を選択で、「</Head>」を選ぶ
- 名前を入力
- 広告又はグループを選択で、作成した広告を選択
- 新しい配置を保存↩️
以上で、自動的にHeader部にコードが挿入されます。
応用
挿入したいコードが複数ある
- 各コードに対応する広告の作成を作成
- 各コードの広告をグループ化する
- グループを「</head>」に配置として作成する
まとめ
<head>..</head>への挿入は、プラグインを使用すれば可能ですが、Advance Ads(有料版)を使用している場合は、そのような挿入プラグインを無効化して、Advance Adsにまとめることが可能です。それによって、サイトはシンプルになり、プラグイン同士のコンフリクトも少なくなり安定性も向上します。
以上
履歴
2020/05/03 はりきり(Mr)
Advanced ads関連
Post Views: 327 充実する広告表示機能を応用 Advanced Adsプラグインは、Google Adsenseの対応に注力しているドイツ製のプラグインです。 今回は、Advanced Adsのホームページ…
Post Views: 219 はじめに blogを始めてからしばらくすると、広告を載せてみたくなります。それはblogするための張り合いであり、自分のblogの評価の結果であるため、誰しも興味があるはずです。当サイトで…Post Views: 209 はじめに 当サイトでは、AMPプラグインで全てのコンテンツをAMP対応にしています。 以下は、Advanced Adsプラグインについて、導入後の使い方についてまとめました。 まだまだ、A…Post Views: 223 はじめに 広告に対するクリックは、ブログの評価であると思っています。ブログの評価のバロメータなのです。これを頼りにしてコンテンツ内容の充実化に励むことができます。 この記事では、Googl… -
[WordPress] メンバーシップ・サイトを構築プラグイン – Ultimate Member プラグインの使い方をAMP対応とともに解説 – [2021/03/07]
ID14027
はじめに
当サイトは、試験的及び備忘記録として記録した内容は非表示にするために、Ultimate Memberプラグインを試験的に導入しています。
よろしければ、「いたずら」してみて下さい。使い勝手などがわかると思います。どれだけの堅牢性(ロバストネス)があるか知りたいと思っているので、ぜひどうぞ。「ユーザー」> 「新規登録」です．
ロバストネスの確認、及び対策の強化には、以下の2つのプラグインを導入しています。これは、SiteGuard WPは、定番のようなので、極力導入してはいかがでしょうか。
- Statify
- どのページがよくアクセスされているか知ることができます
- この機能を使って、ユーザー登録ページがどれくらいアクセスされたかわかります
- アクセスされているにもかかわらず、登録実績がなければ、登録の意図はないと判断できます
- 因みに、Google Analyticsで調べればサイトのアクセス状況はわかると思っていましたが、ユーザーログイン画面など、no-indexにしているものは統計に含まれないので、、Statifyを導入するまで、これらのアクセス状況を知ることができていませんでした。これは、リスキーな状況です
- SiteGuard WP Plugin
- Statifyが集積した情報から、ユーザーログイン画面のアクセス数が数百と非常に多かった時期がありました。フロントページにユーザーログイン画面のリンクを貼っているので、そこにハッキングを仕掛けていることが考えられました。
- そこで、SiteGuard WP Pluginの設定で、「防御」を施しています。
- また、予備的に登録したものの、自分に届かないメールアドレスを指定した(と考えられる)ため、確認メールが届かず、そこに記載のリンクをクリックして最終的な登録まで行っていない(と考えられる)ため、そのような仮登録者によるユーザーログイン画面でのログインの試行(この状態でログインできない)こともカウントされています
使い勝手は? とヒヤカシ
よく海外からの「ヒヤカシ」があります。ユーザー登録はしていただけるのですが、その登録したe-mailに対して、自動で送られてくるリンク付きのe-mailの処理をしてくれません。
そのリンクをクリックすれば、登録したe-mailは実在すると判断できるし、且つロボットではないことを、おおよそ判断できるので、登録が完了するという仕組みです。
ご自身により登録した後に、登録の削除もできます。
WordPressのユーザー管理画面を見れば、メール一覧から、ステータスが確認できます。もしも、登録しようとしたユーザーが、自動で送られてくるUltimate Memberプラグインからの確認メール、すなわち、そこに記載のリンクをクリックしていない限り、「メールアドレスの確認待ち中」と表示されています。メールの確認が完了すれば、WordPressのユーザーの管理画面には、そのユーザーは「承認済み」と表示されます。以上、これらの挙動は、Ultimate Member -> 設定 -> Emailから設定します。
Ultimate Memberと専用のreCAPTCHAの説明
Ultimate Memberは、AMPページでは、エラー/ワーニングが出てしまいます。念のため、Ultimate Memberを機能させたい投稿/ページは、AMPを適用せず、更に、AMPプラグインの設定で、機能を無効化に設定しています。
Ultimate Member
大まかな機能
Ultimate Memberプラグインは、登録したユーザーに「権限グループ」を設定し、権限グループ毎に、表示/非表示の区分について投稿全体や投稿内のブロック毎(Gutenberg使用の場合)に制限をかけ、ユーザー毎にサービスを差別化するプラグインです。
ユーザー登録して、そのユーザーの設定として例えば「Family」としたとします。次に投稿のブロックまたは、投稿全体に対して、制限(Restrict)のスライドボタンで設定して、Familyを指定すれば、Family設定のユーザーにしか見れないブロックまたは投稿を作成できます。これにより、クローズドなメンバーシップが可能です。
専用のreCAPTCHAの注意点)
Ultimate Member – reCAPTCHAは、WordPress標準のログイン画面に上書きできない、又は、標準ログイン画面を無効化できないため、以下の事例のようにコンフリクトを起こします。
対策の概要
WordPressの標準ログイン画面を使用せず，Ultimate Memberのログインに集約します．且つ，reCAPTCHAも専用のUltimate Member – reCAPTCHを使用することで，セキュリティを保ちます．
このコンフリクト(エラー)は、2020／02現在で調べた限り、2017年から報告されています。
以下、対策方法も記載しているので、Ultimate memberを使う場合、合わせて設定して下さい。
reCAPTHC同士のコンフリクトと対策
- 「Ultimate Member – reCAPTCHA」は、WordPress標準ログイン画面には適用されないため，標準ログイン画面用に，別のrecaptchaを導入すると、コンフリクトが生じてUltimate MemberでのreCAPTCHが，エラーしてログインできなくなる
- Ultimate Member専用である
- WordPress標準のログイン画面に適用されない
- 複数のreCAPTCHAプラグインの併用はコンフリクトする
- 対応策 (標準ログイン画面を無効化して対応する)
- wp-login.phpの削除
WordPress標準ログイン画面である「wp-login.php」をバックアップを取ってから削除(または、ファイル名の変更:この場合不正アクセス者から類推されないことに注意)し，Ultimate Memberのログイン画面のみの運用とする。- 注意) WordPressのアップデート後には、「wp-login.php」が復活します。その対策は、以下に示したように、Redirectプラグインを使います。
- 説明)「wp-login.php」は、不正アクセスのターゲットになります。ファイル名称を変えるようなプラグインもあるくらいなので，ファイル名変更の対応策も効果があると考えています。
- URLの無効化
Redirectプラグインを使って、標準ログイン画面をUltimate Memberのログイン画面にリダイレクトする
- wp-login.phpの削除
標準ログイン画面が必要となった場合
UMのlogin画面ではログインできなくなる
AMP pluginを使用しいて、且つ、ultimate memberのloginページをAMPに適用している場合に、ultimate memberのlogin画面からログインした時、エラーが出て、ログインができない状態に陥ることがあります。AMPページの内容が古かったり、その他の理由があるようです。これを復旧するには、ultimate memberのloginページを、編集画面から更新する必要があります。その際、「AMPの有効化」が有効になっているはずなので、外しておけば、今後の対策になります。
WordPress標準のlogin画面の復旧
以上の作業を行うには、先ずは、WordPressにログインしないといけませんが、WordPress標準のlogin画面を有効(復旧)にする必要です。WordPressのシステムファイルが置かれている「システム」に入って(または、WebDAVなどのファイルの名前が変えられるツールでも良い)、以下のように復旧させます。
- wp-login.phpを復旧させます。
- Synology NASにWordPressを載せているので、DSMに Loginします。
- バックアップを取っている場合は、wp-login.phpを復元，ファイル名を変えている場合は、もとのファイル名に戻します
- WordPressのwp-content -> pluginsフォルダにある以下のフォルダに「.bak」を末尾に付けてrenameします。
- redirection -> redirect.bak
- ultimate-member -> ultimate-member.bak
- um-recaptcha -> um-recaptcha.bak
- 以上で、Ultimate-Memberプラグイ関連のlogin画面ではなく、WordPress標準のlogin画面が復活しています。
- wp-login.phpにアクセスして、Loginできるようになっているはずです。
- https://your-home-page/wp-login.php
編集履歴 2020/05/14 追記 (RedirectプラグインによるURLの無効化) 2020/10/24 追記 (UMのLogin画面が使用できなくなった場合にWordPress標準のLogin画面を有効にする方法)
まとめ
Ultimate Memberは，メンバーシップを構築できます．自分専用のページは勿論，ページの中のあるブロックだけでも設定が可能です．このプラグインの基本は，Login管理な訳です．
しかし，そのLoginのセキュリティを高めるreCAPTCHAが，Ultimate Member専用のUltimate Member – reCAPTCHAと，WordPress専用のreCAPTCHAがコンフリクトします．ログイン画面毎のreCAPTCHAがあれば問題は解決しそうですが，そのようなプラグインは，今のところ見つけられていません．
現状での対策として，Ultimate Member -reCAPTCHAに集約することにしました．
Ultimate Memberプラグインの既存の専用ページ
「ダッシュボード -> Ultimate Member -> 設定 -> 一般」で表示されるように、Ultimate Memberプラグインを導入すると7つの専用ページが予め作られます。
まずは、新規登録pageでユーザーが登録を申請してきます。その後承認されると、ログインpageが使用されます。
- 新規登録 page
- ログイン page
- アカウント page
- ユーザー page
- Member page
- ログアウト page
- パスワードリセット page
UM-1 用途
権限グループの設定により、見せる/見せないを設定
Ultimate Memberの基本は、見せる/見せない、の設定にあります。ページ全体、ページの任意のブロックに設定できます
サイトに新規登録して、サイトのユーザーとなり、IDとPWでログインし、与えられている「権限グループ」に応じて、制限されているページの閲覧やブロックの閲覧が可能になります。
UM access Controls -> Restrict access?
Gutenbergエディタでブロックを編集している際(下図)、右に表示される「UM access Controls」をONにすると、以下の設定が可能になります。
UM-2 - Everyone : 初期設定は、だれにでも見せるようになっています
- Logged in User : これを選択すると、更に詳細に誰にするか設定できます。以下のリストにチェックを複数つけることができます
- Editor : defaultでリストされています
- Author defaultでリストされています
- Contributor defaultでリストされています
- Subscriber defaultでリストされています
- Web Designer defaultでリストされています
- (追加したクラスが表示される)
- Family (例えば)
- Premium (例えば)
- Logged out User
どのように表示/非表示させるかの設定
Logged in Userで、リストを選択すると、以下の設定が可能になります。
- Hide Block (見せない)
- 当該Blockを見せない
- Show global default message
- Ultimate Memberの設定に記載した文章の表示
- Show custom message
- 現れるカスタムメッセージ枠に文章を入力して、た文章を入力
システムの構成
システム構成
Synology NAS
- 2020/07現在
- DS920+ (DS918+からWordPressを載せ替え, 2020/07)
- Disk Station Manager, Version 6.2.3-25426 Update 2 (2020/09/16現在)
WordPress
- Version : 5.5.1-ja
- Theme : Twenty Twenty
- Editor : Gutenberg (標準エディタ)
その他、必要となるプラグインについては、関連記事を参照ください。
アクセス設定の方法
以下の図のように、「ダッシュボード -> Ultimate Member -> 設定 -> アクセス」は、初期値で誰でも閲覧できるように設定されています。
その下の、「Restricted Access Message」は、Classic Editor用の代替メッセージです。制限がかかったページ又はブロックの代わりに表示されます。
UM-3 以下の図では、Gutenbergエディタで使用する場合にチェックを入れてす。
制限がかかったページやブロックを表示する際、「Restricted Block Mesage」に、代わりに表示するメッセージを入力しておきます。
html文を使うことはできるので、「新規登録のページ」にユーザーを誘導するアンカー文(<a href=“xxx”> ◯◯◯ </a>)をコーディングしたいのですが、現在(2020/02/15)、アンカー文の絶対アドレスが、正常に機能しません。
UM-4 ブロックの制限(restrict)の仕方
ページ全体に制限(restrict)をかける
Gutenbergエディタを使用していれば、エディット領域の下にスクロールしていくと、以下の図のように「Restrict access to this contents?」とあるので、これにチェックを入れれば、このページに制限をかけられます。
UM-5 ページ内の一部のブロックのみに制限(restrict)をかける
PageやPostの中で、あるブロックのみをログインしていないユーザーには見えなくすることもできます。
そうしたい場合、そのブロックの種類によっては、制御が効かない場合があります。
そのような場合は、gutenbergの標準のブロック(例えば”段落”)を挿入して、その段落ブロックのメニューからブロック化を設定したあと、その段落・ブロックの後ろに、アクセス制御したいブロックを図のようにクリックアンドドロップすることで、挿入できます。
以上の操作により、この段落と制御したいブロックの集合体としてのブロックが出来あがります。
このブロック化した集合体について、改めてアクセス制御を設定すれば、アクセス制御が正常に機能します。
UM-6 ブロック ユーザー登録の流れ
最も楽でSPAMが回避できるユーザーの自動登録の手順は、以下のイベントの通りです。
下図には、「ダッシュボード -> Ultimate Member -> 設定 -> Email」で設定できる項目の具体例を示しました。
- 登録しようとするユーザーが、新規登録(当サイトを参照ください)のページから、名前、Email address, PWなどを入力して送信する。
- Ultimate Memberプラグインは、新規登録の申請を受け取り、「アカウント有効化メール」を、新規登録ユーザーの登録したEmail addressに送信する。
- 新規登録ユーザーは、送り返されてきた「アカウント有効化メール」のリンクをクリックする。
- Ultimate Memberプラグインは、新規登録ユーザーが、確認のEmailアドレスからクリックしたことを知り、このEmail addressが真正であることを知る。サイトの正式ユーザーとして登録する。
- 以上の操作を座せるには、下図のように必要な項目にチェックしておきます。
- 実際の運用面では、一週間に何回か、新規登録があります。しかし、「アカウント有効化メール」を処理(クリック)しないユーザーが殆どです。実在しないメールアドレスと見做し、SPAMと判断します。
- SPAMと判断した新規登録ユーザーの定期的な処理として、「ダッシュボード -> ユーザー -> ユーザー一覧」にある、「メールアドレスの確認待ち中」となっているユーザーを削除します。
Ultimate Member まとめ
当サイトは、AMP対応です。AMPに対応させるためには、ページのコードであるJavaScriptやHTMLは、AMPのルールに沿った制限がかけられています。
AMPのルールに合わないコードや余分なCSSは変換/削除されます。それでも正常に動くプラグインでないと使用できません。
Ultimate Memberと専用のreCAPTCHAは、AMP対応可能です。アクセス制限の掛け方やユーザー登録の流れについて、今回解説しました。先ずは、自分だけしか見れない制限付きのページを作ったり、制限付きブロックを含むページを作ったりして動作確認をしました。
以上
関連記事
Post Views: 52 以前に 自分のblogのWordPressサイトでmember shipプラグインを導入してメンバーシップサイトを作れないか実験的に検討をしていた時期がありました．AMP対応のためのプラグイ…
Post Views: 315 ID22131 Simple WordPress Membership Simple WordPress Membershipプラグインは、Ultimate Memberプラグインのように…
Post Views: 766 ID14027 はじめに 当サイトは、試験的及び備忘記録として記録した内容は非表示にするために、Ultimate Memberプラグインを試験的に導入しています。 よろしければ、「いたずら…Post Views: 299 はじめに 調査を結果、Ultimate Memberプラグインをインストールしています。 当サイトは、Ultimate Memberプラグインを試験的に導入しています。よろしければ、「いた…編集履歴
2019/12/08 はりきり (Mr) 2020/02/15 文言整備、追記 (ユーザー登録) 2020/02/22 文言整備 2020/04/22 記事一覧を表示した際、表示制限にあるにも関わらず記事内容が表示させる問題についての対策を追記 2020/05/08 追記 (まとめ、システム構成) 2021/03/07 追記 (サイトのロバストネスを確認するためのプラグイン: Statisfy, SiteGuard WP Pluginの紹介と運用)
- Statify
-
![[WordPress] AMPページ対応の広告プラグイン – Advanced Ads Pro (有料版) – 導入と運用 [2020/12/10]](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABgcAAAHwAQAAAACqfIIoAAAAAnRSTlMAAHaTzTgAAABzSURBVHja7cEBAQAAAIIg/69uSEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8GnfvAAEHr2jFAAAAAElFTkSuQmCC)
[WordPress] AMPページ対応の広告プラグイン – Advanced Ads Pro (有料版) – 導入と運用 [2020/12/10]
はじめに
当サイトでは、AMPプラグインで全てのコンテンツをAMP対応にしています。
以下は、Advanced Adsプラグインについて、導入後の使い方についてまとめました。
まだまだ、AMPとそれに対応しようとしているプラグインは完全に互換性があるものではないのですが、最近では、相性も良くなってきています。しかし、試行錯誤で設定を変更したりして動くようにしていることも多くあります。
広告プラグインの導入目的
- 広告を自動で埋め込む
- 埋め込むページを「カテゴリ」、「タグ」などで指定できる
- 埋め込む位置を、投稿の前や後などに指定できる
- 表示サイズを自動や固定にできる
Advanced Adsプラグインは、ドイツ製のAMP版のページにも対応した、広告表示プラグインです。
Advanced Adsの機能
- 広告を作る
- Google AdSenseコード用
- テキスト(Amazon、Rakuten、その他)
- イメージ広告(画像とリンクの貼り付け)
- など
- ブラウザの大きさによる表示/非表示の設定
- アーカイブの種類による表示/非表示の設定
- 作った広告をグループ化
- 1つから複数をグループ化
- 一括表示 (カラム、ランダムなど)
- 表示するページ位置の設定
- ページのトップへの表示、ページのボトムへの表示
- 見出しの種類ごとの表示位置の設定
- 段落への表示設定
AMPとは
AMP (Accelerated Mobile Page)は、スマホなどのモバイルでの表示を高速化する技術です。サイトをAMPに対応させたあとは、AMP用の広告の対応も必要になってきます。
一般の運営者では、AMP対応広告コードを開発者と同じ様には書けません。
そこで、AMP対応の広告表示用プラグインとしてAdvanced Adsを導入します。
AMP プラグイン
このAMPプラグインは、GoogleとAutomatticが開発し、途中、これらの企業の名前は薄れ、ボランティアで開発が進められているWordPressオフィシャルのプラグインです。
その他、AMPページにするプラグインは、以下の4つがあります。
- AMP for WP
- WP AMP
- Facebook Instant Articles & Google AMP Pages by PageFrog
- WP AMP Ninja
AMP対応広告プラグイン
Advanced Adsプラグイン
Advanced Adsプラグインは、AMPページに対応しています。また、このプラグインがお勧めしているAMPプラグインは、前述のAMP by Automatticです。
AMPとAdvanced Adsの連携状態がキー
AMPは、PCと比較して非力なデバイスであるスマフォやモバイルにおいて、レスポンス良く表示するための新しい技術です。
AMP対応とは、フルセットのJavaScriptが使用できなくなります。その影響で機能しなくなるコードがでてきます。JavaScriptは、表示関係に使用されることが多いので、表示ができるようなコードにするなどの連携が必要です。
その表示には、広告の表示も含まれます。Advanced Adsとの連携も必要ということです。
広告には、Google, Amazonなど代表的な広告ネットワークがありますが、Googleでは、AMP対応と非対応を選択てきます。
AMP対応にした場合は、AMP対応の広告の表示の仕方に従う必要があります。Advanced Adsは、AMPに対応しています。
AMPページにおける広告の表示について
広告ネットワークと広告コード
Google Adsenseなどから送られてくる広告コードの配信元を広告ネットワークと言います。
Google Adsenseの設定でAMPを有効にすると、AMPに対応した広告コードを送ってくる(と思われる)ので、AMPページでは、その広告は、正しく表示されます。
もしも、AMPに対応していない普通の広告コードが広告ネットワークから送られてきたら、ほとんどの場合AMPページでは正しく表示できません。
Advanced Ads (All access/有料版)
今回、このサイトでは、広告を出すほどアクセス数がある訳ではありませんが、勉強がてら有料版のAll Accessを導入しました。
有料版では、Add-Onとして幾つかの追加機能を導入できます。現在、以下のプラグインを追加しています。
2020/03/03 テストに没頭しすぎて、オーナー・クリックをしたことで、現在、Googleから30日間のペナルティーをもらっているため、テストは中断しています。広告が表示されたり、されなかったりと、イライラして、表示されていないスペースを連打したことが、大きな原因であると反省!
2020/04/02 自動的に復帰されたので、セッティングを再開1. Advanced Ads
- Free Version
- 一般のページで使用できますが、AMPページ、且つモバイルに対応するには、以下のResponsive Add-Onが必要です。
2. Advanced Ads Pro
- 広告関連では、キャッシュが無い方が良い場合があります。広告関連のキャッシュを無効化設定など、その他多数の機能があります。
3. Responsive Add-On
- 広告ネットワークからそれぞれ異なる属性の広告が送られてくるのですが、それに適切な広告コードに変換する機能など、その他多数の機能があります。
4. Sticky Add-On
- モバイル専用です。画面の下に広告を表示できます。図1のようなモバイル画面のボトムに出てくる広告の表示が可能になります。
図1. モバイル画面に現れるSticky広告
AMPの一般的制限とプラグインによる対応
以下、Add-Onの説明をする前に、前提条件として知っておきたい基礎知識と、Advanced Adsの関連機能について、マニュアル原本から概説としてまとめました。
- 広告のタイプ
- Googleが買収したdoubleclickの技術による広告(実質Google)
- その他 (Amazonなど)
- 広告の属性
- 表示に関する情報 → 属性の例
- 広告ネットワークからの独自の属性の広告に対応
- フォールバッグ
- 広告が壊れている、適切に表示できない、などの対応について、動作するように対応
- 画像、その他の広告
- ルールに合わないJavaScript, HTMLなどのコードは、、AMPプラグインによりフィルタリングされ削除される
- 標準のJavaScript
- AMPの仕様では、ほとんどのJavaScriptがルール違反となり、AMPプラグインにより削除されるため、通常のプラグインによる遅延読み込みはできない
- 訪問者条件
- 本プラグインでは、以下の条件によっては、機能しない場合がある
- ブラウザの幅 (Advanced Adsで幅の指定が可能)
- Cookie
- 本プラグインでは、以下の条件によっては、機能しない場合がある
- 表示位置
- AMPでは全ての位置をサポートしていない
- Responsive Add-Onでは、AMPに関わらず配置の指定ができる
- スペース予約の場合、中央揃えたはできない
- Advance Adsでは、「広告ラベル」を設定した場合、予約オプションは使用しないこと
- アーカイブページのAMPコード
- AMPプラグインは、アーカイブページのAMPコードを作成できない
- インプレッショントラッキングは以下の条件
- ロード時
- ページ表示時
Display ads on AMP pages
https://wpadvancedads.com/manual/ads-on-amp-pages/#utm_source=advanced-ads&utm_medium=link&utm_campaign=notice-amp広告の属性 (attribute)の例
Goobleの広告技術であるdoubleclickの例
- type : doubleclick
- data-slot : /1234567/amp_ad_banner
- width : 320
- height : 50
Advanced Ads Full Access (有料版)
Advanced Ads Pro
特徴
Advanced Adsの有料版では、Advanced Ads Proが使用できます。特徴について、原文の文書から以下にまとめました。
- 広告をレイアウトに配信する6つの新しい広告の配置
- 13以上の表示条件と訪問者条件
- ページスピードを向上させるレイジーロード
- クリックの不正防止
- Ad-Blockユーザー向けの代替広告
- キャッシュ無効化
- グループ内の広告ローテーション、ブラウザーの幅に基づいて表示される広告、または訪問者が使用するデバイスなどの動的機能の機能を保証します
- カスタムコード
- HTMLとCSSを広告ユニットに直接追加して、広告をカスタマイズします
- 相互プレースメントのテスト
- 広告作成を高速化するための広告の複製
- ページごとに1回だけ表示するように広告を制限する
- ページをリロードせずに広告を更新
- 投稿タイプごとにすべての広告を無効にする中央オプション
- グループ化された広告から広告グリッドを作成
- たとえば、2×3広告でブロックする
- the_contentフィルター(WordPressの関数)を使用しないコンテンツに広告を挿入する
- フロントエンドの管理バー(ログインしている時のブラウザのトップに現れるメニューのこと)に現在配信されている広告を一覧表示します
- 個々のユーザーの広告関連ユーザーロール(役割)を選択
- 広告管理者
- 広告マネージャー
- 広告ユーザー
- 1年間の優先メールサポートと更新、その後は無制限の使用
- バージョンアップが可能かは不明(はりきり)
Advanced Ads Pro
https://wpadvancedads.com/add-ons/advanced-ads-pro/Sticky Ads
有料版では、Sticky Adsを使用可能となります。
2020/04/11現在、インストールするとAMPで不適合が出て、AMPの評価が▲になる項目がある。Stickyは、重要でない機能であるため、インストールしない方が良い。
Responsive Ads
AMPバージョンのページにGoogle Adsenseを表示させるには、以下の項目の2つの項目にチェックします
- Advanced Ads→ 設定→ Adsense
図2. Google Adsenseを表示させるための設定
Responsive Adsの特徴
- 最小および最大ブラウザ幅を設定して、広告を表示
- AdSenseレスポンシブ広告のカスタムサイズを設定
- AdSenseのデフォルトのサイズを長方形、垂直または水平に設定
- デスクトップとモバイル向けにAdsense Responsive Matched Contentユニットをカスタマイズ
- ダッシュボードのレスポンシブ設定ごとにすべての広告をリスト
- 管理者向けに広告、コンテナ、ウィンドウサイズを表示するフロントエンドアシスタント
- タブレットを検出
- テーマでサポートされていない場合、レスポンシブイメージ広告を強制
- Proで画面のサイズ変更とキャッシュ無効化が有効になっているときに広告を再読み込み
- AMPページでAdSenseを自動的に変換
- AMPページで自動広告機能を使用
- 広告ネットワークからのAMP形式サポート
- AMPページで特定の広告を表示または非表示にする「AMP」表示条件の設定
Responsive Ads
https://wpadvancedads.com/add-ons/responsive-ads/依存関係
キャッシュされたWebサイトでブラウザー幅の訪問者条件を使用する場合、おそらくAdvanced Ads Proからのキャッシュ無効化が必要になります。
AdSenseレスポンシブ広告のカスタムサイズも、余分なキャッシュ無効化をしなくても機能します。
広告の作成と配置設定
概要
以下の手順で、「新しい広告」を作る。この広告は、このままでは、自動で表示されないので、「配置」により自動的な広告に設定する。
- 「新しい広告」で広告を作る
- 作った広告は、ページにショートコードを埋め込めば、その位置に、「配置」の設定とは無関係に、指定した広告をそのページに表示できる
- 作った広告は、ページにショートコードを埋め込めば、その位置に、「配置」の設定とは無関係に、指定した広告をそのページに表示できる
- 「配置」で自動的な広告表示にする。
- ある広告を配置設定することで、その広告の各種設定を前提に、配置で設定した位置に、自動的に広告が表示される。
新しい広告
- Advanced Ads→広告→新しい広告
- タイトルを追加 : 分かりやすいタイトルを入力
- 広告タイプを選択 : (これは、ソースの設定であり、以下を選択可能)
- アドセンス広告(Google AdSenseアカウントでの広告)
- Google AdSenseのアカウントを取得しAdvance Adsに入力してあれば、Google AdSenseで設定した広告タイプを、Advanced Adsで表示されるので、それを使って広告として設定する
- プレーン広告( Amazonなど、iframeのコードを取得してペーストする)
- AmazonのJavaScript広告コードは、使用できない
- iframeの場合、AMP対応にするには、HeaderへのAMPの拡張コードの挿入が必要
- iframeの場合、更に、iframeコードは、AMP用に’amp-script’というような微調整と、不要なコードの削除が必要
- 画像広告 (画像とurlをセットする)
- Amazonの製品へのダイレクトなリンクとして、urlを取得した場合は、画像とともにurlを一緒に使って広告を作成できる
- AMPdocument
- アドセンス広告(Google AdSenseアカウントでの広告)
- その他の設定
- レイアウト/出力
- 表示条件
- カテゴリ
- タグ
- その他
- 広告パラメータ
- サイズ
- AMP (予約枠)
- Tracking (有料版): 統計データ蓄積
- 訪問者情報
- ブラウザの幅
- cookie
- 新しい訪問者
- その他
自動的な広告にする
- Advanced Ads→配置
- 配置の新規作成
- 配置 (どこに配置するか配置アイコンが出てくる)を選択
- 名前を選択 : 「広告またはグループを選択」で広告を選んで、その名前をコピペするのが効率がいい
- 広告またはグループ : 作成した広告がプルダウンで選択できる
- 「保存」して完了
- 配置の新規作成
問題があるとき
Advanced Adsのサイトの和訳から、内容を以下にまとめました。
表示されない場合
- サイトをAMP対応にしている場合は、この章を飛ばして次の「AMPプラグインを導入している場合」を参照してください
- 多くの場合、広告の表示は、PCよりモバイルの方が早く表示される
- トラフィックが少ないサイトの自動広告の場合、その設定に数日を要することがある。時間の問題といえる。
- 広告ブロックがー(アンチ・ウイルスソフト)を停止するか、他の端末で表示かを確認してみる
- 設定がうまくいっているのなら、手動で設置した広告は表示されるので、この方法で確認できる
- 自動広告があるか確認する
- フロントエンド → ツールバー → Ad Healthを確認
- コードを探す : ‘enable_page_level_ads’
- Amazon Affiliate
- ‘iframe’の広告コードは、当サイトで表示可能でした。
- Amazon Widgetは、JavaScriptで書かれています。当サイトでは表示ができませんでした。
AMPプラグインを導入している場合
AMPプラグインを更新したり、その他WordPressを構成していプラグインを更新した場合、AMPプラグインによる検証が古くなってしまいます。そのため、Google Adsense (広告)が表示されなくなる場合があります。
表示に関係するプラグインを更新した場合、毎回、以下の操作を実施する必要があります。
対応策は、図1のように、AMPプラグインから、「検証済みURL」を選択します。図2のように、①から④の手順により「最新でない結果」の「URL」を再検証します。この処理は、Google Adsense 関連の外部サイトとやり取りして、キャッシュを保管するため、1つのURLの処理時間は、~10秒程度かかるので、選択したURLに応じて時間を要します。
選択数は、表示できる数に依存するため、処理するURLが多い場合は、表示数を多く増やしてください。最大100の表示は可能です。100を表示させてから一括でURLのチェックボックスにチェックを入れて100のURLを選択できます。
図1. AMPプラグインから再検証する(1)
図2. AMPプラグインから再検証する(2)
AdSense Auto ads not showing up
https://wpadvancedads.com/manual/?utm_source=Advanced+Ads&utm_campaign=983b5218bd-NL_Main_Manuals&utm_medium=email&utm_term=0_e6d3089448-983b5218bd-106541321携帯では表示され、タブレットでは表示されない
そもそも広告が悪い場合があるようです、縦不向きの450px幅の携帯で、その広告が表示されるののに、幅がもっと広い(~1000px)タブレットでは表示されないことがあります。よく調べてみると、携帯でも横向きにして幅が~780px程度になると表示されない、その広告は、動画広告です。おそらく、Google AdSenseから自動で飛んでくる、その広告は、幅が広いと表示されるされないような設定になっており、携帯の狭い幅でしか表示させないものと思われます。この動画形式の広告は、アニメ系の広告が多いですが、10回に1回程度でランダムに飛んできます。その都度、広い幅のタブレット、Windows PCでは表示がされません。現在のところ、解決策はありません。表示されないのは良いのですが、その広告スペースが空いてしまうのが、なんともみっともないです。Google AdSenseのサイトの設定で、何か設定があるのかも知れませんが、今のところ不明です(2020/09/21)
コードを挿入(参考)
情報が古いですが、Google Adsenseのサイトに、プラグインによる広告の挿入について参考記事があります。2020/3現在「ネイディブ」は「Standard」、「ペア」は「Traditional」、「ネイディブ」は「Reader」と表現が修正されています。これらに関する記事は上記のAMPプラグインの記事をご参照ください。
広告コードの挿入方法 ネイティブ ペア クラシック Advanced Ads プラグイン（自動広告と広告ユニットの両方に対応） ☑️ ☑️ ☑️ Ad Inserter プラグイン（自動広告と広告ユニットの両方に対応） ☑️ ☑️ ☑️ Insert Headers and Footers プラグイン（自動広告のみ） ☑️ ☑️ ❌ Genesis テーマ（自動広告のみ） AMP バージョンの WordPress サイトに広告コードを挿入する
https://support.google.com/adsense/answer/9579782?hl=ja実際の設定奮闘
試行錯誤の結果、セッティングノウハウ
Advanced Ads→ 広告→ AMPの設定
「automatically convert to・・・」は選ばない、他の設定の広告との組み合わせで不具合があったり、表示されなかったりするため、「user responsive width and static height of [200]px」を選択する。
[200]の値は、もしも、広告が表示されず、空白スペースとなって、見苦しい場合がある。その場合、[10]などの小さい値にしておくと良い。
- automatically convert to AMP the same size of default setting : AMPページに表示サイズに応じて自動でサイズ変更して表示する機能 → 表示しないことが多いので選択しない[❌]
- hide : AMPページでは、広告を表示しない機能
図3. AMPでの予約枠の設定
Advanced Ads→ 広告→ 端末の大きさによる表示/非表示
訪問者条件で設定
Browser Width
を選択して、横版の大きさを指定する。試行錯誤がが必要だったが、設定したあとは、cacheをフラッシュしてから、表示テストをすること。以下の2つの広告を用意しておけば、iPhoneとiPadで、異なる広告を表示できる。しかし、挙動はトリッキーで、以下の値の設定で、うまく表示分けができたり、つぎの日にはできなくなっていたりと、まだ、安定させきれていないのが現状です。広告タイプとの組み合わせの問題もあると考えられる。
以下の設定値を使うことで、モバイル(iPhone 6 Plus同等)と、Desktop(iPad Pro 11, Surface Pro 6と同等)での画面の大きさ別に広告を表示させることができるようになります。
- iPhone 6 Plus : <=599
- iPad Pro 11、Surface Pro 6 : >=800
図4. browser widthの設定
Advanced Ads→ 一般
Fallback width
は、とりあえず、790、に設定iframe形式の広告
- 「amp-iframe」ライブラリ使用準備
- 手順: 以下のコードを..に挿入する
- 「Header and Footer」プラグインを使う
- 設定→ Header and Footer→ Head and footer→ <HEAD> PAGE SECTION INJECTION→ (ON EVERY PAGE)
- 以下のコードを入力して「save」
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>広告の設置
自動的に配置させる
Advanced Ads→ 配置→ 新規作成→ 広告の選択
ページに埋め込む
表示は、Advanced Adsプラグインにお任せすることも良いが、テストするなど、明示的に広告を表示させる場合は、ページに受け込みます。
- Gutenbergの場合、ブロックの検索で「ads」と入力
- 「Advanced Ads」が出てきくるので選択
- ページに貼り付けたAdvanced Adsブロックのセレクトウインドから、作った広告の名前を選択できる
- 目的の広告を選択する
- 以上で、貼り付けた位置に広告が表示される
Google Adsenseの画像広告
AMPページに表示させる
- Google Adsenseの広告を表示させるには、「In-feed」以外を設定する。In-feedに設定すると、広告枠自体がなくなってしまう。
- AMPには、「Automatically Convert AMP」を設定すると広告枠は残存しているものの、広告が表示されず、空白になってしまう。
- 以上を除く設定は、ほとんどで広告が表示可能
- 「レシポンシブデザイン」には、「サイズ」設定は「horizontal」。「use responsive width and static height of 250 px」と設定すること。300や350, 400では、画像が表示されな300や350, 400では、画像が表示されないず、文字だけになってしまう。
- 「広告リンク(レスポンシブ)」には、「サイズ」設定は出て来ない。「use responsive width and static height of 250 px」と設定する。300や350, 400では、画像が表示されず、文字だけになってしまう。
タイプの設定は、以下の図のように7種類。In-feedは使わない。広告リンクは、2種類ありますが、2021/03/10から使用できなくなることが、Googleから2020/12/10付で発表されました。
タイプ : 広告リンク(レスポンシブ)での設定
タイプ : レスポンシブデザインでの設定
以上
編集履歴 2020/03/01 はりきり(Mr) 2020/03/08 追記 (Display ads on AMP pagesを要約) 2020/03/09 追記 (Advanced Ads Pro, Responsive Ads) 2020/04/11 追記 (Sticky Adsは不要、AMP版広告の作り方) 2020/04/21 追記 (AMPプラグインとAdsense Adsプラグインの連携、その他、表示デバイス(モバイル、PC)の関係性について) 2020/04/30 追記 (広告の作成と広告の配置について、操作を追記。完全に抜けていた^^;) 2020/08/23 追記 (WordPressを構成する各プラグインを更新するとGoogle Adsenseが表示されなく場合があり、そのURLは、AMPプラグインで再検証が必要) 2020/09/21 追記 (幅の広い端末では、アニメーション広告が必要じされない) 2020/12/10 追記 (Google Adsenseの画像広告を、AMPページに表示させる。広告リンクは2021/03/10より使用できなくなる)
Advanced ads関連
Post Views: 327 充実する広告表示機能を応用 Advanced Adsプラグインは、Google Adsenseの対応に注力しているドイツ製のプラグインです。 今回は、Advanced Adsのホームページ…
Post Views: 219 はじめに blogを始めてからしばらくすると、広告を載せてみたくなります。それはblogするための張り合いであり、自分のblogの評価の結果であるため、誰しも興味があるはずです。当サイトで…Post Views: 209 はじめに 当サイトでは、AMPプラグインで全てのコンテンツをAMP対応にしています。 以下は、Advanced Adsプラグインについて、導入後の使い方についてまとめました。 まだまだ、A…Post Views: 223 はじめに 広告に対するクリックは、ブログの評価であると思っています。ブログの評価のバロメータなのです。これを頼りにしてコンテンツ内容の充実化に励むことができます。 この記事では、Googl…
![[WordPress] AMP プラングインの運用 – DS920+のシステムメモリ(4GB)を8GBに増設すると一括検証可能数は、デフォルト「8」から「> 41」に増加 [2022/02/06]](https://harikiri.diskstation.me/myblog/wp-content/uploads/2019/12/DFCE24D5-7AEA-4FF0-820C-D054B48E2D5C.jpeg)
![[WordPress] AMP対応化で、使用しているその他のプラグインによるエラーが出ないようにするために – プラグイン別 [2020/11/16]](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/02/0AADC961-0278-4A67-B770-47E920676DAD.jpeg)
![[WordPress] 「AMP」対応奮闘記 – プラグインAMPはVer.2.20になったけれど。[2022/01/05]](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/09/950A14EE-C10D-443A-AB7E-2A2CE17A8EFC.jpeg)
![[WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – [2020/09/11]](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/09/F6908C2B-9876-4F48-B958-1D86685C00D9.jpeg)
![[WordPress] 広告プラグイン – Advanced Ads Pro (有料版)の応用機能(Header/Footerにコードを挿入) [2020/05/03]](https://harikiri.diskstation.me/myblog/wp-content/uploads/2021/02/80F3D755-3019-49C6-BDAE-47D137C87826.jpeg)
![[WordPress] メンバーシップ・サイトを構築プラグイン – Ultimate Member プラグインの使い方をAMP対応とともに解説 – [2021/03/07]](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/04/641BBEEB-F36D-490E-AB64-07394DA20B3F.jpeg)
![[WordPress] AMPページ対応の広告プラグイン – Advanced Ads Pro (有料版) – 導入と運用 [2020/12/10]](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/03/5193B984-721D-4591-B16D-B112E5F8FE14.jpeg)
