Softsprint - instalați un slider flexslider de la woothemes pe o temă wordpress

  • Modul de licitație
  • Modul de rezervare

În această notă scurtă, vă recomandăm să instalați un cursor pe tema WordPress. Desigur, rețeaua are o mulțime de plug-in-uri cu coduri scurte de integrare în temă sau post, panouri admin, lucruri ... dar suntem interesați de opțiunea cea mai ușoară și mai flexibilă.





Acest lucru este valabil mai ales dacă aveți nevoie să creați propria temă WordPress unică. Plug-in FlexSlider gratuit de la WooThemes va veni la salvare.

Instalarea prin panoul de administrare WordPress nu este necesară. Pentru a afișa versiunea de bază a cursorului în antetul site-ului nostru, trebuie să urmați pașii următori:







1. Introduceți următoarele fișiere în rădăcina site-ului:

  • flexslider.css
  • jquery.flexslider.js
  • jquery.flexslider-min.js
  • bg_direction_nav.png

Desigur, putem adăuga aceste fișiere într-un mod civilizat la dosarele dorite (de exemplu, foaia de stil în dosarul de stil adecvat etc.), dar apoi trebuie să rescriem căile în paragraful următor.

2. Introduceți următorul cod înainte de eticheta de închidere :

Acest cod conectează fișierul stiluri flexslider.css, pe care îl vom personaliza ulterior; conectează biblioteca jquery și fișierele js ale pluginului propriu-zis.

3. În fișierul antetului temei (de obicei header.php) inserăm codul:

În acest cod, specificați căile spre imaginile de diapozitive (slide1.jpg - slide3.jpg). Numărul de imagini nu are nicio limitare.

4. În fișierul jquery.flexslider.js, ștergeți valorile Anterioară și Următoare (linii 1091 și 1092 din fișier):

// Controale primare controlNav: true, // Boolean: Creați navigare pentru controlul paginării fiecărui diapozitiv? Notă: Lăsați adevărat pentru direcția de utilizare manualControlsNav: true, // Boolean: Creați navigare pentru navigarea anterioară / următoare? (true / false) prevText: "Previous", // String: Setați textul pentru direcția "anterior" elementul NextNextText: "Next", // String: Setați textul pentru direcția "următor"

5. În fișierul flexslider.css, înlocuiți următorul cod (liniile 71, 72 din fișier)







Trimiteți-le prietenilor: