投稿一覧のデザインを大きく変更したい

My Snow Monkey に下記を追加してください。「投稿」かつ「リッチメディア」のときに書き換えが実行されます。

add_filter(
	'snow_monkey_pre_template_part_render',
	function( $html, $slug, $name, $vars ) {
		if ( 'template-parts/loop/entry-summary' === $slug && 'post' === $name ) {
			if ( isset( $vars['_entries_layout'] ) && 'rich-media' === $vars['_entries_layout'] ) {
				ob_start();
				?>
				<section class="c-entry-summary c-entry-summary--post c-entry-summary--my-rich-media">
					<?php \Framework\Helper::get_template_part( 'template-parts/loop/entry-summary/figure/figure' ); ?>

					<div class="c-entry-summary__body">
						<header class="c-entry-summary__header">
							<?php \Framework\Helper::get_template_part( 'template-parts/loop/entry-summary/title/title' ); ?>
						</header>
					</div>

					<div class="c-entry-summary--my-rich-media__meta">
						<div class="c-entry-summary--my-rich-media__author">
							author: <?php the_author(); ?>
						</div>
						<span class="c-entry-summary--my-rich-media__published">
							<?php the_time( get_option( 'date_format' ) ); ?>
						</span>
						<span class="c-entry-summary--my-rich-media__categories">
							<?php
							$categories = get_the_terms( get_the_ID(), 'category' );
							if ( $categories ) {
								foreach ( $categories as $category ) {
									?>
									<a href="<?php echo esc_url( get_term_link( $category ) ); ?>">#<?php echo esc_html( $category->name ); ?></a>
									<?php
								}
							}
							?>
						</span>
						<span class="c-entry-summary--my-rich-media__tags">
							<?php
							$tags = get_the_terms( get_the_ID(), 'post_tag' );
							if ( $tags ) {
								foreach ( $tags as $tag ) {
									?>
									<a href="<?php echo esc_url( get_term_link( $tags ) ); ?>">#<?php echo esc_html( $tags->name ); ?></a>
									<?php
								}
							}
							?>
						</span>
					</div>
				</section>
				<?php
				return ob_get_clean();
			}
		}
		return $html;
	},
	10,
	4
);

ごっそり書き換えているので、アップデートの際は影響がでることがあるかもしれません。アップデートの際はご注意ください。

CSS も書いてみました。適当に調整してください。

.c-entry-summary--my-rich-media__meta {
	font-size: 12px;
}
.c-entry-summary--my-rich-media__author {
	color: #999;
}
.c-entry-summary--my-rich-media__categories {
	color: red;
}
.c-entry-summary--my-rich-media__categories a {
	color: inherit;
	text-decoration: none;
}
.c-entry-summary--my-rich-media__tags {
	color: orange;
}
.c-entry-summary--my-rich-media__tags a {
	color: inherit;
	text-decoration: none;
}

♥ 1

いいねをした人: