如何在Wordpress主頁上爲盒裝內容添加章節標題

Question

我正在開發我的頁面Thoughtfor.org，我喜歡它在主要內容頂部顯示「最新帖子」，我正在嘗試在Wordpress二十十六個主題上覆制它。看起來好像他們已經添加了一個標籤來做到這一點，但我不確定，並且我搜索了幾個小時。這是標籤的樣子。

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