TwentyNineteenのトップインデックスページの新着一覧をさらにカスタマイズする

当記事は当ブログの以下の記事にあるカスタマイズをした方向けのカスタマイズです。

Twenty Nineteenのトップページ新着一覧をタイル風にカスタマイズする

今回のカスタマイズでは以下のような追加のカスタマイズをしていますので、お好みのカスタマイズがあれば、どれか試してみてください！

表示される順番を「記事タイトル➔サムネイル」から「サムネイル➔記事タイトル」に変更
各記事の下部に表示されるタグとコメントの表示を削除

子テーマで使ってますよね？

当記事は前のカスタマイズの追加分なので、この記事のカスタマイズをする場合は、子テーマを使っていると思います。

使用していない場合は、子テーマを使用してください。

表示される順番を「記事タイトル➔サムネイル」から「サムネイル➔記事タイトル」に変更

前回のカスタマイズだと、こんな感じで記事タイトルが一番上になっています。

この順番によって気になるのが、左右の記事のタイトルの行数が異なった場合に、画像の位置が上下にずれてしまいます。
タイトルと、アイキャッチ画像の順番を変えるだけでそのずれが解消されます。

このカスタマイズで、こんな感じにアイキャッチ画像が一番上に、その次にタイトルが来るようにカスタマイズします。

phpファイルを編集する

タイトルとアイキャッチ画像の順番変更は、難しいことは特にしませんが、phpファイルを編集しなければいけません。

今回使うファイルは前回のカスタマイズでも使った【template-parts/content】にある、「content.php」と「content-excerpt.php」のふたつのファイルです。
前回も使ったので、どちらのファイルも子テーマにあるはずです。

どちらのファイルも構造はほとんど同じで、やることも同じなので、まとめて解説していきます。

今回は例として、「content.php」のファイルを使って解説します。
カスタマイズする場合は、「content.php」と「content-excerpt.php」の両方とも編集してください。

コードを移動させる

まずは、content.phpのファイル内にある以下の1行のコードを探してください。

<?php twentynineteen_post_thumbnail(); ?>

こちらのコードをそのちょっと上にある
<header class=”entry-header”>の上に移動させます。

移動後のcontent.phpのコードはこんな感じになります。

<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */

?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>	
	<?php twentynineteen_post_thumbnail(); ?>/*移動したコード*/
	<header class="entry-header">
		<?php
		if ( is_sticky() &amp;&amp; is_home() &amp;&amp; ! is_paged() ) {
			printf( '<span class="sticky-post">%s</span>', _x( 'Featured', 'post', 'twentynineteen' ) );
		}
		if ( is_singular() ) :
			the_title( '<h1 class="entry-title">', '</h1>' );
		else :
			the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
		endif;
		?>
	</header><!-- .entry-header -->


	<footer class="entry-footer">
		<?php twentynineteen_entry_footer(); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-${ID} -->

content-excerpt.php も同様にコードを移動させてください。

これでトップページやカテゴリページをチェックして、アイキャッチ画像が一番上になっていたら無事にカスタマイズができています。

レスポンシブ対応させる

このままのここまでのカスタマイズをスマホで見るとこんな感じで表示されます。

隙間だらけで見にくいですし、あまりまとまりがないです。
これを以下のようにコンパクトにします。

style.cssにコードを追加

レスポンシブ対応させるためには、以下のコードをstyle.cssにコピペしてください。

.entry{
	margin-top:70px;
}
.hfeed .post-thumbnail{
	margin-bottom:10px;
}
.hfeed .entry .entry-header,
.hfeed .entry .entry-footer{
	margin-top:0;
	margin-bottom:0;
}
.hfeed .entry .entry-header h2:before{
	content:none;
}

各記事の下部に表示されるタグとコメントの表示を削除

お次は新着一覧などで各記事の下部に表示されているタグとコメントの表示を削除するカスタマイズです。
ちなみにこの部分です。

個人的にはわざわざタグとコメントは一覧で必要ないなと思うので、これらを表示されないようにします。

ちなみにデフォルト状態だと投稿者名も表示されています。
当ブログではこちらの記事で、投稿者名を削除しています。

【WordPress】Twenty Nineteen投稿者を消すカスタマイズ【ほぼコピペＯＫ】

こちらの記事で、functions.phpを編集した場合は、改めてこちらの記事のコードに書き換えてください。

functions.phpにコピペする

新着一覧等に表示されているタグやコメント、投稿者の表示を消す場合は、以下のコードをfunctions.phpにコピペしてください。

//投稿者・タグ・コメント削除
function twentynineteen_entry_footer() {
 // Hide author, post date, category and tag text for pages.
    if ( 'post' === get_post_type() ) {
 
        // Posted on
        twentynineteen_posted_on();
 
        /* translators: used between list items, there is a space after the comma. */
        $categories_list = get_the_category_list( __( ', ', 'twentynineteen' ) );
        if ( $categories_list ) {
            /* translators: 1: SVG icon. 2: posted in label, only visible to screen readers. 3: list of categories. */
            printf(
                '<span class="cat-links">%1$s<span class="screen-reader-text">%2$s</span>%3$s</span>',
                twentynineteen_get_icon_svg( 'archive', 16 ),
                __( 'Posted in', 'twentynineteen' ),
                $categories_list
            ); // WPCS: XSS OK.
        }
    }
	//tag
 	if ( is_single() ){
		/* translators: used between list items, there is a space after the comma. */
        $tags_list = get_the_tag_list( '', __( ', ', 'twentynineteen' ) );
        if ( $tags_list ) {
            /* translators: 1: SVG icon. 2: posted in label, only visible to screen readers. 3: list of tags. */
            printf(
                '<span class="tags-links">%1$s<span class="screen-reader-text">%2$s </span>%3$s</span>',
                twentynineteen_get_icon_svg( 'tag', 16 ),
                __( 'Tags:', 'twentynineteen' ),
                $tags_list
            ); // WPCS: XSS OK.
        }
	}
    // Edit post link.
    edit_post_link(
        sprintf(
            wp_kses(
                /* translators: %s: Name of current post. Only visible to screen readers. */
                __( 'Edit <span class="screen-reader-text">%s</span>', 'twentynineteen' ),
                array(
                    'span' => array(
                        'class' => array(),
                    ),
                )
            ),
            get_the_title()
        ),
        '<span class="edit-link">' . twentynineteen_get_icon_svg( 'edit', 16 ),
        '</span>'
    );
}

これでこのように表示されます。

まとめ

とりあえずこれで記事一覧のデザインは固まりました。
なにか気に入るカスタマイズがあれば、ぜひお試しあれ~

Twitter

Facebook