Google Adsense AMP自動広告の簡単な設定方法

Google Adsense AMP自動広告の簡単な設定方法

 

今回もGoogle Adsense 関連の話です。
前回は「Google Adsense 自動広告の簡単な設定方法」をご紹介しました。

このページをご覧になっておられる方は、すでにAMPやGoogle Adsense については一通りの知識を持っていると思いますが、AMP について少しだけご説明します。

 

AMP とは?

AMPは「Accelerated Mobile Pages」という、Googleが推進しているモバイルページを高速に表示させるための手法のことで、AMP を導入することでスマートフォンに高速表示を行えます。
そのことからスマートフォンで Google 検索(yahooもGoogleエンジンを使っています)を行うと、AMP 対応したページの優先順位が上がります。
本Webサイトも AMP 対応しています。

AMP 対応で検索表示順位が上がることは良いのですが、デメリットもあります。
AMP は高速化を行うために独自仕様に沿ってコーディングを行う必要があります。
WordPressの場合はプラグインでかなりの部分を自動対応してくれるので助かります。

で、プラグインの自動処理で作られたAMP用HTMLファイル等は、既存のGoogle Adsense 広告が入らない仕組みになっています。
そのうち自動で入るようになるかも知れませんが、少なくとも現在では広告が入りません。

ノーマルページとAMP ページは個別に広告を入れる必要があります。
前回はノーマルページに手間をかけずにGoogle Adsense 広告が表示される、簡単な設定方法を紹介しました。
今回は AMP ページに手間をかけずにGoogle Adsense 広告が表示される、簡単な設定方法を紹介します。

ちなみに既に Google Adsense にWebサイト登録を行っていると思いますが、登録していないようなら登録しておいてください。

 

Google Adsense AMP 自動広告とは?

まず、Google Adsense 自動広告とは、スクリプトと広告用のクライアントコードの2つを設置するだけで、後はGoogle にお任せで見ている方に合わせた広告が表示される仕組みの広告です。

自動広告機能がリリースされる以前は、プラグインを使うにしろ、自分でコードを設置するにしろ、面倒な手順を踏む必要がありました。
素人にはかなり難易度の高く、煩雑な作業でした。

自動広告ができるようになって、非常に楽にGoogle Adsense が利用できるので、気楽に試すことが出来るようになっています。

AMP 自動広告はAMP 用の自動広告を表示するためのものです。
AMP 対応ページには、AMP 自動広告を設定することで見ている方に合わせた広告が表示されるようになります。

 

AMP 自動広告の簡単な設定方法

簡単と書きましたが、子テーマは使います。
子テーマの設定は WordPress の基本ですので、是非ともこの際に利用してみてください。

ちなみに、私も以前子テーマの設定方法をご紹介しているので参考にしてくだい。
WordPress TwentySeventeenの子テーマの作り方
WordPress TwentyEleven の 子テーマ の作り方

 

自動広告の簡単な設定方法は、functions.php に下のコードを貼り付けるだけです。

//headにamp-auto-ads-JSを挿入する
add_action( 'amp_post_template_head', 'my_amp_add_tag_adsense_js' );
function my_amp_add_tag_adsense_js() {
?>
<!-- amp-auto-ads-JS -->
    <script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>
<?php
}
//フッターにAMP自動広告コードを挿入する
add_action( 'amp_post_template_footer', 'my_amp_add_tag_adsense' );
function my_amp_add_tag_adsense() {
?>
<!-- AMP自動広告 -->
    <amp-auto-ads type="adsense"
        data-ad-client="ca-pub-xxxxxxxxxxxxxxxx">
    </amp-auto-ads>
<?php
}

 

AMP 自動広告の簡単な設定の解説

//headにamp-auto-ads-JSを挿入する
add_action( ‘amp_post_template_head’, ‘my_amp_add_tag_adsense_js’ );
WordPress の AMP head 部の処理イベント時(’amp_post_template_head)に、my_amp_add_tag_adsense_js と言う関数の実行を設定
「このスクリプトをコピーして、AMP HTML の head タグ内に貼り付けます」とありますので head 部に挿入します。

