MR.HARIKIRI-INSIGHTS

カテゴリー: WordPress

  • [WordPress] メンバーシップ・サイトを構築プラグイン – Ultimate Member プラグインの使い方をAMP対応とともに解説 – [2021/03/07]

    [WordPress] メンバーシップ・サイトを構築プラグイン – Ultimate Member プラグインの使い方をAMP対応とともに解説 – [2021/03/07]

    Post Views: 766

    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のログイン画面にリダイレクトする

    標準ログイン画面が必要となった場合

    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が使用されます。

    1. 新規登録 page
    2. ログイン page
    3. アカウント page
    4. ユーザー page
    5. Member page
    6. ログアウト page
    7. パスワードリセット 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
      • 現れるカスタムメッセージ枠に文章を入力して、た文章を入力

    Advice

    記事中の一部のブロックに対して、「UM access Controls」で「Restrict access」を設定した場合、記事の一覧で表示される記事内容の一部「Excerpt」に、表示制限をかけているにもかかわらず、表示されてしまう問題があります。
    対策は、表示制限したいブロックを「再利用ブロック」(Gutenbergで利用可能)にして、そこで、「UM access Controls」で「Restrict access」を設定をすれば、記事一覧の表示の際の、「Excerpt」に表示されなくなります。この対応で、メンバーシップを構築するのがよいです(2020/04/22)

    システムの構成

    システム構成

    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対応可能です。アクセス制限の掛け方やユーザー登録の流れについて、今回解説しました。先ずは、自分だけしか見れない制限付きのページを作ったり、制限付きブロックを含むページを作ったりして動作確認をしました。

    以上

    関連記事

    編集履歴

    2019/12/08 はりきり (Mr)
2020/02/15 文言整備、追記 (ユーザー登録)
2020/02/22 文言整備
2020/04/22 記事一覧を表示した際、表示制限にあるにも関わらず記事内容が表示させる問題についての対策を追記
2020/05/08 追記 (まとめ、システム構成)
2021/03/07 追記 (サイトのロバストネスを確認するためのプラグイン: Statisfy, SiteGuard WP Pluginの紹介と運用)
  • [WordPress] Advanced Ads Pro (有料版)プラグイン – Goolge adsense やAmazon Affilicateなどの広告を表示させる (表示されない場合の対処法) [2020/05/03]

    [WordPress] Advanced Ads Pro (有料版)プラグイン – Goolge adsense やAmazon Affilicateなどの広告を表示させる (表示されない場合の対処法) [2020/05/03]

    Post Views: 219

    はじめに

    blogを始めてからしばらくすると、広告を載せてみたくなります。それはblogするための張り合いであり、自分のblogの評価の結果であるため、誰しも興味があるはずです。当サイトでは、Synology NASであるDS920+にWordPressを導入してblogを発信しています。レンタルサーバーよりは非力であることや、ネットワークの転送速度も1Gと低いため、苦労も多いことは否(いな)めません。広告が表示されない不具合もその一つです。

    世界にはいろいろなアフィリエイト・プログラムがありますが、Google AdsenseとAmazon Affilicateは、比較的手を出しやすく、当サイトもこの２つについて広告表示の設定をしています。

    マニュアルにより1ページ毎に広告コードを埋め込んで表示設定することも可能ですが、phpを少しは知っている必要があります。当サイトでは、最初から広告表示の専用プラグインを導入することは長い目で見た時、効率的であると考えました。2, 3の広告プラグインを試し、結果的には、Advanced Ads Pro (有料版)を導入しています。html文の見出しであるH2やH3、・・・などのを標的として広告を表示させたり、何個かの広告をグループにして、2段表示などのカラム組み表示も可能です。また、GoogleのAMPページ対応のページへの広告表示も可能であったり、add onプラグインにより色々な機能を追加することができます。

    基本的には、Advanced Ads Proを導入し、追加的にGoogleのAMPページへの対応としてResponsive add onなどを、適宜、追加して好きな広告表示の機能を使うことができます。Amazon Affilicateの場合、Google Adsenseとは異なり、高度な広告表示はしていません。具体的には、価格表示対応の場合、html文である商品のiframeの広告コードを、Advanced Ads Proの設定にコピペしたり、単純なリンクとしてのurlをコピペしたりすれば広告表示が可能となります。Google Adsenseの場合は、広告内容は、Googleが自動で広告コードを、そのページにふさわしい内容のもので送る仕組みになっています。この対応としてResponsive add onが必要です。当サイトでは、AMPページに対応しているので、少なくとも、Advanced Ads ProとResponsiveの2つが必要でした。なお、Amazonの広告には、Responsive add onは必要ありません。

    Amazonの広告

    WordPressの投稿/ページの中に、Amazonの広告を表示させる方法をまとめました。Amazonの広告を掲載してそれに関連する収入を得る場合、広告収入というよりは、コンバージョン(商品が購入されて支払いが完了したとき)により収入が得られるコンバージョン型課金です。

    「インプレッション」の意味とは？増やす方法についても解説 — LeadPlus —
    インプレッション課金型とクリック課金型及びコンバージョン課金型について理解できる解説がある

    https://www.leadplus.net/blog/impression.html

    Amazonから提供させる広告形式

    Amazon Affiliateでは、以下に示したようにAmazonから複数形式の広告コードが提供されています。そのフォーマットは、大きく3つ (html, iframe及びJavaScript)あります。

    html形式では、画像を使って画像広告を作ることができます。画像広告の作成は、Advanced Ads Proを使えば簡単に作れて、作った広告はデータベースに保管されて管理されるので、使い回しも簡単にできます。

    Amazonアソシエイトには、数種類の広告形式が提供されています (2020/3現在)
    1) 商品リンク (html形式、AMPサイトで表示可能)
    2) バナーリング (iframe形式、AMPサイトで表示不可能)
    3) Mobile popover (JavaScript形式、基本的にはAMPサイトで表示不可)
    4) テキストリンク　(html形式、AMPサイトで表示可能、カテゴリー、サブカテゴリーとリンクに用いるテキストを指定して、html文を取得する)

    https://affiliate.amazon.co.jp/home

    AMPに対応する形式は限られています(表1)。しかし、広告プラグインであるAdvanced Ads Pro(有料版)とアドオンを使えば、自動的にAMP対応にしてくれます。当サイトでは、有料版を2020/03から使用して、あれやこれやと試行錯誤にて設定を検討しています。この記事では、Advanced Adsを使用しない場合で、マニュアル設定する場合を解説しています。

    表1. 広告形態とAMP対応/非対応

    広告形態AMP非AMP
    リンク形式(http://)可可
    JavaScript1)可
    Mobile Popover2)可
    iframe3)可

    AMPページで広告を表示

    1) JavaScriptコードの埋め込み

    Amazonから提供させる広告コードのうちJavaScriptコードについては、AMPページに埋め込んで表示させる方法はありません．

    2) Mobile Popoverの埋め込み

    この形式は、JavaScriptなので、前述のJavaScriptコードの埋め込みと同様に、今現在対応策は不明です。試行錯誤注ですが、表示できる設定方法はわかっていません。

    3) iframeの埋め込み

    概要

    iframeを使用するには、Header領域にAMP専用の宣言が必要です。もしも、Advanced Ads Proを導入していれば、このプラグインで処理してくれるので、宣言の対応は必要ありません。

    Headerにコードを挿入できるプラグインで、その宣言のコードを挿入した上で、広告コードをページに埋め込みます。その際、AMP用のiframeであることを示すコード(amp-iframe)とする必要があります。

    作業

    • headerに宣言
      • 以下のコードを埋め込む
      • プラグインは、Header and Footerを使用する
      • <script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”></script>
    • 広告コードをページに埋め込む
      • <amp-iframe>…</amp-iframe>の名式で、コードを埋め込む。コードは「…」に。
    amp-iframe width="500"
  height="281"
  title="Netflix House of Cards branding: The Stack"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  allowfullscreen
  frameborder="0"
  src="https://player.vimeo.com/video/140261016">
</amp-iframe>

    まとめ

    Amazonの広告で提供されているコードの種類について、説明し、実際の埋め込み方についてまとめました。

    現在、2020/05/03で新型コロナウイルスによる騒動の中です。03/19からAmazonの商品リンクを広告しています。残念ながら、一度も購入していただけた実績は、ありませんが、アクセス数の問題でしょう。まあ、人生なにごとも経験といいますし、コツコツとアクセス数を上げる案を考え/実行のサイクルを回しましょう。

    広告が表示されない時の対策

    広告が表示されない場合があります。特に、Google広告の場合です。AMP化した場合に起こりやすくなるようです。AMPでは、AMPに対応したコードに変換して、それを代替表示させています。もしも、AMPで問題が起こった場合は、AMPの作業の中で、ポストを「忘れる」処理をして、再度、元の記事の編集画面から更新することで、AMPに対応したコード変換をさせると、ほとんどの場合、問題が改善できます。それでも、改善できない場合もあります。その場合は、キャッシュの構築関連に問題があることを疑います。「キャッシュ」のフラッシュをしてみます。

    それでも、Google広告が表示されない場合もあります。Googleの広告では、「Responsive」の設定が可能なので、その設定(Googleサイトでの設定、Advance Adsプラグインでの設定など)では、広告コードは、Googleサイドに存在していることの理解が必要です。更に、広告が存在するGoogleサイドから広告コードが、自分のblogサイドに届いている場合と、届いていない場合にケースを分類することができます。

    もしも、以上の対応である「忘れる」、「キャッシュ」のフラッシュ、でも、Googleの広告が表示されない場合は、自分サイドに広告コードが届いていないことを疑います。対策は、以下の通りです。

    • ブラウザで、該当ページを表示される
    • Google広告の表示が出ないことを確認する
    • しばらくの時間(数分間)、ページの上下をスクロールしたり、静観したりする。
    • (広告コードの転送が行われていると推測しています)
    • 最後に、ブラウザの再読み込みをクリック。表示されると思います。
    • それと、注意ですが、決して自分で広告をクリックしないようにしてください。そのクリックの数は、少なけばミスとして許容されているようです。でも、多すぎると、Google Adsenseから「出禁」を食います(by 経験者)。

    編集履歴

    2020/03/19 はりきり(Mr)
2020/03/21 追記 (Amazonアソシエイト)
2020/05/03 追記 (購入実績についての記載)
2021/03/10 追記 (はじめに)
2021/04/11 追記(広告が表示されない時の対策)
  • [WordPress] Adminimize プラグイン — ログイン・ユーザー毎に表示するメニュー項目を選択的に非表示にできる

    [WordPress] Adminimize プラグイン — ログイン・ユーザー毎に表示するメニュー項目を選択的に非表示にできる

    Post Views: 213

    課題

    WordPressの編集時に、邪魔なメニューを消します。そのプラグインが、「Adminimize」です。

    バックエンド・メニューの表示数を少なくしたり、必要でないものを消したりできます。

    フロントエンド・メニューには、プラグインを多く入れていると、メニュー同士が競合して操作できなくなる場合があります。その時は、必要でない機能を消すことができます。

    沢山の設定が可能です。今回は、「Admin Bar Front End Options」をいじます。

    adminimize

    Admin Bar Front end Optionsでは、「こんにちは、○◯◯ さん」が邪魔になっていたので、チェックして非表示にしました。

    結果

    ログインしたままサイトを表示させるとtop menuに「こんにちは、◯◯◯　さん」が邪魔でした。そのせいで、重なっている必要なメニューを選択できずにいましたが、このプラグインのお陰で、不都合が解消されました。

    編集履歴

    2020/03/12 はりきり(Mr)
    2020/07/16 文言整備

  • [WordPress] WordPress Share Buttons プラグイン – AddThis

    [WordPress] WordPress Share Buttons プラグイン – AddThis

    Post Views: 206

    WordPress Share Buttons Plugin – AddThisプラグイン

    AMP対応ページで動作安定

    SNSへの投稿ボタンです。AMP対応では、このプラグインが安定しています。

    標準のSNSボタンは、FaceBook, Twitter, e-mailおよび’+’ボタンです。

    ‘+’ボタンは、その他のSNSに投稿したい時に使用します。’+’を押すと、開発者のサイトに飛び、そこには多数のボタンがあるので、使用したい投稿を押します。例えばLINEもあるので、それを押すと、LINEへの投稿画面になります。

    編集履歴
2020/03/08 はりきり(Mr)
2020/09/28 文言整備
  • [用語] AMP ; Accelerated Mobile Pages

    [用語] AMP ; Accelerated Mobile Pages

    Post Views: 208

    AMP : Accelerated Mobile Pages, モバイル用に高速化調節されたページを作るルールと技術

  • [WordPress] サイトのスピードを測る – EZOIC

    [WordPress] サイトのスピードを測る – EZOIC

    Post Views: 206

    サイトのスピード

    サイトのスピード測定は、「GoogleのPageSpeed Insights」が有名ですが、以下のサイト(EZOIC)でも、サイトアドレスを入力して測るだけならFreeで測定できます。

    このサイトは、WordPressの広告プラグイン「Advanced Ads」の有料版を購入したのですが、不具合の相談をしている過程で、そのスタッフさんから教えてもらいました。聴きなれない英語圏のサイトですが、変なサイトでは無いと思います。

    試しに一度どうでしょうか?

    Ezoic

    以下のリンクは、スピードテストに直接行けます

    https://svc.ezoic.com/speed-up-site/?_ga=2.178934820.1631995068.1583508394-1097835698.1583508394

    関連

    2020/03/07 はりきり(Mr)

    WordPress

    [WordPress] CLS; Cumulative Layout Shift – 2021/03からGoogle検索評価のスコアに加わる – [2020/12/23]

    WordPress

    [WordPress] Advanced Ads Pro (有料版)プラグイン – Goolge adsense やAmazon Affilicateなどの広告を表示させる (表示されない場合の対処法) [2020/05/03]

    Synology, WordPress

    [WordPress] サイトのスピードを測る – EZOIC

    Synology, WordPress

    [WordPress] 「AMP」プラグイン と広告プラグイン: 「Advance Ads Pro」- 高速化と広告表示の両立を図る [2020/09/11]

    WordPress

    [WordPress] WP-Optimizer プラグイン [2020/09/24]

    WordPress

    [WordPress] Lazy Load Optimize プラグイン

  • [WordPress] 自作プラグイン、Twenty Twentyテーマ幅の修正、子テーマのcontent.phpをいじる – △ID11199 [2020/03/01]

    [WordPress] 自作プラグイン、Twenty Twentyテーマ幅の修正、子テーマのcontent.phpをいじる – △ID11199 [2020/03/01]

    Post Views: 283

    はじめに

    サイトの表示具合は、設定されているCSSを変更して自分好みに変更したり、自作のプラグインにCSSコードを埋め込んだり、色々と方法があるようです。CSSをいじる場合は、小テーマを作って、それを編集するようにします。子テーマを作る理由は、テーマのアップデートによって上書きされてしまうので、それを避けるためです。私も専門家ではありませんが、これからは、徐々にサイトの表示具合をカスタマイズしていきたいと思っていますが、その手法もいろいろあり、それらを学んで行こうと思います。

    自作プラグイン

    まだ、表示幅の埋め込みしかできていません。当サイトでしようしているTwenty Twentyテーマの投稿のデフォルト幅を、以下の手順で自作プラグインとしてインストールして、広くなるように設定できます。

    • 参考1からWordPressのTwenty Twentyテーマのデフォルトの投稿幅を広くするコードを、参考1のmy-plugin.phpの指定の箇所にコピペする
    • my-plugin.phpは、WordPressのブラインインとしてインストールできるようにパッケージされているので、ダウンロードしたファイルの組合せで、アップロードしてインストールする。
    • 以上の操作で、設定が反映される。

    参考1
    WordPress5.3 新デフォルトテーマ Twenty Twenty をチェックしています

    https://nendeb.com/819

    参考2
    WordPress (自分専用)マイ・プラグインを作ろう

    https://nendeb.com/1

    完成したプラグインのコード

    幅の修正のオリジナルは、functions.phpにグローバル変数として設定されており580px(下の「functions.php」を参照)でしたが、iPad Pro 11で閲覧して違和感のない広さに設定してみました。

    その設定では、860pxになっています。以下のコードのコメントには、オリジナルの値580pxを残していますが、実際の設定コードは860pxに変更しています。

    functions.php

    グローバル変数 $content_width

    	// Set content-width.
	global $content_width;
	if ( ! isset( $content_width ) ) {
		$content_width = 580;
	}

    my-plugin.php

    <?php
/*
Plugin Name: my-plugin
Plugin URI:
Description: My Plugin For WordPress.
Version: 1.0.2
Author: nendeb
Author URI: http://nendeb.com/
License: GPLv2 or later
*/


// ここからコードをいれてください。

// Start_01,WordPress Theme: Twenty Twenty の表示幅
/* コンテンツ幅は 580px と だいぶ狭いなと思うので 簡単に変更できるかテストしてみました。
公開画面と管理画面のCSS と $GLOBALS[‘content_width’] を上書きしてみます。
*/

/*
 * 公開画面での Content幅を 860px へ変更する
 * @since Twenty Twenty 1.0
 * License: GPLv2 or later
 */
function twentytwenty_org_style() {
    echo '<style>
    .section-inner.thin,
    .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide){
        max-width: 86rem;
    }
    </style>';
}
add_action( 'wp_head', 'twentytwenty_org_style', 99 );
 
 
/*
 * 管理画面での Content幅を 860px へ変更する
 * @since Twenty Twenty 1.0
 * License: GPLv2 or later
 */
function twentytwenty_admin_style() {
    // Content幅 860 + 30 -> 860 + 0 : Admで確認した画面がUserの画面と異ならないようにした
    echo '<style>
    .wp-block {
        max-width: 860px;
    }
    .wp-block[data-align="wide"] {
        max-width: 860px;;
    }
    .wp-block[data-align="full"] {
        max-width: none;
    }
    </style>';
}
add_action( 'admin_print_styles', 'twentytwenty_admin_style', 99 );
 
 
/*
 * content_width を 860px へ変更する
 * @since Twenty Twenty 1.0
 * License: GPLv2 or later
 */
