/ / / 【WordPress】PC/モバイル表示時にサイドバーの広告を切り替える方法

【WordPress】PC/モバイル表示時にサイドバーの広告を切り替える方法

2016083101

アドセンスのレスポンシブ広告を使用しない場合、あるいはi-mobileのように広告がPC/モバイル用に分けられている場合に、サイドバーに表示する広告をプラットフォーム別に切り替える方法をご紹介します。

ウィジェット定義

下記ソースをfunctions.phpに追記してください。

class Ad_Network extends WP_Widget {
   /*   コンストラクタ   */
   function Ad_Network() {
      parent::WP_Widget(
         false,
         $name = 'Ad_Network',
         array( 'description' => 'アドネットワーク広告を表示します。' )
      );
   }
   
   /* カスタマイズ画面で可変に設定したいパラメータをなどを記述 */
   function form($instance) {
      ?>
      <p>
         <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル:'); ?></label>
         <input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" 
            name="<?php echo $this->get_field_name('title'); ?>" 
            value="<?php echo esc_attr( $instance['title'] ); ?>">
      </p>
      <?php
   }
   
   /* カスタマイズ画面の入力内容が変更された場合の処理 */
   function update($new_instance, $old_instance) {
      $instance = $old_instance;
      $instance['title'] = strip_tags($new_instance['title']);
      return $instance;
   }

   /* ウィジェットの表示時のデザインを記述 */
   function widget($args, $instance) {
      extract($args);
      echo $before_widget;
      
      if(!empty($instance['title'])) {
         $title = apply_filters('widget_title', $instance['title']);
      }
      if ($title) {
         echo $before_title . $title . $after_title;
      } else {
         echo 'スポンサードリンク';
      }
      
      ?>
      <div class="sponsor-link"><?php disp_adn_in_sidebar() ?></div>
      <?php
      echo $after_widget;
   }
}
/* 自作ウィジェットを登録 */
register_widget('Ad_Network');

ここからは上記ソースの説明となりますので、ささっと実装したい方は次の見出しまで読み飛ばし頂いて問題ありません。

Ad_Network()

ウィジェット情報を登録しています。ウィジェット名’Ad_Network‘を変更したければ、上記ソースすべての’Ad_Network‘を任意の変更内容に置き換えてください。

form()

管理画面・カスタマイザーの表示内容です。ユーザーが変更したいパラメータを任意入力できます。サイドバーに表示するウィジェット見出しを指定できます。

update()

form()で定義した入力項目がユーザーによって変更された場合の挙動を記述しています。入力内容が不正値でなければ上書きします。不正値であればデフォルト値を入力します。

widget()

ウィジェットのデザインを定義しています。

広告切り替えファンクション定義

下記ソースをfunctions.phpに追記してください。

// PC/モバイル広告切り替え表示
function disp_adn_in_sidebar() {
   if (wp_is_mobile()) {
      // モバイル広告
      get_template_part('adn-mobile-in-sidebar');
   } else {
      // PC広告
      get_template_part('adn-in-sidebar');
   }
}

ファンクションwidget()で呼び出している広告表示用ファンクションdisp_adn_in_sidebar()を定義しています。

広告本体をサーバへアップロード

下記名称のphpファイルを新規作成してください。

  • adn-in-sidebar.php
  • adn-mobile-in-sidebar.php

ファンクションdisp_adn_in_sidebar()で呼び出される広告を定義します。それぞれadn-in-sidebar.phpにPC用広告、adn-mobile-in-sidebar.phpにモバイル用広告のソースコードを張り付け、使用テーマ直下にアップロードしてください。

style.css追記

下記ソースをstyle.cssに追記してください。

.sponsor-link {
	display: inline-block;
	*display: inline;
	zoom: 1;
	text-align: center;
	box-sizing: border-box;
}

広告を中央寄せするためのスタイルを定義しています。

ウィジェット表示

上記作業により登録したウィジェットをサイドバーに表示しましょう。まずダッシュボードにログインします。

2016-08-31_15h26_54

左側メニューの”外観>ウィジェット”を選択します。

2016-08-31_15h29_36

利用できるウィジェット」に表示されている「Ad_Network」をメインサイドバーにドラッグ&ドロップします。追加位置はお好きな場所で大丈夫です。

2016-08-31_15h30_53

メインサイドバーに追加したAd_Networkのタイトルを入力し、保存ボタンを押下して追加完了です。

2016-08-31_15h31_15

まとめ

デフォルトのテキストウィジェット上では直接phpのソースを記述できないので、自分用に作成してみました。お役に立ちましたら何よりです。

にほんブログ村 漫画ブログへ
↑ランキングバナーをクリック頂けると励みになります。
この記事をシェアする
このブログをフォローする