Share
Astăzi, voi discuta Sortable tip în cadrul Titan. Acesta oferă utilizatorului final un număr de opțiuni care pot fi rearanjate prin intermediul unei interfețe de drag & drop și pot fi activate sau dezactivate. Puteți integra această opțiune în locurile în care doriți ca utilizatorii să rearanjeze dinamic secțiunile unei teme.
În zilele noastre, unele teme WordPress premium permit utilizatorilor finali să rearanjeze / sorteze diferite blocuri dintr-o temă. Dezvoltarea unei interfețe de tip drag and drop poate fi o sarcină intimidantă pentru noii dezvoltatori. Titan Framework oferă o modalitate ușoară și fără bloat pentru a oferi această opțiune. Cu al ei; cu al lui Sortable tip, puteți crea o listă de opțiuni de căutare care pot fi rearanjate în orice fel doriți. Are un aspect vertical, după cum se arată în imaginea de mai jos:
Această opțiune acceptă câțiva parametri:
Accentsconagua
Sortable tip opțiune.Adevărat, atunci valorile selectate pentru comutare sunt ascunse. Dacă fals, butonul nu este afișat. Setarea implicită este Adevărat.visible_button este setat sa fals și vă oferiți aici o valoare implicită, visible_button va fi setat automat la Adevărat. Toți parametrii sunt şir după tip, cu excepția "Opțiuni' care este mulțime și 'visible_button“ care este boolean în natură.
Puteți adăuga această opțiune în interiorul:
Aceste containere pot fi create cu ușurință cu Titan Framework. Dacă nu știți cum, atunci treceți prin articolele anterioare din această serie.
Acest tip de opțiune este adăugat urmând acești pași.
getInstance () funcţie.createOption () funcţie.getOption () funcţie.Aceasta este una dintre marile opțiuni oferite de Titan Framework, așa că să o implementăm.
Să creați mai întâi această opțiune într-un panou de administrare.
createOption (array ('id' => 'aa_sortable_opt', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'type' "Opțiunea mea de sortare", // Numele opțiunii care va fi afișată în panoul de administrare 'desc' => 'Aceasta este opțiunea noastră', // Descrierea opțiunii care va fi afișată în opțiunile de la panoul de administrare = > aa_products_blk '=>' Blocare produse ',' aa_features_blk '=>' Blocuri caracteristici ',' aa_stats_blk '=>' Bloc de statistici ',' aa_comments_blk '=> Bloc' ) ) ); Am adăugat a Sortable introduceți opțiunea de pe linia # 8 prin createOption () funcționează într-un panou de administrare personalizat $ aa_panel. În continuare am definit o listă de parametri, adică. nume, id, tip, opțiuni și desc. Valoarea ID este aa_sortable_opt, care ar trebui să fie întotdeauna unic.
Un parametru unic în acest Opțiuni este pe linia # 15. Este nevoie de o mulțime de Valoarea etichetei perechi care apar ca opțiuni care pot fi sortate. În acest cod, am definit patru astfel de perechi, și fiecare dintre ele este o opțiune unică de căutare.
Prin urmare, etichetele aa_products_blk, aa_features_blk, aa_stats_blk și aa_commenst_blk afișați opțiunile corespunzătoare, adică "Blocarea produselor "," Blocarea funcțiilor "," Blocarea statisticilor " și 'Comentarii bloc '. Gândiți-vă la aceste opțiuni ca blocuri ale temei, pe care doriți ca un utilizator final să îl rearanjeze sau să îl dezactiveze.
În captura de ecran de mai sus, există a Sortable tastați opțiunea dintr-un panou de administrare Neat Opțiuni. Uitați-vă la modul în care sunt afișate opțiunile de căutare.
Lângă fiecare nume de opțiune există două pictograme. Prima pictogramă arată o ochi care controlează "vizibilitate opțiune“. Dacă faceți clic pe el, acea opțiune devine dezactivată.
Am dezactivat vizibilitatea primelor două opțiuni din captura de ecran de mai sus.
A doua pictogramă afișează liniile direcționate, care ajută la tragerea și plasarea acestor opțiuni.
Să obținem valorile opțiunilor salvate.
getOption ('aa_sortable_opt'); / ** * * Imprimarea conținutului matricei * * / var_dump ($ aa_getsortable_array); ?>Pentru a obține valori salvate, obțineți mai întâi o instanță prin intermediul getInstance () funcție în linia # 3. Apoi, înregistrați ID-ul opțiunii aa_sortable_opt în interiorul getOption () funcție ca parametru. Valorile sunt salvate într-o variabilă care este o matrice, $ aa_getsortable_array.
Valoarea returnată conține o serie de valori în ordinea modului în care un utilizator final a aranjat și salvat etichetele din panoul de administrare personalizat.
Am aruncat cu matricea var_dump () comandă pe linia # 15. Să vedem rezultatele.
Așa am aranjat opțiunile din panoul de administrare (am activat din nou primele două opțiuni făcând clic pe ochi icon).
Să vedem ce se întâmplă dacă schimb ordinea în panoul de administrare și o salvez.
În imaginea de mai sus, ordinea conținutului matricei este modificată în consecință.
Acum, permiteți-mi să vă arăt un alt mod de a utiliza această opțiune la front-end.
getOption ('aa_sortable_opt'); / ** * * Obtinerea de iesire la front-end * * / daca ($ aa_getsortable_array) foreach ($ aa_getsortable_array ca optiune $) comutare (optiune $) case 'aa_products_blk': echo '. "; pauză; caz" aa_features_blk ": echo" Aici se utilizează codul de blocare a funcției. "; pauză; caz" aa_stats_blk ": echo" Stats Codul blocului este folosit aici. "; pauză; caz" aa_comments_blk ": echo" Comentariul Codul blocului este folosit aici. "; break // sfârșitul comutării // sfârșitul foreach // end if Deci, am înregistrat o instanță unică titan la linia # 3, iar la linia # 6 am folosit getOption () funcția cu aa_sortable_opt ca parametru pentru a prelua valoarea opțiunii de căutare setată de utilizatorul final. Amintiți-vă că setăm perechi de etichete de valoare de mai sus-valorile sunt utilizate în cod în timp ce etichetele sunt afișate în interiorul setărilor tabloului de bord.
Deci, vom obține o gamă de valori selectate de utilizator în ordinea în care a sortat opțiunile de căutare din interiorul panoului admin. Acum trebuie să tipărim aceste blocuri în aceeași ordine selectată de utilizatorul final. obisnuiam comutator de caz verifică pentru a imprima numele blocurilor.
Am verificat aici dacă ar exista o valoare în matrice $ aa_getsortable_array.
Aici am folosit a pentru fiecare pentru a trece prin toate elementele $ aa_getsortable_array array și a numit un singur element al acestei matrice ca opţiunea $.
Am folosit caseta de comutare pentru a imprima opțiunile în aceeași ordine în care erau prezente în matrice (care a fost ordinea selectată de utilizator). Dacă vă uitați la liniile 26-28, este vorba de un caz care verifică dacă valoarea din interior opţiunea $ este aa_products_blk apoi faceți ecou Blocul de produse care a fost selectat și apoi ieșiți din el. În mod similar există și alte trei.
Să mergem mai întâi la setarea implicită. Iată o captură de ecran a producției care a apărut la front-end.
Dacă dezactivez câteva opțiuni? Și rearanjați-i pe toți? Asa:
Deci, blocul de produse nu ar trebui să se afișeze de când l-am dezactivat, iar celelalte blocuri ar trebui să se aranjeze.
Exact asta sa întâmplat, așa cum se arată în captura de ecran de mai sus.
Acum voi crea această opțiune în cadrul unei file admin.
createOption (array ('id' => 'aa_sortable_opt_in_tab', // ID-ul care va fi folosit pentru a obtine valoarea acestei optiuni 'type' => 'Opțiunea mea de sortare', // Numele opțiunii care va fi afișată în panoul admin 'desc' => 'Aceasta este opțiunea noastră', // Descrierea opțiunii care va fi afișată în panoul de administrare 'visible_button' = > aa_products_blk '=>' Bloc de produse ',' aa_features_blk '=>' Blocuri de caracteristici ',' aa_stats_blk '=>' Bloc de statistici ',' aa_comments_blk '=>' Bloc de comentarii '))); Acum am adăugat o Sortable tastați opțiunea într-o filă admin $ aa_tab1 cu ID aa_sortable_opt_in_tab. De data aceasta am definit parametrul visible_count în linia # 15 și valoarea sa este setată la fals. Aceasta înseamnă indicatorul de vizibilitate ochi pictograma nu trebuie să apară.
În această imagine, puteți găsi a Sortable introduceți opțiunea în Tab. 1 de panou Opțiuni neat 2. Rețineți că pictograma de vizibilitate nu apare cu numele opțiunilor.
Utilizați acest cod pentru a obține valori salvate.
getOption ('aa_sortable_opt_in_tab'); / ** * * Obținerea rezultatelor la front-end * * / dacă ($ aa_tab_getsortable_array) foreach ($ aa_tab_getsortable_array ca opțiune $) comutare (opțiune $) case 'aa_products_blk': echo '. "; pauză; caz" aa_features_blk ": echo" Aici se utilizează codul de blocare a funcției. "; pauză; caz" aa_stats_blk ": echo" Stats Codul blocului este folosit aici. "; pauză; caz" aa_comments_blk ": echo" Comentariul Codul blocului este folosit aici. "; break // sfârșitul comutării // sfârșitul foreach // end if Acest cod este destul de similar cu ceea ce am scris în cazul unui panou de administrare. Așadar, permiteți-mi să rezumăm toate pașii:
getInstance () funcție în linia # 3.getOption () și înregistrați ID-ul opțiunii ca parametru în rândul # 6.comutator de caz declarațiile din rubricile 19-37.Iată o captură de ecran a front-end-ului.
Înainte voi crea această opțiune într-un metabox.
createOption (array ('id' => 'aa_sortable_opt_in_metabox', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'type' "Opțiunea mea de sortare", // Numele opțiunii care va fi afișată 'desc' => 'Aceasta este opțiunea noastră', // Descrierea opțiunii care va fi afișată 'opțiuni' => array (// O array de "aa_products_blk '=>' Blocuri de produse ',' aa_features_blk '=>' Blocuri de caracteristici ',' aa_stats_blk '=>' Bloc de statistici ',' aa_comments_blk '=>' Bloc de comentarii '))); Aici am creat o opțiune într-un metabox $ aa_metbox. ID-ul său unic este aa_sortable_opt_in_metabox. Restul parametrilor sunt aceiași.
În imaginea de mai sus, există a Sortable tip opțiune într-un metabox numit Opțiunea mea de sortare. Apare pe toate ecranele de editare a paginilor și după editare.
Acum voi obține valori salvate pentru un metabox.
getOption ('aa_sortable_opt_in_metabox', get_the_ID ()); / ** * * Obținerea de ieșire la front-end * * / dacă ($ aa_metabox_getsortable_array) foreach ($ aa_metabox_getsortable_array ca opțiune $) switch ($ opțiune) case 'aa_products_blk': echo '. "; pauză; caz" aa_features_blk ": echo" Aici se utilizează codul de blocare a funcției. "; pauză; caz" aa_stats_blk ": echo" Stats Codul blocului este folosit aici. "; pauză; caz" aa_comments_blk ": echo" Comentariul Codul blocului este folosit aici. "; break // sfârșitul comutării // sfârșitul foreach // end ifAcest cod este aproape la fel ca înainte. Diferența poate fi văzută în linia # 6 unde am folosit get_the_ID () funcție ca parametru suplimentar. Este folosit pentru a obține o anumită pagină sau un ID post.
Să dezactivam unele blocuri și să observăm ce schimbări au loc la front-end.
Front-end-ul va imprima următoarele:
În final, voi crea această opțiune în cadrul unei secțiuni de personalizare a temelor.
createOption (array ('id' => 'aa_sortable_opt_in_sec', // ID-ul care va fi folosit pentru a obtine valoarea acestei optiuni 'type' => "Opțiunea mea de sortare", // Numele opțiunii care va fi afișată 'desc' => 'Aceasta este opțiunea noastră', // Descrierea opțiunii care va fi afișată 'opțiuni' => array (// O array de "aa_products_blk '=>' Blocuri de produse ',' aa_features_blk '=>' Blocuri de caracteristici ',' aa_stats_blk '=>' Bloc de statistici ',' aa_comments_blk '=>' Bloc de comentarii ')));Am creat o Sortable introduceți opțiunea cu ID aa_sortable_opt_in_sec în interiorul unei secțiuni customizer temă $ aa_section1.
Imaginea de ecran afișează această opțiune într-o secțiune personalizată denumită Secțiunea mea.
Utilizați următorul cod.
getOption ('aa_sortable_opt_in_sec'); / ** * * Obținerea de ieșire la front-end * * / dacă ($ aa_sec_getsortable_array) foreach ($ aa_sec_getsortable_array ca opțiune $) comutare ($ opțiune) case 'aa_products_blk': echo ". "; pauză; caz" aa_features_blk ": echo" Aici se utilizează codul de blocare a funcției. "; pauză; caz" aa_stats_blk ": echo" Stats Codul blocului este folosit aici. "; pauză; caz" aa_comments_blk ": echo" Comentariul Codul blocului este folosit aici. "; break // sfârșitul comutării // sfârșitul foreach // end ifAcest cod este destul de similar cu ceea ce am folosit anterior. Numai numele ID și numele variabilelor sunt diferite.
Iată o captură de ecran care afișează modificările în modul de previzualizare live.
Asta e totul despre Sortable tip în cadrul Titan. Posibilitățile aici sunt infinite. Puteți solicita un fișier care conține codul blocului în cauză, în loc de a reda numele blocului respectiv. Lăsați sucurile creative să curgă.
Am acoperit aproape toate tipurile de opțiuni majore acum, așa că am mai rămas cu câteva lucruri pe care le voi acoperi în articolele viitoare. Dacă aveți întrebări, nu ezitați să comentați mai jos sau să contactați Twitter.
