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

0
いいねをした人: 居ません
  • このトピックには2件の返信、2人の参加者があり、最後にshuyaにより4年、 4ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #54301
    shuya
    閲覧者
    1

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】最新版
    【お使いのブラウザ】Chrome
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

    投稿一覧のレイアウト、デザインと以下のようにしたいです。

    サムネイルの下に、タイトル、著者、日付、カテゴリーと入れたいのですが、どうすればよろしいでしょうか?

    0
    いいねをした人: 居ません
    #54333
    アバター画像キタジマ タカシ
    参加者
    2421

    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
    いいねをした人:
    #54416
    shuya
    閲覧者
    1

    北島様、ありがとうございます!
    実装できました。

    1
    いいねをした人: 居ません
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「投稿一覧のデザインを大きく変更したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。