function twentytwenty_content_width() {
    // This variable is intended to be overruled from themes.
    $GLOBALS['content_width'] = 860;
}
add_action( 'after_setup_theme', 'twentytwenty_content_width', 0 );

// End_01











// ここまで


if ( ! function_exists( 'nendebcom_hide_myplugin_updateplugin' ) ) :
/*
 * サンプル
 * my-pluginの更新を非表示
 *
 * Note : https://nendeb.com/350
 */
function nendebcom_hide_myplugin_updateplugin( $data ) {
	if ( isset( $data->response['my-plugin/my-plugin.php'] ) ) {
		unset( $data->response['my-plugin/my-plugin.php'] );
	}
	return $data;
}
add_filter( 'site_option__site_transient_update_plugins', 'nendebcom_hide_myplugin_updateplugin' );
endif; // nendebcom_hide_myplugin_updateplugin





if ( ! function_exists( 'nendebcom_plugin_last_load' ) ) :
/*
 * サンプル
 * my-plugin を最後に読み込むようにする。
 * Note : https://nendeb.com/10
*/
function nendebcom_plugin_last_load() {

    $this_activeplugin  = '';
    $this_plugin        = 'my-plugin/my-plugin.php';    //最後に読み込みたいプラグイン
    $active_plugins     = get_option( 'active_plugins' );
    $new_active_plugins = array();

    foreach ( $active_plugins as $plugins ) {
        if( $plugins != $this_plugin ){
            $new_active_plugins[] = $plugins;
        }else{
            $this_activeplugin = $this_plugin;
        }
    }

    if( $this_activeplugin ){
        $new_active_plugins[] = $this_activeplugin;
    }

    if( ! empty( $new_active_plugins ) ){
        update_option( 'active_plugins' ,  $new_active_plugins );
    }
}
add_action( 'activated_plugin', 'nendebcom_plugin_last_load' );
endif; // nendebcom_plugin_last_load

    子テーマのfunctions.phpをいじる

    子テーマの作り方は、以下の関連記事をご参照ください。

    子テーマのディレクトリ直下にある「functions.php」に以下のコードを挿入します。

    functions.php

    • 子テーマ定義
    • 自動保存無効化
    • Headに(adsense)組み込み
      • AMP対応したページ/投稿には、headerにJavaScriptコードは使えません。挿入しても無効化されます。
    <?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
  );
}

// 自動保存を無効にする処理
function autosave_off() {
  wp_deregister_script('autosave');
}
add_action( 'wp_print_scripts', 'autosave_off' );
// For no support to AMP, AMP do not allow insertion to Header
// 以下は、<Head>と</head>の間にGoogle Adsenseコードを挿入
// ただし、AMPでは、無秩序に挿入は許されないため、AMPを使用する場合は削除
function km_script () {
 echo '<div><script data-ad-client="ca-pub-1277399675163968" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></div>';
}
add_action( 'amp_post_template_head', 'km_script' );
//

?>

    ログインしているときに処理する

    編集の最中に、投稿内容をブラウザで表示させて確認する場合、「編集」リンクを投稿の最初や最後の方に表示できると便利です。以下は、投稿の最初に表示させるカスタマイズです。同時に前後の投稿ナビゲーションも表示させます。

    content.phpに、以下のコードを挿入します。

    <?php if (is_user_logged_in()) : ?>

	<div>
	<?php
	if ( is_single() ) {
	
		get_template_part( 'template-parts/navigation' );
			
	}

		// 編集
		edit_post_link();

	?>
	</div>

<?php endif;?>

    完成した – content.php

    • 前後の投稿へのナビゲータ
    • 投稿の編集リンクの表示

    以下、完成した　content.phpのコード

    <?php
/**
 * The default template for displaying content
 *
 * Used for both singular and index.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since 1.0.0
 */

?>

<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

	<?php

	get_template_part( 'template-parts/entry-header' );

	if ( ! is_search() ) {
		get_template_part( 'template-parts/featured-image' );
	}

	?>

	<div>
	<?php 
	// 全ページに表示 : カテゴリメニュー
	get_template_part( 'template-parts/info-course' );  
	?>
	</div>

<?php if (is_user_logged_in()) : ?>

	<div>
	<?php
	if ( is_single() ) {
	
		get_template_part( 'template-parts/navigation' );
			
	}

		// 編集
		edit_post_link();

	?>
	</div>

<?php endif;?>



	<div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">

		<div class="entry-content">

			<?php
			if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
				the_excerpt();
			} else {
				the_content( __( 'Continue reading', 'twentytwenty' ) );
			}
			?>

		</div><!-- .entry-content -->

	</div><!-- .post-inner -->

	<div class="section-inner">
		<?php
		wp_link_pages(
			array(
				'before'      => '<nav class="post-nav-links bg-light-background" aria-label="' . esc_attr__( 'Page', 'twentytwenty' ) . '"><span class="label">' . __( 'Pages:', 'twentytwenty' ) . '</span>',
				'after'       => '</nav>',
				'link_before' => '<span class="page-number">',
				'link_after'  => '</span>',
			)
		);

		// 編集
		edit_post_link();

		// Single bottom post meta.
		twentytwenty_the_post_meta( get_the_ID(), 'single-bottom' );

		if ( is_single() ) {

			get_template_part( 'template-parts/entry-author-bio' );

		}
		?>

	</div><!-- .section-inner -->

	<div>
	<?php
	?>
	</div>

	<?php

	// 全ページに表示 : カテゴリメニュー
	get_template_part( 'template-parts/info-course-end' );

	if ( is_single() ) {

		get_template_part( 'template-parts/navigation' );

	}

	/**
	 *  Output comments wrapper if it's a post, or if comments are open,
	 * or if there's a comment number – and check for password.
	 * */
	if ( ( is_single() || is_page() ) && ( comments_open() || get_comments_number() ) && ! post_password_required() ) {
		?>

		<div class="comments-wrapper section-inner">

			<?php comments_template(); ?>

		</div><!-- .comments-wrapper -->

		<?php
	}
	?>

