自作のウィジェットを作ろう

2021.02.07
wordpress

ワードプレスを触っていて、更新をするのがクライアントの場合、できる限り簡単にできるのが望ましいのですが、汎用のプラグインは必ずしも「私の顧客ニーズ」に合わない部分があり、悩ましいことが多いです。というわけで、日々更新をかけるようなWEB読み物媒体に利用するウィジェットを作成してみました。

1. 利用条件
2. 表示内容
3. コード
4. カテゴリー選択式の場合

利用条件

カスタム投稿タイプをテキスト入力から取得
表示件数は1・５・10・15・20・ALLから選択
表示順はランダム・昇順・降順・最近記事・更新順・メニューオーダーから選択
タイトルの長さは整数で指定

表示内容

先頭にウィジェットのタイトルを表示
10件目まではサムネイル・タイトル・タグ・抜粋
11件目以降はタイトル・タグのみ

11件目以降の表示方法を変える、というのはあまり使わなそうな機能ですが、要望だったので付け加えてあります。不要な場合は、カウントでIF分岐している箇所をざっくり削除してしまえば良いです。

コード

無駄なコードもありそうなんですが・・・カスタム投稿を指定している箇所（iricode_posttypeの箇所）を、カテゴリーを選択する形に変更するほうが一般的かもですね。

<?php
/*
  Plugin Name: PostType Widget
 */

// Additing Action hook widgets_init
add_action('widgets_init', 'iricode_dailyNews_widget');

function iricode_dailyNews_widget() {
    register_widget('iricode_dailyNews_widget_info');
}

class iricode_dailyNews_widget_info extends WP_Widget {
    
    function __construct() {
        $widget_ops = array( 'classname' => 'iricode_dailyNews_widget_info', 'description' => 'Select the category to display' );
        parent::__construct( 'iricode_dailyNews_widget_info', 'IRI dailyNews Widget', $widget_ops );
    }

    public function form($instance) {
        if (isset($instance['iricode_no_post']) && isset($instance['iricode_posttype']) && isset($instance['iricode_name']) && isset($instance['iricode_bullet']) && isset($instance['iricode_title_count']) && isset($instance['iricode_combo_list']) && isset($instance['iricode_please_select']) && isset($instance['iricode_orderby']) ) {
            $iricode_no_post_value = $instance['iricode_no_post'];
            $iricode_posttype_value = $instance['iricode_posttype'];
            $iricode_name_value = $instance['iricode_name'];
            $iricode_bullet_value = $instance['iricode_bullet'];
            $iricode_title_count_value = $instance['iricode_title_count'];
            $iricode_combo_list_value = $instance['iricode_combo_list'];
            $iricode_please_select_value = $instance['iricode_please_select'];
            $iricode_orderby_value = $instance['iricode_orderby'];
        } else {//Setting Default Values
            $iricode_no_post_value = 5;
            $iricode_posttype_value = 'post';
            $iricode_name_value = '';
            $iricode_bullet_value = 2;
            $iricode_title_count_value = 20;
            $iricode_combo_list_value = 1;
            $iricode_orderby_value = 4;
            $iricode_please_select_value = 'Please Select';
			
        }
        ?><!-- buffercode Category Widget Options -->
        <p>タイトル: <input class="widefat" name="<?php echo $this->get_field_name('iricode_name'); ?>" type="text" value="<?php echo esc_attr($iricode_name_value); ?>" /></p>

        <p>ポストタイプ: <input class="widefat" name="<?php echo $this->get_field_name('iricode_posttype'); ?>" type="text" value="<?php echo esc_attr($iricode_posttype_value); ?>" /></p>

         <p>表示数:
            <select name="<?php echo $this->get_field_name('iricode_no_post'); ?>" id="<?php echo $this->get_field_id('iricode_no_post'); ?>" class="widefat">
                <?php
                $options = array('1' => '1',  '5' => '5', '10' => '10', '15' => '15',  '20' => '20', 'All' => '11');
                foreach ($options as $langu => $code) {
                    echo '<option value="' . $code . '" id="' . $code . '"', $iricode_no_post_value == $code ? ' selected="selected"' : '', '>', $langu, '</option>';
                }
                ?>
            </select></p>

        <p>表示順:
            <select name="<?php echo $this->get_field_name('iricode_orderby'); ?>" id="<?php echo $this->get_field_id('iricode_orderby'); ?>" class="widefat">
                <?php
                $orderby_options = array('Random' => '1', 'Ascending' => '2', 'Descending' => '3', 'Recent Post' => '4', 'Post Modified' => '5','Menun Order' => '6');
                foreach ($orderby_options as $orderby_value => $orderby_code) {
                    echo '<option value="' . $orderby_code . '" id="' . $orderby_code . '"', $iricode_orderby_value == $orderby_code ? ' selected="selected"' : '', '>', $orderby_value, '</option>';
                }
                ?>
            </select></p>

        <p>タイトル長さ:<input class="widefat" name="<?php echo $this->get_field_name('iricode_title_count'); ?>" type="text" value="<?php echo esc_attr($iricode_title_count_value); ?>" /></p>

        <?php
    }

    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['iricode_no_post'] = (!empty($new_instance['iricode_no_post']) ) ? strip_tags($new_instance['iricode_no_post']) : '';

