WordPress Popular Posts のランキング表示を Snow Monkeyの人気記事ランキングウィジットと同じデザインにする

カスタマイズ方法

PHP

My Snow Monkey プラグインか、子テーマの functions.php に下記のコードを追加してください。

/**
 * WordPress Popular Posts のランキング表示を Snow Monkeyの人気記事ランキングウィジットと同じデザインにする
 *
 * @param array $popular_posts
 * @param array $instance
 * @return string
 */
add_filter(
	'wpp_custom_html',
	function( $popular_posts, $instance ) {
		global $post;
		ob_start();
		?>
		<div class="wpaw-ranking">
			<ul class="wpaw-ranking__list wpaw-posts-list">
				<?php foreach ( $popular_posts as $popular_post ) : ?>
					<?php $post = get_post( $popular_post->id ); ?>
					<?php setup_postdata( $post ); ?>
					<li class="wpaw-ranking__item wpaw-posts-list__item">
						<a href="<?php the_permalink(); ?>">
							<div class="wpaw-ranking__figure wpaw-posts-list__figure">
								<?php the_post_thumbnail( 'thumbnail' ); ?>
							</div>
							<div class="wpaw-ranking__body wpaw-posts-list__body">
								<?php
								$taxonomies = get_post_taxonomies( get_the_ID() );
								$_taxonomy  = ! empty( $taxonomies[0] ) ? $taxonomies[0] : false;
								$terms      = ( $_taxonomy ) ? get_the_terms( get_the_ID(), $_taxonomy ) : [];
								?>
								<?php if ( $terms ) : ?>
									<div class="wpaw-ranking__taxonomy wpaw-posts-list__taxonomy">
										<?php foreach ( $terms as $_term ) : ?>
											<span class="wpaw-term wpaw-term--<?php echo esc_attr( $_taxonomy ); ?>-<?php echo esc_attr( $_term->term_id ); ?> wpaw-ranking__term">
												<?php echo esc_html( $_term->name ); ?>
											</span>
											<?php break; ?>
										<?php endforeach; ?>
									</div>
								<?php endif; ?>

								<div class="wpaw-ranking__title wpaw-posts-list__title"><?php the_title(); ?></div>
								<div class="wpaw-ranking__date wpaw-posts-list__date"><?php the_time( get_option( 'date_format' ) ); ?></div>
							</div>
						</a>
					</li>
				<?php endforeach; ?>
			</ul>
		</div>
		<?php
		return ob_get_clean();
	},
	10,
	2
);