function my_amp_add_tag_adsense_js () {
?>
<script
・・・・
</script>
<?php }

 my_amp_add_tag_adsense_js関数の設定。中身はGoogle Adsense から取得したコードをそのまま貼り付けます。

//フッターにAMP自動広告コードを挿入する
add_action( ‘amp_post_template_footer’, ‘my_amp_add_tag_adsense’ );
WordPress の AMP footer 部の処理イベント時(’amp_post_template_footer)に、my_amp_add_tag_adsenseと言う関数の実行を設定
「この広告コードをコピーして、AMP HTML の本文に貼り付けます」とありますので footer 部の後ろに挿入しました。
本文内ならどこでも良いのですが、footer 部の後ろに挿入が簡単なのでそうしました。

function my_amp_add_tag_adsense () {
?>
<script
・・・・
</script>
<?php }

 my_amp_add_tag_adsense関数の設定。中身はGoogle Adsense から取得したコードをそのまま貼り付けます。

Google Adsense からコードを取得する

amp-auto-ads-JSコードを取得する
Google Adsense を開き、[コンテンツ]>[自動広告]>[AMP自動広告]>[手順2]をクリックします。
コードが表示されますのでコードをコピーします。
Google Adsense AMP 自動広告 手順2
AMP自動広告コードを取得する
Google Adsense を開き、[コンテンツ]>[自動広告]>[AMP自動広告]>[手順3]をクリックします。
コードが表示されますのでコードをコピーします
Google Adsense AMP 自動広告 手順3

最後に

手順 1: テキスト広告とディスプレイ広告のフォーマットをオンにします
通常、AMP 自動広告をオンにして、スクリプトとコードを追加してから 20 分後に広告が表示されます

Google Adsense AMP 自動広告 手順1

AMP の設定と Google Adsense 自動広告の簡単な設定方法が設置できていれば、数分で完了する作業です。
広告の表示はすぐには確認できませんが、AMP テストで正しくコードが挿入されているかをソース表示で確認できます。

ちなみに広告表示する価値もないページは表示されないと聞いたこともあります。。。

以上、「Google Adsense AMP自動広告の簡単な設定方法」のご紹介でした。

Google Adsense 自動広告の簡単な設定方法

Google Adsense 自動広告の簡単な設定方法

今回はGoogle Adsense 関連の話です。
自分のブログを持っているのなら、そして多少なりとも訪問者が来てくれるのなら、お小遣い稼ぎにGoogle Adsense をやってみたいですね?

ちなみにGoogle Adsense は事前にWebサイト登録を行っておく必要があります。
ちゃんとしたブログを持っていれば、Webサイトの登録は難しくないと思います。
Webサイトの登録申請を行うと Google による審査が行われます。ちゃんとWebサイトを運営していれば怖がることはないです。
Google Adsense への登録はひとまず済んだことにして次に進みます。

Google Adsense 自動広告とは?

Google Adsense 自動広告とは、スクリプトと広告用のクライアントコードの2つを設置するだけで、後はGoogle にお任せで広告が表示される仕組みの広告です。

自動広告機能がリリースされる以前は、プラグインを使うにしろ、自分でコードを設置するにしろ、面倒な手順を踏む必要がありました。
素人にはかなり難易度の高く、煩雑な作業でした。

自動広告ができるようになって、非常に楽にGoogle Adsense が利用できるので、気楽に試すことが出来るようになっています。

自動広告の簡単な設定方法

簡単と書きましたが、子テーマは使っていますか?
子テーマの設定は WordPress の基本ですので、是非ともこの際に利用してみてください。

ちなみに、私も以前子テーマの設定方法をご紹介しているので参考にしてくだい。
WordPress TwentySeventeenの子テーマの作り方
WordPress TwentyEleven の 子テーマ の作り方

自動広告の簡単な設定方法は、functions.php に下のコードを貼り付けるだけです。

//Google Adsense 自動広告設定
add_action('wp_head', 'my_auto_adsense');
function my_auto_adsense() {
?>
<!-- サイトに自動広告を設定 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({
        google_ad_client: "ca-pub-xxxxxxxxxxxxxxxx",
        enable_page_level_ads: true
    });
</script>
<?php }

自動広告の簡単な設定の解説

add_action(‘wp_head’, ‘my_auto_adsense’);
WordPress の head 部の処理イベント時(wp_head)に、my_auto_adsense と言う関数の実行を設定しています。

function my_auto_adsense() {
?>
<script
・・・・
</script>
<?php }

my_auto_adsense関数の設定しています。中身はGoogle Adsense から取得したコードをそのまま貼り付けます。

Google Adsense からコードを取得する

Google Adsense を開き、[コンテンツ]>[自動広告]>[自動広告]>[自動広告を設定]をクリックします。

Google Adsense 自動広告のコード取得

Google Adsense 自動広告のコード取得

「サイトに自動広告を設定」画面が開きますのでコードをコピーします。

Google Adsense 自動広告のコード

Google Adsense 自動広告のコード

最後に

子テーマを作る作業は少し分かりづらいかもしれません。
しかし子テーマはテーマのメンテナンスに欠かせない機能なので是非とも設定しておきましょう。

Google Adsense への登録も最近は厳しいと聞くこともありますが、ちゃんとしたWebサイトを運営していれば大丈夫です。
もし審査に通らなければ、コンテンツ内容が規約違反に当たっていないか確認し、良質なコンテンツを多く書き再チャレンジしましょう。

Google Adsense の自動広告は決して難しいものではありません。
お小遣いを稼ぎましょう。

以上、「Google Adsense 自動広告の簡単な設定方法」のご紹介でした。

テーマ Twenty Eleven の投稿ページにサイドバーを付ける

テーマ Twenty Eleven の投稿ページにサイドバーを付ける


少し前に「テーマ Twenty Eleven の投稿ページにサイドバーを付ける」を投稿したので、ここは投稿ページにもサイドバーを付けてみようかと思い調査しました。
投稿ページは、固定ページみたいに簡単に付きませんでした。
が、ググってみると簡単にできますというWebサイトを見つけたので参考にしながら試行錯誤して付けてみました。
ちなみに、ググって見つけたWebサイトのやり方では表示されるのですが、下に付く形で表示されてしまい「なんだかぁ~」って感じになってました。

テーマ Twenty Eleven の投稿ページにサイドバーを付ける方法

試行錯誤で試しながら付けたため、どのWebサイトでも正常に表示されるか保証はできません。
でも、テーマ Twenty Eleven を使っているなら、たぶん正常に表示されると思います。

single page の css を変更する

「 Twenty Eleven Child w/ Sidebar Support 」と言う、Twenty Eleven の子テーマを見つけて参考にしました。
下のようにマージンや表示幅を変更します。
私の場合は、既に子テーマを作ってしまっていたため、自分の子テーマの style.css に追加する形をとりました。


/* Singular */
.singular #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
.singular #content,
.left-sidebar.singular #content {
margin: 0 34% 0 2%;
width: 64%;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
margin: 0 auto;
width: 100%;
}

single.php にサイドバー表示を追加する

私の場合は、子テーマに single.php が入って居なかったため、子テーマディレクトリに single.php をコピーしました。
FTPで Twenty Eleven の single.php をローカルにダウンロードして、子テーマにアップロードしました。

その後、サイドバー呼び出す関数 php get_sidebar() を下のように追加しました。
修正前:


			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

修正後:


			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

この作業までだと、サイドバーは表示されるのですが、正常な位置・表示して欲しい位置に表示されません。
パソコン表示では、本文の下に表示されるような形になってしまいました。

body要素に「 singler 」クラスを追加するフィルタを削除します


/**
 * Add two classes to the array of body classes.
 *
 * The first is if the site has only had one author with published posts.
 * The second is if a singular post being displayed
 *
 * @since Twenty Eleven 1.0
 *
 * @param array $classes Existing body classes.
 * @return array The filtered array of body classes.
 */
function twentyeleven_body_classes( $classes ) {

	if ( function_exists( 'is_multi_author' ) && ! is_multi_author() )
		$classes[] = 'single-author';

	if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) )
		$classes[] = 'singular';

	return $classes;
}
add_filter( 'body_class', 'twentyeleven_body_classes' );

Twenty Eleven は、上のようにbody要素に「 singler 」クラスを追加するフィルタを追加しています。
子テーマの functions.php は、親テーマの機能を上書きできません。
親の functions.php に追加する形が一般的です。
と言うか、親テーマのファイルの 直前 に読み込まれるので上書きは無理ですし、エラーになります。

そこで、親テーマがフィルタを追加した後に、削除する方法を取ります。


add_action( 'after_setup_theme', 'my_child_theme_setup' );
function my_child_theme_setup() {
	remove_filter( 'body_class', 'twentyeleven_body_classes' );
}

これで、singlerクラスが body 要素に追加されるフィルタを削除できます。

まとめ

・single page の css を変更する
・single.php にサイドバー表示(get_sidebar())を追加する
・function.php に singler クラスを追加するフィルタを削除する関数を追加する

3つの作業で、テーマ Twenty Eleven の投稿ページにサイドバーが表示されるようになります。

以上、「テーマ Twenty Eleven の投稿ページにサイドバーを付ける」でした。

テーマ Twenty Eleven の固定ページにサイドバーを付ける

テーマ Twenty Eleven の固定ページにサイドバーを付ける

Twenty Eleven をお気に入りで使っていますが、「固定ページにもサイドバーを付けられたらな」と思っていました。
今までは簡単にできないのだろうと諦めモードに済ませていたのですが(調べて対応するのが面倒だったので。。。^^;)。

テーマ Twenty Eleven の固定ページにサイドバーを付ける方法

先日ふと、固定ページの表示位置を見直そうと思い確認していたところ、「固定ページの属性」の「テンプレート」に[ Sidebar Template ]を見つけました。
下の図の真ん中の「テンプレート」です。

固定ページにサイドバーを付ける「固定ページの属性」

固定ページにサイドバーを付ける「固定ページの属性」


早速、[ Sidebar Template ]に更新をしたところ、無事に表示されるようになりました。

以上、「テーマ Twenty Eleven の固定ページにサイドバーを付ける」でした。

WordPressのSSL化

WordPressのSSL化

ブログも今や常時SSL をすることが望まれる時代になってきました。
Google社はSSLで保護されているWebサイトかどうかを検索順位を付ける際の要素とすると言っていますし。
また、WordPress環境を提供してくれるレンタルサーバー会社も無料のSSLを提供してくれるなど、常時SSL化の流れができているようです。

WordPressのSSL化の方法

WordPressをSSL化は、以下の手順で行います。
1)SSLサーバー証明書の入手/設定
2)WordPrssでの設定

SSL証明書の入手/設定

まずは、SSL証明書を入手する必要があります。
現在は、無料のものもありますし、もちろん有料のものもあります。

一方、最近はWordPress環境を提供してくれるレンタルサーバー会社も無料のSSLを提供してくれるところがあります。
私が使用している、IXWebHosting + StarDomain の組み合わせでもSSL化できます。
また、最近契約した StarServer では、ボタンクリックのみでSSLの環境を提供してくれます。
StarServer では、StarDomain 契約で StarServer で DNS を管理している場合にのみですが、SSL証明書入手して、そのままWebサーバーに設定するまでの作業を自動で行ってくれます。

自分の環境に合わせ、SSL証明書を手に入れ、Webサーバーに設定します。

