HTML to Wordpress:在特色图片上添加类别块

Question

我最近一直在尝试html，css和wordpress。到目前为止，我有一个网站的主页完全在HTML和CSS上完成，所以我开始移植到可湿性粉剂。问题是我似乎不能复制这个

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源码你可以复制到原始文件中。