Când apare o nouă versiune a WordPress, aceasta oferă de obicei câteva funcții noi, nu numai pentru utilizatori, ci și pentru dezvoltatori. WordPress oferă multe instrumente care vor facilita foarte mult dezvoltarea de noi teme sau plug-in-uri.
Una dintre recentele dezvoltări API pentru WordPress este noul instrument Color Picker pentru selectarea culorilor. Această opțiune vă permite să înlocuiți câmpurile text standard cu un picker de culoare atractiv și convenabil.
Pentru a înțelege ce este în joc, uitați-vă la imaginea de mai jos:
Și astăzi vom învăța cum să adăugați acest instrument pentru orice temă la WordPress.
WordPress folositor de culoare Picker
Există mai multe motive pentru care dezvoltatorii ar trebui să folosească noua funcție de selectare a culorilor cu API pentru selectarea culorilor:
- Abilitatea de a alege culoarea corectă mai rapidă și mai ușoară
- Gamă largă de formate de culori pentru - hexazecimal, RBG, altele
- Oferă o experiență excelentă pentru utilizatori
- Paginile barei de instrumente vor fi integrate cu interfața de utilizare WordPress
- Oferă o testare mai simplă pentru introducerea valorii câmpului de culoare
- Producția este un produs mai profesionist, deoarece utilizează propriile instrumente de management WordPress
Am trecut prin aspectele de bază ale programului WordPress Color Picker și acum să adăugăm acest set de instrumente pluginului sau temei.
Porniți selectorul de culori
Amintiți-vă că API-ul Color Picker a fost introdus cu WordPress 3.5, așa că pentru a utiliza acest ghid, asigurați-vă că aveți instalat versiunea 3.5 sau o versiune ulterioară.
Pentru a adăuga un picker de culoare, trebuie doar să includeți fișierul jQuery și fișierul cu foi de stil. Cum se face acest lucru este indicat în codul de mai jos. Adăugați acest cod în fișierul functions.php al pielii.
Rețineți că atunci când am inclus custom-script.js împreună cu wp-color-picker. Puteți aplica selecția culorilor în câmpurile text din fișierul jQuery.
Creați un picker de culoare folosind Color Picker
Și acum veți învăța cum să integrați Color Picker în plugin-ul dvs.
- Cum se adaugă o pagină de opțiuni pentru bara de instrumente care simulează pagina cu setările temelor.
- Cum se adaugă câmpuri personalizate pregătite special pentru Color Picker.
- Cum să verificați și să salvați introducerea datelor prin selectorul de culori.
După ce ați creat un plug-in în folderul wp-content / plugins. puteți continua. Imaginea de mai jos arată modul în care plugin-ul este structurat pentru acest tutorial.
Mai întâi vom implementa clasa de constructori. Codul de mai jos arată ce va face pluginul atunci când se creează o nouă instanță.
Aici vom examina cum să adăugăm o pagină de parametri și cum să o afișăm.
Rețineți că deja am scris - în metoda display_page () - codul care va utiliza formularele, câmpurile și butonul pentru a înregistra pagina opțiunilor.
În acest pas, vom implementa metode care vor înregistra și afișa două câmpuri de setări: Titlul blogului și Culoarea fundalului. Ambele câmpuri aparțin secțiunii Opțiuni tematice.
În acest pas, codul de mai jos arată cum să verificați două câmpuri înainte de a le salva.
Când utilizatorul încearcă să introducă manual codul de culoare, opțiunea Color Picker (Se selectează culoarea) indică dacă este introdusă o combinație incorectă, dar chiar dacă culoarea nu este specificată corect, ea va fi salvată. Funcția check_color () oferă o verificare a culorii.
Creați fișierul jquery.custom.js
La activarea plug-in-ului, trebuie să obțineți pagina cu barele de instrumente cu toate câmpurile, ca în imaginea de mai jos:
Sursa: code.tutsplus.com
Articole similare
Trimiteți-le prietenilor: