テクモ WEB開発者技術メモ

ウィジェットとウィジェットセット

ウィジェットは部品で、ウィジェットセットはウィジェットの集合体です。

ウィジェットセットはサイドバーやフッターなどに表示することができます。

なぜウィジェットを使用するのか

自作関数を作成してサイドバーなどに表示すればよいのですが、ページの多いサイトの場合、何度も同じ部品を表示することがあり、管理が煩雑になることがあります。

管理が煩雑になるのを防ぐために、WordPressがあらかじめ用意した仕組みがウィジェットです。

これにより、一度登録したウィジェットを削除する場合など、一度の操作で設定できます。何より管理画面だけから操作ができ、一度設定すればファイルを直接編集する必要がありません。

ウィジェットエリアの作成方法とサイドバーへの表示方法

以下のようにwidgets_initアクションフックに自作関数をフックすることで、register_sidebar関数によりウィジェットエリアが登録できます。

以下をfunction.phpに記述いただくことで、管理画面＞外観＞ウィジェットでウィジェットエリアを使用できます。

 'サイドバーセット1' ,
      'id' => 'sidebar01',
  ));
}
add_action('widgets_init', 'jnm_set_widgets_set');

?>

以下をsidebar.phpなどに記述いただくことで、ウィジェットエリアを表示できます。

• 関数リファレンス/register sidebar

自作ウィジェットの作成方法

以下は自作ウィジェットの作成方法の基本構造です。

 '
',
      'after_widget' => '
',
      'before_title' => '
',
      'after_title' => '
',
      array(
        'description' => '説明を記述します' // 説明文
      )
    );
  }

  function widget($args, $instance) {
    if($instance['title'] != ''){
        $title = apply_filters('widget_title', $instance['title']);
    }
    echo $before_widget;
    if( $title ){
        echo $before_title . $title . $after_title;
    }
    echo $after_widget;
  }

  function form($instance) {
    ?>
      

          
          
      
  

• ウィジェット API

月別アーカイブリンクの自作ウィジェット化

以下は月別アーカイブリンクの自作ウィジェット化の例です。

途中に出てくる$jnm_infoはpressx.jp独自のグローバル変数です。コンテキストに応じた投稿タイプを自動取得しています。

pressx.jpを利用しない方は$jnm_info[‘post-type’][‘slug’]を独自で取得してください。

 '月別一覧(投稿タイプ自動判定)' // 説明文
      )
    );
  }

  function widget($args, $instance) {
    global $wpdb;
    //$jnm_infoはpressx.jp独自のグローバル変数です。
    //pressx.jpを利用しない方は$jnm_info['post-type']['slug']を独自で取得してください。
    global $jnm_info;
    $submenu_link='';
    $submenu_body='';
    if( is_month() || is_single() ){
      $mycurrent_year  = get_the_date( "Y");
      $mycurrent_month = get_the_date( "n");
    }
    $year_prev = null;
    $months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month ,
      YEAR( post_date ) AS year,
      COUNT( id ) as post_count FROM $wpdb->posts
      WHERE post_status = 'publish' and post_date <= now( )
      and post_type = '{$jnm_info['post-type']['slug']}'
      GROUP BY month , year
      ORDER BY year,month DESC");

    foreach($months as $month) :
      $year_current = $month->year;
      if ($year_current != $year_prev){
        if ($year_prev != null){
          $submenu_body.='';
        }
        $temp_class="";
        if( is_month() || is_single() ){
          if( $mycurrent_year===$month->year ){
            $temp_class = ' class="minus"';
          }
        }
        $submenu_body .= '' . $month->year . '年';
        $submenu_body .='
';
      }
      $temp_class="";
      if( is_month() || is_single() ){
        if( $mycurrent_year===$month->year && $mycurrent_month===$month->month ){
          $temp_class ='  class="current"';
        }
      }
      $submenu_body .='';
      if ( $jnm_info['post-type']['slug']=='post' ){
        $submenu_body .='month, 1, $month->year)) . '">';
      } else {
        $submenu_body .='month, 1, $month->year)) . '">';
      }

      $submenu_body .= date("n", mktime(0, 0, 0, $month->month, 1, $month->year)) . '月';
      $submenu_body .='';
      $year_prev = $year_current;
    endforeach;
    $submenu_body .='
';
    $submenu_link=<<<_EOT_
              

              {$submenu_body}
              
_EOT_;
    echo $submenu_link;
  }

  function form($instance) {
  }

  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    return $instance;
  }
}
/*********************************************************************
* 初期化 ウィジェット登録
*********************************************************************/
function jnm_set_widgets() {
  register_widget('MyMonth_Widget');
}
add_action('widgets_init', 'jnm_set_widgets');

