１からテーマを作るのが面倒くさいので既存「twentytwenty」というテーマを改造することにしました。

このテーマはワードプレスインストール時にテーマフォルダに入っています。レスポンシブヘッダーメニューが標準であり、私の好きなシンプルなメインワンカラムデザインで、そもそも標準でナイスな感じのテーマです。

ちなみにテーマはほぼ自作しかしたことがなく、他の人のテーマとか見たことが無かったので結構手探りです。

トップページなどは記事の抜粋とする

カテゴリー一覧とか、タグとか、とにかく記事ページ以外では抜粋で十分なので、修正しました。

get_theme_modは設定値を拾ってくるらしいですが、使ったこともないし設定値がどこで設定してるのか不明だったので除去しました。

// ホーム画面でも全文出力されてしまうので、ホーム画面でも抜粋表示にする要修正
//if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
if ( !is_singular() ) {
	the_excerpt();
} else {
	the_content( __( 'Continue reading', 'twentytwenty' ) );
}

記事ページのカスタマイズをする

コメントの有無の記載を除去する

記事ページの画面上部にある、タイトルとメタ情報を修正します。まず、コメントがあるかないかってどうでもいい情報は消したいと思います。（画像の赤線箇所です）ここのcommentsをコメントアウトします。

$post_meta = apply_filters(
			'twentytwenty_post_meta_location_single_top',
			array(
				'author',
				'post-date',
				//'comments',
				'sticky',
			)
		);

カテゴリを投稿者の左に表示する

先ほど、コメントを除去しましたが、今度はカテゴリを追加させます。同じ個所を以下のように修正します。

$post_meta = apply_filters(
			'twentytwenty_post_meta_location_single_top',
			array(
				'categories',
				'author',
				'post-date',
				//'comments',
				'sticky',
			)
		);

これだけで表示されますが、一番右にカテゴリが表示されてしまいます。なので、以下のように修正します。

まずは、カテゴリーの表示の記載を投稿者より前に移動する。

// Categories.
				if ( in_array( 'categories', $post_meta, true ) && has_category() ) {

					$has_meta = true;
					?>
					<li class="post-categories meta-wrapper">
						<span class="meta-icon">
							<span class="screen-reader-text"><?php _e( 'Categories', 'twentytwenty' ); ?></span>
							<?php twentytwenty_the_theme_svg( 'folder' ); ?>
						</span>
						<span class="meta-text">
							<?php _ex( 'In', 'A string that is output before one or more categories', 'twentytwenty' ); ?> <?php the_category( ', ' ); ?>
						</span>
					</li>
					<?php

				}

				// Author.
				if ( post_type_supports( get_post_type( $post_id ), 'author' ) && in_array( 'author', $post_meta, true ) ) {

					$has_meta = true;
					?>
					<li class="post-author meta-wrapper">
						<span class="meta-icon">
							<span class="screen-reader-text"><?php _e( 'Post author', 'twentytwenty' ); ?></span>
							<?php twentytwenty_the_theme_svg( 'user' ); ?>
						</span>
						<span class="meta-text">
							<?php
							printf(
								/* translators: %s: Author name. */
								__( 'By %s', 'twentytwenty' ),
								'<a href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author_meta( 'display_name' ) ) . '</a>'
							);
							?>
						</span>
					</li>
					<?php

				}

これは、最初に設定した配列である、$post_metaの要素を見てヘッダー上部に表示するメタ情報を設定しています。

categoriesという要素を配列に追加しているので、表示されるし、コメントは消したので表示されないという仕組みです。

このInという記載を消したい場合は以下のように、Inの箇所を消して修正してください。

// Categories.
				if ( in_array( 'categories', $post_meta, true ) && has_category() ) {

					$has_meta = true;
					?>
					<li class="post-categories meta-wrapper">
						<span class="meta-icon">
							<span class="screen-reader-text"><?php _e( 'Categories', 'twentytwenty' ); ?></span>
							<?php twentytwenty_the_theme_svg( 'folder' ); ?>
						</span>
						<span class="meta-text">
							<?php _ex( '', 'A string that is output before one or more categories', 'twentytwenty' ); ?> <?php the_category( ', ' ); ?>
						</span>
					</li>
					<?php

				}

タグを表示する

同じようにタグ情報を表示させましょう。配列にtagsを追加します。

$post_meta = apply_filters(
			'twentytwenty_post_meta_location_single_top',
			array(
				'categories',
				'tags',
				'author',
				'post-date',
				//'comments',
				'sticky',
			)
		);

もしタグの表示順番を変えたい場合は、カテゴリと同じよう記載順番を変更すればOKです。

