カテゴリー: Synology

Synology NASについてハード/ソフトの投稿

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

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

    WordPress Share Buttons Plugin – AddThisプラグイン

    AMP対応ページで動作安定

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

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

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

    編集履歴
    2020/03/08 はりきり(Mr)
    2020/09/28 文言整備
  • [WordPress] サイトのスピードを測る – EZOIC

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

    サイトのスピード

    サイトのスピード測定は、「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] AMPページ対応の広告プラグイン – Advanced Ads Pro (有料版) – 導入と運用   [2020/12/10]

    [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つがあります。

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

    Post Views: 333 充実する広告表示機能を応用 Advanced Adsプラグインは、Google Adsenseの対応に注力しているドイツ製のプラグインです。 今回は、Advanced Adsのホームページ…
    Post Views: 223 はじめに blogを始めてからしばらくすると、広告を載せてみたくなります。それはblogするための張り合いであり、自分のblogの評価の結果であるため、誰しも興味があるはずです。当サイトで…
    Post Views: 215 はじめに 当サイトでは、AMPプラグインで全てのコンテンツをAMP対応にしています。 以下は、Advanced Adsプラグインについて、導入後の使い方についてまとめました。 まだまだ、A…
    Post Views: 227 はじめに 広告に対するクリックは、ブログの評価であると思っています。ブログの評価のバロメータなのです。これを頼りにしてコンテンツ内容の充実化に励むことができます。 この記事では、Googl…
  • [WordPress] author-bio の幅設定 – CSS for TwentyTwenty [工事中] 2020/02/26]

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

    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]

    はじめに

    当サイトの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 追記(「忘れる」になったページは、一括で再検証した時に、ある程度の確率で起こる)
  • [WordPress] Redirectionプラグイン

    [WordPress] Redirectionプラグイン

    Redirection プラグイン

    機能

    作りがシンプルで、直感的に使用できます。

    AMP対応のためにAMPプラグインを使用していますが、AMP対応の処理をしてもAMP対応にならないページが、たまに出てきます。このようなファイルは、もう二度とAMP対応にはできません。

    そなん時は、再度作り直します。そうすると、番号で管理してい投稿が空になります。空になった番号を、新しく作ったページの番号にリダイレクトしてやります。

    関連記事

    Post Views: 333 充実する広告表示機能を応用 Advanced Adsプラグインは、Google Adsenseの対応に注力しているドイツ製のプラグインです。 今回は、Advanced Adsのホームページ…
    Post Views: 220 ID14897 ポストのリスト・プラグインをソースコードで修正 ページネーション(pagination) 記事のリストには,「Flex Posts」プラグインを使用しています.軽くて良いプ…
    Post Views: 239 ID14858 問い合わせフォームをインストールする 問い合わせフォームをデザインするためのプラグインです。問い合わせにはメールを使用しますが、メールが届かない場合に唱えて、WordPre…
    Post Views: 775 ID14027 はじめに 当サイトは、試験的及び備忘記録として記録した内容は非表示にするために、Ultimate Memberプラグインを試験的に導入しています。 よろしければ、「いたずら…
    Page: 1 5 6 7 21
    編集履歴
    2020/02/25 Mr.HARIKIRI
  • [WordPress] Scroll Top – Next Previous Post Links – Back…プラグイン

    [WordPress] Scroll Top – Next Previous Post Links – Back…プラグイン

    Scroll Top – Next Previous Post Links – Back… プラグイン

    機能

    投稿やページが長文になるとトップに戻りたいときや、逆にボトム以降のフッターを見たい時に使用できます。

    この手のプラグインの大半は、ボトムへのボタンを提供していません。

    このプラグインの特徴は、トップは勿論、ボトムへのボタンがあることです。

    PageSpeed Insightsによる速度スコアが5~10程度低下します。

    編集履歴
    2020/02/25 Mr.HARIKIRI
  • [WordPress] Throws SPAM away プラグイン – 外国語のコメントを削除

    [WordPress] Throws SPAM away プラグイン – 外国語のコメントを削除

    機能

    Ultimate Memberと専用のreCaptchaを使うと、コメント用にreCaptchaは、コンフリクトするため併用できません。

    そこで、Throws SPAM awayの登場です。コメントに日本が含まれていないと、そのコメントを捨てるプラグインです。このプラグインを使う場合、日本語以外でコメントする場合も考えて、英語で、「日本語のタイトルをコピペして下さい」と注意書きを載せています。

    Throws SPAM away

    編集履歴
    2020/02/25 Mr.HARIKIRI
  • [WordPress] Akismet Anti-Spam プラグイン

    [WordPress] Akismet Anti-Spam プラグイン

    Akismet Anti-Spam プラグイン

    機能

    Akismet Anti-Spamは良いプラグインみたいですが、導入していません。有料版(約600円/月)しかないようで、未だ身の丈に合っていないためです。

    データベースを使うウイルスバスターのようにSpam判断をしているようです。

    編集履歴
    2020/02/25 Mr.HARIKIRI
  • [WordPress] Translate WordPress

    [WordPress] Translate WordPress

    Translate WordPress プラグイン

    2024年現在、ウェブブラウザに翻訳機能が装備されているのでこのような翻訳プラグインはもはや必要ありません

    機能

    Translate WordPressプラグインでは、ページをボタン1つで英語(選択可能)に変換します。日本語もボタンに割り付けていれば、同じボタンで日本語に戻せます。

    ながらに英語を勉強したい方には、身近で実践できるプラグインです。

    AMPプラグインとの併用はできません。

    編集履歴
    2020/02/25 Mr.HARIKIRI