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

前回、モバイルだけに表示されるテキストウィジェットの作成方法を紹介しました。

昨今、サイト訪問者のモバイル利用率が増加の一途です。 それとともに、nendのようなスマホ用の高報酬広告が表示されるASPなんかも出て...

今回はその逆バージョンで、パソコンのみにされるテキストウィジェットを作成するためのカスタマイズ方法を紹介します。

スポンサーリンク
レクタングル(大)広告

カスタマイズ方法

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

テーマ内のfunctions.phpに、以下のコードをペタッと貼り付け追記するだけです。

///////////////////////////////////////////////////
//パソコン用テキストウィジェットの追加
///////////////////////////////////////////////////
class PcTextWidgetItem extends WP_Widget {
   function PcTextWidgetItem() {
     parent::WP_Widget(false, $name = 'パソコン用テキストウィジェット');//ウィジェット名
  }
  function widget($args, $instance) {
    extract( $args );
    //タイトル名を取得
    $title = apply_filters( 'widget_title_pc_text', $instance['title_pc_text'] );
    $text = apply_filters( 'widget_text_pc_text', $instance['text_pc_text'] );

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

やっていることは簡単で、単にテキストウィジェットを自前で作成して、条件分岐でパソコンのみに表示するようにしているだけです。

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

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

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

パソコン用テキストウィジェットの使い方

上記のカスタマイズを行うと、「外観→ウィジェット」に以下のような「パソコン用テキストウィジェット」が表示されます。

パソコン用テキストウィジェットが表示される

あとは、ウィジェットエリアに、「パソコン用テキストウィジェット」をドラッグ&ドロップします。

パソコン用テキストウィジェットドラッグ&ドロップ

あとは、ウィジェットの設定項目に、以下を記入します

  • ウィジェットのタイトル(未入力で表示されない)
  • パソコンのみで表示するテキストもしくはタグ

パソコン用テキストウィジェットの設定入力

すると、パソコン表示したときのみ表示される、以下のようなウィジェットを手軽に作成することができます。

パソコン用の広告など

まとめ

と、こんな感じに簡単に「パソコン用テキストウィジェット」を設置することができます。

主に、スマホなどでは表示させても効果の薄い広告などを挿入するのにおすすめです。例えば、サーバーへの加入を勧める広告なんて、スマホからやる人なんてほとんどいません。

「PC表示時に効果の高い広告をPCのみに表示させたい」なんて場合は、結構手軽にできて良い手段の一つかと思います。

『「パソコンのみ表示するテキストウィジェット」をコピペ一発で作るWordPressカスタマイズ方法』へのコメント

  1. 名前:okkiisane 投稿日:2015/04/24(金) 14:31:57 ID:7a1738e3c

    いつもSimplicityの更新ありがとうございます!
    先日、フォーラムでもお世話になりましたm(__)m

    モバイルだけ、パソコンだけに表示できるウィジェットが欲しかったので、今回取り上げていただきありがとうございます(*^^*)

    細かい点ですが、「モバイルだけ」の記事からコヒペした時に書き換え忘れていると思われる箇所があったので僭越ながら(^^;;

    “あとは、ウィジェットの設定項目に、以下を記入します”
    に続く部分で、多分「パソコン」と記載されるはずの所が「モバイル」になってました。

    一つ前の「モバイルだけ」の記事ですが、記事の最初に「新規下書きとしてコピー」が入っているのも少し気になりました。

    指摘になってすみません(^^;;
    コメントは削除していただいて結構ですよ。

  2. アバター画像 名前:わいひら 投稿日:2015/04/24(金) 17:33:22 ID:f938dd5fc

    いえいえ、ご指摘、滅茶苦茶助かります!
    自分では、まず気づかないので。
    2箇所も「モバイル」になっていましたね;

    一つ前の「モバイルだけ」の記事ですが、記事の最初に「新規下書きとしてコピー」が入っているのも少し気になりました。

    ああああああ、複製した時、操作ミスして入力エリアにD&Dてしまったようです。
    複製が丸出し、これは恥ずかしい(笑)
    今日、読み返しをほとんどしなかったので、やっぱり確認は大事ですね。

    近日中にSimplicityの方にも機能追加したいと思います。