勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

WordPressでコンテンツ(記事)内に広告を差し込む方法

   2024/02/20  WordPress CMS

WordPress内でヘッダーやフッターではなく、コンテンツ内にバナー広告を差し込みたい。また、記事のタグやカテゴリーによってそれぞれ異なるバナー広告を表示させたいのと、あらかじめ用意した複数のバナー広告からページ表示ごとにランダムで表示させたかった。以下に実装方法をメモ。

 

jQueryで広告を差し込む

<script>
jQuery(function(){
    jQuery('p.ad').eq(2).html('広告コード'); //2個目のp.adの後に広告を差し込む。タグやclass指定部分は適宜変更する
});
</script>

eq()のリファレンスは以下参照。

http://semooh.jp/jquery/api/core/eq/position/

 

機能追加

コンテンツ内に差し込む以外にも以下機能を追加したかった。

  • 記事のタグやカテゴリによって広告を変更したい
  • 予めいくつか決めておいた広告の中からランダムで表示させたい

PHP側で表示する記事のカテゴリIDを取得し、カテゴリ毎の広告コードを設定しておく。設定変更するファイルはテーマフォルダ内のsingle.phpになると思われる。

<?php
if( $category == 1){
    $ad_code = array(
        0 => '広告コード', 
        1 => '広告コード', 
    );
}else if( $category == 2 ){?>
    $ad_code = array(
        0 => '広告コード', 
        1 => '広告コード', 
    );
?>

表示させるページに以下を設置する。これもsingle.phpになると思われる。

<?php if( $add_code ){ ?>
<script>
jQuery(function(){
    jQuery('p.ad').eq(2).html('<?php echo $ad_code[array_rand($ad_code)];?>');
});
</script>
<?php } ?>

 - WordPress CMS

  関連記事

WordPress Popular Postsのサムネイルが表示されない
WordPress Popular Postsのサムネイルが表示されない

WordPressの人気記事を表示させるWordPress Popular Po ...

WordPressの5系から搭載されたブロックエディタ(Gutenberg)を元に戻す方法
WordPressの5系から搭載されたブロックエディタ(Gutenberg)を元に戻す方法

WordPressを5系にアップデートしたところ記事投稿ページのエディタが大幅に ...

WordPressと別プログラム間でSESSIONが引き継げない場合の対応方法
WordPressと別プログラム間でSESSIONが引き継げない場合の対応方法

同一サーバ内に自作したプログラムとWordPressを設置しており両者でセッショ ...

WordPressのContact Form 7プラグインで入力内容確認及び送信完了ページを実装する方法
WordPressのContact Form 7プラグインで入力内容確認及び送信完了ページを実装する方法

WordPressのContact Form 7プラグインで実装されたお問い合わ ...

WordPressにて投稿記事及び固定ページの記事数を取得・表示する方法
WordPressにて投稿記事及び固定ページの記事数を取得・表示する方法

WordPressにてページ内に記事数を表示したいというケースがあった。また、通 ...