修改Wordpress模板以显示带有图像的摘录

时间:2015-03-12 19:06:55

标签: php wordpress wordpress-theming

我正在修改我的Wordpress模板,在标题下方显示摘录,其中包含一些文字,社交分享按钮和图片(传记类型)。

我几乎拥有所有代码,但图片并未显示。我想这是一个非常简单的错误,有人可以轻松地帮助我。

这是我的代码。大多数代码都是复制并适应我自己的主题,因为我对PHP或HTML等面向Web的语言一无所知。

<!-- BEGIN .sixteen columns -->
            <div class="sixteen columns">

                <!-- BEGIN .featured-page -->
                <div class="featured-page">




<div itemscope itemtype="http://data-vocabulary.org/Person">

    <!-- BEGIN .eleven columns -->
    <div class="eleven columns">

        **<div class="feature-img iphone-profile"  style="background-image: url(http://www.example.png);"></div>**

        <div class="article">
            <h2 class="title">About me</h2>
            <p>*Some text here*.</p>
        </div>

        <div class="home-social">
            <div class="title">Follow Me</div>
            <ul class="social-icons">
            <li><a class="link-twitter" href="https://twitter.com" target="_blank"><span aria-hidden="true" class="organicon-twitter"></span></a></li>
            <li><a class="link-linkedin" href="http://pl.linkedin.com/in/" target="_blank"><span aria-hidden="true" class="organicon-linkedin"></span></a></li>
                <li><a class="link-google" href="http://plus.google.com/1" target="_blank"><span aria-hidden="true" class="organicon-googleplus"></span></a></li>
                            <li><a class="link-email" href="example" target="_blank"><span aria-hidden="true" class="organicon-envelop"></span></a></li>
</ul>           </div>

    <!-- END .eleven columns -->
    </div>

    <!-- BEGIN .five columns -->
    <div class="five columns">

        **<div class="feature-img desktop-profile"  style="background-image: url(http://www.example.png);"></div>**

    <!-- END .five columns -->
    </div>

    <span style="display: none;" itemprop="name">Example</span>
    <span style="display: none;" itemprop="organization">Example</span>
    <span style="display: none;" itemprop="role">Example</span>

    <img style="display: none;" itemprop="image"  src="http://example.png" />

</div>



                <!-- END .featured-page -->
                </div>
            </div>
    <!-- END .sixteen columns -->

1 个答案:

答案 0 :(得分:1)

您应首先尝试删除

中的style="display: none;"
<img style="display: none;" itemprop="image"  src="http://example.png" />

应该看起来像:

<img itemprop="image"  src="http://example.png" />