修改 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" />
我正在修改我的 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" />