賢威7ウィジェット追加!パソコンのみで表示されるテキストウィジェットを作る方法

賢威7カスタマイズ

今回は、賢威7テンプレートのウィジェットに、パソコンのみで表示されるテキストウィジェットを追加する方法をご紹介します。

こちらの記事を参考に賢威7で使えるように、少しコード内容を変更させていただきました。

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

ちょっとPRです

みっぴー(@bennriya_mi)です~。

アイキャッチを変えただけで、広告表示回数が5倍になりました。(こっそり独り言)

今回、そのアイキャッチを誰でも使えるようにテンプレにしました。
詳しくは、下記にて

アイキャッチテンプレート150種について


賢威7にパソコン用ウィジェットを追加する方法

下記のコードをfunctions.phpに追加してください。

注意
functions.phpのファイルを編集する場合は、必ずバックアップを取った上で編集してください。functions.phpの記入をミスったり記入内容がかぶるとブログが真っ白になって管理画面にさえも入れなくなります。編集は慎重に行ってください。万が一真っ白になってしまった場合は、レンタルサーバーのFTPから入って、functions.phpのファイルを今回編集する前の記述に戻せば直ると思います。

これは、賢威7用にコードを変更しています。

もし、賢威7以外で使う場合はこの下に別にありますので間違えないように使ってください。


賢威7をお使いの方でもテーマによってはデザインが崩れる場合があります。

その場合は、widgetのクラス名や17行目のsection idなどを確認してください。

賢威7用コード

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() ): //パソコンの時 ?>
<section id="%1$s" class="section-wrap widget-conts %2$s">
      <div id="keni_pv-2" class="section-in">
        <?php if ($title) {
          echo '<h3 class="section-title">'.$title.'</h3>';//タイトルが設定されている場合は使用する
        }
          ?>
        <div class="text-pc">
          <?php echo $text; ?>
        </div>
      </div></section><!-- /#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");'));

賢威7以外のコード

賢威7以外のテーマをお使いの場合は、下記のコードをfunctions.phpに追加してください。

15行目より下、お使いのテーマのwidgetのクラス名を変更する箇所があります。

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

最後に

今回は、【賢威7のカスタマイズ】パソコンのみで表示されるテキストウィジェットの追加方法に関してご紹介しました。

広告の表示の切り替えや、様々な使い分けに応用ができますので是非、活用してください。

モバイルのみで表示されるテキストウィジェットの追加方法に関しては、こちら

賢威7ウィジェット追加!モバイル(スマホ)のみで表示されるテキストウィジェットを作る方法