        $instance['iricode_posttype'] = (!empty($new_instance['iricode_posttype']) ) ? strip_tags($new_instance['iricode_posttype']) : '';

        $instance['iricode_name'] = (!empty($new_instance['iricode_name']) ) ? strip_tags($new_instance['iricode_name']) : '';

        $instance['iricode_bullet'] = (!empty($new_instance['iricode_bullet']) ) ? strip_tags($new_instance['iricode_bullet']) : '';

        $instance['iricode_title_count'] = (!empty($new_instance['iricode_title_count']) ) ? strip_tags($new_instance['iricode_title_count']) : '';

        $instance['iricode_combo_list'] = (!empty($new_instance['iricode_combo_list']) ) ? strip_tags($new_instance['iricode_combo_list']) : '';

        $instance['iricode_orderby'] = (!empty($new_instance['iricode_orderby']) ) ? strip_tags($new_instance['iricode_orderby']) : '';


        $instance['iricode_please_select'] = (!empty($new_instance['iricode_please_select']) ) ? strip_tags($new_instance['iricode_please_select']) : '';
        return $instance;
    }

    function widget($args, $instance) {
        extract($args);
        echo $before_widget;
        $iricode_name_value = apply_filters('widget_title', $instance['iricode_name']);
        $iricode_posttype_value = empty($instance['iricode_posttype']) ? '&nbsp;' :
                $instance['iricode_posttype'];
        $iricode_no_post_value = empty($instance['iricode_no_post']) ? '&nbsp;' :
                $instance['iricode_no_post'];
        $iricode_bullet_value = empty($instance['iricode_bullet']) ? '&nbsp;' :
                $instance['iricode_bullet'];
        $iricode_title_count_value = empty($instance['iricode_title_count']) ? '&nbsp;' :
                $instance['iricode_title_count'];
        $iricode_combo_list_value = empty($instance['iricode_combo_list']) ? '&nbsp;' :
               
                $instance['iricode_please_select'];
        $iricode_orderby_value = empty($instance['iricode_orderby']) ? '&nbsp;' :
                $instance['iricode_orderby'];

 if ($iricode_header_link_value == 1)
            $iricode_header_link_t_f = '<a href="' . $iricode_cat_site_url . '/' . $category_id_str_replaced . '">' . $iricode_name_value . '</a>';
        else
            $iricode_header_link_t_f = $iricode_name_value;

 if (!empty($name)) {
            echo $before_title . $iricode_header_link_t_f . $after_title;
        }
        if ($iricode_no_post_value == 11) {
            $iricode_no_post_values = -1;
        } else {
            $iricode_no_post_values = $iricode_no_post_value;
        }

        if ($iricode_orderby_value == 3) {
            $args = array('post_type' => $iricode_posttype_value, 'posts_per_page' => $iricode_no_post_values, 'order' => 'DESC', 'orderby' => 'title');
        } else if ($iricode_orderby_value == 2) {
            $args = array('post_type' => $iricode_posttype_value, 'posts_per_page' => $iricode_no_post_values, 'order' => 'ASC', 'orderby' => 'title');
        } else if ($iricode_orderby_value == 1) {
            $args = array('post_type' => $iricode_posttype_value, 'posts_per_page' => $iricode_no_post_values, 'orderby' => 'rand');
        }  else if ($iricode_orderby_value == 5) {
            $args = array('post_type' => $iricode_posttype_value, 'posts_per_page' => $iricode_no_post_values, 'orderby' => 'modified');
	  	}  else if ($iricode_orderby_value == 6) {
            $args = array('post_type' => $iricode_posttype_value, 'posts_per_page' => $iricode_no_post_values, 'orderby' => 'menu_order');	
        } else {
            $args = array('post_type' => $iricode_posttype_value, 'posts_per_page' => $iricode_no_post_values, 'orderby' => 'ID');
        }

        $myposts = get_posts($args);
        global $post;

		echo ' ';
            foreach ($myposts as $post) : setup_postdata($post);$loopcount++;
                ?>
              
              <?php if ($loopcount <= 10): ?>  
                <article class="mb10">
                <div class="row" <?php if ($iricode_bullet_value == 2) { ?><?php } ?>>
               
                <div class="columns medium-2 small-4"><!-- buffercode Category Link Start -->
<figure><a href="<?php the_permalink(); ?>"><?php if(get_field('newmark')): ?><span class="label">new</span><?php endif; ?>
                    <?php 
$post_thumbnail_id = get_post_thumbnail_id( get_the_ID() );
$image = wp_get_attachment_image_src( $post_thumbnail_id, 'normal' );
$title = get_the_title($post);
if ( $image ) {
  list($src, $width, $height) = $image;
  echo '<img src="' . esc_attr( $src ) .'" alt="'.$title.'">';
} else {
  echo '<img src="'.get_bloginfo('template_directory').'/img/thumbnail_normal.png" alt="'.$title.'">';
}
?> </a></figure>
                 
                </div>
                <div class="columns medium-10 small-8">
               
<h5 class="entry-title"><?php $posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo '<span class="label">'.$tag->name . ' </span>';
}
}
?>&nbsp;<a href="<?php the_permalink(); ?>"><?php
                $check_title = get_the_title();
                $title_count = strlen($check_title);
                if ($title_count > $iricode_title_count_value) {
                    $substr_title = mb_substr($check_title, 0, $iricode_title_count_value);
                    echo $substr_title . '';
                } else {
                    echo $check_title;
                }
                ?></a></h5>
               <p class="small"><?php echo mb_substr( get_the_excerpt(), 0, 70 ) . '[...]'; ?><p>
                </div>
                 </div>
                </article>
               <?php else: ?> 
               <h5 class="entry-title  mb10"><a href="<?php the_permalink(); ?>"><?php
                $check_title = get_the_title();
                $title_count = strlen($check_title);
                if ($title_count > $iricode_title_count_value) {
                    $substr_title = mb_substr($check_title, 0, $iricode_title_count_value);
                    echo $substr_title . '';
                } else {
                    echo $check_title;
                }
                ?></a>&nbsp;<?php $posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo '<span class="label">'.$tag->name . ' </span>';
}
}
?></h5>
                 <?php endif; ?>
            <?php endforeach;
			echo '';
       
        wp_reset_postdata();
        echo $after_widget;
    }

}
?>

カテゴリー選択式の場合

iricode_posttypeをiricode_categoryに変更して、ポストタイプの箇所を書き換える感じです。

 <p>カテゴリー選択: <?php wp_dropdown_categories(array('name' => $this->get_field_name('iricode_category'), 'selected' => $iricode_category_value, 'id' => $this->get_field_id('iricode_category'), 'class' => 'widefat')); ?> </p>

前の記事

Illustratorで、アウトランせずに斜めの影文字を作る 2021.02.01
次の記事

CSS切り替えで躓いたこと 2021.02.27

自作のウィジェットを作ろう

利用条件

表示内容

コード

カテゴリー選択式の場合

Illustratorで、アウトランせずに斜めの影文字を作る 2021.02.01

CSS切り替えで躓いたこと 2021.02.27