带有更多按钮的自定义页面上的博客预览

时间:2019-08-23 作者:Geoff_S

我目前在我的网站上有一个名为“博客”的页面,我正在引导博客帖子进行预览,然而,我正试图通过如下“更多”按钮实现集中预览:

enter image description here

是否有首选插件来实现这一点,或者我应该更改某些设置?我也喜欢右边的widget区域,但我就是找不到可能会这样做的插件(虽然我知道这张图片是wordpress网站)

1 个回复
最合适的回答,由SO网友:WebElaine 整理而成

现在您已经将一个页面设置为“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将显示任何类别的帖子的类似摘录。因此,您可能想看看您的主题是否已经支持此功能,并只使用该归档。或者,寻找支持它的不同主题。

相关推荐

我的第一个网络wp-blog-header.phd

这是我第一次制作af网站,我无意中在文件管理器中删除了一些东西。(我认为这是我不需要的博客部分)但现在该网站是白色的,它要求:wp博客标题。php我可以看到wp博客的标题。php现在有0 KB,我如何重复?然后再找到文件?请帮帮我,我是autodidak,我能拯救页面吗?