サイドバー 最近の投稿 に アイキャッチ画像 追加

アイキャッチ画像付「最近の投稿」の ウイジェット を作成します。

サイドバー フッターに掲載される「最近の投稿」が、アイキャッチ画像とともに表示されるため、より見やすくなります。

カスタマイズ概要

  • 出来上がりイメージは、この画面のサイドバーでご確認ください。
  • 利用するファイル:functions.php
  • 当カスタマイズでは、「ワードプレス新テーマ Twentyseventeen カスタマイズ(記事一覧表示変更)」記事の設定内容を利用します。その設定がまだお済でない場合、下記サイトを参考にしながら、前もって設定をお願いします。
    ワードプレス新テーマ Twentyseventeen カスタマイズ(記事一覧表示変更)

カスタマイズ手順

  1. 下のフォルダーにある もととなるオリジナルの「最近の投稿」ウイジェットのコピーを、任意の場所に、任意のファイル名で保存してください。
    • wp-includes
      • widgets
        • class-wp-widget-recent-posts.php
  2. エディターで、下記の修正をしてください。
    オレンヂ色部分は修正後、緑色のコメント欄は修正前の設定値)
    
    class Widget_Recent_Posts_thumbnail extends WP_Widget { /* WP_Widget_Recent_Posts */
    
    
    
    public function __construct() {
      $widget_ops = array(
        'classname' => 'widget_recent_entries_thumbnail', /* widget_recent_entries */
        'description' => __( 'Recent Posts with Thumbnail','twentyseventeenchild' ), /* 'Your site’s most recent Posts.' */
        'customize_selective_refresh' => true,
      );
      parent::__construct( 'my-recent-posts', __( 'Recent Posts with Thumbnail','twentyseventeenchild' ), $widget_ops ); /* 'recent-posts', __( 'Recent Posts') */
      $this->alt_option_name = 'widget_recent_entries_thumbnail'; /* 'widget_recent_entries' */
    }
    
    
    
    public function widget( $args, $instance ) {
      if ( ! isset( $args['widget_id'] ) ) {
      $args['widget_id'] = $this->id;
      }
    
      $title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' );
    
      $title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
    
      $number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;
      if ( ! $number )
        $number = 5;
        $show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;
    
      $r = new WP_Query( apply_filters( 'widget_posts_args', array(
        'posts_per_page'      => $number,
        'no_found_rows'       => true,
        'post_status'         => 'publish',
        'ignore_sticky_posts' => true
      ) ) );
    
      if ($r->have_posts()) :
        echo $args['before_widget'];
      if ( $title ) {
        echo $args['before_title'] . $title . $args['after_title'];
      } ?>
      <ul>
      <?php while ( $r->have_posts() ) : $r->the_post(); ?>
        <li>
          <div class="home-box"><!-- added by MTA -->
            <div class="home-thumbnail"><!-- added by MTA -->
              <?php /* thumbnail is added by MTA */
                if ( has_post_thumbnail() ) {
                  the_post_thumbnail('thumbnail');
                }else {
                  echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/assets/images/no-thumb.png" />';
                }
              ?>
            </div><!-- home-thumbnail -->
            <div class="home-content" style="font-size:0.75rem; line-height:1.2;"><!-- added by MTA -->
              <a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
                <?php if ( $show_date ) : ?>
                  <span class="post-date">(<?php echo get_the_date(); ?>)</span>
                <?php endif; ?>
            </div><!-- home-content -->
          </div><!-- home-box -->
        </li>
        <?php endwhile; ?>
        </ul>
      <?php
      echo $args['after_widget'];
      wp_reset_postdata();
      endif;
    }
    
    
  3. 修正を加えた class 構文全体を、functioins.php にコピー ペースト してください。
  4. 次の構文を、functions.php に追加してください。
  5. 
    add_action( 'widgets_init', 'register_recent_widget' );
    function register_recent_widget() {
      register_widget( 'Widget_Recent_Posts_thumbnail' );
    }
    
    
  6. 「管理画面」→「外観」→「ウイジェット」ページで「Recent Posts with Thumbnail」というウイジェットが確認できると思います。

追記

  • ウイジェットは英語で表示されます。国際化設定を行っていますので、日本語表記が必要な場合は、言語ファイルをご準備ください。
  • class名、descrription などは、適時名前を修正可能です。
  • レスポンシブ対応の為、タイトル文字サイズを小さくしています。文字数が多いタイトルがない場合は、多少文字サイズは大きくすることは可能です。

注意点

  • functions.php は、カスタマイズ前に、必ずバックアップをとってください。もしも、動作に異常がでた場合は、カスタマイズ前の functions.php に置き換えてください。
  • オリジナルの class-wp-widget-recent-posts.php は、絶対に変更しないでください。
  • テスト環境で動作を確認してからご利用ください。
  • 子テーマ上で実施してください。

“サイドバー 最近の投稿 に アイキャッチ画像 追加” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です