HTML-слайдер для темы Wordpress

Question

Может ли кто-нибудь сказать мне, как реализовать и HTML-слайдер в теме WordPress? Ниже приведены 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 на сайт. Поэтому добавьте свои файлы css и js в файлы header.php или footer.php для своей темы.

1. Вы можете установить этот плагин http://wordpress.org/plugins/advanced-custom-fields/ и создать настраиваемое поле с указанным выше контентом. Затем добавьте фрагмент php к шаблону страницы.

Но, как и в предыдущем, вам все равно нужно связать файлы js и css в файлах header.php или footer.php вашей темы!

Но почему бы вам не пропустить всю эту тяжелую работу, и просто использовать ползунок плагин как это один http://wordpress.org/plugins/simple-slider-ssp/

Оно не может иметь те же функции, но это намного более просто!