カテゴリー
コミュニケーションズ

Twenty Twentyで更新日を追加する方法

Twenty Twentyのデフォルトだと投稿日だけがヘッダに表示されるのですが更新日も表示されるように設定を変更しました。
投稿ページと固定ページのデフォルトテンプレートとカーバーテンプレートで更新日が表示されるようにしています。

固定ページの所は無理矢理な感じなんでもう少しいい方法がわかったら変更しようと思います。

投稿ページ

ダッシュボードの外観、テーマーエディターを開いて右のテーマファイルから以下を選択する。
Twenty Twenty: template-tags.php (inc/template-tags.php)

364行目

変更前

				// Post date.
				if ( in_array( 'post-date', $post_meta, true ) ) {

					$has_meta = true;
					?>
					<li class="post-date meta-wrapper">
						<span class="meta-icon">
							<span class="screen-reader-text"><?php _e( 'Post date', 'twentytwenty' ); ?></span>
							<?php twentytwenty_the_theme_svg( 'calendar' ); ?>
						</span>
						<span class="meta-text">
							<a href="<?php the_permalink(); ?>"><?php the_time( get_option( 'date_format' ) ); ?></a>
						</span>
					</li>
					<?php

				}

追加コード

 | <?php the_time( get_the_modified_date(get_option('date_format')) ); ?> 更新

変更後

				// Post date.
				if ( in_array( 'post-date', $post_meta, true ) ) {

					$has_meta = true;
					?>
					<li class="post-date meta-wrapper">
						<span class="meta-icon">
							<span class="screen-reader-text"><?php _e( 'Post date', 'twentytwenty' ); ?></span>
							<?php twentytwenty_the_theme_svg( 'calendar' ); ?>
						</span>
						<span class="meta-text">
							<a href="<?php the_permalink(); ?>"><?php the_time( get_option( 'date_format' ) ); ?></a> | <?php the_time( get_the_modified_date(get_option('date_format')) ); ?> 更新
						</span>
					</li>
					<?php

				}

固定ページのカーバーテンプレート

Twenty Twenty: content-cover.php (template-parts/content-cover.php)

変更前

							if ( is_page() ) {
								?>

								<div class="to-the-content-wrapper">

									<a href="#post-inner" class="to-the-content fill-children-current-color">
										<?php twentytwenty_the_theme_svg( 'arrow-down' ); ?>
										<div class="screen-reader-text"><?php _e( 'Scroll Down', 'twentytwenty' ); ?></div>
									</a><!-- .to-the-content -->

								</div><!-- .to-the-content-wrapper -->

								<?php
							} else {

追加コード

<br/>
<span class="modified">
							<?php the_time( get_the_modified_date(get_option('date_format')) ); ?> 更新
						</span>

変更後

							if ( is_page() ) {
								?>

								<div class="to-the-content-wrapper">

									<a href="#post-inner" class="to-the-content fill-children-current-color">
										<?php twentytwenty_the_theme_svg( 'arrow-down' ); ?>
										<div class="screen-reader-text"><?php _e( 'Scroll Down', 'twentytwenty' ); ?></div>
									</a><!-- .to-the-content -->

								</div><!-- .to-the-content-wrapper -->


<br/>
<span class="modified">
							<?php the_time( get_the_modified_date(get_option('date_format')) ); ?> 更新
						</span>
								<?php
							} else {

固定ページのデフォルトテンプレート

Twenty Twenty: entry-header.php (template-parts/entry-header.php)

変更前

		// Default to displaying the post meta.
		twentytwenty_the_post_meta( get_the_ID(), 'single-top' );
		?>

	</div><!-- .entry-header-inner -->

</header><!-- .entry-header -->

追加コード

<?php if ( is_page() ) : ?>
<div class="entry-meta">
<br/>
<span class="modified">
							<?php the_time( get_the_modified_date(get_option('date_format')) ); ?> 更新
						</span>
	
	</div>
<?php endif; ?>

変更後

		// Default to displaying the post meta.
		twentytwenty_the_post_meta( get_the_ID(), 'single-top' );
		?>
		
		
		<?php if ( is_page() ) : ?>
<br/>
<span class="modified">
							<?php the_time( get_the_modified_date(get_option('date_format')) ); ?> 更新
						</span>
		<?php endif; ?>
		

	</div><!-- .entry-header-inner -->

</header><!-- .entry-header -->

追加 CSS

ダッシュボードの外観、カスタマイズ、追加CSSを選択する。
以下を追加する。

.modified {
	color: #6d6d6d;
	font-size:  0.9em;
}

以下のような感じになりました。

TwentyTwentyに変更日を追加

Twenty Nineteenの時の設定方法

作成者: えいち / H

マジシャンのえいち / Hです。
東京でプロマジシャン|出張、派遣をやってます。
記事の感想、コメント、質問などはTwitterにお願いします。
フォローも良かったらお願いします。
Instagram / YouTube / Facebook