php - 如何在 Wordpress 主页上的盒装内容中添加章节标题

Question

我正在重新开发我的 Thoughtforce.org 页面，我喜欢它在主要内容之上写着“最新帖子”，我正试图在 Wordpress twentysixteen 主题上复制它。看起来好像他们添加了一个标签来执行此操作，但我不确定，而且我已经搜索了几个小时。这是标签的样子。

<div id="main" class="site-main boxed group">
<div id="primary" class="content-area boxed">
                    <h3 class="section-title"><span>Latest Posts</span></h3>


    <div id="content" class="site-content group one-column" role="main"                 

<article id="post-455" class="boxed post-455 post type-post status-publish format-standard has-post-thumbnail hentry category-sociology">
            <a href="http://www.thoughtforce.org/de-facto-vs-de-jure/" title="De Facto vs. De Jure (And Their Relationship to Segregation)" class="home-thumb boxed">
        <img width="435" height="247" src="http://www.thoughtforce.org/wp-content/uploads/2017/03/waiting-room-435x247.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""> 

此外，我相信解决方案在某种程度上与类“section-title”的 标识有关。这就是我认为代码很重要的地方。

 .section-title, #reply-title{
    font-family:'Raleway', Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#fff;
    font-weight:bold;
    background-color:#dc2834;
    margin-left:-35px;
    padding-left:35px;
    padding:2px 0 1px 35px;
    margin-bottom:30px;
    position:relative;
}
    .section-title a{
    color:#fff;
}
    .section-title:before, #reply-title:before{
    content:"";
    display:block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #000;
    position:absolute;
    left:0;
    bottom:-5px;
}
    .section-title:after, #reply-title:after{
    content:"";
    position:absolute;
    display:block;
    width:5px;
    height:5px;
    background:#dc2834;
    bottom:0;
    left:0;
    z-index:1;

最后，该区域的 twentysixteen 代码如下所示:

    <div id="content" class="site-content">

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">




<article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
    <header class="entry-header">

我已经添加了框。这是代码:

 #main {
    padding:30px;
    margin-left:0;
    margin-right:0;
    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .2);

}

编辑 添加代码:

/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 */

get_header(); ?>

    <div id="primary" class="content-area boxed">
        <?php upright_breadcrumb(); ?>

        <h3 class="section-title"><span>
                <?php
                if ( is_category() ) {
                    printf( __( 'Category: %s', 'upright' ), '<span>' . single_cat_title( '', false ) . '</span>' );

                } elseif ( is_tag() ) {
                    printf( __( 'Tag: %s', 'upright' ), '<span>' . single_tag_title( '', false ) . '</span>' );

                } elseif ( is_author() ) {
                    /* Queue the first post, that way we know
                     * what author we're dealing with (if that is the case).
                    */
                    the_post();
                    printf( __( 'Author: %s', 'upright' ), '<span class="vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( "ID" ) ) ) . '" title="' . esc_attr( get_the_author() ) . '" rel="me">' . get_the_author() . '</a></span>' );
                    /* Since we called the_post() above, we need to
                     * rewind the loop back to the beginning that way
                     * we can run the loop properly, in full.
                     */
                    rewind_posts();

                } elseif ( is_day() ) {
                    printf( __( 'Daily Archives: %s', 'upright' ), '<span>' . get_the_date() . '</span>' );

                } elseif ( is_month() ) {
                    printf( __( 'Archives: %s', 'upright' ), '<span>' . get_the_date( 'F Y' ) . '</span>' );

                } elseif ( is_year() ) {
                    printf( __( 'Yearly Archives: %s', 'upright' ), '<span>' . get_the_date( 'Y' ) . '</span>' );

                } else {
                    _e( 'Archives', 'upright' );

                }
                ?>
            </span></h3>

Answer 1

您好，我认为您应该使用 .page-title 而不是 #main

.page-title, #reply-title {
    background-color: #dc2834;
    color: #fff;
    font-family: "Raleway",Arial,Helvetica,sans-serif;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 30px;
    margin-left: -35px;
    padding: 2px 0 1px 35px;
    position: relative;
}
.page-title a {
    color: #fff;
}
.page-title::before, #reply-title::before {
    border-bottom: 5px solid transparent;
    border-right: 5px solid #000;
    border-top: 5px solid transparent;
    bottom: -5px;
    content: "";
    display: block;
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
}
.page-title::after, #reply-title::after {
    background: #dc2834 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    display: block;
    height: 5px;
    left: 0;
    position: absolute;
    width: 5px;
    z-index: 1;
}
.page-title, .page-title a, .page-title::after {  background-color: #000000;}

然后在index.php文件中

<main id="main" class="site-main" role="main">

请添加以下代码

<h1 class="page-title">Latest Posts</h1>

它工作正常。参见 https://ibb.co/nmhKVk