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

Modifying a Wordpress template to show an excerpt with an image

我正在修改我的 Wordpress 模板,以在 header 正下方显示一段摘录,其中包含一些文本、社交分享按钮和一张图片(一种传记)。

我几乎拥有所有代码,但图像没有出现。我想这是一个非常简单的错误,有人可以轻松帮助我。

这是我的代码。大部分代码都是根据我自己的主题复制和改编的,因为我对 PHP 或 HTML.

等面向网络的语言一无所知。
<!-- 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 -->

您应该尝试的第一件事是删除

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

它应该看起来像:

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