</article><!-- .post -->

    Font-weight

    font-weightの値は、100から900まで100刻み(未確認、1刻みでも可能かもしれない)で設定できます。

    • 400 : 普通の太さ
    • 700 : bold
    • 普通文字を500すれば、見やすくななる(ブロガーさんの提案)

    https://masaa.net/2018/12/28/post-181227-4/

    編集履歴

    2020/04/08 文言整備、ソース記載、タイトル修正
    2020/05/01 文言整備
    2021/02/25 追記 (「はじめに」)

    関連記事(WordPress, Tag:customize)

  • [WordPress] AMPページ対応の広告プラグイン – Advanced Ads Pro (有料版) – 導入と運用 [2020/12/10]

    [WordPress] AMPページ対応の広告プラグイン – Advanced Ads Pro (有料版) – 導入と運用 [2020/12/10]

    Post Views: 209

    はじめに

    当サイトでは、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つがあります。

    1. AMP for WP
    2. WP AMP
    3. Facebook Instant Articles & Google AMP Pages by PageFrog
    4. 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の関連機能について、マニュアル原本から概説としてまとめました。

    1. 広告のタイプ
      1. Googleが買収したdoubleclickの技術による広告(実質Google)
      2. その他 (Amazonなど)
    2. 広告の属性
      • 表示に関する情報 → 属性の例
      • 広告ネットワークからの独自の属性の広告に対応
    3. フォールバッグ
      • 広告が壊れている、適切に表示できない、などの対応について、動作するように対応
    4. 画像、その他の広告
      • ルールに合わないJavaScript, HTMLなどのコードは、、AMPプラグインによりフィルタリングされ削除される
    5. 標準のJavaScript
      • AMPの仕様では、ほとんどのJavaScriptがルール違反となり、AMPプラグインにより削除されるため、通常のプラグインによる遅延読み込みはできない
    6. 訪問者条件
      • 本プラグインでは、以下の条件によっては、機能しない場合がある
        • ブラウザの幅 (Advanced Adsで幅の指定が可能)
        • Cookie
    7. 表示位置
      • AMPでは全ての位置をサポートしていない
      • Responsive Add-Onでは、AMPに関わらず配置の指定ができる
      • スペース予約の場合、中央揃えたはできない
      • Advance Adsでは、「広告ラベル」を設定した場合、予約オプションは使用しないこと
    8. アーカイブページのAMPコード
      • AMPプラグインは、アーカイブページのAMPコードを作成できない
    9. インプレッショントラッキングは以下の条件
      • ロード時
      • ページ表示時

    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以上の表示条件と訪問者条件
      • 表示条件(display conditions)は、表示させない条件を設定するために使います。設定しなければ、全てのページに広告表示されます。
      • 訪問者条件(visitor conditions)は、端末タイプ、会員やユーザータイプ、初回訪問者などで表示されるかどうかの設定ができます。
      • URLのリファラのような様々なパラメータに基づいて、ディスプレイ広告、ブラウザの言語、特定のクッキー、前の広告やページの表示回数も設定できます
    • ページスピードを向上させるレイジーロード
    • クリックの不正防止
    • 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
      • その他の設定
        • レイアウト/出力
        • 表示条件
          • カテゴリ
          • タグ
          • その他
        • 広告パラメータ
          • サイズ
          • 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形式の広告

    <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関連

    Synology, WordPress

    [WordPress] 広告プラグイン – Advanced Ads Pro (有料版)の応用機能(Header/Footerにコードを挿入) [2020/05/03]

    Post Views: 327 充実する広告表示機能を応用 Advanced Adsプラグインは、Google Adsenseの対応に注力しているドイツ製のプラグインです。 今回は、Advanced Adsのホームページ…
    WordPress

    [WordPress] Advanced Ads Pro (有料版)プラグイン – Goolge adsense やAmazon Affilicateなどの広告を表示させる (表示されない場合の対処法) [2020/05/03]

    Post Views: 219 はじめに blogを始めてからしばらくすると、広告を載せてみたくなります。それはblogするための張り合いであり、自分のblogの評価の結果であるため、誰しも興味があるはずです。当サイトで…
    Synology, WordPress

    [WordPress] AMPページ対応の広告プラグイン – Advanced Ads Pro (有料版) – 導入と運用 [2020/12/10]

    Post Views: 209 はじめに 当サイトでは、AMPプラグインで全てのコンテンツをAMP対応にしています。 以下は、Advanced Adsプラグインについて、導入後の使い方についてまとめました。 まだまだ、A…
    Synology, WordPress

    [WordPress] Google Adsense導入 – 必要な手順とセッティング – 広告プラグインを選ぶ – 運用の実際 [2021/01/04]

    Post Views: 223 はじめに 広告に対するクリックは、ブログの評価であると思っています。ブログの評価のバロメータなのです。これを頼りにしてコンテンツ内容の充実化に励むことができます。 この記事では、Googl…
  • [WordPress] author-bio の幅設定 – CSS for TwentyTwenty [工事中] 2020/02/26]

    [WordPress] author-bio の幅設定 – CSS for TwentyTwenty [工事中] 2020/02/26]

    Post Views: 187

    CSSで表示の体裁をカスタマイズする

    以下の記事の内容は、不十分です。

    authorの表示幅の調整

    以下のコードは、content-widthを860に設定していることを前提にしています。

    Mobileは画面が小さいので、100%表示になっているはずですが、TabletやPCでは、幅が大きいので100%表示にしますが、見にくくなるため、通常1280pxある幅を860pxにして、画面幅をめいいっぱい使用した表示にならないように設定しています。

    以上の理由付は、とりあえずしているものの、完全に理解した上での設定値ではありません。

    設定を変更する場合は、バックアップをとってから行ってください。

    /* author-bio width for my_plugin*/
.author-bio {
    width: 100%;
    margin: 0 auto;
    max-width: 860px;
}

    関連記事

  • [WordPress] 「AMP」プラグイン と広告プラグイン: 「Advance Ads Pro」- 高速化と広告表示の両立を図る [2020/09/11]

    [WordPress] 「AMP」プラグイン と広告プラグイン: 「Advance Ads Pro」- 高速化と広告表示の両立を図る [2020/09/11]

    Post Views: 444

    はじめに

    当サイトのblogは、自宅のNASにWordPressを導入してblogを発信してしています。レンタルサーバーと比較して、サイトのレスポンスでは劣っていると思います。因みに、ネット環境は、1ギガです。これも大きな要因になっていると思われますが、WordPressのプラグインを適用して、最大限、サイトのレスポンス改善を検討しました。以下、レスポンスを改善し、それを維持したまま、Google AdSenseとAmazon Affiliateの広告を表示するための設定について解説します。

    必要なプラグイン

    • AMP
      • AMP対応ページにする
    • Advance Ads Pro
      • AMPページにGoogle AdSense広告を表示する
      • アップデートによって、以下のプラグイン「Head, Footer and Post Injection」は、Advance Adsが実行する広告表示には、必要としなくなっています
    • Head, Footer and Post Injection
      • AMPから提供させる専用のJavaScriptを使用できるように、Header部にその宣言をするコードを挿入する
      • Amazon Affiliate の広告コードに「iframe」が使われている場合に、amp-iframe使えるようになる

    AMPとは

    AMPは、Accelerated Mobile Pagesの略号で、携帯電話などのモバイルによるWebの閲覧を高速度化するGoogleが提唱する技術やルールです。

    AMP プラグイン

    これまで、Autoptimizeなどの速度アッププラグインやcache、画像の圧縮など多数のプラグインにより、PageSpeed Insights (PSI)のスコアは改善できましたが、そのスコアは、Mobileで40代に留まり(PCでは~80程度)、それ以上の改善は、同種のプラグインを変更しても達成できませんでした。しかし、以下の調整作業の結果、Mobileスコアは、~70に、PCスコアは、~98にそれぞれ改善されました。

    今回、サイトのレスポンスの根本的な解決として、、AMPプラグインを導入し、サイト全体をAMP化する事で、解決を試みました。

    その結果、超えられなかったスコアの壁を超える事ができました(Mobile: 40→70、PC: 80→>95)。しかし、AMPの制約(ルール)があため、標準意外のプラグンで提供されているJava Scriptが、100%互換では動かない場合が多くあります。

    現在、シンプルなプラグンに集約を進めています。具体的には、これまで導入していたプラグインである(1)目次プラグイン「Content of Post Plus」は、表示が少しおかしかったり、目次をたたむことが出来なくなったりします。(2)吹き出しプラグイン「Encyclopedia」は、PCでは正常に機能しますが、Mobile(iOS)では、吹き出し機能とリンク・ジャンプ機能の区別ができなくなりました。これらのブラングインは、これまでに削除を完了させました。当サイトは、シンプルな表示に舵(かじ)を切りました。

    AMPの開発オフィシャルサイト

    https://amp-wp.org

    広告コード導入

    Advanced Ads Pro

    AMP対応の広告を自由な位置に挿入することができます。

    当サイトでは、投稿ページのAMP化と広告プラグイン(Advanced Ads)の組み合わせで、素行錯誤を繰り返してサイト構築をしてきました。現在は、固定ページはAMPから外しています。最近のAMPプラグインのバージョンアップ(Ver.2)により、AMPのページを指定できるようになりましたのが理由です。

    • Google AsSenseの表示
      • AMPページには、Advanced Adsプラグインで表示させる
    • Amazon Affiliateの表示
      • Head, Footer and Post InjectionsでAMP対応のためのコードを埋め込む

    Head, Footer and Post Injections

    Amazon Affilicate用

    このプラグインの「Head and footer」タグに、以下のコードを入力しています。

    <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>
