Modificari ale panourilor / sectiunilor glisante ale personalizatorului in WordPress 4.7

Mai multe actualizari ale instrumentului de personalizare personalizat, incorporat in nucleul WordPress care se conecteaza la majoritatea temelor moderne. Il puteti utiliza pentru a previzualiza si modifica multe dintre setarile de aspect ale site-ului dvs. Implementarea panourilor / sectiunilor glisante va fi introdusa in WordPress 4.7. Modificarile sunt acum disponibile in directorul trunktrunk A din Subversion care contine cel mai recent cod de dezvoltare in pregatire pentru urmatorul ciclu major de lansare. Daca rulati „trunchi”, atunci va aflati in cea mai recenta versiune., Astfel incat sa le puteti testa cu teme si pluginuri existente. Este demn de remarcat faptul ca toate instantele de sectiuni si panouri personalizate din WordPress.orgWordPress.org Site-ul comunitatii in care codul WordPress este creat si partajat de utilizatori. Aici puteti descarca codul sursa pentru nucleul WordPress, pluginuri si teme, precum si locatia centrala pentru conversatiile si organizarea comunitatii. https://wordpress.org/ pluginPlugin Un plugin este un software care contine un grup de functii care pot fi adaugate pe un site web WordPress. Acestea pot extinde functionalitatea sau adauga noi functii site-urilor dvs. WordPress. Pluginurile WordPress sunt scrise in limbajul de programare PHP si se integreaza perfect cu WordPress. Acestea pot fi gratuite in directorul de pluginuri WordPress.org https://wordpress.org/plugins/ sau pot fi pluginuri bazate pe costuri de la o terta parte, iar depozitele de teme au fost verificate de @celloexpressions. Nu s-au gasit conflicte, dar inca se recomanda testarea. Acestea pot extinde functionalitatea sau adauga noi functii site-urilor dvs. WordPress. Pluginurile WordPress sunt scrise in limbajul de programare PHP si se integreaza perfect cu WordPress. Acestea pot fi gratuite in directorul de pluginuri WordPress.org https://wordpress.org/plugins/ sau pot fi pluginuri bazate pe costuri de la o terta parte, iar depozitele de teme au fost verificate de @celloexpressions. Nu s-au gasit conflicte, dar inca se recomanda testarea. Acestea pot extinde functionalitatea sau adauga noi functii site-urilor dvs. WordPress. Pluginurile WordPress sunt scrise in limbajul de programare PHP si se integreaza perfect cu WordPress. Acestea pot fi gratuite in directorul de pluginuri WordPress.org https://wordpress.org/plugins/ sau pot fi pluginuri bazate pe costuri de la o terta parte, iar depozitele de teme au fost verificate de @celloexpressions. Nu au fost gasite conflicte, dar testarea este recomandata.

tl; dr – Solutia

