/ / / 【WordPress】プラグインなしでサイドバーにサムネイル付き新着記事を表示する方法

【WordPress】プラグインなしでサイドバーにサムネイル付き新着記事を表示する方法

wordpress-jacket

WordPressデフォルトの新着記事ウィジェットでは、表示できる項目がかなり限られているため、好きな項目を表示できる自作ウィジェットを実装してみました。

表示可能項目は下記の通り。

表示可能項目
  • サムネイル
  • 記事タイトル
  • 本文抜粋
  • カテゴリー

サムネイル・タイトルは強制表示にしました。まさかタイトルを外す運用はしないだろうし、サムネイルを表示しないならWordPress標準ウィジェットでこと足りるためです。

さて、それでは早速説明に参りましょう。

functions.php追記

下記ソースをfunctions.phpに追記してください。

/* 人気記事一覧ウィジェット */
class New_Posts extends WP_Widget {
   /*   コンストラクタ   */
   function New_Posts() {
      parent::WP_Widget(
         false,
         $name = 'New_Posts',
         array( 'description' => '新着記事を一覧表示します。' )
      );
   }
   
   /* カスタマイズ画面で可変に設定したいパラメータをなどを記述 */
   function form($instance) {
      ?>
      <p>
         <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル:'); ?></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>
      <p>
         <label for="<?php echo $this->get_field_id('limit'); ?>"><?php _e('記事件数:'); ?></label>
         <input type="text" id="<?php echo $this->get_field_id('limit'); ?>" 
            name="<?php echo $this->get_field_name('limit'); ?>" 
            value="<?php echo esc_attr( $instance['limit'] ); ?>" size="3">
      </p>
      <p>
         <label for="<?php echo $this->get_field_id('excerpt'); ?>"><?php _e('記事抜粋:'); ?></label>
         <select name="<?php echo $this->get_field_name('excerpt'); ?>" id="<?php echo $this->get_field_id('excerpt'); ?>">
            <option value="0" <?php if (esc_attr( $instance['excerpt'] ) === '0') { echo 'selected'; } ?>>表示しない</option>
            <option value="1" <?php if (esc_attr( $instance['excerpt'] ) === '1') { echo 'selected'; } ?>>表示する</option>
         </select>
      </p>
      <?php if (esc_attr( $instance['excerpt'] ) === '1') { ?>
      <p>
         <label for="<?php echo $this->get_field_id('words'); ?>"><?php _e('抜粋文字数:'); ?></label>
         <input type="text" id="<?php echo $this->get_field_id('words'); ?>" 
            name="<?php echo $this->get_field_name('words'); ?>" 
            value="<?php echo esc_attr( $instance['words'] ); ?>" size="3">
      </p>
      <?php } ?>
      <p>
         <label for="<?php echo $this->get_field_id('category'); ?>"><?php _e('カテゴリ:'); ?></label>
         <select name="<?php echo $this->get_field_name('category'); ?>" id="<?php echo $this->get_field_id('category'); ?>">
            <option value="0" <?php if (esc_attr( $instance['category'] ) === '0') { echo 'selected'; } ?>>表示しない</option>
            <option value="1" <?php if (esc_attr( $instance['category'] ) === '1') { echo 'selected'; } ?>>表示する</option>
         </select>
      </p>
      <?php
   }
   
   /* カスタマイズ画面の入力内容が変更された場合の処理 */
   function update($new_instance, $old_instance) {
      $instance = $old_instance;
      $instance['title'] = strip_tags($new_instance['title']);
      $instance['limit'] = is_numeric($new_instance['limit']) ? $new_instance['limit'] : 5;
      $instance['excerpt'] = strip_tags($new_instance['excerpt']) ? $new_instance['excerpt'] : '0';
      if (esc_attr( $instance['excerpt'] ) === '1') {
         $instance['words'] = is_numeric($new_instance['words']) ? $new_instance['words'] : 50;
      }
      $instance['category'] = strip_tags($new_instance['category']) ? $new_instance['category'] : '0';
      return $instance;
   }

   /* ウィジェットの表示時のデザインを記述 */
   function widget($args, $instance) {
      extract($args);
      echo $before_widget;
      
      if(!empty($instance['title'])) {
         $title = apply_filters('widget_title', $instance['title']);
      }
      if ($title) {
         echo $before_title . $title . $after_title;
      } else {
         echo '新着記事';
      }
      
      // クエリパラメータを設定
      $args = array(
         'posts_per_page'=> $instance['limit'],
         'orderby' => 'date',
         'order' => 'DESC'
      );
      // クエリ実行
      $results = new WP_Query($args);
      
      ?>
      <?php if($results->have_posts()): ?>
         <ul class="new-list">
         <?php while ($results->have_posts()) : $results->the_post(); ?>
            <li><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" target="_self">
                  <?php if (has_post_thumbnail()) { echo get_the_post_thumbnail($post->ID, 'thumbnail', 'class=new-thumbnail'); } else { ?>
                     <img src="<?php echo catch_the_image(); ?>" class="new-thumbnail wp-post-image" width="100" height="100" alt="<?php the_title_attribute(); ?>">
                  <?php } ?>
               </a>
               <a href="<?php the_permalink(); ?>"
                  class="new-title" title="<?php the_title_attribute(); ?>" target="_self">
                  <?php echo the_title_attribute(); ?>
               </a>
               <?php if (esc_attr( $instance['excerpt'] ) === '1') { ?>
               <div class="new_excerpt"><?php echo mb_substr(strip_tags(get_the_content()), 0, $instance['words']) .' ...'; ?></div>
               <?php } ?>
               <?php if (esc_attr( $instance['category'] ) === '1') { $categories_list = get_the_category_list(', '); ?>
               <span class="new-category"><?php echo $categories_list; ?></span>
               <?php } ?>
            </li>
         <?php endwhile; ?>
         </ul>
      <?php endif; ?>
      <?php
      echo $after_widget;
   }
}
/* 自作ウィジェットを登録 */
register_widget('New_Posts');

ここからはソースの説明となりますので、ささっと実装したい方は飛ばして頂いて問題ありません。

New_Posts()

ウィジェット情報を登録しています。ウィジェット名’New_Posts‘を変更したければ、上記ソースすべての’New_Posts‘を任意の変更内容に置き換えてください。

form()

管理画面・カスタマイザーの表示内容です。ユーザーが変更したいパラメータを任意入力できます。

update()

form()で定義した入力項目がユーザーによって変更された場合の挙動を記述しています。入力内容が不正値でなければ上書きします。不正値であればデフォルト値を入力します。

widget()

form()で設定したパラメータと元に新着記事を取得し、画面出力します。当たり前ですが、投稿記事が一件もなければ新着記事は出力されません。
※get_the_post_thumbnail()の第二引数に、’thumbnail’を指定していますが、これはサムネイルサイズの名称です。WordPressではデフォルトで、下記サイズが選択できますのでお好みで。

サムネイルサイズ
  • thumbnail:デフォルト 150px × 150px
  • medium:デフォルト 300px × 300px
  • large:デフォルト 640px × 640px
  • full:アップロードした画像の元サイズ
register_widget()

上記で定義したNew_Postsを使用可能ウィジェットとして登録します。

style.css追記

style.cssに下記ソースを追記して、デザイン体裁を整えます。

/* 新着記事一覧 */
.new-list li {
   display: block;
   overflow: hidden;
   position: relative;
   clear: both;
   margin: 0 0 10px 0 !important;
   border-bottom: 1px solid #444;
}

.new-list li:hover {
   filter: alpha(opacity=85);
   -moz-opacity: 0.85;
   opacity: 0.85;
   background-color: #fddac4 !important;
}

.new-thumbnail {
   float: left;
   margin: 10px 10px 10px 10px !important;
}

.new-title {
   color: #f22d30 !important;
   display: block;
   font-size: 14px;
   font-weight: 600;
   margin: 10px 15px 0 0 !important;
}

.new-category {
   display: block;
   text-align: right;
   font-size: 12px;
   font-weight: 600;
   background-color: #DD4453;
   color: #fff;
   margin: 5px 10px 10px 0;
   padding: 2px 15px;
   float: right;
}

.new-category a,
.new-category a:hover {
   color: #fff !important;
}

.new_excerpt {
   font-size: 11px;
   margin-left: 120px;
   padding: 3px 10px 0 0;
}

ウィジェット表示

登録したウィジェットをサイドバーに表示しましょう。まずダッシュボードにログインします。

2016-02-14_020156

左側メニューの外観>ウィジェットを選択します。

2016-02-14_020258

利用できるウィジェット」に表示されている「New_Posts」をメインサイドバーにドラッグ&ドロップします。追加位置はお好きな場所で大丈夫です。

2016-02-16_000132

下記パラメータを設定し、「保存」ボタンを押下します。

パラメータ
  • タイトル:ウィジェット表示時のタイトルを入力してください。
  • 記事件数:画面表示したい記事件数を数値で入力してください。
  • 記事抜粋:記事抜粋をの表示有無をコンボボックスから選択してください。
  • 抜粋文字数:記事抜粋を表示する場合の抜粋文字数を数値で入力してください。
  • カテゴリ:記事が所属するカテゴリの表示有無をコンボボックスから選択してください。

2016-02-16_000357

ブログのトップページを表示し、サイドバーにウィジェットが表示されていることを確認します。デザインをカスタマイズしたい場合はstyle.cssの記述をご自由に編集なさってください。

2016-02-16_000832

まとめ

前回記事「【WordPress】プラグインなしで人気記事をランキング表示する方法」で自作ウィジェットの作り方で学んだので、せっかくだから別のものを作ろうと思い立ち、手始めに長らく放置していた新着記事を実装してみました。

項目さえ出力さえしてしまえば、あとはCSS側でどうにでもデザイン編集できるので、プログラミングに明るくない方でもそこそこカスタマイズできる仕上がりになっていると思います。もしもわからないことがありましたら、お気軽にお尋ねください。それでは。

この記事をシェアする
このブログをフォローする