Mini tutoriale

Acordeon JQuery în WordPress

M-am izbit recent de o problemă destul de supărătoare, dar care trebuie să recunosc a fost interesantă. Este vorba de integrarea unui acordeon în pagina cu setări a unui plugin WordPress. Făceam totul ca la carte, dar acordeonul pur si simplu nu mergea.Foloseam Jquery UI, urmăream cu exactitate modelul de pe site-ul lor, stilurile CSS se încărcau, dar funcția de bază nu mergea. După ce am investigat problema am găsit o rezolvare foarte interesantă…se pare că WordPress are deja integrat plugin-ul numai că by default, capabilitatea e oprită.

Mi se pare foarte ciudat și poate chiar așa este, dar ca să poți utiliza acordeonul trebuie să adaugi opțiunea collapsible:true.

Să explic mai pe larg cu ceva cod.În primul rând vrem să ajugem la ceva de genul:
closed
Iar când dăm clic să vedem ceva conținut.
open

1.Funcția WordPress enqueue

Această funcție nu e importantă doar pentru un acordeon Jqeury UI ((-: ci pentru orice fel de inserare de script sau stil în WordPress prin admin panel. Există alte modalități de a insera Jquery în admin panel, dar eu vă recomand să le evitați căci pot duce numai la conflicte. Pentru a înțelege mai bine ce e cu această funcție vă recomand să citiți din WordPress Codex în prima fază de wp_enqueue_script și wp_enqueue_style.

Pentru a rula un acordeon vă trebuie prima oară niște dependencies.

wp_enqueue_script( 'jquery-ui-accordion');
wp_enqueue_style('uicss', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');

 

2.Codul HTML

Voi folosi oarecum din comoditate același markup ca și pe site-ul jQuery UI. Poți plasa acest cod oriunde în template-ul sau plugin-ul tău. Avantanjul acestui cod, el fiind HTML, e că poate fi inserat și în postări, iar undeva prin header-ul temei pot fi adăugate scripturile.

<div id="accordion">
<h3>Section 1</h3>
 
<div>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div>
 
<h3>Section 2</h3>
 
<div>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
</div>
</div>

3.Codul Jquery UI

Dacă folosim codul oferit de cei de la Jquery UI va trebui să îl modifcăm puțin pentru a se juca cuminte cu WordPress. Cel mai bine e să folosești metoda recomandată fără conflicte din partea temelor sau altor plugin-uri. Pentru a fi mai structurați creați un nou fișier .js pe care să-l numiți accordion.js și salvați-l în folderul js al temei(desigur dacă există, dar asta e opțional).

$(function() {
   $( "#accordion" ).accordion();
});

Asta copiem de pe Jquery UI, dar ca să meargă va trebui modificat un pic ca să ajungem la ceva funcțional:

jQuery(document).ready(function($) {
   $( "#accordion" ).accordion({
      collapsible: true,
      active: false //pentru ca vrem by default sa fie inchis
   });
});

Opțiuna collapsible este necesară, căci în absența ei nu avem un acordion funcțional.Acum putem salva fila.

Dupa asta ar trebui să avem un acordion funcțional. Desigur, acum că am aflat și eu îmi dau seama că s-ar putea face o groază de lucruri, crea funcții, shortcodes pe tema asta etc. Dacă aveți ceva idei tari nu evitați să le împărtăși…ajutați pe alții și pe mine((-:

Write A Comment