<script data-ad-client="ca-pub-1277399675163968" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    AMP用

    このプラグインの「AMP」タグに、以下のコードを入力しています。もしかすると、Advanced Adsプラグインで、同様のコード挿入はされているかも知れませんが、この状況で安定しているので、今回は追求はしません。

    <script data-ad-client="ca-pub-1277399675163968" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    Advanced Adsプラグインは、AMPにも対応する広告プラグインです。設定による自動広告、コード挿入による手動広告を、ページの色なん指定した箇所に挿入できます。両プラグインのアップデートも進み、最近、特に動作が安定してきました(2020/09/09)。

    AMP バージョンの WordPress サイトに広告コードを挿入する – Advanced Ads プラグイン –

    https://support.google.com/adsense/answer/9579782?hl=ja

    AMPの恩恵をうけるには、以下のプラグインをインストールして、各ページをAMPに対応させる確認作業が必要です。

    設定

    図1を見てください。最初の設定をします。以下に示したように、「Standard」、「Transitional」及び「Reader」の内、1つを選びます。これらの設定を、適宜、付けたり外したりするのは、その下の「Supported Templates」の☑︎で行えます。いちいちAMP Pluginの無効化をせずに、AMP設定を外すことが可能なようです(十分な検証はできていません)。

    AMP → Generalの設定

    • Standard
      • サイトについて AMP 対応バージョンのみで構築される
      • AMPにもノーマルにも完全に対応したサイトになるため、サイト内のリンク先もAMPに対応したページ/投稿である
    • Transitional (過渡期)
      • サイトの AMP バージョンと非 AMP バージョンの両方で構築される
      • モバイル専用ページにリダイレクトされないが、Googleなどの検索からリンクしてもらえ
      • ページ、投稿の単位でしか機能しないので、ページにありサイト内リンクは、AMPページではなく標準ページとなる
    • Reader
      • サイトの AMP バージョンと非 AMP バージョンの両方で構築される
      • モバイル専用ページにリダイレクトされないが、Googleなどの検索からリンクしてもらえる
      • ページ/投稿の単位でしか機能しないので、ページにありサイト内リンクは、AMPページではなく標準ページとなる
    • Supported Templates
      • AMP Pluginを有効化のまま、AMPを付けたい外したりできます
    図1. 設定 (標準; Standard)

    図2. 設定 (トランジショナル)

    AMP → Invalited URLs

    AMPをインストールした後は、全てのページの確認が行われて、AMP → Invalited URLsにAMP文法に合っていないリストが保存されます。

    これらのリストの文書について、AMP非対応文書とするかAMP対応文書にするかを設定をしなければなりません。

    赤のラインやアイコンが出ている文書(アラート)は、そのままでは、AMP対応ではないことを意味しています。

    アラートがでている文書をクリックして、個別に設定します。

    インストール後の運用

    AMPプラグインのインストール後は、新しい投稿やページがAMPに対応しているか、編集を「更新」する都度行われ、プペファイルが作られる/更新されるようです。そのため、マシンパワーを結構使いますし、待ち時間が、これまで以上にかかります(20~30秒)。

    • レンタルサーバーでは、気にならないかもと思いますが、自宅のSynology NASのWordPressを構築している場合、非力を露呈しているのかもしれません
    • 当サイトでは、当初、PHPのバージョンを5にしていました。これでは、AMP関連でタイムエラーが続出しました。PHPのバージョンは最新版を使うべきです
    • PHPのバージョンを7.2に変更したところ、AMP関連のタイムエラーは出なくなると共に、投稿の更新時の待ち時間も短縮されました(2020/07/05 Mr.はりきり)

    Adminメニューを表示にしているなら、ページを表示してみると、トップメニューに以下のように表示されます

    • 🟢: AMPに対応している
    • ▲ : 一部対応していないコードが存在するが、構造を壊すほどではない場合
    • ❌: AMPに対応できないコードが存在するため、AMPによるコード変換が行われない。すなわち、高速化の恩恵を受けられない

    統合の更新を実行した時、画面のトップにフロート・メッセージがでなければ、AMPに対応した投稿/ページということになります。高速化の恩恵をうけることができます。

    もし、フロート・メッセージとして、以下のメッセージが出るかもしれません。

    “There is 3 issue from AMP validation which needs review. 1 issue is directly due to content here. Nevertheless, the invalid markup has been automatically removed.“Review issues”

    もし出ても、以下の図のように、右の文書ブロックにある「Enable AMP」が「ON」になっていれば、大きな問題ではないため、AMPの恩恵が受けられることを意味しています。

    もしも、このメッセージが出たときは、”Review issues”リンクをクリックして確認することができます。

    左メニューのAMP -> Validated URLsでの個別の文書に飛びます。

    処理方法

    AMPにとって高速化コードに書き換えることが難しいJS, CSS及びHTMLのコードを「Removed」(削除してしまう)か「Kept」(そのままにしておく)か、どちらかの処理を示されます。

    • Removed (削除)
    • Kept (保存)

    AMPを有効にしたければ、3つの方法があります。

    • 提案を受け入れる(Removed提案、Kept提案をそのまま受け入れて、AMP画面を更新する)
    • プラグインを削除する (前述したように、Content of Post PlusプラグインとEncyclopediaは削除しました/機能を放棄しました)
    • AMPにコンパチブルなプラグインに置換する(AMPにコンパチブルなプラグインは、そうそう見つけられません、ある程度の機能の劣化を許容して、その他のプラグインに置換)

    詳細

    提案を受け入れる

    • 提案を受け入れて、すべての「Kept」項目を「Removed」にする。この場合、AMPルールに引っかかっているプラグインの作用は、そのままにしておけます。
    • 表示を確認する
    • 表示結果が壊れている場合や気に入らない場合は、提案の受け入れは失敗になります。
    • 1つでも「Kept」があると、AMPは非対応になり、サイトの速度は上がりません。

    プラグインを削除する

    • AMPの提案を受け入れられない場合は、不要であればプラグインの無効化または削除を行います。
    • 削除しなくてもいいかもしれません。当サイトの環境では、キャッシュが有効なので、削除する必要があったのかもしれませれん。
    • 問題が解消されない場合は、無効化だけではなく削除も検討してください。

    AMPにコンパチブルな別のプラグインに置き換える。

    当サイトでは、写真やイメージ(メディア)を表示するプラグインを新しいプラグインに置き換えたのですが、以下の工夫で乗り切りました。

    • メディアのキャプションを設定している方は少ないと思いますが、キャプションを指定しておくと検索が可能です。
    • 古いプラグインから、貼り付けた写真のキャプションに、検索のための単語や文章を設定します。
    • 新しいプラグインから写真のキャプションを検索で探して、貼り直します。

    invalidのRemoved(除去)を選択して、Updateし、全てのシグナルをグリーンできれば、AMPが可能な状態になリマス。

    運用 (ルーチン)

    • プラグインを変更したり、プラグインの設定を変更した場合、AMPに対応しなくなる場合があります。
    • 理由は、AMPプラグインが、ページをコンパイル(AMPページに変更)しているため、コンパイル時点の環境を前提にしているためです
    • 対策は、プラグインの変更は、極力避ける
    • 新たにプラグインの削除/導入があった場合でも、レスキューは可能です。AMP「検証済みURL」から、文書ごとに設定、一括操作できます

    1. 文書ごとに設定

    以下では、AMP disabledになっている。そこで、Removedにする

    Status -> AMP enagedがブルーとなりAMPが有効となると共に、「Update」ボタンが押せるようになる。

    「Update」ボタンを押すと、その設定が反映され、「Update」ボタンが押せなくなる。

    ページを表示させて表示具合、動作を確認する。

    2. 一括操作

    プラグインを新規導入したり、既存のプラグインの設定を変更したりすると、基本的に全てのページに影響が及びます。

    影響が多数のページに及んだ場合は、一括操作をします。

    • 左メニューからAMPを選択
    • 検証済みURLを選択
    • 以下の2つの一括操作が可能
      1. 忘れる
        • AMP Pluginから設定ができなくなりますが、そのページ設定されていた「AMP}の有効/無効は、その時のままページは存在します
        • そのページを、再度AMP Pluginの管理下に置くには、投稿画面から更新すれば管理が可能になります
      2. 再検証 : 以下に解説

    AMP 検証済みURL

    再検証
    • 左上の設定を「再検証」を選択、「⬜︎URL」にチェックをいれて、「適用」を実行します。
    • マシンパワー : Synology DS920+でfull powerになるほどパワーを使います
    • 途中でタイムエラーが出る場合がありますが、PHPが原因になっている可能性があります。古いバージョンを使用している場合は、新しいバージョンに変更しましょう。少なくともバージョン5は使用しないで、7以上を使います。
      • Synology NASのDSMにログインして、Web Station起動
      • PHP関連の設定で、バージョンを7以上に設定
      • もしも、該当するPHPバージョンが無い場合は、パッケージセンターからインストールする
      • バージョン5と7とでは、相当なパフォーマンスの違いがあります。是非、新しいバージョンに置き換えましょう

    エラーのインデックス

    個別のエラーが1つずつ表示されています。同様にして処理します。左上の設定を「削除」、「⬜︎エラー」にチェックを入れて、「適用」を実行します。

    当サイトの改善程度

    AMP導入前

    AMPを導入するまでは、速度アッププラグインやcache、画像の圧縮など多数のプラグインにより、PageSpeed Insights (PSI)のスコアは改善できたものの、40代に留まり、それ以上の改善は、同種のプラグインを変更しても達成できませんでした。

    AMPの威力

    そこで、今回、AMPを導入することで、根本的な解決を試みました。

    基本条件は、Autoptimizeプラグインを併用です。

    その結果、PSIモバイル・スコアは、50から80, 90にも届くようになりました。広告を表示させたり、本文の量が多くなったりすると、実用的には、~70くらいです。

    劇的です。

    バカチョンのプラグインと比べると少しハードルが高いことは確かですが、スピードにお困りの場合は、ご検討の余地はあると思います。

    追記(2020/05/29) : AMPとAutoptimizeとの併用効果については確認してみました。

    • Autoptimizeプラグインを1ヶ月程度、無効にしてAMPプラグインとWP-Optimizeプラグインでの運用をしていましが、PSIモバイル・スコアが45程度と不良であったページがあったため、以下のように確認してみました
    • Autoptimizeプラグイン(無効) – あるページについて
      • PSI-モバイル・スコア : 45程度
      • PSI-PC・スコア : 85程度
    • Autoptimizeプラグイン(有効) – 同じページについて
      • PSI-モバイル・スコア : 55程度に改善
      • PSI-PC・スコア : 95以上に改善
    • 結論、AMPプラグインは、モバイル専用であり、PCについては、その恩恵を与えない可能性がある。よって、Autoptimizeプラグインは、併用すべきと言論した。

    広告挿入プラグイン

    広告コードの挿入方法ネイティブペアクラシック
    Advanced Ads プラグイン（自動広告と広告ユニットの両方に対応）☑️☑️☑️
    Ad Inserter プラグイン（自動広告と広告ユニットの両方に対応）☑️☑️☑️
    Insert Headers and Footers プラグイン（自動広告のみ）☑️☑️☑️
    Genesis テーマ（自動広告のみ）☑️☑️❎

    安定運用

    高速化とAdsense表示の両立

    AMPもAdvanced Adsもバージョンアップが進み安定してきました。

    ここで、方針を明確にすることにしました。以下の通りです。

    • AMPページに対応させる/させないページを明確にする
      • 投稿ページ : AMP対応とする
      • 固定ページ : 通常ページとする
    • メンバーシップ・ページに対応
      • 当サイトでは、今後のことにも備えて、Ultimate Mebers (UM)プラグインをインストールしています
      • AMPに対応していないので、AMP(Ver.2)プラグインの設定から、「抑制」設定にしてプラグインのコードが挿入されないようにします

    以上の設定で、AMP対応の投稿ページは、UMプラグインによるメンバーシップによる隠れプロックの指定はできません。固定ページでは、逆にUMプラグインの恩恵を受けることができます。

    AMPページで広告が表示されない場合

    AMPページでAdvanced Adsプラグインによる広告が表示されない場合があります。具体的には、Amazonの広告は表示されますが、Googleの自動設定の広告では、表示されないことがあります。すごくシビアに反応して広告の非表示となります。

    対応策をいかに示しました。AMPプラグインの機能と、その運用に関連して、Googleの広告の非表示が起こるため、投稿ページのAMPプラグインによる処理が対策の中心になります。

    • プラグインを更新した場合、AMPプラグインは、それを察知し、以下の図のように「最新でない結果」と表示されます。この場合、Google AdSenseの広告が表示されなくなっています。
    • 対策は、「再検証」の処理をする事です。それにより、問題がなければ、この「最新でない結果」は、消えます。そして、Google AdSenseは表示されるようになります。
    • もしも、その処理で、「最新でない結果」が消えなければ、投稿内容について更新する必要がありということになります。具体的には、当該、投稿ページの編集画面に行き、何もせずに、「更新」をしてください。これで、「最新でない結果」は消えます。
    • もしからすると、「最新でない結果」が表示されている投稿は、既にページとして削除したかで無くなっている場合があります。その場合、この表示は、実質的に問題にならないので、放置しても良いですが、AMPプラグインから、「忘れる」をクリックして消すことも可能です。

    問題点

    AMPのバージョン 2.0.2で問題が残っています。再検証を一括でやるのですが、ある確率で「忘れる」が起こります。AMPにしない設定として、「忘れる」という操作があります。その操作をしていないのに、検証されたURLから消えてしまいます。すなわち、「忘れる」を実行したような現象になるのです。その忘れたベージを探すのは、投稿数が多いほど至難の技になります。AMPのページ対応になっていないことで、広告が表示されなくなります。このことで「忘れる」が起こっていることがわかりますが、確認するのには相当の退屈な時間が必要です。この「忘れる」になってしまったページを再度、AMPに登録する方法は、投稿の編集画面から、更新ボタンを押せず可能です。しかし、そのページを探すのが大変なのです。何か、良い方法がないのでしょうか。地道に退屈な時間を使いましょうか(2020/09/21)

    編集履歴
編集履歴
2020/02/27 はりきり(Mr)
2020/05/29 追記(AMPとAutoptimizeの併用効果はある)
2020/07/05 update
2020/07/20 追記
2020/08/21 追記(はじめに)、修正(”AMP for WP”に関する記載を削除)
2020/09/09 追記( AMPのバージョンアップ(2.0)となったので、その改善された機能)
2020/09/11 追記(必要なプラグインリスト、Head, Footer and Post Injectionプラグインとその追加したコード)
2020/09/21 追記(「忘れる」になったページは、一括で再検証した時に、ある程度の確率で起こる)