2

有人可以告诉我如何在 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>

和

<

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 主题中。请帮忙！

问候

德巴希斯

4

1 回答 1

0

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

  1. 您可以将您的 html、css 等添加到您希望它显示的任何位置。例如，您可以创建一个仅用于主页的页面模板，然后将此页面设置为 Wordpress 后端的首页。

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

像任何滑块一样，您需要将 js 或 css 文件包含到站点中。因此，将您的 css 和 js 文件添加到您的主题的 header.php 或 footer.php 文件中。

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

但是和上面一样，你仍然需要在你的主题的 header.php 或 footer.php 文件中链接你的 js 和 css 文件！

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

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

于 2013-07-01T12:17:17.280 回答