「モバイルのみ表示するテキストウィジェット」をコピペ一発で作るWordPressカスタマイズ方法

昨今、サイト訪問者のモバイル利用率が増加の一途です。

それとともに、nendのようなスマホ用の高報酬広告が表示されるASPなんかも出てきました。

特にnendに限らずとも、ブログを運営している方の中には「スマホだけに広告を表示したい」なんて思ったこともあるのではないかと思います。

そして、できれば「テキストウィジェットみたいに手軽に利用できる」なんてことができれば、運営者にとっても非常に楽です。というか、そういったテキストウィジェットを自分が欲しくなってしまいました。

ということで、そういったことが簡単にできるようになるカスタマイズをするためのWordpressコードを書いてみたので紹介です。

カスタマイズ方法

カスタマイズをするといっても、とても簡単です。

単に、functions.phpの最後にでも、以下のコードをペタッと貼り付けるだけです。

///////////////////////////////////////////////////
//モバイル用テキストウィジェットの追加
///////////////////////////////////////////////////
class MobileTextWidgetItem extends WP_Widget {
   function MobileTextWidgetItem() {
     parent::WP_Widget(false, $name = 'モバイル用テキストウィジェット');//ウィジェット名
  }
  function widget($args, $instance) {
    extract( $args );
    //タイトル名を取得
    $title = apply_filters( 'widget_title_mobile_text', $instance['title_mobile_text'] );
    $text = apply_filters( 'widget_text_mobile_text', $instance['text_mobile_text'] );

     ?>
      <?php //classにwidgetと一意となるクラス名を追加する ?>
      <?php if ( wp_is_mobile() ): ?>
      <div id="mobile-text-widget" class="widget mobile_text">
        <?php if ($title) {
          echo '<h4>'.$title.'</h4>';//タイトルが設定されている場合は使用する
        }
          ?>
        <div class="text-mobile">
          <?php echo $text; ?>
        </div>
      </div><!-- /#mobile-text-widget -->
      <?php endif //wp_is_mobile ?>
    <?php
  }
  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title_mobile_text'] = strip_tags($new_instance['title_mobile_text']);
    $instance['text_mobile_text'] = $new_instance['text_mobile_text'];
      return $instance;
  }
  function form($instance) {
    if(empty($instance)){//notice回避
      $instance = array(
        'title_mobile_text' => null,
        'text_mobile_text' => null,
      );
    }
    $title = esc_attr($instance['title_mobile_text']);
    $text = esc_attr($instance['text_mobile_text']);
    ?>
    <?php //タイトル入力フォーム ?>
    <p>
      <label for="<?php echo $this->get_field_id('title_mobile_text'); ?>">
      <?php _e('タイトル'); ?>
      </label>
      <input class="widefat" id="<?php echo $this->get_field_id('title_mobile_text'); ?>" name="<?php echo $this->get_field_name('title_mobile_text'); ?>" type="text" value="<?php echo $title; ?>" />
    </p>
    <?php //テキスト入力フォーム ?>
    <p>
      <label for="<?php echo $this->get_field_id('text_mobile_text'); ?>">
      <?php _e('テキスト'); ?>
      </label>
      <textarea class="widefat" id="<?php echo $this->get_field_id('text_mobile_text'); ?>" name="<?php echo $this->get_field_name('text_mobile_text'); ?>" cols="20" rows="16"><?php echo $text; ?></textarea>
    </p>
    <?php
  }
}
add_action('widgets_init', create_function('', 'return register_widget("MobileTextWidgetItem");'));

やっていることは簡単で、単にテキストウィジェットを自前で作成して、条件分岐でモバイル（スマホ）のみに表示しているだけです。

こういった方法は、「Widget Logicプラグイン」と「Wordpressデフォルトのテキストウィジェット」との組み合わせでも行うことはできます。

ただ、今回の方法だとプラグインをインストールする必要はありません。それに、インストール後、ウィジェット設定画面で、プログラムが苦手な人には複雑な条件分岐などを書く必要もなくコピペ一発でできるので、手軽に行えます。

functions.phpは、編集を失敗すると、画面が真っ白になってしまうので、編集前には、functions.phpのバックアップを取ってご利用ください。