现在您已经将一个页面设置为“posts页面”,您可能需要做一些事情。每个主题的构建都略有不同,因此请选择适用于您的案例的主题。
Display the Posts
第一
create a child theme (这基本上只是意味着创建一个“style.css”文件,其中包含一些注释,告诉WP这是一个主题)。接下来,进入父主题并从“index.php”复制代码。这将为您提供特定主题使用的基本HTML结构。将该代码粘贴到您自己的“page page name.php”中(如中所示,如果用于显示帖子的页面名为page name,则此模板将应用于名为“page name”的页面)因此,请编辑文件名以应用于特定页面)。
然后,编辑该文件。您基本上需要替换循环,它通常看起来像
<?php if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_content();
endwhile;
endif; ?>
使用您自己的自定义循环,例如:
<?php
$args = array(
\'post_type\' => \'post\', // get Posts, not Media, Pages, or CPTs
\'posts_per_page\' => 10, // number of Posts to get
);
$posts = new WP_Query($args);
if($posts->have_posts()) : // if Posts were found
while($posts->have_posts()) : $posts->the_post(); // show each Post ?>
<div class="onePost">
<a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
<?php the_excerpt(); ?>
</div>
<?php endwhile;
endif;
wp_reset_postdata(); // Reset to the original query
?>
Add/customize a "more" button
调用时,WP Core将显示“阅读更多”链接
the_excerpt()
在你的模板中,但看起来你只是想让链接说“更多”在子主题文件夹中创建一个“functions.php”文件。
add_filter(\'excerpt_more\', \'wpse_excerpt_link\');
function wpse_excerpt_link($more) {
global $post;
return \'<a class="morebutton" aria-label="More about \' . get_the_title($post->ID) . \'" href="\'. get_permalink($post->ID) . \'">More</a>\';
}
现在,您将看到视觉上显示“更多”的链接(屏幕上的读者会说“更多关于(本文标题)”以便他们知道自己得到了更多)。接下来,您将要对其进行样式设置。
Style the "more" button
有几种方法可以做到这一点,但由于您已经构建了子主题,因此在那里设置按钮样式是最合理的。打开当前只有您的注释的“style.css”文件,然后尝试以下操作
a.morebutton {
display:inline-block;
margin:1em .5em;
padding:.5em 2em;
border-radius:5px;
text-transform:uppercase;
text-align:center;
text-decoration:none;
background:purple;
color:white;
}
a.morebutton:hover, a.morebutton:focus {
background:blue;
}
您可能希望自定义特定的CSS,但这应该会为您提供带有白色文本的圆角紫色按钮,当您悬停或使用键盘聚焦时,这些按钮会变成蓝色。
您可能想自定义此处提供的HTML和/或CSS,但这应该可以让您开始。
或者,如果所有这些都是太多的代码,那么这种类型的布局在许多主题中非常常见。与其寻找插件,不如研究主题层次结构并使用内置的东西。例如,许多主题都支持基于日期的归档,这意味着URL将显示任何类别的帖子的类似摘录。因此,您可能想看看您的主题是否已经支持此功能,并只使用该归档。或者,寻找支持它的不同主题。