[ad]ショートコードで広告を本文中の好きな場所に表示する方法

ショートコード
この記事は約2分で読めます。

Cocoonでは、テーマの機能で広告を自由な箇所に表示できます。

広告(AdSense)を手っ取り早く設定する方法
Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

加えて、ウィジェット設定でもある程度自由な位置に広告を表示させることができます。

ウィジェットを利用して広告(AdSense)を表示する方法
広告ウィジェットを使用することにより、さらに自由度の高いAdSense設定をする方法です。個別の広告ユニットごとにパフォーマンス計測をしたい場合は、ウィジェットを利用する必要があります。

それに加えて、adショートコードを用いて本文中の好きな箇所に広告を表示することが可能となっています。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

adショートコードの設定

adショートコード利用は、テーマ設定を確認する必要があります。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

「広告」タグの「ショートコード・広告ブロックを有効にする」にチェックがついているかを確認してください。

あとは、「詳細設定」リンクをクリックして「表示したい広告タイプ」を選択します。

詳細設定をクリックして広告タイプを選ぶ

選択できる広告フォーマットは、以下の中から選べます。

  • おまかせ
  • バナー
  • レスポンシブレクタングル
  • シングルレクタングル
  • ダブルレクタングル
  • 記事広告

また、「広告ラベルの表示」も切り替えることが可能です。

※機能を利用するには、以下の「AdSenseコード設定」をしてある必要があります。
広告(AdSense)を手っ取り早く設定する方法
Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

adショートコードを本文に挿入

あとは、adショートコードを以下のように本文中に挿入します。

ブロックエディターの場合

段落ブロックにadショートコードを入力する

ブロックエディターの場合は、広告ブロックを利用してください。

ビジュアルエディターの場合

adショートコードを本文中に挿入する

ビジュアルエディター1行に対してとだけ表示されるように入力してください。

記事を公開後、ページを開くと以下のように広告が表示されます。

ショートコード挿入部分に広告が表示される

Cocoonの「広告」設定で「ダブルレクタングル」フォーマットが選択されているので2つ広告が表示されています。

ショートコード広告タイプにダブルレクタングルが選択されている

広告の形式を変えたければ、このフォーマット部分を変更してください。

この機能の狙い

このadショートコード広告機能の狙いは、ズバリ「本文中の出したいところに広告を出す」ということです。

書き手が「ここに広告を挿入すればパフォーマンスが良いだろう!」という箇所に広告を表示できるのが最大の利点です。

わいひら
わいひら

ショートコード自体もad]ショートコードの4文字なので覚えやすく、苦もなく手入力できるようにしたつもりです。

コメント テーマの質問はフォーラムへ

  1. ニャンコ より:

    初めまして、いつも参考にさせていただいています。
    この記事で紹介されている[ad]のショートコードを利用しようと思ったのですが、
    記事の説明通りに行っても記事を公開した際に[ad]とそのまま表示されてしまいます。

    こちらの記事の説明を行ってもショートコードが反映されなかったため下記のわいひらさんのブログを参考にさせていただきました。
    記事で紹介されていた「functions.phpにショートコードを広告にするコードを書く」というものを追加で記入したのですが、それでも反映されませんでした。
    https://nelog.jp/ad-shoetcode-to-adsense-code

    • わいひら わいひら より:

      よろしければ、コメントの案内にもあるようにフォーラムの方にトピックを立てて質問していただければ幸いです。
      というのも、コメント欄では低機能なため画像がアップロード機能がないもので。
      トピックを立てる際の内容は、上記コメントのままコピペで良いので、それに加えてCocoon設定の「広告」タブ全体のキャプチャ画像を添付アップロードしていただいてよろしいでしょうか。

      • ニャンコ より:

        コメント返信ありがとうございます。
        他のページで何回か試してみたら広告が表示されましたので、その方法で行ったら無事広告表示がされるようになりました。
        お手数おかけして大変申し訳ありませんでした。

タイトルとURLをコピーしました
'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);