SWELLで記事タイトル上にアドセンス広告を表示する方法

2024.2.122024.10.7

WordPressテーマにSWELLを使用しているサイトで、記事タイトル上にアドセンス広告を表示するには、アクションフックswell_before_post_headを使用します。以下が追加するPHPです。

add_action('swell_before_post_head', function($post_id) {
    echo do_shortcode('[blog_parts id="xxxx"]');
});

PHP

なお、このPHPにてアドセンス広告を使用するには、該当ブログパーツのidを指定する必要があります。よって、まずは「ブログパーツ＞新規追加」で新規のブログパーツを作成します。やることは以下。

ブログパーツのタイトルを適当に決める。
カスタムHTMLブロックを挿入。
使用するアドセンスのディスプレイ広告のコードを貼り付け。
保存。
作成したブログパーツのidを、先ほどのPHPのblog_parts id="xxxx"で指定。

PHPが用意できたので、続いて表示するブログパーツを調整するCSSを追加します。margin-bottomのデフォルトは4em、paddingのデフォルトは左右16pxです。

.single .l-mainContent__inner>.p-blogParts.post_content:first-child {
margin-bottom: 2em;
padding: 0;
}

CSS

これで記事タイトル上にアドセンス広告を表示できたかと思います。

なお、ディスプレイ広告のフォーマットはhorizontalがおすすめです。ディスプレイ広告のフォーマットdata-ad-formatはデフォルトではautoになっていますが、これだと広告が表示された際に大き目の広告が表示される可能性があります。記事タイトル上に大きな広告があると見る側は嫌悪感を抱くと思いますので、horizontalにすることをおすすめします。

また、今回紹介したコードでは、PC・SPともに広告が表示されますが、SP表示だと記事タイトル上に広告があるのは邪魔でしかないので、非表示にすることをおすすめします。非表示にするにはPHPを次のように変更します。

add_action('swell_before_post_head', function($post_id) {
    echo '<div class="custom-content">' . do_shortcode('[blog_parts id="xxxx"]') . '</div>';
});

PHP

続いてCSSも変更。タブレットでは広告を表示したいという場合は、max-widthの値を変更してください。

/* コンテンツの調整 */
.single .l-mainContent__inner .custom-content .p-blogParts.post_content:first-child {
    margin-bottom: 2em;
    padding: 0;
}

/* SP・タブレットで非表示 */
@media (max-width: 1024px) {
    .custom-content {
        display: none;
    }
}

CSS

以上です。

URLをコピーしました！

SWELLで記事タイトル上にアドセンス広告を表示する方法

関連記事