Javascript 网格中的Wordpress自定义帖子模板

所以我刚刚开始学习wordpress，现在我已经完成了一些关于html/css和javascript/jquery的课程。我不知道如何使用我为自定义帖子类型制作的html模板，我想在特定的网格中显示。这就是html/css中的内容：

所以基本上我需要使用这样的模板：

    <div class="card">
    <div class="service">
         <div class="circle"></div>
         <img src="<php field here>" class="service-image">
<div class="card-text">
<h4 class="card-title"><php field here></h4>
<p class="card-info"><php field here></p></div>
        </div></div>

“class=”服务映像“>

---

因此，每次我从我为此创建的自定义帖子类型创建帖子时，我都有一个包含这三个字段和其他div的模板，没有输入。我不确定我到底应该寻找什么，所以我非常感谢您的帮助，即使只是解决方案的路径。比如我应该寻找哪些文章和教程来实现这一点。谢谢这里是我所做的，如果它能帮助某人，那就太好了：

1.创建自定义帖子类型（稍后针对帖子类型，但这不是必需的，您可以按类别、id等进行）：

2.在我需要的页面中通过post循环可视化post网格：

<?php 
$args = array('post_type' => 'cptname'); /* create variable with the post type characteristics you want to display.*/
$loop = new WP_Query($args);/* new variable making the $args into wp_query */
if ($loop->have_posts()):/* if cptname have posts do that */
    while( $loop->have_posts()) :$loop->the_post();?>/* while cptname have posts take the post */
<?php get_template_part('custom','type'); ?>/* the template of the cpt */
<?php endwhile;
endif;
wp_reset_postdata();?>

/*当cptname有帖子的时候，就去发帖吧*/
/*cpt的模板*/

您可能需要添加更多参数：

3.创建cpt的模板

在这个场景中，我需要一个名为custom-type.php的新文件，在那里我必须存储我希望我的cpt帖子显示的方式。在我的示例中，我有一个缩略图、一个带有url的标题和两个自定义帖子字段-奖品和信息

对于缩略图：

<img class="your-image" <?php the_post_thumbnail();?>

---

您的项目中是否包含类的CSS？是的，它们包含在主CSS文件中。请发布您的代码
<?php the_title( sprintf('<h1 class="your-title"><a href="%s">', esc_url(get_permalink())),'</a></h1>'); ?>

<?php echo get_post_meta( get_the_ID(), 'Information', true ); ?>
<?php echo get_post_meta( get_the_ID(), 'Prize', true ); ?>

<?php the_content(); ?>