Question

有人可以告诉我如何在WordPress主题中实现和HTML滑块吗？以下是HTML标记：

<div class="slider">
<div class="camera_wrap">
<div data-src="img/slide-1.jpg">
<div class="camera_caption fadeIn">
<strong>FIRST-RATE TATTOO<br> STUDIO SERVING</strong>
<span>THE MIAMI AREA AND BEYOND.</span>
</div>
</div>
<div data-src="img/slide-2.jpg">
<div class="camera_caption fadeIn">
<strong>the best</strong>
<span>services &amp; prices</span>
</div>
</div>
<div data-src="img/slide-3.jpg">
<div class="camera_caption fadeIn">
<strong>modern</strong>
<span>art technologies</span>
</div>
</div>
</div>
</div>

和

＆LT;

div class="list_carousel responsive clearfix">
<ul id="foo">
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img5.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Quisque et diam ipsu.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img6.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Phasellus a libero ut.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img5.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Quisque et diam ipsu.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
<li>
<div>
<figure class="img-polaroid"><img alt="" src="img/page1-img6.jpg"></figure>
<div class="caption">
<a class="lead" href="#">Phasellus a libero ut.</a><br>
<time class="time" datetime="2013-04-24">April 24th, 2013</time>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictor ut ligulate ameti dapibus ticdu nt mtsent lusto dolor ltisim comme.
</div>
</div>
</li>
</ul>
<a id="prev" class="prev" href="#"></a>
<a id="next" class="next" href="#"></a>
</div>

我需要将这些滑块实现为WordPress主题。请帮助！

此致

Debashis

Answer 1

有几种方法可以做到这一点，但我只会展示两种：

您可以将html，css等添加到您想要显示的位置。例如，您可以创建仅适用于主页的页面模板，然后将此页面设置为Wordpress后端的首页。

或者您可以创建仅在此处显示此滑块的页面模板。在此处了解有关页面模板的更多信息http://codex.wordpress.org/Page_Templates

与任何滑块一样，您需要将js或css文件包含在网站中。所以在header.php或footer.php文件中添加你的主题的css和js文件。

您可以安装此插件http://wordpress.org/plugins/advanced-custom-fields/并使用上述内容创建自定义字段。然后将php代码段添加到您的页面模板中。

但是如上所述，您仍然需要在主题的header.php或footer.php文件中链接您的js和css文件！

但是为什么不跳过所有这些艰苦的工作，只使用像这样的滑块插件http://wordpress.org/plugins/simple-slider-ssp/

它可能没有相同的功能，但它更简单！

HTML滑块到Wordpress主题

1 个答案: