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

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

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

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

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

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

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

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

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

とっても簡単ですよね♪

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

Mevius(メビウス)がリニューアルしましたね。
このMevius(メビウス)のリニューアルした時の
追加点･変更点･違いについて書いていきます。

どこが変わったのか前のバージョンと
軽く比較をしていこうと思います。

購入の参考などにしてください。

Mevius(メビウス)リニューアル後の追加･変更点･違いは何？

まずは下記の動画講座が追加されてます。

・LP作成メソッド
・ボタン素材作成講座

これらが追加されています。

動画講座があるかどうかで作りやすさが変わってきます。
この動画講座があるので、初心者でもLPが作りやすいと思います。
それでも少しだけまだ説明不足な気もしますが・・・
説明不足の点は当サイトの特典で補足していますのでご安心ください。

他にも追加点としては
サイトアフィリ用ヘッダー画像38ジャンル、全パターン2052枚になりました。
物販用LPとしても使えますし、サイトアフィリのヘッダー画像としても使えます。
ジャンルも多彩なので、いろんなジャンルで使えます。

つまり、主に追加点としては

・動画講座の追加
・ヘッダー画像の追加

これら２点ですね。それでも結構なボリュームだと思いますよ。

＝＞当サイトの特典付きレビューはコチラからどうぞ