Synology NASについてハード/ソフトの投稿
![[WordPress] WordPress Share Buttons プラグイン – AddThis](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/03/345CFBB2-9DB4-4374-98DC-5895E344EBC7.jpeg)
SNSへの投稿ボタンです。AMP対応では、このプラグインが安定しています。
標準のSNSボタンは、FaceBook, Twitter, e-mailおよび’+’ボタンです。
‘+’ボタンは、その他のSNSに投稿したい時に使用します。’+’を押すと、開発者のサイトに飛び、そこには多数のボタンがあるので、使用したい投稿を押します。例えばLINEもあるので、それを押すと、LINEへの投稿画面になります。
編集履歴 2020/03/08 はりきり(Mr) 2020/09/28 文言整備
![[WordPress] サイトのスピードを測る – EZOIC](https://harikiri.diskstation.me/myblog/wp-content/uploads/2021/05/636BEFBC-B32D-43DA-82DE-670E9BF37E8A.jpg)
サイトのスピード測定は、「GoogleのPageSpeed Insights」が有名ですが、以下のサイト(EZOIC)でも、サイトアドレスを入力して測るだけならFreeで測定できます。
このサイトは、WordPressの広告プラグイン「Advanced Ads」の有料版を購入したのですが、不具合の相談をしている過程で、そのスタッフさんから教えてもらいました。聴きなれない英語圏のサイトですが、変なサイトでは無いと思います。
試しに一度どうでしょうか?
以下のリンクは、スピードテストに直接行けます
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]](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/03/5193B984-721D-4591-B16D-B112E5F8FE14.jpeg)
当サイトでは、AMPプラグインで全てのコンテンツをAMP対応にしています。
以下は、Advanced Adsプラグインについて、導入後の使い方についてまとめました。
まだまだ、AMPとそれに対応しようとしているプラグインは完全に互換性があるものではないのですが、最近では、相性も良くなってきています。しかし、試行錯誤で設定を変更したりして動くようにしていることも多くあります。
Advanced Adsプラグインは、ドイツ製のAMP版のページにも対応した、広告表示プラグインです。
AMP (Accelerated Mobile Page)は、スマホなどのモバイルでの表示を高速化する技術です。サイトをAMPに対応させたあとは、AMP用の広告の対応も必要になってきます。
一般の運営者では、AMP対応広告コードを開発者と同じ様には書けません。
そこで、AMP対応の広告表示用プラグインとしてAdvanced Adsを導入します。
このAMPプラグインは、GoogleとAutomatticが開発し、途中、これらの企業の名前は薄れ、ボランティアで開発が進められているWordPressオフィシャルのプラグインです。
その他、AMPページにするプラグインは、以下の4つがあります。
Advanced Adsプラグインは、AMPページに対応しています。また、このプラグインがお勧めしているAMPプラグインは、前述のAMP by Automatticです。
AMPは、PCと比較して非力なデバイスであるスマフォやモバイルにおいて、レスポンス良く表示するための新しい技術です。
AMP対応とは、フルセットのJavaScriptが使用できなくなります。その影響で機能しなくなるコードがでてきます。JavaScriptは、表示関係に使用されることが多いので、表示ができるようなコードにするなどの連携が必要です。
その表示には、広告の表示も含まれます。Advanced Adsとの連携も必要ということです。
広告には、Google, Amazonなど代表的な広告ネットワークがありますが、Googleでは、AMP対応と非対応を選択てきます。
AMP対応にした場合は、AMP対応の広告の表示の仕方に従う必要があります。Advanced Adsは、AMPに対応しています。
Google Adsenseなどから送られてくる広告コードの配信元を広告ネットワークと言います。
Google Adsenseの設定でAMPを有効にすると、AMPに対応した広告コードを送ってくる(と思われる)ので、AMPページでは、その広告は、正しく表示されます。
もしも、AMPに対応していない普通の広告コードが広告ネットワークから送られてきたら、ほとんどの場合AMPページでは正しく表示できません。
今回、このサイトでは、広告を出すほどアクセス数がある訳ではありませんが、勉強がてら有料版のAll Accessを導入しました。
有料版では、Add-Onとして幾つかの追加機能を導入できます。現在、以下のプラグインを追加しています。
2020/03/03 テストに没頭しすぎて、オーナー・クリックをしたことで、現在、Googleから30日間のペナルティーをもらっているため、テストは中断しています。広告が表示されたり、されなかったりと、イライラして、表示されていないスペースを連打したことが、大きな原因であると反省!
2020/04/02 自動的に復帰されたので、セッティングを再開
以下、Add-Onの説明をする前に、前提条件として知っておきたい基礎知識と、Advanced Adsの関連機能について、マニュアル原本から概説としてまとめました。
Display ads on AMP pages
https://wpadvancedads.com/manual/ads-on-amp-pages/#utm_source=advanced-ads&utm_medium=link&utm_campaign=notice-amp
Goobleの広告技術であるdoubleclickの例
Advanced Adsの有料版では、Advanced Ads Proが使用できます。特徴について、原文の文書から以下にまとめました。
Advanced Ads Pro
https://wpadvancedads.com/add-ons/advanced-ads-pro/
有料版では、Sticky Adsを使用可能となります。
2020/04/11現在、インストールするとAMPで不適合が出て、AMPの評価が▲になる項目がある。Stickyは、重要でない機能であるため、インストールしない方が良い。
AMPバージョンのページにGoogle Adsenseを表示させるには、以下の項目の2つの項目にチェックします
Responsive Ads
https://wpadvancedads.com/add-ons/responsive-ads/
キャッシュされたWebサイトでブラウザー幅の訪問者条件を使用する場合、おそらくAdvanced Ads Proからのキャッシュ無効化が必要になります。
AdSenseレスポンシブ広告のカスタムサイズも、余分なキャッシュ無効化をしなくても機能します。
以下の手順で、「新しい広告」を作る。この広告は、このままでは、自動で表示されないので、「配置」により自動的な広告に設定する。
Advanced Adsのサイトの和訳から、内容を以下にまとめました。
AMPプラグインを更新したり、その他WordPressを構成していプラグインを更新した場合、AMPプラグインによる検証が古くなってしまいます。そのため、Google Adsense (広告)が表示されなくなる場合があります。
表示に関係するプラグインを更新した場合、毎回、以下の操作を実施する必要があります。
対応策は、図1のように、AMPプラグインから、「検証済みURL」を選択します。図2のように、①から④の手順により「最新でない結果」の「URL」を再検証します。この処理は、Google Adsense 関連の外部サイトとやり取りして、キャッシュを保管するため、1つのURLの処理時間は、~10秒程度かかるので、選択したURLに応じて時間を要します。
選択数は、表示できる数に依存するため、処理するURLが多い場合は、表示数を多く増やしてください。最大100の表示は可能です。100を表示させてから一括でURLのチェックボックスにチェックを入れて100のURLを選択できます。
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
「automatically convert to・・・」は選ばない、他の設定の広告との組み合わせで不具合があったり、表示されなかったりするため、「user responsive width and static height of [200]px」を選択する。
[200]の値は、もしも、広告が表示されず、空白スペースとなって、見苦しい場合がある。その場合、[10]などの小さい値にしておくと良い。
Browser Width
を選択して、横版の大きさを指定する。試行錯誤がが必要だったが、設定したあとは、cacheをフラッシュしてから、表示テストをすること。
以下の2つの広告を用意しておけば、iPhoneとiPadで、異なる広告を表示できる。しかし、挙動はトリッキーで、以下の値の設定で、うまく表示分けができたり、つぎの日にはできなくなっていたりと、まだ、安定させきれていないのが現状です。広告タイプとの組み合わせの問題もあると考えられる。
以下の設定値を使うことで、モバイル(iPhone 6 Plus同等)と、Desktop(iPad Pro 11, Surface Pro 6と同等)での画面の大きさ別に広告を表示させることができるようになります。
Fallback width
は、とりあえず、790、に設定
<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プラグインにお任せすることも良いが、テストするなど、明示的に広告を表示させる場合は、ページに受け込みます。
タイプの設定は、以下の図のように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より使用できなくなる)
![[WordPress] author-bio の幅設定 – CSS for TwentyTwenty [工事中] 2020/02/26]](https://harikiri.diskstation.me/myblog/wp-content/uploads/2021/04/1D3DD662-8755-453F-BB35-D35DDF461F9C.jpeg)
以下の記事の内容は、不十分です。
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]](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/02/0AADC961-0278-4A67-B770-47E920676DAD.jpeg)
当サイトのblogは、自宅のNASにWordPressを導入してblogを発信してしています。レンタルサーバーと比較して、サイトのレスポンスでは劣っていると思います。因みに、ネット環境は、1ギガです。これも大きな要因になっていると思われますが、WordPressのプラグインを適用して、最大限、サイトのレスポンス改善を検討しました。以下、レスポンスを改善し、それを維持したまま、Google AdSenseとAmazon Affiliateの広告を表示するための設定について解説します。
AMPは、Accelerated Mobile Pagesの略号で、携帯電話などのモバイルによるWebの閲覧を高速度化するGoogleが提唱する技術やルールです。
これまで、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
AMP対応の広告を自由な位置に挿入することができます。
当サイトでは、投稿ページのAMP化と広告プラグイン(Advanced Ads)の組み合わせで、素行錯誤を繰り返してサイト構築をしてきました。現在は、固定ページはAMPから外しています。最近のAMPプラグインのバージョンアップ(Ver.2)により、AMPのページを指定できるようになりましたのが理由です。
このプラグインの「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」タグに、以下のコードを入力しています。もしかすると、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をインストールした後は、全てのページの確認が行われて、AMP → Invalited URLsにAMP文法に合っていないリストが保存されます。
これらのリストの文書について、AMP非対応文書とするかAMP対応文書にするかを設定をしなければなりません。
赤のラインやアイコンが出ている文書(アラート)は、そのままでは、AMP対応ではないことを意味しています。
アラートがでている文書をクリックして、個別に設定します。
AMPプラグインのインストール後は、新しい投稿やページがAMPに対応しているか、編集を「更新」する都度行われ、プペファイルが作られる/更新されるようです。そのため、マシンパワーを結構使いますし、待ち時間が、これまで以上にかかります(20~30秒)。
Adminメニューを表示にしているなら、ページを表示してみると、トップメニューに以下のように表示されます
統合の更新を実行した時、画面のトップにフロート・メッセージがでなければ、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」(そのままにしておく)か、どちらかの処理を示されます。
AMPを有効にしたければ、3つの方法があります。
当サイトでは、写真やイメージ(メディア)を表示するプラグインを新しいプラグインに置き換えたのですが、以下の工夫で乗り切りました。
invalidのRemoved(除去)を選択して、Updateし、全てのシグナルをグリーンできれば、AMPが可能な状態になリマス。
以下では、AMP disabledになっている。そこで、Removedにする
Status -> AMP enagedがブルーとなりAMPが有効となると共に、「Update」ボタンが押せるようになる。
「Update」ボタンを押すと、その設定が反映され、「Update」ボタンが押せなくなる。
ページを表示させて表示具合、動作を確認する。
プラグインを新規導入したり、既存のプラグインの設定を変更したりすると、基本的に全てのページに影響が及びます。
影響が多数のページに及んだ場合は、一括操作をします。
個別のエラーが1つずつ表示されています。同様にして処理します。左上の設定を「削除」、「⬜︎エラー」にチェックを入れて、「適用」を実行します。
AMPを導入するまでは、速度アッププラグインやcache、画像の圧縮など多数のプラグインにより、PageSpeed Insights (PSI)のスコアは改善できたものの、40代に留まり、それ以上の改善は、同種のプラグインを変更しても達成できませんでした。
そこで、今回、AMPを導入することで、根本的な解決を試みました。
基本条件は、Autoptimizeプラグインを併用です。
その結果、PSIモバイル・スコアは、50から80, 90にも届くようになりました。広告を表示させたり、本文の量が多くなったりすると、実用的には、~70くらいです。
劇的です。
バカチョンのプラグインと比べると少しハードルが高いことは確かですが、スピードにお困りの場合は、ご検討の余地はあると思います。
追記(2020/05/29) : AMPとAutoptimizeとの併用効果については確認してみました。
| 広告コードの挿入方法 | ネイティブ | ペア | クラシック |
|---|---|---|---|
| Advanced Ads プラグイン（自動広告と広告ユニットの両方に対応） | ☑️ | ☑️ | ☑️ |
| Ad Inserter プラグイン（自動広告と広告ユニットの両方に対応） | ☑️ | ☑️ | ☑️ |
| Insert Headers and Footers プラグイン（自動広告のみ） | ☑️ | ☑️ | ☑️ |
| Genesis テーマ（自動広告のみ） | ☑️ | ☑️ | ❎ |
AMPもAdvanced Adsもバージョンアップが進み安定してきました。
ここで、方針を明確にすることにしました。以下の通りです。
以上の設定で、AMP対応の投稿ページは、UMプラグインによるメンバーシップによる隠れプロックの指定はできません。固定ページでは、逆にUMプラグインの恩恵を受けることができます。
AMPページでAdvanced Adsプラグインによる広告が表示されない場合があります。具体的には、Amazonの広告は表示されますが、Googleの自動設定の広告では、表示されないことがあります。すごくシビアに反応して広告の非表示となります。
対応策をいかに示しました。AMPプラグインの機能と、その運用に関連して、Googleの広告の非表示が起こるため、投稿ページの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プラグイン](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/02/AA3CCDD2-6915-4BFC-861D-814B5C7BF918.jpeg)
作りがシンプルで、直感的に使用できます。
AMP対応のためにAMPプラグインを使用していますが、AMP対応の処理をしてもAMP対応にならないページが、たまに出てきます。このようなファイルは、もう二度とAMP対応にはできません。
そなん時は、再度作り直します。そうすると、番号で管理してい投稿が空になります。空になった番号を、新しく作ったページの番号にリダイレクトしてやります。
編集履歴 2020/02/25 Mr.HARIKIRI
![[WordPress] Scroll Top – Next Previous Post Links – Back…プラグイン](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/EF36B77E-38E9-460C-809B-4F95A9D3CF30-1200x382.jpeg)
![[WordPress] Throws SPAM away プラグイン – 外国語のコメントを削除](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/02/9C749CE4-A876-4374-BBC8-B02B42793ED1.jpeg)
![[WordPress] Akismet Anti-Spam プラグイン](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/02/EB9E7140-432A-45E6-9883-4168C0A26307.jpeg)
![[WordPress] Translate WordPress](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/02/DCCF8DF5-D1B7-45C3-AE57-3A02CBBA7D57.jpeg)