php - HTML 到 Wordpress : Add category block over featured image

Question

我最近一直在研究 html、css 和 wordpress。到目前为止，我已经有一个完全用 HTML 和 CSS 完成的站点主页，所以我开始将它移植到 WP。问题是我似乎无法复制这个

HTML:

<div><img class="featured-image" src="/images/post-top.jpg"/><a class="category" href="/category.html"><span>Category</span></a></div>

CSS:

.featured-image
    {
    position: absolute;
    display: inline;
    width: 640px;
    height: 100px;
    z-index: 0;
    }
.category
    {
    font-size: 20px;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    display: block;
    float: right;
    width: 90px;
    line-height: 100px;
    background-color: #555;
    opacity: 0.2;
    z-index: 1;
    word-wrap: break-word;
    }

.category span
{
    display: inline-block;
    line-height: 1em;
    width: 90px;
    vertical-align: middle;
}

这是我目前在 Wordpress 上的内容:

<div class="post-thumb">
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} ?>
    <span class="new-wrapper">
    <?php
    // Get the Name of First Category
    $category = get_the_category();
    echo $category[0]->cat_name;
    ?>
    </span>
</div>

CSS:

.new-wrapper{
    background-color: Black;
    color:white;
    font-size: 12px;
    position:absolute;
    vertical-align: middle;
    bottom: 0px;
    top: 0px;
    right:-20px;
    padding-left:10px;
    padding: 10px;
    -moz-opacity:.80;
    filter:alpha(opacity=80);
    opacity:.80;
    width:90px;
    display: block;
}

.post-thumb {
float:left;
position:relative;
width: 640px;
overflow:hidden;
}

有什么帮助吗？

Answer 1

我不建议覆盖旧模板。从空文件夹制作模板。来源是这样的:

<div>
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} ?>
<a class="category" href="/category.html">
<span>
<?php
    // Get the Name of First Category
    $category = get_the_category();
    echo $category[0]->cat_name;
    ?>
</span>
</a>
</div>

..你可以复制到原始文件的css源。