記事下のメタ情報を修正する

記事下のメタ情報は普通はタグのみ出力していますが、ヘッダーのメタ情報と同じ概念で修正できます。

以下はカテゴリをー追加した例です。

$post_meta = apply_filters(
			'twentytwenty_post_meta_location_single_bottom',
			array(
				'categories',
				'tags',
			)
		);

Editを消す

このEditは管理画面へリンクになるので、できるだけ隠しておきたいので消しましょう。

edit_post_link();を消してしまえばOKです。

<div class="section-inner">
		<?php
		wp_link_pages(
			array(
				'before'      => '<nav class="post-nav-links bg-light-background" aria-label="' . esc_attr__( 'Page', 'twentytwenty' ) . '"><span class="label">' . __( 'Pages:', 'twentytwenty' ) . '</span>',
				'after'       => '</nav>',
				'link_before' => '<span class="page-number">',
				'link_after'  => '</span>',
			)
		);

		// 編集ボタンを本文中に表示する
		// edit_post_link();

		// Single bottom post meta.
		// タグ出ますここに
		twentytwenty_the_post_meta( get_the_ID(), 'single-bottom' );

		if ( post_type_supports( get_post_type( get_the_ID() ), 'author' ) && is_single() ) {

			get_template_part( 'template-parts/entry-author-bio' );

		}
		?>

記事上部のカテゴリを消す

カテゴリはメタ情報として出力しているので、タイトル上のカテゴリは消しましょう。割と大きくコメントアウトします。

/*

		$show_categories = apply_filters( 'twentytwenty_show_categories_in_entry_header', true );

		
		if ( true === $show_categories && has_category() ) {
			?>

			<div class="entry-categories">
				<span class="screen-reader-text"><?php _e( 'Categories', 'twentytwenty' ); ?></span>
				<div class="entry-categories-inner">
					<?php // カテゴリーを表示する　?>
					<?php the_category( ' ' ); ?>
				</div><!-- .entry-categories-inner -->
			</div><!-- .entry-categories -->

			<?php
		}
		*/

		if ( is_singular() ) {
			the_title( '<h1 class="entry-title">', '</h1>' );
		} else {
			the_title( '<h2 class="entry-title heading-size-1"><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' );
		}

投稿一覧から記事下に出力しているメタ情報を非表示にする

ちょっと意味がわからないと思いますので、画像の赤枠の箇所を消します。

通常はタグだけ出しているのですが、タグごと記事の上に出しています。記事ページ以外ではここは出力する必要ないので消します。

//追加
		if( is_singular() ){
			twentytwenty_the_post_meta( get_the_ID(), 'single-bottom' );
		}
		//　ここまで

		if ( post_type_supports( get_post_type( get_the_ID() ), 'author' ) && is_single() ) {

			get_template_part( 'template-parts/entry-author-bio' );

		}
		?>

自分のウィジェットを投入する

ウィジェットはfunctions.phpにて定義をして、footer-menus.widget.phpで表示しています。

$has_sidebar_1 = is_active_sidebar( 'sidebar-1' );
$has_sidebar_2 = is_active_sidebar( 'sidebar-2' );

<?php if ( $has_sidebar_1 || $has_sidebar_2 ) { ?>

functionに定義があれば、これらはtrueとなります。そして、dynamic_sidebarで画面に出力をしています。

<?php if ( $has_sidebar_1 ) { ?>

	<div class="footer-widgets column-one grid-item">
		<?php dynamic_sidebar( 'sidebar-1' ); ?>
	</div>

<?php } ?>

functions.phpのtwentytwenty_sidebar_registrationメソッドを参考にウィジェットを追加して、上記と同じような記載をすれば独自のウィジェットを追加できそうです。

修正箇所の確認方法

まずはindex.phpを起点に見ていきます。基本的にここに書かれていることが全てなのですが、パーツをかなり分けて読み込んでいるため、色々な定義が色々なファイルに散らばっています。

ヘッダー関連なら、get_header()が呼ばれているので、header.phpを見ていきます。

header.phpの下ほうに行くと、get_template_partというメソッドが呼ばれています。

<?php
			// Output the search modal (if it is activated in the customizer).
			if ( true === $enable_header_search ) {
				get_template_part( 'template-parts/modal-search' );
			}
			?>

		</header><!-- #site-header -->

		<?php
		// Output the menu modal.
		// 小画面の時のメニューを表示する
		get_template_part( 'template-parts/modal-menu' );

これは、template-partsフォルダのファイルを読み込んでいます。

このような感じでファイルを読み込んでいくような感じです。

WordPressのテーマtwentytwentyを改造する