アイキャッチ画像付「最近の投稿」の ウイジェット を作成します。
サイドバー フッターに掲載される「最近の投稿」が、アイキャッチ画像とともに表示されるため、より見やすくなります。
カスタマイズ概要
- 出来上がりイメージは、この画面のサイドバーでご確認ください。
- 利用するファイル:functions.php
- 当カスタマイズでは、「ワードプレス新テーマ Twentyseventeen カスタマイズ(記事一覧表示変更)」記事の設定内容を利用します。その設定がまだお済でない場合、下記サイトを参考にしながら、前もって設定をお願いします。
ワードプレス新テーマ Twentyseventeen カスタマイズ(記事一覧表示変更)
カスタマイズ手順
- 下のフォルダーにある もととなるオリジナルの「最近の投稿」ウイジェットのコピーを、任意の場所に、任意のファイル名で保存してください。
- wp-includes
-
- widgets
-
- class-wp-widget-recent-posts.php
- エディターで、下記の修正をしてください。
(オレンヂ色部分は修正後、緑色のコメント欄は修正前の設定値)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; }
- 修正を加えた class 構文全体を、functioins.php にコピー ペースト してください。
- 次の構文を、functions.php に追加してください。
- 「管理画面」→「外観」→「ウイジェット」ページで「Recent Posts with Thumbnail」というウイジェットが確認できると思います。
add_action( 'widgets_init', 'register_recent_widget' );
function register_recent_widget() {
register_widget( 'Widget_Recent_Posts_thumbnail' );
}
追記
- ウイジェットは英語で表示されます。国際化設定を行っていますので、日本語表記が必要な場合は、言語ファイルをご準備ください。
- class名、descrription などは、適時名前を修正可能です。
- レスポンシブ対応の為、タイトル文字サイズを小さくしています。文字数が多いタイトルがない場合は、多少文字サイズは大きくすることは可能です。
注意点
- functions.php は、カスタマイズ前に、必ずバックアップをとってください。もしも、動作に異常がでた場合は、カスタマイズ前の functions.php に置き換えてください。
- オリジナルの class-wp-widget-recent-posts.php は、絶対に変更しないでください。
- テスト環境で動作を確認してからご利用ください。
- 子テーマ上で実施してください。
“サイドバー 最近の投稿 に アイキャッチ画像 追加” への1件の返信