Make Category Shows Title Only in XSimply Theme

요즘 워드프레스 테마들이 너무 복잡해져서 해킹이 힘드네요. 걔중에 XSimply라는 Theme이 그나마 좀 심플하게 나와서 이리저리 고쳐 쓰기가 좋은거 같아요. 이번시간에는 XSimply로 블로그를 만들었을때 왼쪽에 카테고리 선택시 내용은 빼고 해당 카테고리 글의 제목만 뜨도록 테마내용을 바꿔보려고 합니다.

원래는 왼쪽의 카테고리를 클릭하면 해당 카테고리안의 제목과 내용이 아주 길게 주르륵 나오는데요. 저는 이게 상당히 보기가 불편하더라구요. 그래서 카테고리를 클릭하면 제목만 보이게 바꾸고 제목을 클릭했을때 상세내용이 보이도록 바꿀겁니다.

일단 /wp-content/themes/xsimply폴더를 엽니다. 그 안에 archive.php라는 파일이 있을거에요. 그 안에 보면 카테고리안의 post들을 보여주는 get_template_part( 'template-parts/content', get_post_type() );부분이 있을거에요. 이 코드는 현재 해당 post의 타입에 따라 서로 다른 템플릿에 담아 보여주라는 뜻인데요. 전부 post타입이라면 그냥 제목과 내용을 죄다 보여주게 됩니다. 그부분을 제목만 보여주도록 하드코딩할거에요. 해당 코드에 보면 template-parts라는 폴더 명이 있죠? 그게 해당 파트를 보여주는 폴더이름인데요. 그 폴더 안에 보시면 각종 템플릿 파트들이 저장이 되어있어요. 그리고 그 뒤에 content라고 되어있는건 파일명의 prefix에요. 컨텐트관련한 템플릿 파트에 저 prefix를 붙여주는것 같아요. 저는 제목만 들어있는 템플릿파트를 templates-parts폴더안에 content-archive.php라는 파일명으로 저장할거에요. 그러니까 여기서 get_template_part( 'template-parts/content', "archive");로 바꿔서 카테로리 안에 리스트를 보여줄때는 templates-parts/content-archive.php를 사용해서 보여주도록 하는거죠.

<?php
/**
 * The template for displaying archive pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package XSimply
 */

get_header();
?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main">

		<?php if ( have_posts() ) : ?>

			<header class="page-header">
				<?php
				the_archive_title( '<h1 class="page-title">', '</h1>' );
				the_archive_description( '<div class="archive-description">', '</div>' );
				?>
			</header><!-- .page-header -->

			<?php
			/* Start the Loop */
			while ( have_posts() ) :
				the_post();

				/*
				 * Include the Post-Type-specific template for the content.
				 * If you want to override this in a child theme, then include a file
				 * called content-___.php (where ___ is the Post Type name) and that will be used instead.
				 */
				# get_template_part( 'template-parts/content', get_post_type() );
				get_template_part( 'template-parts/content', "archive");

			endwhile;

			the_posts_pagination( array(
				'prev_text' => '&larr; <span class="screen-reader-text">' . __( 'Previous Page', 'xsimply' ) . '</span>',
				'next_text' => '<span class="screen-reader-text">' . __( 'Next Page', 'xsimply' ) . '</span> &rarr;',
				'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'xsimply' ) . ' </span>',
			) );

		else :

			get_template_part( 'template-parts/content', 'none' );

		endif;
		?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php
get_sidebar();
get_footer();

호출하는 부분은 변경을 해주었으니 이제 part를 만들러 가볼게요. /wp-content/themes/xsimply/template-parts폴더에 content-archive.php라는 새로운 파일을 하나 추가하세요. 그리고 아래와 같이 저장합니다.

<?php
/**
 * Template part for displaying posts
 *
 * @package XSimply
 */

?>

<article id="post-<?php the_ID(); ?>" class="archive-post">
        <a href="<?=esc_url( get_permalink())?>" rel="bookmark">
	    <div class="archive-post-title">
		<?php
		if ( is_singular() ) :
			the_title( '<h1 class="entry-title">', '</h1>' );
		else :
			the_title();
		endif;
		?>
		</div>
		<div class="archive-post-date">
		<?php
		$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
		if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
			$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
		}
		
		$time_string = sprintf( $time_string,
			esc_attr( get_the_date( DATE_W3C ) ),
			esc_html( get_the_date() ),
			esc_attr( get_the_modified_date( DATE_W3C ) ),
			esc_html( get_the_modified_date() )
		);
		echo $time_string;
		?>
		</div>
		<div class="archive-post-author">
		<?php
		echo get_the_author();
		?>
		</div>
		</a>
</article><!-- #post-<?php the_ID(); ?> -->

저장 후 좌측메뉴의 카테고리를 선택하시면 내용은 안뜨고 제목만 뜹니다.