HTML滑塊到Wordpress主題

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> 

和

<

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

有幾種方法可以做到這一點，但我將只顯示兩個：

1. 您可以將HTML，CSS等添加到任何你想去的地方它顯示。例如，您可以創建僅用於主頁的頁面模板，然後將此頁面設置爲Wordpress後端的首頁。

或者您可以創建一個僅在其中顯示此滑塊的頁面模板。在這裏瞭解更多關於頁面模板的信息http://codex.wordpress.org/Page_Templates

與任何滑塊一樣，您需要將js或css文件包含到網站中。因此，在您的主題的header.php或footer.php文件中添加您的css和js文件。

1. 您可以安裝此插件http://wordpress.org/plugins/advanced-custom-fields/並創建一個包含上述內容的自定義字段。然後將php代碼片段添加到您的頁面模板中。

但是就像上面那樣，你仍然需要鏈接你的主題的header.php或footer.php文件中的js和css文件！

但是你爲什麼不跳過所有這些艱苦的工作，並且只使用一個滑塊插件這樣一個http://wordpress.org/plugins/simple-slider-ssp/

它可能不具有相同的功能，但它的很多更簡單！