„Panoul” radacina al personalizatorului (linkurile catre panouri si sectiunile fara panouri) este acum logic independent in DOM de panourile si sectiunile la care se leaga si, de asemenea, legaturile catre sectiunile dintr-un panou sunt deconectate in DOM din elementele containerului pentru sectiunile la care se leaga. Pastrand aceste separari, nu mai sunt necesare hack-uri la marginea de sus: panoul / sectiunea care trebuie afisata trebuie pur si simplu pozitionata in partea de sus a panoului de personalizare. Acest lucru inseamna, de asemenea, accesibilitate Accesibilitatea accesibilitatii (de obicei redusa la a11y) se refera la proiectarea de produse, dispozitive, servicii sau medii pentru persoanele cu dizabilitati. Conceptul de design accesibil asigura atat „acces direct” (adica neasistat), cat si „acces indirect”, ceea ce inseamna compatibilitate cu tehnologia de asistenta a unei persoane (de exemplu, cititoarele de ecran de computer). (https: //en.wikipedia.org/wiki/Accessibility) hacks care stabilesc radacina personalizatorului la vizibilitate: ascuns, dar un element copil imbricat la vizibilitate: vizibil nu mai este necesar (vezi # 33258). Pentru a mentine beneficiul de accesibilitate care a venit „gratuit” odata cu lista ierarhica ierarhica imbricata anterioara, proprietatea aria-owns a fost implementata pentru a lega linkurile panoului / sectiunii cu containerele panoului / sectiunii la care se leaga.

Pentru mai mult context, va rugam sa consultati biletul original creat atat pentru rapoarte de erori, cat si pentru dezvoltarea caracteristicilor de pe urmaritorul de erori .: # 34391.

Patchpatch Un fisier text special care descrie modificarile aduse codului, prin identificarea fisierelor si liniilor care sunt adaugate, eliminate si modificate. Poate fi, de asemenea, denumit dif . Un patch poate fi aplicat pe o baza de cod pentru testare. ar trebui, de asemenea, sa rezolve problemele conexe: # 34344, # 35947.

Structura panourilor plate / sectiunilor

Pana in prezent, marcarea panourilor si sectiunilor a fost imbricata intr-o lista imensa de ul din panoul de personalizare.

<div id = “customize-theme-controls”> <ul> <li id ​​= “acordion-section-foo” class = “acordion-section control-section …”> <h3 class = “acordion-section-title “> … </h3> <ul class =” accordion-section-content … “> <li class =” customize-section-description-container “> … </li> <li class =” customize-control customize-control-text “> … </li> … </ul> </li> <li id ​​=” acordeon-panel-bar “class =” acordion-section control-section control- panel … “> <h3 class =” accordion-section-title “> … </h3> <ul class =” acordeon-sub-container control-panel-content “> <li class =”panel-meta acordeon-section … “> … </li> <li id ​​=” acordeon-section-baz “class =” acordeon-section control-section control-subsection “> … </li> </ul> </li> </ul> </div>

Odata cu combinarea # 34391, fiecare element de continut al panoului / sectiunii este detasat de „panoul” radacina si atasat la containerul parinte # customize-theme-controls imediat dupa lista radacina.

<div id = “customize-theme-controls”> <ul class = “customize-pane-parent”> <li id ​​= “acordion-section-foo” class = “acordion-section control-section …” aria- poseda = “sub-acordeon-section-foo”> <h3 class = “accordion-section-title”> … </h3> </li> <li id ​​= “acordeon-panel-bar” class = “acordeon -section control-section control-panel … “aria-owns =” ​​sub-accordion-panel-bar “> <h3 class =” accordion-section-title “> … </h3> </li> < / ul> <ul id = “sub-accordion-section-foo” class = “customize-pane-child acordeon-section-content accordion-section control-section …”> <li class = “customize-section-description -container “> … </li> <li class = “customize-control customize-control-text”> … </li> … </ul> <ul id = “sub-acordeon-panel-bar” class = “customize-pane-acordeon copil -sub-container control-panel-content acordeon-section control-section control-panel … “> <li class =” panel-meta acordeon-section … “> … </li> <li id ​​= “accordion-section-baz” class = “acordeon-section control-section control-subsection” aria-owns = “sub-accordion-section-baz”> … </li> </ul> <ul id = ” sub-acordeon-section-baz “…> … </ul> </div>personaliza-panou-copil acordeon-sub-container panou de control-continut acordeon-sectiune sectiune de control panou de control … “> <li class =” panel-meta acordeon-section … “> … </ li> <li id ​​= “accordion-section-baz” class = “acordeon-section control-section control-subsection” aria-owns = “sub-accordion-section-baz”> … </li> </ ul > <ul id = “sub-accordion-section-baz” …> … </ul> </div>personaliza-panou-copil acordeon-sub-container panou de control-continut acordeon-sectiune sectiune de control panou de control … “> <li class =” panel-meta acordeon-section … “> … </ li> <li id ​​= “accordion-section-baz” class = “acordeon-section control-section control-subsection” aria-owns = “sub-accordion-section-baz”> … </li> </ ul > <ul id = “sub-accordion-section-baz” …> … </ul> </div>/ li> </ul> <ul id = “sub-acordeon-section-baz” …> … </ul> </div>/ li> </ul> <ul id = “sub-acordeon-section-baz” …> … </ul> </div>

Cateva note suplimentare:

• A fost introdusa o noua metoda getContent () a clasei Container.
  • Este responsabil pentru detasarea efectiva a elementului de continut (de obicei ul).
  • Ar trebui sa fie suprascris in sectiunile si panourile personalizate daca are mai mult sens sa nu detasati elementul de continut de parinte si sa il pastrati imbricat.
  • De asemenea, ar trebui sa fie suprascris daca se utilizeaza o logica de extindere personalizata (de exemplu, sectiunea „Meniu nou” din CoreCore Core este setul de software necesar pentru a rula WordPress. Echipa de dezvoltare Core construieste WordPress.).
• Noile proprietati ale clasei de containere sunt acum disponibile:
  • headContainer este un obiect jQuery care contine elementul parinte (de obicei li). Pana in prezent acelasi obiect a fost pastrat in proprietatea containerului.
  • contentContainer este un obiect jQuery care contine elementul copil (de obicei ul).
  • container este acum un obiect jQuery cu doi membri: headContainer si contentContainer. In acest fel, compatibilitatea cu versiunile anterioare este imbunatatita, deoarece orice metoda jQuery care functioneaza pe un set de elemente precum find () sau pe () ar trebui sa functioneze in continuare cu containerul ca inainte.
• Foi de stil CSSCSS in cascada. clasele care erau detinute de elementul parinte sunt copiate in containerul copil, care este, de asemenea, o modalitate de a imbunatati compatibilitatea cu versiunile anterioare.
• Pentru a pastra o relatie logica intre elementele parinte si copil (care nu mai pot fi determinate in mod natural din limbajul HTMLHTML HyperText Markup Language. Limbajul semantic de scriptare utilizat in principal pentru trimiterea de continut in browserele web. Structura), elementul parinte are o arie noua -detine proprietate. Enumera toate elementele pentru copii ale containerului.
• Metoda _recalculateTopMargin () a fost abandonata complet, deoarece nu mai este relevanta.

Ii incurajez pe dezvoltatori care au facut orice JavaScript JSJS, un limbaj de scriptare web executat de obicei in browser. Adesea utilizat pentru interfete si comportamente avansate ale utilizatorului.

Transitioning translateX () In loc de stanga

De-a lungul actualizarii structurii interioare a panourilor / sectiunilor, experienta utilizatorului de panouri glisante a fost imbunatatita. Acum, in loc de tranzitia pozitiei stanga a containerului, se utilizeaza translateX () Face animatia mai lina si mai performanta.

• A fost introdusa o clasa aglomerata. Acesta este adaugat la panourile / sectiunile care trec prin tranzitia CSS la un moment dat.
• Clasa ocupata este adaugata si eliminata in noua metoda a containerului: _animateChangeExpanded (completeCallback). Metoda are grija sa detecteze daca tranzitiile sunt acceptate de browser, initierea tranzitiei si ascultarea evenimentului de tranzitie normalizat. Este nevoie de un parametru, completeCallback, care se numeste cand tranzitia este finalizata.

Sper ca lucrul cu sectiunile si panourile personalizatorului va fi mai usor si mai fiabil cu noua structura. Daca gasiti orice eroare O eroare este o eroare sau un rezultat neasteptat. Imbunatatirile de performanta, optimizarea codului si sunt considerate imbunatatiri, nu defecte. Dupa inghetarea caracteristicilor, sunt tratate numai erorile, regresiunile (modificarile adverse fata de versiunea anterioara) fiind cea mai mare prioritate. legat de actualizare, nu ezitati sa adaugati un comentariu aici sau direct in TracTrac Un proiect open source de Edgewall Software care serveste ca instrument de urmarire a erorilor si instrument de gestionare a proiectelor pentru WordPress. bilet: # 34391.

# 4-7, #customize, # dev-notes