WordPress

WordPressサイトの本文中にAdSense広告を簡単に挿入する方法(中央配置)

google-adsense-logo

今回は、WordPressサイトの本文中に、GoogleAdSenseなどの広告を簡単に挿入する方法を紹介したいと思います。

コンテンツ中に広告を配置するとクリック率が良くなる、と言われますが、いくらそう言われても、毎回メモ帳などから本文中に広告コードをコピペするって結構しんどい作業だと思います。

今回紹介する方法では、そんな広告の表示を、ショートコードとプラグインの力を借りて、1クリックのみで出来るようにカスタマイズしていきます。

また、そのまま広告コードを使ってしまうと、広告が左寄せされてしまいますが、これについても簡単なCSSで中央寄せします。一度登録しておくと便利になるので、良かったら参考にして下さい。

カスタマイズ後

投稿の編集画面

↓ 広告を表示させるときは ad という文字を [ ] で囲むだけ

ad-shortcode-after

サイト上の表示

↓ これで広告が中央表示

ad-shortcode-after-view-2

[ad]

1. functions.php を編集

まずは functions.php を編集して、広告を表示するためのショートコードを作っていきましょう。

以下のコードを functions.php に追加します。
(親テーマでも子テーマでもどちらのファイルでも大丈夫です)

↓ 「この中にAdSenseのコードをコピペ」という部分にAdSenseのコードをコピペします。

add_shortcode('ad', function() {
    $output  = '<div class="content-ad">';
    $output .= 'この中にAdSenseのコードをコピペ';
    $output .= '</div>';

    return $output;

});

1-1. 複数の広告用ショートコードを登録するには

先ほど登録した広告とは別の広告をショートコードとして登録するには、先ほどのコードの add_shortcode('ad', function() { 部分を add_shortcode('ad2', function() { としたコードを functions.php に追加します。

add_shortcode('ad2', function() {
    $output  = '<div class="content-ad">';
    $output .= 'この中に別のコードをコピペ';
    $output .= '</div>';

    return $output;

});

これで ad2 という名前でショートコードが表示されるようになりました。

3つ目、4つ目についても、add_shortcode('ad2', function() { 部分を ad3, ad4 とすれば、複数作成できます。

2. ショートコードの使い方

広告を表示させるには、表示させたい場所で

ad 

という文字を [] で囲むだけです。
一度登録すると一気に便利になります。

add-new-post

2-1. テキストウィジェット内でショートコードを使うには

先ほどの画像では投稿の編集画面でショートコードを使用しましたが、サイドバーなどのウィジェット内で使うこともできます。

ただ、最初の状態ではウィジェット内でショートコードを使用できないようになっているので、以下のコードを functions.php に追加します。

add_filter( 'widget_text', 'do_shortcode' );

これでテキストウィジェット内でもショートコードを使用できるようになりました。

ad-shortcode-widget ad-shortcode-after-view-3

3. 広告を中央配置する

functions.php ファイルの編集で広告用のショートコードが登録できましたが、そのままでは広告が左寄せされてしまうので、最後にCSSファイルを編集して広告を中央配置しましょう。

スタイリングしやすいように、広告コード全体を .content-ad というクラス付きdivタグで包んでおいたので、そのクラスを使った以下のコードをCSSファイルに追加します。

.content-ad {
    margin-bottom: 40px;
    text-align: center;
}

広告が中央配置されるようになりました。
これで完成です!

ad-shortcode-after-view