ワードプレスでスマホのみ表示できるウィジェットを追加する方法について紹介します。

ワードプレスを使う上で、スマホのみ表示したい場面ってあると思います。
例えば広告とかそうですよね。

条件分岐タグなどを使う事もできますが、ウィジェットにはこれらは使えません。

ウィジェットでスマホのみ表示を使いたい方におすすめの方法を紹介します。

ワードプレスでスマホのみ表示する方法に関して

ワードプレスでスマホのみ表示する場合ですが、代表的なものとして
条件分岐のタグがあげられますよね。

wp_is_mobileの条件分岐などを使う事で、スマホのみ表示は可能です。
これが一番メジャーだと思います。

ただ、これって基本的にテーマ編集で使うものですよね。

ワードプレスのウィジェット内でスマホのみ表示したい場面があると思います。

ヘッダー下の広告としてスマホだけに広告を表示したい。

こういった時で、テーマ編集の部分がよく分からない方は困ると思います。

そこでウィジェットで使えるスマホのみ表示の方法を紹介します。

ワードプレスでスマホのみ表示できるウィジェットを追加する方法

ワードプレスでスマホのみ表示をウィジェットを使ってやりたいなら、
スマホのみ表示できるウィジェットを追加するだけです。

その方法ですが、下記のコードをfunctions.phpの最後に追加するだけです。

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");'));

上記のコードを追加すれば、ウィジェットの所に「モバイル用テキストウィジェット」というものが表示されるようになります。

後は好きな場所にこのウィジェットを追加して
テキストの部分に好きな広告などを入力するだけです。

とっても簡単ですよね♪

是非試してみてくださいね。