WordPressのカスタム投稿タイプ、テーマスタイルを引き継いで表示する方法

Question

前提・実現したいこと

WordPressのカスタム投稿タイプをトップページに表示する時に、テーマの装飾をどうしたら引き継げるのかわからず質問させて頂きます。

-使用プラグイン-
Custom Post Type UI
Advanced Custom Fields

-表示したい場所-
home.php

-作成したファイル-
archive_books.php
single_books.php

-使用テーマ-
Luxeritas

カスタム投稿タイプをCPT UIで作成、カスタムフィールドをACFで作成して、書籍専用投稿タイプを作りました。
home.phpで投稿一覧の下に、書籍紹介用に同じスタイルで投稿が表示されるようにするには何が必要でしょうか。
だいそれたものではなく、単純にカテゴリ（カスタム投稿タイプ）毎に同じスタイルで投稿していきたいです。

発生している問題・エラーメッセージ

ワードプレスのhome.phpに表示するところまでは作成できましたが、スタイルが全く適用されません。調べましたが解決せず困っています。

該当のソースコード

以下、子テーマにhome.phpをコピーして記述を追加したコードです。

get_header();
?>
<div id="section"<?php echo $luxe['content_discrete'] === 'indiscrete' ? ' class="grid"' : ''; ?>>
<?php
if( isset( $luxe['grid_type'] ) && isset( $luxe['list_view'] ) && $luxe['list_view'] !== 'content' ) {
	get_template_part( 'loop-grid' );
}
else {
	get_template_part( 'loop' );
}
?>
</div><!--/#section-->
<!-- 書籍用カスタム投稿タイプ -->
<?php
$books_posts = get_posts('post_type=books&posts_per_page=5');
if ( !empty($books_posts) ): ?>
<?php 
foreach ( $books_posts as $post ):
	setup_postdata($post); ?>

	<li><?php the_time('Y/m/d') ?></li>
	<li><a href="<?php the_permalink();?>"><?php the_title();?></a></li>

<?php endforeach;
wp_reset_postdata(); ?>
<?php endif; ?>
<!-- 書籍用カスタム投稿タイプ ここまで-->
</main>
<?php thk_call_sidebar(); ?>
</div><!--/#primary-->
<?php echo apply_filters( 'thk_footer', '' ); ?>

試したこと

カスタム投稿タイプ 表示``カスタム投稿タイプ CSSなどで検索して出てきたコードをいくつかトライしてみましたが、スタイルは引き継げず、そこでストップしています。

補足情報（FW/ツールのバージョンなど）

ワードプレスはブログ更新する程度では普通に使えるレベル、phpやcssは勉強しながらコピーして使っているレベルです。
よろしくお願いいたします。

Answer 1

実際に Web ブラウザに表示されている　HTML や CSS が不明なので、一般的な推測で...

まず、投稿は、

if( isset( $luxe['grid_type'] ) && isset( $luxe['list_view'] ) && $luxe['list_view'] !== 'content' ) {
get_template_part( 'loop-grid' );
}
else {
get_template_part( 'loop' );
}

のような方法で、別のテンプレートファイルを読み込んで出力しているのに対し、カスタム投稿タイプは、

<li><?php the_time('Y/m/d') ?></li> <li><a href="<?php the_permalink();?>"><?php the_title();?></a></li>

と出力しているので、出力されている HTML の内容が異なると思われます。( get_template_part で読み込んでいるテンプレートの中身が不明なので、具体的な指摘はしません。 )

また、投稿は、

<div id="section" ...> 〜 </dev>

で囲われていますが、カスタム投稿タイプは、<div> で囲われていませんので、同じスタイルを反映させるためには、投稿の <div> タグの中に入れるか別途 <div> タグで囲う必要があるかもしれません。(CSSの内容が不明なので、CSSを確認して調節してください)

Comments

[lilychang]

ありがとうございます！

まず、<div>タグで囲う方法はうまくいきませんでした。
が、カスタム投稿タイプ(books)の取得＆出力の仕方が不明だということに気づきました。
こちらが調べても解決できません。

>get_template_part で読み込んでいるテンプレートの中身が不明

get_template_part `loop-grid`は、テーマ付属の投稿表示レイアウトを変えられるテンプレートです。
https://thk.kanzae.net/wp/point/design/t1577/

`loop-grid`内で、ご指摘の <div id="section"> に対応すると思われる箇所のコードです。
==========
<?php
$b_flag = false;
}

while( have_posts() === true ) {
the_post();

// 通常スタイルを表示し終わったら、タイル型/カード型用の <div id="???"> 開始
if( $i === $first + 1 ) {
?>
<div id="<?php echo $luxe['grid_type']; ?>-<?php echo $luxe['grid_cols']; ?>">
<?php
}
?>
<div class="toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' grid ' : ' '; ?>clearfix">
<section>
<?php
if( $luxe['breadcrumb_view'] === 'inner' && $i <= $first && $b_flag === true ) {
get_template_part( 'breadcrumb' );
$b_flag = false;
}

if( $i <= $first ) {
?>
<h2 class="entry-title" itemprop="headline name"><a href="<?php the_permalink(); ?>" class="entry-link" itemprop="url"><?php the_title(); ?></a></h2>
<?php
unset( $luxe['meta_under'] );
get_template_part('meta');
}

// ソースに無駄があるけど、速度的にこっちのが速いので if 分岐多段にした
if( $paged === 1 && $i <= $first ) {
if( !isset( $luxe['sticky_no_excerpt'] ) ) { // sticky_post も含めて全部抜粋で表示する場合
get_template_part('list-excerpt'); // 抜粋表示
}
elseif( is_sticky() === true ) { // sticky_post の場合
get_template_part('list-content'); // 記事全文表示
}
else {
get_template_part('list-excerpt'); // 抜粋表示
}
}
elseif( $luxe['grid_type'] === 'card' ) {
get_template_part('list-excerpt-card'); // グリッドレイアウト：カード型抜粋表示
}
else{
get_template_part('list-excerpt-tile'); // グリッドレイアウト：タイル型抜粋表示
}

?>
</section>
</div><!--/.toc-->
==========

カスタム投稿タイプ(books)を取得するコード、上記のphp<div id="section">に出力するコード、それぞれ参考になるものがあれば、教えていただけるとありがたいです。※現在自身でもリサーチ中です。

[lilychang]

=====投稿のループ=====
if( isset( $luxe['grid_type'] ) && isset( $luxe['list_view'] ) && $luxe['list_view'] !== 'content' ) {
get_template_part( 'loop-grid' );
}
else {
get_template_part( 'loop' );
}
==========
をコピペして、

==========

get_template_part( ' ‘single’,’books’ ' );
get_template_part( ' ‘archive’,’books’ ' );
get_template_part( ’books’ ');
==========

をhome.phpおよびloop-grid内で、いろいろな箇所に貼ってみましたが、反応なしでした。