ケケンタときどきアイキャッチの上に広告を表示させているブログがあるけど、あれってSWELLではどうやるんだろう……？
今回はこのようなお悩みをお持ちの方に
SWELLでアイキャッチ画像の上に広告を表示する方法
をご紹介します。
記事タイトルの上に広告を表示したい場合はこちら
＼Web制作を仕事にしたいなら／
こちらの記事で
Web制作コース独学プラン
についてご紹介しています。
￣￣￣
日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる
最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る
※ご注文の時間帯やお住まいの地域によります。
Amazonプライムの無料体験は「何度でも」利用可能
Amazonプライムの無料体験を何度も利用する方法
- Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
- 会員の自動更新を解除しておく＝期限が来たら自動解約
- １～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される
ケケンタ僕自身、過去に少なくとも３回は無料体験を利用しています。
※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。
【ソースコード】アイキャッチ画像の上に広告を表示する
アイキャッチ画像の上に広告を表示するときのソースコードには大きく２パターンあります。
- 広告のソースコードをそのまま載せる
- 広告タグに登録した広告をショートコードで呼び出す
ケケンタ順番にソースコードをご紹介します。
① 広告のソースコードをそのまま載せる
add_action( 'swell_before_post_thumb', function( $post_id ) {
?>
<div class="widget widget_swell_ad_widget">
<!-- 広告のコードをここに貼り付ける -->
</div>
<?php
});実際の使用例
add_action( 'swell_before_post_thumb', function( $post_id ) {
?>
<div class="widget widget_swell_ad_widget">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-●●●●●●●●●●●●●●●"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="●●●●●●●●●●●●●"
data-ad-slot="●●●●●●●●●●●●●●●●●●●●">
</ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<?php
});② 広告タグに登録した広告をショートコードで呼び出す
add_action( 'swell_before_post_thumb', function( $post_id ) {
echo do_shortcode('広告タグのショートコード');
});実際の使用例
add_action( 'swell_before_post_thumb', function( $post_id ) {
echo do_shortcode('※ IDを指定してください。');
});ちなみに「広告タグ」は管理画面サイドメニューの以下の部分から登録可能です。
ケケンタ以上の手順により、アイキャッチ画像の上に広告を表示させることが可能です。
SWELLの子テーマのfunctions.phpにソースコードを追加する方法
まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。
すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。
続いて、エディタの末尾にソースコードを追加します。
ケケンタソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。
まとめ
以上がSWELLでアイキャッチ画像の上に広告を表示させる方法でした。
この記事がお役に立ったなら何よりです。
ケケンタ最後までご覧いただきありがとうございました！
コメント