?>

カテゴリーアーカイブリンクの自作ウィジェット化

以下はカテゴリーアーカイブリンクの自作ウィジェット化の例です。

途中に出てくる$jnm_infoはpressx.jp独自のグローバル変数です。コンテキストに応じた投稿タイプを自動取得しています。

pressx.jpを利用しない方は$jnm_info[‘taxonomy’][‘slug’]を独自で取得してください。

 'コンテキストに応じてカスタムタクソノミー一覧を表示します' // 説明文
      )
    );
  }

  function widget($args, $instance) {
    global $jnm_info;
    if($instance['title'] != ''){
        $title = apply_filters('widget_title', $instance['title']);
    }
    echo $before_widget;
    if( $title ){
        echo $before_title . $title . $after_title;
    }
    $queried_object = get_queried_object();
    $args       = array(
      'orderby'            => 'name',
      'order'              => 'ASC',
      'show_count'         => 1,
      'hide_empty'         => 1,
      'hierarchical'       => 1,
      'title_li' => '',
    );
    $args['taxonomy'] = $jnm_info['taxonomy']['slug'];
    $args['child_of'] = 0;
    if ( is_single() ){
      $myentrycat               = get_the_terms($post->ID,$jnm_info['taxonomy']['slug']);
      $myid                     = $myentrycat[0]->term_id;
      $args['current_category'] = $myid;
    }
    wp_list_categories( $args );
    echo $after_widget;
  }

  function form($instance) {
  }

  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    return $instance;
  }
}
?>
/*********************************************************************
* 初期化 ウィジェット登録
*********************************************************************/
function jnm_set_widgets() {
  register_widget('MyCategory_Widget');
}
add_action('widgets_init', 'jnm_set_widgets');

カテゴリーアーカイブリンク自作ウィジェットで個別に投稿タイプを指定したい場合

以下はカテゴリーアーカイブリンクの自作ウィジェットで個別に投稿タイプを指定したい場合の例です。

 '個別指定でカスタムタクソノミー一覧を表示します' // 説明文
      )
    );
  }

  function widget($args, $instance) {
    if($instance['post_type'] == ''){
        return '';
    }
    $my_post_type_slug = $instance['post_type'];
    $postids                       = array();
    $postids                       = get_postids_by_post_type( $my_post_type_slug );
    $jnm_info['taxonomy']['slug']  = get_taxonomyslug_by_postids( $postids );
    $args       = array(
      'orderby'            => 'name',
      'order'              => 'ASC',
      'show_count'         => 1,
      'hide_empty'         => 1,
      'hierarchical'       => 1,
      'title_li' => '',
    );
    $args['taxonomy'] = $jnm_info['taxonomy']['slug'];
    $args['child_of'] = 0;
    if ( is_single() ){
      $myentrycat               = get_the_terms($post->ID,$args['taxonomy']);
      $myid                     = $myentrycat[0]->term_id;
      $args['current_category'] = $myid;
    }
    wp_list_categories( $args );
    echo $after_widget;
  }

  function form($instance) {
    ?>
      

          
          
      
  

参考記事

• 関数リファレンス/register sidebar

• ウィジェット API