参考までに StarDomain での「Let’s Encryptで無料のSSLを取得する」を紹介しておきます。
また、「IX Web Hosting SSLを設定する(初回設定)」も合わせて紹介しておきます。

WordPrssでの設定

プラグインでの設定が一番間違いないと思います。
お勧めのプラグインは Really Simple SSL です。
Really Simple SSL は、設定なしでサイトを SSL 対応にする軽量プラグインです。
※2018-05-11追記
Search Console Accelerated Mobile Pages に『ページにユーザー作成の JavaScript がある(重大な問題)ページからカスタム JavaScript のコードをすべて削除してください。AMP ページにカスタム JavaScript があると、Google 検索結果に AMP 固有の表示機能が表示されないことがあります。 詳細』と以下のような通達が来ました。

重大な問題のある AMP ページ

重大な問題のある AMP ページ


Really Simple SSL は設定によってJavaScriptを出力します。他のサイトでも Really Simple SSL を使用しているのですがこの警告?通達?通告?は出ていないので Really Simple SSL が悪さをしているとは限りませんが、他のプラグインでJavaScript を出力するものは無いので。。。
そのうち改修されるかも知れませんが、私は Really Simple SSL を使うのを止めました。
※2018-05-11追記終了

その他のお手軽な方法は.htaccessを使う方法があります。
httpからhttpsへの301リダイレクトさせます。
リダイレクトの設定は.htaccessに以下のように追加します。

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://(ドメイン名)/$1 [R=301,L]

もしくは、

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

その後、WordPressの設定→一般のWordPress アドレス (URL)とサイトアドレス (URL)を Https に書き換えます。
また、内部で参照している画像等を http → https にしないと「保護されていません」とか「i」表示とかになり、「保護された通信」となりません。
チェックの仕方はありますがかなり面倒かと。。。
チェックの仕方は Google chrome の場合は、「F12」を押し、「console」を見るとエラーや警告が色づけされ表示されます。
一枚を直すのは苦じゃないですが大量にあると苦行になります。。。

Really Simple SSL の設定方法

プラグインの新規追加から Really Simple SSL を検索し、インストールします。

WordPressSSL化-Really Smiple SSLインストール

WordPressSSL化-Really Smiple SSLインストール

インストール後、有効にするボタンをクリックします。

WordPressSSL化-Really Smiple SSL有効化

WordPressSSL化-Really Smiple SSL有効化

すると、以下のような確認メッセージとともに表示されますので、

Really Simple SSL - SSLを化有効にする

Really Simple SSL – SSLを化有効にする

「はい、SSLを有効化します」ボタンをクリックします。

以上でSSL化が有効化され、かつ http から https への 301リダイレクト されるそうです。

また、上の.htaccess で行った時と決定的に違うのが、内部で参照している画像等を http → https に自動で行ってくれるので修正する必要がありません。
非常に便利です。

念のため、WordPressの設定→一般のWordPress アドレス (URL)とサイトアドレス (URL)を Https に書き換えましょう。

以上、WordPressのSSL化の紹介でした。

ユーザー情報の変更

ユーザー情報の変更をする

WordPress のインストールをしたらまずやることに、「ユーザー情報の変更」があります。
インストール直後は、初期ユーザーのままなので、WordPressに表示される名前も初期ユーザーアカウントになります。
セキュリティ上からも良くないので、初期ユーザーのアカウント情報を編集します。

ユーザー情報の変更

左のメニューの「ユーザー」⇒「あなたのプロフィール」をクリックします。

WordPress ユーザー情報の変更する

WordPress ユーザー情報の変更する

「プロフィール」画面が開きます。

名前やニックネーム、メールアドレスの編集

WordPress 名前やニックネームを変更する

WordPress 名前やニックネームを変更する

ニックネーム

いろいろな項目がありますが、まずはニックネームを編集します。
ニックネームはデフォルトでユーザー名が表示されているので、異なる名称を登録します。
ユーザー名はログイン時にも使用されますので、セキュリティ対策としても隠しておいた方が無難です。

