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

Question

所以我才刚刚开始学习 wordpress，我现在已经完成了一些关于 html/css 和 javascript/jquery 的类(class)。我不知道如何使用我为自定义帖子类型制作的 html 模板，我想显示在某些网格中。这是 html/css 中的内容: Service's Cards Post Type

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

    <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>

因此，每次我从我创建的自定义帖子类型创建帖子时，我都有包含这三个字段的模板和其他没有输入的 div。我不确定我到底应该寻找什么，所以我将不胜感激帮助，即使只是解决方案的路径。比如我应该寻找哪些文章和教程来实现这一目标。谢谢

Answer 1

这是我所做的，如果对某人有帮助，那就太好了:

1.创建一个自定义帖子类型(稍后针对帖子类型，但不是必需的，您可以按类别、id 等来完成): https://codex.wordpress.org/Function_Reference/register_post_type

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();?>

您可能想添加更多参数: https://codex.wordpress.org/Template_Tags/get_posts

3.创建cpt模板。

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

对于缩略图:

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

对于标题:

<?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 ); ?>

4.创建自定义帖子类型的单页。在这里，我必须创建一个名为 single-(cpt 的名称).php 的新文件，然后调用与之前几乎相同的函数加上用于内容的函数:

<?php the_content(); ?>

还有很多您可以使用的。这个是关于您希望此自定义帖子类型上的每个帖子的单个页面的外观。

希望对某人有所帮助，如果我做错或遗漏了什么，我会倾听并了解更多信息。谢谢 :)