技術ブログ
自作ウィジェットの作成方法 月別リンクとカテゴリーリンクのウィジェット化
WordPressでの自作ウィジェットの作成方法 月別リンクとカテゴリーリンクのウィジェット化
様々な場面で使用する月別リンクやカテゴリーリンクは、できればウィジェット化(部品化)して、管理画面のみから操作したいものです。
ウィジェットとウィジェットセット
ウィジェットは部品で、ウィジェットセットはウィジェットの集合体です。
ウィジェットセットはサイドバーやフッターなどに表示することができます。
なぜウィジェットを使用するのか
自作関数を作成してサイドバーなどに表示すればよいのですが、ページの多いサイトの場合、何度も同じ部品を表示することがあり、管理が煩雑になることがあります。
管理が煩雑になるのを防ぐために、WordPressがあらかじめ用意した仕組みがウィジェットです。
これにより、一度登録したウィジェットを削除する場合など、一度の操作で設定できます。何より管理画面だけから操作ができ、一度設定すればファイルを直接編集する必要がありません。
ウィジェットエリアの作成方法とサイドバーへの表示方法
以下のようにwidgets_initアクションフックに自作関数をフックすることで、register_sidebar関数によりウィジェットエリアが登録できます。
以下をfunction.phpに記述いただくことで、管理画面＞外観＞ウィジェットでウィジェットエリアを使用できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php function jnm_set_widgets_set() { register_sidebar(array( 'name' => 'サイドバーセット1' , 'id' => 'sidebar01', )); } add_action('widgets_init', 'jnm_set_widgets_set'); ?> |
以下をsidebar.phpなどに記述いただくことで、ウィジェットエリアを表示できます。
|
1 2 3 4 5 6 7 |
<?php if ( is_active_sidebar( 'sidebar01' ) ) { dynamic_sidebar( 'sidebar01' ); } ?> |
自作ウィジェットの作成方法
以下は自作ウィジェットの作成方法の基本構造です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<?php /********************************************************************* * ウィジェットの定義 *********************************************************************/ class MyWidget extends WP_Widget { function __construct() { parent::__construct( 'mywidget', // Base ID 'ウィジェット名', // Name 'before_widget' => '<div class="%2$s widget">', 'after_widget' => '</div>', 'before_title' => '<p class="widgetName">', 'after_title' => '</p>', 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) { ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label> <input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo esc_attr( $instance['title'] ); ?>"> </p> <?php } function update($new_instance, $old_instance) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); return $instance; } } /********************************************************************* * 初期化 ウィジェット登録 *********************************************************************/ function jnm_set_widgets() { register_widget('MyWidget'); } add_action('widgets_init', 'jnm_set_widgets'); ?> |
月別アーカイブリンクの自作ウィジェット化
以下は月別アーカイブリンクの自作ウィジェット化の例です。
途中に出てくる$jnm_infoはpressx.jp独自のグローバル変数です。コンテキストに応じた投稿タイプを自動取得しています。
pressx.jpを利用しない方は$jnm_info[‘post-type’][‘slug’]を独自で取得してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<?php /********************************************************************* * 月別アーカイブリンク *********************************************************************/ class MyMonth_Widget extends WP_Widget { function __construct() { parent::__construct( 'mymonthlistwidget', // Base ID '月別一覧', // Name array( 'description' => '月別一覧(投稿タイプ自動判定)' // 説明文 ) ); } 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.='</ul></li>'; } $temp_class=""; if( is_month() || is_single() ){ if( $mycurrent_year===$month->year ){ $temp_class = ' class="minus"'; } } $submenu_body .= '<li' . $temp_class . '><span>' . $month->year . '年</span>'; $submenu_body .='<ul class="childMonth">'; } $temp_class=""; if( is_month() || is_single() ){ if( $mycurrent_year===$month->year && $mycurrent_month===$month->month ){ $temp_class =' class="current"'; } } $submenu_body .='<li' . $temp_class . '>'; if ( $jnm_info['post-type']['slug']=='post' ){ $submenu_body .='<a href="' . home_url() . '/' . $month->year . '/' . date( "n", mktime(0, 0, 0, $month->month, 1, $month->year)) . '">'; } else { $submenu_body .='<a href="' . home_url() . '/' . $jnm_info['post-type']['slug'] . '/' . $month->year . '/' . date( "n", mktime(0, 0, 0, $month->month, 1, $month->year)) . '">'; } $submenu_body .= date("n", mktime(0, 0, 0, $month->month, 1, $month->year)) . '月'; $submenu_body .='</a></li>'; $year_prev = $year_current; endforeach; $submenu_body .='</ul></li>'; $submenu_link=<<<_EOT_ <ul class="monthly"> {$submenu_body} </ul> _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’]を独自で取得してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?php /********************************************************************* * カテゴリーアーカイブリンクの自作ウィジェット化 * コンテキストに応じてカスタムタクソノミー一覧を表示します *********************************************************************/ class MyCategory_Widget extends WP_Widget { function __construct() { parent::__construct( 'mycategorywidget', // Base ID 'jnmカテゴリー', // Name array( 'description' => 'コンテキストに応じてカスタムタクソノミー一覧を表示します' // 説明文 ) ); } 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'); |
カテゴリーアーカイブリンク自作ウィジェットで個別に投稿タイプを指定したい場合
以下はカテゴリーアーカイブリンクの自作ウィジェットで個別に投稿タイプを指定したい場合の例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<?php /********************************************************************* * カテゴリーアーカイブリンク自作ウィジェットで個別に投稿タイプを指定したい場合 *********************************************************************/ class MyCategory_Widget2 extends WP_Widget { function __construct() { parent::__construct( 'mycategorywidget2', // Base ID 'jnmカテゴリー(個別指定)', // Name array( 'description' => '個別指定でカスタムタクソノミー一覧を表示します' // 説明文 ) ); } 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) { ?> <p> <label for="<?php echo $this->get_field_id('post_type'); ?>"><?php _e('投稿タイプ:'); ?></label> <input type="text" class="widefat" id="<?php echo $this->get_field_id('post_type'); ?>" name="<?php echo $this->get_field_name('post_type'); ?>" value="<?php echo esc_attr( $instance['post_type'] ); ?>"> </p> <?php } function update($new_instance, $old_instance) { $instance = $old_instance; $instance['post_type'] = strip_tags($new_instance['post_type']); return $instance; } } /********************************************************************* * 初期化 ウィジェット登録 *********************************************************************/ function jnm_set_widgets() { register_widget('MyCategory_Widget2'); } add_action('widgets_init', 'jnm_set_widgets'); ?> |