ブログ上の表示名

次にブログ上の表示名として先ほど変更したニックネームを選択します。
ブログ上の表示名は、著者名やコメント投稿者として公開されます。
ブログ上の表示名で選択した名称が WordPress に表示されることになります。

メールアドレス

メールアドレスは、WordPress にログイン出来ないときに使用される重要な情報です。
確実に使用できるアドレスが確認しておきましょう。
WordPressにログインできない 時のパスワードの変更(1)

以上、WordPress のインストールをしたらまず、「ユーザー情報の変更」をしましょうでした。

ワードプレスで固定ページの並ぶ順番を変える方法

ワードプレスで固定ページの並ぶ順番を変える方法

固定ページの並ぶ順番は変更可能です。
ダッシュボードの【固定ページ】⇒【固定ページ一覧】を選択し、固定ページ一覧を表示させ、その中のページ属性で変更します。

固定ページ一覧に進むと現在の固定ページが表示されているので、【編集】をクリックします。

pagezokusei

順序に入力する数字で並ぶ順番が変わります。
大きな数字ほど右側に並びます。

その後、更新を行うと固定ページの並ぶ順番が変わります。

WordPress 作成者を表示・非表示・変更する

WordPress 作成者を表示・非表示・変更する

WordPress 作成者とは

WordPressの作成者とは、投稿記事を書いた人をさします。
複数人で投稿記事を書く場合には誰が投稿したか分かるようにしたいとか、一人でも作成者情報を表示してアピールしたいとか、そんな感じの時に表示します。
選んだテーマによってデフォルト設定が表示であったり非表示であるかもしれませんが、設定ができるはずです。
私のテーマはTwenty Fifteenですが非表示になっていました(と思います)。

WordPress 作成者の表示・非表示設定

投稿記事を編集する画面の右上に「表示オプション」と言うものが有ります。
クリックして開くと表示できる項目が表示されます。
その中に作成者という項目が有るので、右にあるチェックボックスのON・OFFで表示非表示が選択できます。

WordPress 作成者の表示名を変えたい

WordPress 作成者の表示名を変えることもできます。
上の「表示オプション」の「作成者」表示ONで、今度は左下に作成者のリストボックスが表示されますので、そこから選択可能です。
また、ここで選択できる名前(ニックネーム)は「ダッシュボード」>「ユーザー」>「ユーザー一覧」からユーザを選択してニックネームを編集することでIDではなくニックネームも選択できるようになります。

作成者のプロフィールを表示する

作成者だけでなく折角なら作成者のプロフィールもの載せてアピールしたい場合も有ります。
その時にはニックネームの編集のすぐ下に作成者のプロフィールを編集できるテキストボックスが有りますのでそこにプロフィールを書き込みます。
私の選んだテーマTwenty Fifteenでは、プロフィールを書くと単一記事を表示したときに記事の下にプロフィールも表示されるようになりました。

「Just another WordPress site」を変更したい

Webサイトのタイトルを見たら下にJust another WordPress siteって出てました。この「Wordpressでブログ」には関係のない言葉だから変えたいと思います。

「Just another WordPress site」を変更したい

出来立てのページを見たら、「Just another WordPress site」って出てました。
こんなの文書どこかで書いたかな?と思いつつ設定を見直すことに。
ググってみると修正方法が簡単に出てきました。
設定>一般
一般設定画面のキャッチフレーズにJust another WordPress siteって書かれていました。
「Wordpressを使いこなそう」ってたいそうな文言に、早速修正しました^^
あくまでも願望ね、願望。。。

ちなみに、Just another WordPress siteで検索するとそのまま残ったWebサイトも存在してますね。キャッチフレーズってSEO的にはどうなんでしょうね?とりあえず、ブログのキャッチフレーズに変えた方が明らかに良いので変えましょう。

これってWordpressのデフォルトのキャッチフレーズだったんですね。
Just another WordPress siteって、どういうニュアンスの言葉なんだろう?