前回、モバイルだけに表示されるテキストウィジェットの作成方法を紹介しました。
今回はその逆バージョンで、パソコンのみにされるテキストウィジェットを作成するためのカスタマイズ方法を紹介します。
目次
カスタマイズ方法
カスタマイズをするといっても、前回と同様とても簡単です。
テーマ内の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のみに表示させたい」なんて場合は、結構手軽にできて良い手段の一つかと思います。
いつもSimplicityの更新ありがとうございます!
先日、フォーラムでもお世話になりましたm(__)m
モバイルだけ、パソコンだけに表示できるウィジェットが欲しかったので、今回取り上げていただきありがとうございます(*^^*)
細かい点ですが、「モバイルだけ」の記事からコヒペした時に書き換え忘れていると思われる箇所があったので僭越ながら(^^;;
“あとは、ウィジェットの設定項目に、以下を記入します”
に続く部分で、多分「パソコン」と記載されるはずの所が「モバイル」になってました。
一つ前の「モバイルだけ」の記事ですが、記事の最初に「新規下書きとしてコピー」が入っているのも少し気になりました。
指摘になってすみません(^^;;
コメントは削除していただいて結構ですよ。