タグ: Plugin

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

充実する広告表示機能を応用

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
- Pinterest
- Facebook,
操作方法

概略

先ず、広告を「プレーンテキストとコード」を選択して作り、配置を「Header」として作る。
1. Advanced Ads → 広告(Ads) → 新しい広告
  - 「タイトル」入力
  - 広告タイプを「プレーンテキストとコード」にする
  - 「次に」
  - 「広告パラメータ」にコードを挿入
  - 最低限、以上の設定で広告の作成を完了してします
2. Advanced Ads → 配置 → 配置の新規作成
  - 配置の種類を選択で、「</Head>」を選ぶ
  - 名前を入力
  - 広告又はグループを選択で、作成した広告を選択
  - 新しい配置を保存↩️
以上で、自動的にHeader部にコードが挿入されます。

応用

挿入したいコードが複数ある
1. 各コードに対応する広告の作成を作成
2. 各コードの広告をグループ化する
3. グループを「</head>」に配置として作成する
まとめ

<head>..</head>への挿入は、プラグインを使用すれば可能ですが、Advance Ads(有料版)を使用している場合は、そのような挿入プラグインを無効化して、Advance Adsにまとめることが可能です。それによって、サイトはシンプルになり、プラグイン同士のコンフリクトも少なくなり安定性も向上します。

以上

Advanced Ads – Ad Manager & AdSense

履歴

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

Advanced ads関連
2020年5月3日

The site post list displaying improved by additional coding to the code of “Flex Post” plugin -ID14897 [2020/06/16]

Post Views: 220

ID14897

ポストのリスト・プラグインをソースコードで修正

ページネーション(pagination)

記事のリストには，「Flex Posts」プラグインを使用しています．軽くて良いプラグインですが，ページネーションが機能しませんが(2020/04/29現在)，他のプラグインでも機能しないので，何かのプラグインが悪いか，相性が悪い可能性があります． 2020/06/07, その後、不要なプラグインの削除、Flex Postsの更新などがあったせいか、ページネーションは機能するようになりました。

Flex Posts plugin

Layout 1又はList-1の体裁が好みなのですが，featured imageが日本語表示ではバランス的に小さかったり，2カラムの投稿表示であるなど，好みでない部分がありました．

今回，プラグインのソースコードを一通り確認して，修正する箇所を特定して少しいじりました．CSSで間に合う部分は，CSSに追加しました．

1ライン(カラム)で1つの記事を表示するようにしました。

フォントの修正は，CSSに

/* Twenty Twenty Theme
Entry header is changed to transparent
*/
.singular .entry-header, .singular .featured-media:before,  .wp-block-pullquote:before {
    background-color: transparent;
}

/* FLEX POSTS plugin
 * image size of list-1
 * /plugin/flex-posts/public/css/flex-posts.cssを参照した
 * my customizing 2020/04/26
*/
.fp-thumbnail img.size-thumbnail {
width: 150px;
height: 150px;
}

プラグインのソースコードの修正

コード修正したファイル
- plugins\flex-posts\public\flex-posts-list-1.php
修正概要は，fp-row, fp-colをClassに追加したり，削除したりして，2カラムになって，1行が短いことを1カラムなるように修正．タイトルフォトをH4からH5に修正
プラグインのVersion upがあった際には，修正ファイルと置き換えるか，コードを見ながらNew Versionを修正する

修正済み(modified coed)

plugins\flex-posts\public\flex-posts-list-2.php

2020/06/16

フローチャート表示用に改造を開始
<center>⬇️</center>を配置

<?php
/**
 * Flex posts widget template: List 2
 *
 * @package Flex Posts
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

?>
<div class="fp-row fp-list-2 fp-flex">

	<?php while ( $query->have_posts() ) : ?>

		<?php $query->the_post(); ?>

		<div class="fp-col fp-post">
			<?php flex_posts_thumbnail( $medium_size, $instance, $query->current_post ); ?>

			<div class="fp-body">
				<?php if ( ! empty( $instance['show_categories'] ) ) : ?>
					<?php flex_posts_categories_meta(); ?>
				<?php endif; ?>

				<h4 class="fp-title">
					<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
					<center>⬇️</center>
				</h4>

				<div class="fp-meta">
					<?php flex_posts_meta( $instance ); ?>
				</div>

				<?php if ( ! empty( $instance['show_excerpt'] ) ) : ?>
					<div class="fp-excerpt"><?php flex_posts_excerpt( $excerpt_length ); ?></div>
				<?php endif; ?>

				<?php if ( ! empty( $instance['show_readmore'] ) ) : ?>
					<div class="fp-readmore">
						<a href="<?php the_permalink(); ?>" class="fp-readmore-link"><?php echo esc_html( $readmore_text ); ?></a>
					</div>
				<?php endif; ?>
			</div>
		</div>

	<?php endwhile; ?>

	<div class="fp-col"></div>
	<div class="fp-col"></div>

</div>

plugins\flex-posts\public\flex-posts-list-1.php

2020/06/16

Flex Posts – Widget and Gutenberg Block Version 1.60 to 1.70にupdateして、function flex_post_excerpt()が機能しなくなったため独自に修正とその他微調整。

オリジナルのflex_posts_excerpt()を削除し、the_excerpt()を配置
日付metaの位置をthumbnailの上に変更

<?php
/**
 * Flex posts widget template: List 1
 *
 * @package Flex Posts
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

?>
<div class="fp-list-1 fp-flex">

	<?php while ( $query->have_posts() ) : ?>

		<?php $query->the_post(); ?>

		<div class="fp-post">
			<div class="fp-meta">
				<?php flex_posts_meta( $instance ); ?>
			</div>

			<div class="fp-row fp-flex">
				<?php flex_posts_thumbnail( $thumbnail_size, $instance, $query->current_post ); ?>

				<div class="fp-body">
					<?php if ( ! empty( $instance['show_categories'] ) ) : ?>
						<?php flex_posts_categories_meta(); ?>
					<?php endif; ?>

					<h5 class="fp-title">
						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
					</h5>
			<?php if ( ! empty( $instance['show_excerpt'] ) ) : ?>
				<div class="fp-excerpt">
					<?php 
						// flex_posts_excerpt($excerpt_length );
						 the_excerpt(); 
					?>
				</div>
			<?php endif; ?>
				</div>
			</div>

			<?php if ( ! empty( $instance['show_readmore'] ) ) : ?>
				<div class="fp-readmore">
					<a href="<?php the_permalink(); ?>" class="fp-readmore-link"><?php echo esc_html( $readmore_text ); ?></a>
				</div>
			<?php endif; ?>
		</div>

	<?php endwhile; ?>

	<div class="fp-col"></div>
	<div class="fp-col"></div>

</div>

修正済み(modified coed)

2020/04/29

<?php
/**
 * Flex posts widget template: List 1
 *
 * @package Flex Posts
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

?>
<div class="fp-list-1 fp-flex">

	<?php while ( $query->have_posts() ) : ?>

		<?php $query->the_post(); ?>

		<div class="fp-post">
			<div class="fp-row fp-flex">
				<?php flex_posts_thumbnail( $thumbnail_size, $instance, $query->current_post ); ?>

				<div class="fp-body">
					<?php if ( ! empty( $instance['show_categories'] ) ) : ?>
						<?php flex_posts_categories_meta(); ?>
					<?php endif; ?>

					<h5 class="fp-title">
						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
					</h5>

					<div class="fp-meta">
						<?php flex_posts_meta( $instance ); ?>
					</div>
			<?php if ( ! empty( $instance['show_excerpt'] ) ) : ?>
				<div class="fp-excerpt"><?php flex_posts_excerpt( $excerpt_length ); ?></div>
			<?php endif; ?>
				</div>
			</div>

			<?php if ( ! empty( $instance['show_readmore'] ) ) : ?>
				<div class="fp-readmore">
					<a href="<?php the_permalink(); ?>" class="fp-readmore-link"><?php echo esc_html( $readmore_text ); ?></a>
				</div>
			<?php endif; ?>
		</div>

	<?php endwhile; ?>

	<div class="fp-col"></div>
	<div class="fp-col"></div>

</div>

修正前(before)

<?php
/**
 * Flex posts widget template: List 1
 *
 * @package Flex Posts
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

?>
<div class="fp-row fp-list-1 fp-flex">

	<?php while ( $query->have_posts() ) : ?>

		<?php $query->the_post(); ?>

		<div class="fp-col fp-post">
			<div class="fp-flex">
				<?php flex_posts_thumbnail( $thumbnail_size, $instance, $query->current_post ); ?>

				<div class="fp-body">
					<?php if ( ! empty( $instance['show_categories'] ) ) : ?>
						<?php flex_posts_categories_meta(); ?>
					<?php endif; ?>

					<h4 class="fp-title">
						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
					</h4>

					<div class="fp-meta">
						<?php flex_posts_meta( $instance ); ?>
					</div>
				</div>
			</div>

			<?php if ( ! empty( $instance['show_excerpt'] ) ) : ?>
				<div class="fp-excerpt"><?php flex_posts_excerpt( $excerpt_length ); ?></div>
			<?php endif; ?>

			<?php if ( ! empty( $instance['show_readmore'] ) ) : ?>
				<div class="fp-readmore">
					<a href="<?php the_permalink(); ?>" class="fp-readmore-link"><?php echo esc_html( $readmore_text ); ?></a>
				</div>
			<?php endif; ?>
		</div>

	<?php endwhile; ?>

	<div class="fp-col"></div>
	<div class="fp-col"></div>

</div>

編集履歴

2020/04/29 はりきり(Mr)
2020/06/07 追記 (ページネーション機能が正常になったこと)
2020/06/16 追記 (Flex Post Version 1.70でexcerpt非表示への対応、List-2の改造開始)

2020年4月29日

[WordPress] Contact Form 7 – 「お問い合わせ」フォーム・プラグイン
Post Views: 239

ID14858

問い合わせフォームをインストールする

問い合わせフォームをデザインするためのプラグインです。問い合わせにはメールを使用しますが、メールが届かない場合に唱えて、WordPress側でその問い合わせのメールの内容を保管するプラグインも同時にインストールするのが良いでしょう。
- Contact Form 7
- flamingo
reCAPTCHA V3に対応する「お問い合わせフォーム」として「Contact Form 7」を導入しました。

クリエイターは同じ方(TAKAYUKI MIYAKE-さん)です。

ある程度使ってみて継続する場合は、Donnateしないといけませんね。
- Contact Form 7 (コンタクトフォーム/メール送信)
- flamingo (メール送信内容のデーターベース保管)
Contact Form 7
- Ver. 5.1.7
- 項目がいろいろ用意されているので、それを使ってフォームを作ります。
- reCAPTCHA v3を設定します。
セキュリティも確保したいので、reCAPTCHA v3を導入しますが、「Ultimate Member」プラグインの専用reCAPTCHA(v2を適用しているので競合しないはず)と競合しないことを併せて確認します。

設定方法は以下のリンクにクリエイターさんのサイトがあります。

reCAPTCHA (v3)

プラグインの設定ページ

reCAPTCHA v3とは、Googleが「アクションタグ」というものを使って、アクセス状況を見張ってくれているようです。そのような言い回しはしませんが。

アクセスがどれくらい不審なのかスコアリングをしてくれて、自分の登録ページ(My reCAPTCHA)で、登録サイトのスコアを見ることができます。そのスコアリングに応じて、サイト管理者が対策をレベルに応じて打てることが売りのようです。また、不審なアクセスについて、登録しているアドレスにemailで知らせてくれるらしいです。今後、お世話になったら、その内容について追記していきます。

flamingo

Form 7には、問い合わせフォームをemailで送信する機能はありますが、保存機能がないので、Flamingoプラグインを導入します。

WordPressのデータベースに問い合わせの項目の全てが保存されます。メールの送信エラーがあってもデーターベースに保管されているので安心です。
- Ver. 2.1.1
- 問い合わせ内容が送信される際、その項目の全てをWordPressのデータベースに保存
参考

参考1

reCAPTCHA v3 – Googleより
https://webmaster-ja.googleblog.com/2018/10/introducing-recaptcha-v3-new-way-to.html

今後

Ultimate MemberとContact Form 7の導入により、問い合わせを頂いた方に、形としては、メーリングリストの配信も考えています。

何を配信するのかは、アイデアはないのですがね ^^;
```
編集履歴
2020/04/28 はりきり(Mr)
```
2020年4月28日
[WordPress] メンバーシップ・サイトを構築プラグイン – Ultimate Member プラグインの使い方をAMP対応とともに解説 – [2021/03/07]
Post Views: 775

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の紹介と運用)
```
2020年4月22日
[WordPress] Adminimize プラグイン — ログイン・ユーザー毎に表示するメニュー項目を選択的に非表示にできる

Post Views: 217

課題

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

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

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

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

adminimize

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

結果

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

編集履歴

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



2020年3月10日
[WordPress] WordPress Share Buttons プラグイン – AddThis
Post Views: 209
WordPress Share Buttons Plugin – AddThisプラグイン

AMP対応ページで動作安定

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

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

‘+’ボタンは、その他のSNSに投稿したい時に使用します。’+’を押すと、開発者のサイトに飛び、そこには多数のボタンがあるので、使用したい投稿を押します。例えばLINEもあるので、それを押すと、LINEへの投稿画面になります。
```
編集履歴
2020/03/08 はりきり(Mr)
2020/09/28 文言整備
```
2020年3月8日

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

Post Views: 289

はじめに

サイトの表示具合は、設定されている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 追記 (「はじめに」)

2020年3月1日

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

Post Views: 215

はじめに

当サイトでは、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の関連機能について、マニュアル原本から概説としてまとめました。

広告のタイプ
1. Googleが買収したdoubleclickの技術による広告(実質Google)
2. その他 (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以上の表示条件と訪問者条件
- 表示条件(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を一緒に使って広告を作成できる
  - AMP_document
- その他の設定
  - レイアウト/出力
  - 表示条件
    - カテゴリ
    - タグ
    - その他
  - 広告パラメータ
    - サイズ
    - 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」ライブラリ使用準備
- https://amp.dev/ja/documentation/components/amp-iframe/?format=websites
手順: 以下のコードを..に挿入する
- 「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より使用できなくなる)

Synology, WordPress

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

2020年5月3日

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

WordPress

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

2020年3月19日

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

Synology, WordPress

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

2020年3月1日

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

Synology, WordPress

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

2020年2月16日

Post Views: 227 はじめに広告に対するクリックは、ブログの評価であると思っています。ブログの評価のバロメータなのです。これを頼りにしてコンテンツ内容の充実化に励むことができます。この記事では、Googl…

2020年3月1日

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

Post Views: 450

はじめに

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

2020年2月26日

[WordPress] Redirectionプラグイン
Post Views: 263

Redirection プラグイン

機能

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

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

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

関連記事

WordPress
[WordPress : 検証終了] – Simple WordPress Membership – メンバーシッププラグインをAMPに搭載できるか!? – メンバーのレベルに応じた閲覧制限をページに設ける [2021/05/15]

2021年2月28日

Post Views: 319 ID22131 Simple WordPress Membership Simple WordPress Membershipプラグインは、Ultimate Memberプラグインのように…

Read more

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

2020年12月23日

Post Views: 301 はじめに当サイトを立ち上げた頃には、もっぱらpluginの追加をすることで、サイトの機能向上に重きを置いたサイト構築を進めていました。ところが、いつもお世話になっている「ホームネットワー…

Read more

WordPress
[WordPress] Widget Logic プラグイン [2020/12/17]

2020年12月17日

Post Views: 262 Widget Logicプラグイン 2020/12現在、updateがされておらず、WordPress の最新Version ではテストされていますせんが、おそらく、複雑なコードになってい…

Read more

Synology
[WordPress] 高速化プラグイン「AMP」と定期的に全てのページの静的キャッシュ作成プラグイン-「WP Super Cache」で再構成した [2021/11/05]

2020年11月7日

Post Views: 308 ID22640 はじめにこのblogは、レンタル・サーバーではなくSynology NASを使っています。やはり、性能的にはレンタル・サーバーに勝てません。そこで、自宅のNASを使ったb…

Read more

Page: Previous « 1 2 3 4 … 21 Next »
```
編集履歴
2020/02/25 Mr.HARIKIRI
```
2020年2月25日

タグ: Plugin

充実する広告表示機能を応用

Header/Footerにコードをどのように挿入するか

プレーンテキストとコード広告の作り方

操作方法

概略

応用

挿入したいコードが複数ある

まとめ

履歴

Advanced ads関連

ポストのリスト・プラグインをソースコードで修正

ページネーション(pagination)

Flex Posts plugin

フォントの修正は，CSSに

プラグインのソースコードの修正

修正済み(modified coed)

修正済み(modified coed)

修正前(before)

編集履歴

問い合わせフォームをインストールする

Contact Form 7

flamingo

参考

参考1

今後

はじめに

使い勝手は? とヒヤカシ

Ultimate Memberと専用のreCAPTCHAの説明

Ultimate Member

大まかな機能

専用のreCAPTCHAの注意点)

対策の概要

reCAPTHC同士のコンフリクトと対策

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

UMのlogin画面ではログインできなくなる

WordPress標準のlogin画面の復旧

まとめ

Ultimate Memberプラグインの既存の専用ページ

用途

権限グループの設定により、見せる/見せないを設定

UM access Controls -> Restrict access?

どのように表示/非表示させるかの設定

システムの構成

システム構成

Synology NAS

WordPress

アクセス設定の方法

ブロックの制限(restrict)の仕方

ページ全体に制限(restrict)をかける

ページ内の一部のブロックのみに制限(restrict)をかける

ユーザー登録の流れ

まとめ

関連記事

編集履歴

課題

結果

編集履歴

WordPress Share Buttons Plugin – AddThisプラグイン

AMP対応ページで動作安定

はじめに

自作プラグイン

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

functions.php

my-plugin.php

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

functions.php

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

完成した – content.php

Font-weight

編集履歴

関連記事(WordPress, Tag:customize)

はじめに

広告プラグインの導入目的

Advanced Adsの機能

AMPとは

AMP プラグイン

AMP対応広告プラグイン

Advanced Adsプラグイン

AMPとAdvanced Adsの連携状態がキー