Un ghid complet pentru cadrele de teme WordPress. React - Ghid complet (inclusiv cârlige, router React, Redux) Utilizare comercială

Mulți începători, și chiar non-începători, dezvoltatori de teme WordPress se confruntă cu problema adăugării de setări la temă. Cum să adăugați setări la o temă WordPress? Se pare că este complicat și va trebui să scrieți mii de linii de cod pentru a le adăuga. Dacă sunteți dintre cei care cred așa, mă grăbesc să vă mulțumesc, există o soluție mai simplă - Framework-uri care adaugă setări.

Acest articol va fi util atât pentru dezvoltatorii începători, cât și pentru cei avansați. Începătorii vor învăța cum să adauge setări la o temă fără probleme, iar cei avansați vor învăța noi Framework-uri care s-ar putea să vă placă mai mult. Deci iată-ne.

Acest cadru este probabil preferatul meu din întreaga colecție. De aceea merge el primul. Dece el? Da, pentru că are un număr mare de posibilități și o instalare ușoară. Să ne uităm la câteva dintre funcționalități:

  • Media Loader (avansat și simplificat)
  • Selectarea unei culori folosind Selectorul de culori
  • Setări uimitoare pentru glisare. Acesta este motivul pentru care îmi place cel mai mult această extensie WordPress.
  • Posibilitatea de a personaliza plasarea blocurilor
  • Posibilitatea de a reseta setările
  • Conectarea fonturilor Google
  • Diverse butoane radio, câmpuri de text și liste derulante
  • Posibilitatea de a ascunde opțiuni
  • Și mult mai mult

O soluție cu adevărat puternică pentru toate ocaziile!

Instalare:

Trebuie să copiați folderul admin la rădăcina temei și să scrieți următorul cod în fișierul functions.php

Setările de schimbat pot fi găsite în fișierul admin/functions/functions.options.php. Arhiva descărcată conține toate setările; dacă nu modificați acest fișier, puteți vedea tot ce este în acest cadru.

Puteți citi o analiză detaliată a acestui plugin, cu o fișă de cheat despre utilizarea lui, într-un articol separat, care va fi publicat în zilele următoare.

Aplicarea setărilor:

Pentru a utiliza setările trebuie să introduceți următorul cod:

// setările sunt stocate aici ecou $smof_date["mass-media_încărcați"]; ?> // folosiți $smof_date["id"] pentru a afișa setarea necesară

SMOF este licențiat conform GPLv3, ceea ce înseamnă că îl puteți utiliza în produse comerciale fără probleme. Dar totuși, dezvoltatorii recomandă cu căldură să indicați un link către dezvoltator, ceea ce vă sfătuiesc să faceți. Totuși, putem oferi puțin PR dezvoltatorilor unui cadru atât de grozav.

Nici nu este o opțiune rea. Cu toate acestea, nu am găsit setări pentru glisor în el și vizual arată mai rău. Deși atunci când tocmai începeam să înțeleg problema setărilor pentru WordPress, acest plugin a fost cel care mi-a atras primul atenția.

Caracteristicile includ:

  • Diverse liste derulante, câmpuri de text, casete de selectare etc.
  • Descărcător de imagini
  • Alegerea culorilor
  • Editor de text
  • și alte lucruri mărunte
Instalare:

Totul este foarte simplu aici. Îl instalăm ca plugin standard pentru WordPress și copiem fișierul options.php din folderul options-check din arhiva din githab. Deci, în orice caz, va trebui să descărcați ambele versiuni.

Avantajul acestei abordări este ușurința de instalare.

Dezavantajul este că, dacă nu există plugin, atunci nu există setări, adică. Această opțiune nu este potrivită pentru producția în masă a temelor.

Este posibil ca Options Framework să existe și în versiunea de fișier pentru temă, fără a instala pluginul. Dar nu l-am găsit. Probabil că nu am arătat bine :) Dacă știe cineva de unde poți descărca o altă versiune, scrie în comentarii, adaug un link la articol.

Aplicarea setărilor:

La locul potrivit, apelați setarea necesară folosind codul.

Uz comercial:

Options Framework este licențiat conform GPLv2, ceea ce înseamnă că îl puteți utiliza în produse comerciale fără probleme. Din nou, un link către dezvoltator este binevenit.

Acest cadru este o continuare a Opțiunilor tematice NHP. Deoarece NHP nu a fost actualizat de mult timp, puteți să uitați de el și să utilizați Redux. Din punct de vedere al designului, este mai bun decât precedentul, dar lipsa setărilor slider-ului nu îi permite să concureze cu primul. Cu toate acestea, capacitatea de a salva și încărca setările este o caracteristică foarte frumoasă.

Capacitățile sale:

  • Diverse liste derulante, câmpuri de text, casete de selectare cu diverse verificări de e-mail etc.
  • Încărcător
  • Alegerea culorilor
  • Editor de text
  • Comutatoare grafice
  • Fonturi Google
  • Setări de import/export
  • și alte lucruri mărunte
Instalare:

Creați un folder admin în folderul cu temă și copiați folderul opțiuni și fișierul options.php din arhivă în el. În fișierul functions.php, inserați linia. Fișierul options.php este responsabil pentru setări.

Aplicarea setărilor:

Aici totul este puțin mai complicat decât în ​​cazurile anterioare. Mai întâi trebuie să conectăm setările folosind funcțiaUnde 'option_name' este un element al matricei $args['opt_name'] din fișierul options.php. În mod implicit, este „twenty_eleven2”, dar îl puteți schimba cu orice altceva, de exemplu, numele temei dvs.

Al doilea pas este să scoateți setările necesare. E mai ușor cu asta. Codul folosit pentru aceasta esteUnde „unique_id” este id-ul unei anumite setări. Îl puteți găsi în options.php.

Uz comercial:

Redux Options Framework este licențiat sub GPLv2, ceea ce înseamnă că îl puteți utiliza în produse comerciale fără probleme. Din nou, un link către dezvoltator este binevenit.

Concluzie

Există și alte cadre de setări ale temei pentru WordPress, dar acestea fie sunt slabe, fie nu au fost actualizate de mult timp. Iar cele trei prezentate în articol vă vor fi mai mult decât suficiente. Dacă aveți propriile soluții, nu ezitați să le împărtășiți în comentarii!

Redux este un cadru de opțiuni simplu, cu adevărat extensibil și complet receptiv pentru teme și pluginuri WordPress. Construit pe API-ul WordPress Settings, Redux acceptă o multitudine de tipuri de câmpuri, precum și: gestionarea personalizată a erorilor, câmpuri personalizate și tipuri de validare și funcționalitate de import/export.

Dar ce face de fapt Redux? Nu credem că dezvoltatorii de teme și pluginuri ar trebui să reinventeze roata de fiecare dată când încep să lucreze la un proiect. Redux este conceput pentru a simplifica ciclul de dezvoltare, oferind un cadru simplificat și extensibil pe care dezvoltatorii să poată construi. Printr-un fișier de configurare simplu și bine documentat, dezvoltatorii terți pot construi un panou de opțiuni limitat doar de propria imaginație într-o fracțiune din timpul necesar pentru a construi de la zero!

Demo online

Nu ne credeți pe cuvânt, consultați demonstrația noastră online și încercați Redux fără a instala nimic!
http://demo.redux.io/

Utilizați Redux Builder pentru a începe

Doriți să utilizați Redux, dar nu sunteți sigur ce să faceți? Folosește constructorul nostru! Vă va permite să creați o temă personalizată bazată pe , TGM și Redux și orice argumente Redux pe care doriți să le setați.

Nu vrei să-ți faci propria temă? Apoi scoateți un folder de administrator personalizat pe care îl puteți plasa într-o temă sau plugin. Ah și am menționat că este gratuit? Încercați-l astăzi la:
http://build.reduxframework.com/

Documentare și suport

NOTĂ: Redux nu este destinat să fie utilizat singur. Este nevoie de un fișier de configurare furnizat de o temă terță parte sau de un dezvoltator de pluginuri pentru a face ceva grozav!

Capturi de ecran

FAQ

De ce acest plugin nu face nimic?

Redux este un cadru de opțiuni... cu alte cuvinte, nu este conceput pentru a face nimic pe cont propriu! Cu toate acestea, puteți activa un mod demo pentru a vedea cum funcționează.

Cum pot afla mai multe despre Redux? Nu aveți prea mult conținut în această secțiune de întrebări frecvente

Asta pentru că adevărata secțiune de întrebări frecvente este pe site-ul nostru! Vă rugăm să vizitați http://docs.reduxframework.com/faq/

Recenzii

Nu-mi mai pot accesa Produsele actuale. Imediat după instalare, m-am confruntat permanent cu o redirecționare către pagina Redux about. Acum, după dezinstalarea Redux, primesc mesajul „fără permisiunea de a accesa această pagină”. Înseamnă, nicio permisiune de acces. Pagina de produse în wordpress. Tocmai mi s-a întâmplat. Voi verifica dacă backupul meu automat a funcționat săptămâna aceasta. Deci, ce dacă nu? Voi pierde câteva săptămâni de muncă intensă???

Participanți și dezvoltatori

Redux Framework este un proiect open source. Următorii colaboratori au contribuit la dezvoltarea pluginului:

Participanții

Jurnalul modificărilor

3.6.16

  • Remediat: compatibilitate cu WordPress 5.3.1. De asemenea, a adăugat noul cont @redux la plugin.

3.6.15

  • Remediat: Redux API setSections se închidea atunci când mai multe secțiuni fără ID au același titlu.

3.6.14

  • Remediat: #3583: Eșuarea importului când a fost depășit max_input_vars. Funcția a fost mutată în ajax_save pentru a evita această problemă.

3.6.13

  • Sărind peste. Sunt superstițioasă! — kp

3.6.12.2

  • Remediat: #3586: Baza de date nu se salvează corect în modul „rețea”. Mulțumesc @Tofandel.
  • Remediat: #3584: Vulpe îmbunătățită pentru #3580. Mulțumesc @Enchiridion.

3.6.12.1

  • Remediat: #3580 – matricea „tax_query” în args pentru arg de date WordPress aruncând o eroare de conversație șir.

3.6.12

  • Remediat: #3577 — S-a adăugat isset la verificarea REMOTE_ADDR pentru a preveni eroarea.

3.6.11

  • Remediat: #3561, #3562 — Nu toți selectoarele din tipografia asincronă au fost formați corespunzător, ceea ce a făcut ca aceștia să nu fie randați corect pe ecran.

3.6.10

  • Actualizare actualizată a fontului Google.
  • Actualizat: #3447 — CSS RTL actualizat. Mulțumesc @Abolfazlrt.
  • Remediat: avertismente de identificare duplicat.
  • Remediat: avertismente http în mediile https.
  • Remediat: #3539 — Eticheta casetei de selectare nu apare decât dacă a fost setat „desc”. Mulțumesc @Enchiridion.
  • Remediat: #3547 — ace_editor nu se redă corect într-o subsecțiune. Mulțumesc @Tofandel.
  • Remediat: #3534 — Remediați CSS nevalid în asycn_typography (virgulă finală). Mulțumesc @ksere
  • Remediat: Spațiere între butoanele Salvare și Resetare.
  • Adăugat: #3285 — filtre dir și URL pentru extensia de personalizare. Mulțumesc @aaronhuisinga.
    add_filter(„redux/extension/customizer/dir”, $dir)
    add_filter(„redux/extensie/personalizat/url”, $url)

3.6.9

  • Remediat: Ocolirea unei erori WP în care câmpul galeriei ar afișa un rotitor la prima deschidere fără imagini selectate.
  • Remediat: #3512 — Selectarea imaginii în modul tile fără evidențierea implicită.

3.6.8

  • Remediat: Eroare la salvarea AJAX din cauza referinței incorecte la obiect în redux.js.
  • Remediat: a fost eliminat set_transient neutilizat în rutina de bun venit. Cauza interogări lente.
  • Actualizat: actualizare Google Font.
  • Remediat: #3440: Obiectul părinte nu este setat corect în sistemul de fișiere Redux.
  • Remediat: Probleme CSS cu selectorul de culori ca urmare a WP 4.9.
  • Remediat: #3429 — Select2 Sortable este necesară dependența jQuery Sortable.
  • Remediat: notificările de administrator atunci când mai multe instanțe de rulare Redux nu sunt afișate pe panou.

3.6.7.7

  • Remediat: corectarea căii sistemului de fișiere.
  • Remediat: #3414: Nume de clasă incorect care provoacă o eroare la încărcare, prin API-ul sistemului de fișiere.
  • Remediat: #3413 — S-a restaurat codul vechi care permite o valoare non-matrice pentru modul. Acest lucru este pentru compatibilitate inversă
    numai și nu este acceptat.
  • Remediat: #3410, #3409 — Ieșirea câmpului de dimensiuni provoacă erori de index atunci când modul nu este setat în matricea de opțiuni.
  • Remediat: #3406 — javascript areClass folosit necorespunzător, personalizare afectată.
  • Remediat: Declarațiile de matrice PHP 7.1 necesită acum.
  • Actualizat: Abonați-vă la buletinul informativ actualizat pentru a sprijini serverul nostru de buletine informative mai nou.
  • Remediat: #3379 — câmpul select_image nu se afișează corect implicit. „default” arg trebuie să fie acum
    calea completă către imaginea implicită.
  • Actualizat: Google Fonts.

3.6.6

  • Numele clasei scris greșit este un compilator de informații despre sistem care provoacă eșecul Stare a sistemului.
  • #3359 — Problemă de răspuns pe panoul de opțiuni. Prea mult spațiu liber pe panou în modul smartphone.
  • #2914, #3356 — Imagine prestabilită implicită_select imaginea nu este selectată. Acest lucru a fost inițial prin design. Acum este o chestie.
  • Actualizare: Parsedown.php pentru PHP 7.x
  • Remediat: starea sistemului raportează incorect starea de scriere în folderul de încărcare.
  • Remediat: #3124 — Utilizatorul a trimis „current_user_can” eșuând pe versiunea PHP<= 3.5.13. Thanks for the assist, @sourabgupta88
  • Modificat: compatibilitate PHP7.

3.6.5

  • Modificat: #3321 — Subsetul de fonturi în tipografie nu este redat pe IE și Edge (Serios? Oamenii încă le folosesc?)
  • Remediat: #3293 — Necesar să nu aprecieze/ascunderea câmpurilor cu comutatorul implicit „fals”.
  • Remediat: Eliminați restul var_dump din nucleu.
  • Remediat: ferestrele pop-up de urmărire și newsletter au eșuat din cauza javascriptului rupt.
  • Remediat: #3291: Necesar cu părintele ca matrice care nu se verifică corect. Cineva mi-a scos cecul de obiect!! — kp
  • Modificat: câmpul de dată calander este acum redat pe .redux-container div.
  • Actualizat: fișier googlegonts.php.
  • Modificat: = și != instrucțiunile obligatorii folosesc acum comparații tip safe.
  • Remediat: câmpul link_color afișează acum corect toate câmpurile de culoare.
  • Adăugat: câmpul link_color include acum blocul de culori „focus”.
  • Modificat: Câmpul link_color re-modificat pentru a fi mai aliniat cu alte câmpuri de tipul său, adică arată mai bine.
  • Adăugat: atributul „title” în câmpul image_select, deoarece „alt” nu mai funcționa pentru a afișa balonul cu mouse-ul.
  • Remediat: datele implicite nu se salvează corect în câmpul sortator.

3.6.4

  • Modificat: S-a schimbat fișierul gitignore pentru a exclude fișierele text sublime.
  • Remediat: #2966 — Eroare de traducere. Identificat și reparat de @iiiandrade. Mulțumiri!
  • Modificat: au generat toate fișierele de hartă CSS pentru a scăpa de avertismentele Chrome.
  • Adăugat: Necesar pentru personalizarea avansată datorită @britner!
  • Modificat: diverse remedieri și modificări ale personalizării pentru a se potrivi cu noile stiluri.
  • Modificat: cod numai pentru personalizare în Redux.js, mutat în fișierul customizer.js.
  • Modificat: CSS Redux izolat să fie imbricat și să nu afecteze alte produse sau interfața de utilizare WP.
  • Adăugat: #3222 — actualizare URIAȘĂ de către @enchiridion pentru a permite permisiuni avansate și complicate. WTG!
  • Adăugat: noi cârlige pentru modul în care sunt apelate API-urile de extensie. Mult mai curat.
  • Remediat: #3214 — Câmpul de culoare tipografie nu declanșează cârligul compilatorului.
  • Remediat: #3201 — Eroare de index la utilizarea argumentului compilatorului cu câmpul spinner.
  • Actualizat: #3189 — Compatibilitate PHP7 pentru validarea preg_replace.
  • Remediat: #3186 — Câmpul cu text multiplu nu elimină un singur câmp când faceți clic pe „Eliminați”.
  • Remediat: #3180, #2641 — Setarea butoanelor în modul multiplu salvează incorect. Vă rugăm să verificați codul pentru o posibilă problemă de compatibilitate cu versiunea anterioară atunci când utilizați acest mod. Funcția foreach() cu o verificare empty() trebuie acum utilizată, comparativ cu cheile de matrice individuale, deoarece numai opțiunile selectate sunt salvate în baza de date.

3.6.3

  • Modificat: modificați stilurile de trecere cu mouse-ul personalizatorului pentru a se potrivi cu WP 4.7.
  • Modificat: #3169 — print_r al interogărilor wpdb în dev_mode eliminat.
  • Remediat: #3159 — Suport pentru SVG în selecția media galeriei.
  • Remediat: #3158 — Avertisment PHP pentru funcția _validate_values ​​atunci când extensiile sunt instalate pe PHP7.

3.6.2

  • Remediat: #3105 — ieșirea link_color eșuează din cauza unei erori PHP.
  • Remediat: #3103 — WP 4.6 forțează un nou format implicit de dată, întrerupând validarea datei.
  • Remediat: Eroare de tipografie subseturi din cauza greșelii.
  • Remediat: fișiere moarte suplimentare pe depozitul WP.org. Bah SVN.

3.6.1

  • S-a eliminat fișierul PHP gol din câmpul editorului.
  • Modificat: a înlocuit numele funcției primare a clasei în browser.php cu __construct pentru compatibilitatea PHP7.
  • Remediat: #3051 — Valoarea RGBA din câmpul Color_RBGA care scoate zerouri când culoarea este lăsată necompletată.
  • Remediat: #3048 — Filele subsecțiunilor care nu includ numele clasei de secțiuni specificate.
  • Remediat: o comparație incorectă a șirurilor a rezultat în verificarea linkului de administrator. Mulțumesc @ksere.
  • Remediat: Verificați valoarea existenței înainte de validare atunci când este utilizată cu extensia Metabox. Mulțumesc @Enchiridion
  • Remediat: valorile goale nu trec la validation_callback.
  • Remediat: eroare Javascript în javascript de personalizare, împiedicând salvarea opțiunilor modificate.
  • Remediat: #3019 — Descrierile secțiunilor sunt incorecte când opt_name conține cifre.
  • Revenit: modificări ale tipografiei. Soluția variabilă de intrare nu funcționa.
  • Remediat: Adresa URL de asistență are generatorul eșuat cu o eroare.
  • Modificat: câmpul Tipografie este acum doar O variabilă de intrare. Ar trebui să ne reducă
    max_input_vars erori în mod dramatic.
  • Remediat: Unele vulnerabilități XSS sunt disponibile numai în backend atunci când sunt autentificate ca utilizator.
  • Remediat: fișierele vechi șterse blocate în depozitul nostru SVN WP.org.

3.6.0.2

  • S-a remediat customizer.min.js învechit pe wp.org care provoacă eșecul personalizatorului.

3.6.0.1

  • S-a remediat redux.min.js învechit pe wp.org care provoacă eșecul panoului de opțiuni.
  • Remediat: #2936 — Câmpul de margine afișează px cu valoare necompletată.
  • Remediat: S-a rezolvat Theme-Check php shortcode notificare falsă.
  • Modificat: nu mai există redirecționare majoră pentru pagina Redux, doar la prima instalare cu pluginul.
  • Remediat: eroare IE11 în personalizarea. Mulțumesc @anikitas!
  • Remediat: probleme cu calea personalizatorului
  • Adăugat: noi argumente implicite filtrează după opt_name și tip. 🙂
  • Remediat: #2903 — Steagul fals pozitiv în câmpul de frontieră JS. Avast nu-i plac declarațiile goale gata pentru documente.
  • Remediat: #2880 — Mai multe probleme cu rutina extensions_url.
  • Remediat: #2876 — Remedierea mai multor contribuții ale utilizatorilor necontrolate.
  • Modificat: #2855 — Extensiile au acum o clasă de ajutor pentru a ajuta instalările bazate pe compozitor. Mulțumesc @2ndkauboy!
  • Remediat: #2857 — „Conține” obligatoriu nu se evaluează corect cu casetele de selectare.
  • Remediat: #2831 — Localizarea a fost complet întreruptă.
  • Remediat: #2832 — CSS intră în conflict cu Rev Slider (Hei, Rev Slider, băieți, nu trebuie să vă încărcați CSS-ul pe fiecare pagină de administrare. Serios?)
  • Remediat: linia ecou rămasă de depanare în extensia de bază a personalizării.
  • Adăugat: EXPERIMENTAL: Cod nou de analiză într-un efort de a elimina problema 1000 max_input_var care apare din când în când. Mulțumesc, @harunbasic
  • Adăugat: EXPERIMENTAL: „Bugfix” pentru extension_url într-un efort de a-l corecta. Mulțumesc, @ottok

Scufundați-vă și învățați React.js de la zero! Aflați Reactjs, Redux, React Routing, Animații, Noțiuni de bază Next.js și multe altele! Învață Reacționează sau scufundă-te mai adânc în ea. Învață teorie, rezolvă probleme, exersează cu proiecte demonstrative și construiește o aplicație mare care se îmbunătățește pe parcursul cursului: Burger Builder!


JavaScript este limbajul principal al aplicațiilor web moderne, deoarece este singurul limbaj de programare care rulează în browser și, prin urmare, permite livrarea unor aplicații foarte receptive.

Dar folosirea JavaScript poate fi dificilă - devine rapid grea și trebuie să aveți un fundal bun înainte de a începe să vizionați acest curs.

React se referă la componente, practic elemente HTML personalizate, cu ajutorul cărora puteți crea rapid aplicații web uimitoare și puternice. Doar creați componenta o dată, personalizați-o în funcție de nevoile dvs., transmiteți-i în mod dinamic date (sau ascultați-vă propriile evenimente!) și reutilizați-o ori de câte ori este necesar.

Trebuie să afișați o listă de utilizatori în aplicația dvs.? Este la fel de simplu ca crearea unei componente User și redarea acesteia ori de câte ori aveți nevoie.

Acest curs va începe cu elementele de bază și va explica ce este exact React și cum îl puteți utiliza (și pentru ce aplicații). După aceasta, vom merge de la nivelurile de bază la cele avansate de lucru cu react. Nu vom zgâria doar vârful aisbergului, ci ne vom scufunda adânc în React, precum și în biblioteci populare precum React Router și Redux.

Până la sfârșitul cursului, veți putea crea aplicații React SPA (aplicație cu o singură pagină) uimitoare.

Numele meu este Maximilian - sunt un dezvoltator web independent și am lucrat cu React la multe proiecte. De asemenea, sunt profesor de 5 stele pe Udemy. Acopăr cele mai populare alternative React - Vue și Angular - precum și multe alte subiecte. Știu despre ce vorbesc și știu unde să găsesc bug-uri.

Scopul meu este să încep cu React cât mai repede posibil și să vă asigur succesul. Dar nu mă concentrez doar pe studenții începători. Îmi doresc ca toată lumea să poată beneficia de pe urma cursurilor mele, așa că ne vom arunca o privire profundă în React.

Acest curs este pentru tine dacă:

  • Tocmai ați început cu dezvoltarea front-end/JavaScript și cunoașteți doar elementele de bază ale JS (nu este nevoie de React sau altă experiență cadru)
  • Ai experiență cu Angular sau Vue, dar vrei să te scufunzi în React
  • Cunoașteți deja elementele de bază ale React, dar doriți să faceți upgrade sau să vă scufundați și mai adânc
  • Ați lucrat deja puțin cu React, dar doriți să vă aprofundați și să vedeți cum totul se reunește într-o aplicație mai mare

Ce trebuie să știi înainte de a începe cursul!

  • Sunt necesare cunoștințe HTML + CSS + JavaScript. Nu trebuie să fii un expert, dar trebuie să cunoști măcar elementele de bază
  • Nu sunt necesare cunoștințe suplimentare despre JavaScript, deși veți putea trece mai repede prin curs dacă cunoașteți următoarea generație de funcții JavaScript, cum ar fi funcțiile ES6 Arrow. Cu toate acestea, cursul oferă o scurtă prezentare a celor mai importante caracteristici ale următoarei generații.

Ce este în interiorul cursului?

  • „Ce”, „De ce” și „Cum”
  • React Basics (funcții de bază, sintaxă și concepte)
  • Cum să afișați liste și conținut condiționat
  • Stilul componentelor
  • Aprofundați în interiorul React și în funcțiile avansate ale componentelor
  • Cum să accesați conținutul HTTP din aplicațiile React (AJAX)
  • Redux, Redux, Redux... de la început până la sfârșit!
  • Formulare și validare în aplicațiile React
  • Autentificare
  • Introducere în testarea unitară
  • Introducere în Next.js
  • Instrucțiuni de implementare a aplicației
  • ...și mult mai mult!

Salutari. Mă grăbesc să vă prezint atenției cea mai recentă selecție de plugin-uri pentru 2013. În decembrie a fost foarte mult din care să alegeți, dar, ca întotdeauna, cele 10 plugin-uri de cea mai bună calitate au ajuns în finală.

Luna aceasta arunc o privire la o selecție destul de eclectică de pluginuri. Unele dintre ele sunt potrivite pentru instalare pe orice site, în special pluginul care a devenit numărul unu în decembrie (ultimul pe listă). Altele nu sunt la fel de versatile, dar pentru cei care caută anumite funcționalități pot fi neprețuite. Bucură-te de lectură!

Sticky Header este un plugin al cărui nume explică pentru ce este: pluginul adaugă un „antet” „lipicios” la modă, fix oricărei teme. Aceasta înseamnă că, indiferent cât de departe derulează cititorul pe pagină, „antetul” va fi în continuare în fața ochilor lui. Datorită acestui fapt, navigarea pe site și branding-ul vor fi întotdeauna disponibile vizitatorilor.

Pics Mash vă va permite să creați o competiție de imagine de clasare pe site-ul dvs. Există multe utilizări potențiale pentru acest plugin. Îl poți folosi atât pentru competiții de divertisment, cât și pentru chestiuni mai serioase. Pluginul poate fi folosit pentru a afla ce imagine de pe site-ul dvs. atrage cea mai mare atenție - indiferent dacă este vorba despre un logo nou sau doar despre o imagine de produs.

Aceasta este o modalitate excelentă de a introduce un element unic de socializare pe site-ul dvs. pentru a crește implicarea utilizatorilor, hotărând care imagini sunt cele mai populare și ar trebui folosite pe site.

Pluginul personalizat Facebook Feed vă permite să afișați un flux complet personalizat al oricărei pagini sau grup public Facebook. Spre deosebire de majoritatea pluginurilor similare, acesta creează un feed care este indexat de motoarele de căutare, care contribuie la site.

Acest feed poate fi inserat într-o postare sau într-o pagină, ceea ce este util mai ales dacă doriți să plasați fluxuri diferite pe pagini diferite. Aceasta este o oportunitate excelentă de a construi un portal din feedurile Facebook care rezonează cu tema centrală a site-ului, de exemplu ar putea fi sport sau companii care ocupă aceeași nișă.

Widget Tweeturi recente

Widgetul Tweets recente este conceput pentru a funcționa perfect cu noul API Twitter. Utilizează memorarea în cache, ceea ce vă oferă liniște sufletească că nu vă veți confrunta cu nicio restricție de la Twitter. Aceasta înseamnă că widget-ul citește actualizările de stare din baza de date WordPress, în loc să trimită în mod constant solicitări către Twitter. Puteți controla cât de des este actualizată memoria cache și numărul de tweet-uri afișate pe site-ul dvs. Acest plugin simplu, dar eficient, este ideal pentru cei care doresc să afișeze tweet-uri pe site-ul lor.

Redux Framework este un cadru complet receptiv și simplu pentru adăugarea de setări la temele și pluginurile WordPress. Redux acceptă o varietate de tipuri de câmpuri, recuperare de erori, câmpuri personalizate și tipuri de validare, metode de importare și exportare a setărilor și multe altele.

Acest plugin simplu nu este util doar pentru utilizatorul obișnuit, ci este și ideal pentru dezvoltatorii WordPress. Redux oferă dezvoltatorilor un cadru perfect și flexibil. Aceasta este o bază excelentă pentru propria dezvoltare, deoarece acest cadru a fost creat pentru a simplifica procesul de dezvoltare web.

Dacă ați dorit vreodată să duplicați un șablon sau să creați o temă copil pentru experimente de design, atunci acest plugin este perfect. Vă permite să duplicați orice șabloane sau teme secundare care sunt instalate în zona de administrare WordPress

Trebuie doar să selectați tema pe care doriți să o copiați, să-i dați un nume nou și gata! Aceasta este o metodă simplă și sigură de a crea teme noi pentru testarea și reproiectarea unui site fără niciun fel de agitație folosind programe de transfer de fișiere peste .

Echipa noastră de la WooThemes

Mulți utilizatori WordPress uită uneori complet că, pe lângă ei înșiși, și alți autori pot lua parte la viața site-ului. Deci, dacă blogul tău are mai mulți autori, atunci trebuie să-ți prezinți echipa de vis în întreaga lume. Echipa de neobosite dezvoltatori WooThemes a dezvoltat un plugin care face acest proces cât mai ușor posibil.

Echipa noastră este un sistem de management al profilului simplu și curat. Vă permite să afișați profilurile creatorilor dvs. folosind coduri scurte, un widget din bara laterală sau o etichetă de șablon și include, de asemenea, opțiuni pentru adăugarea de informații personalizate din profilurile rețelelor sociale. Puteți fie să editați singuri toate informațiile despre echipa dvs., fie să desemnați fiecărui membru al echipei să-și gestioneze propriul profil. Ar trebui cu siguranță să aruncați o privire la acest plugin dacă aveți mai mulți autori pe site-ul dvs. sau dacă doriți doar să arătați echipa de specialiști care lucrează la compania dumneavoastră.

Obosit să părăsești partea administrativă a site-ului, de fiecare dată după modificări trebuie să verifici dacă widget-urile aflate pe site sunt afișate corect? În acest caz, acest plugin vă poate fi foarte util. Widget Customizer vă permite să faceți modificări în bara laterală a widget-ului și să vedeți imediat o previzualizare a modificărilor în timp real. Fiecare widget adăugat la personalizare primește propria sa secțiune, permițându-vă să vă concentrați asupra unui anumit widget. Deoarece fiecare widget utilizat este înregistrat, puteți derula cu ușurință orice modificări pe care le faceți.

Widget frumos de conectare

Nice Login Widget vă permite să creați un formular de conectare/înregistrare simplu și ordonat în orice zonă de widget înregistrată. Pluginul are autentificare Ajax, care vă permite să vă conectați și să înregistrați conturi pe o singură pagină fără a fi redirecționat către pagina de autentificare WordPress. poate fi amplasat vertical sau orizontal. În plus, poate fi stilat folosind CSS simplu.

Dacă cititorul dvs. trebuie să se conecteze/înregistreze înainte de a comenta sau de a accesa anumite zone ale site-ului dvs., acest plugin merită aruncat o privire. De asemenea, este compatibil cu protocolul SSL, făcând procesul de autorizare complet sigur.

Google Pagespeed Insights pentru WordPress

Viteza de încărcare a paginilor unui site și performanța acestuia sunt, fără îndoială, factori importanți care afectează clasarea unui site de către motorul de căutare Google. În ciuda dorinței cu adevărat paranoice a Google de a vedea toate site-urile exclusiv sub formă de text, serviciul Google Pagespeed Insights continuă să se bucure de o atenție enormă. Nu e de mirare, cel puțin avem Yandex, dar burghezia nu are unde să scape de acest monopolist :)

Cu pluginul Google Pagespeed Insights, obțineți o mulțime de date diferite despre performanța site-ului dvs. Vizualizarea tuturor acestor informații vă permite să luați rapid decizii și să observați probleme pe site-ul dvs. Marele plus al acestui plugin este că vă oferă multe recomandări valoroase care se bazează pe cele mai recente tendințe din industria construcțiilor de site-uri web și oferă sfaturi pentru îmbunătățirea performanței site-ului web. Fără îndoială, un instrument foarte util pentru toți cei preocupați de optimizarea Google.

Pagina de dezvoltare a cadrului: https://github.com/reduxframework/redux-framework

ReduxFramework este un cadru extensibil, ușor de utilizat, care vă permite să creați pagini de opțiuni complet personalizate pentru teme și pluginuri.
Dar este mai bine, după cum se spune, să-l vezi în acțiune o dată.

Redux Theme Builder

Putem accesa site-ul Redux Builder (https://build.reduxframework.com/) pentru a ne crea tema bazată pe Underscore(_s) și a începe să folosim Redux.

Trebuie să vă înregistrați un cont pe site.
După autentificare, ne aflăm în zona obișnuită de administrare WordPress, unde ni se oferă explicațiile necesare despre cum să ne asamblam tema și pașii corespunzători.

Redux sau plugin încorporat

Există 3 opțiuni.

  1. dependență - pluginul nu este furnizat cu tema, ci este instalat separat;
  2. sugestie de instalare - folosind clasa TGM, în acest caz pluginul va avea prioritate față de cel încorporat în temă;
  3. incluse în subiect.

Argumente Redux

Opțiunile sunt împărțite în 3 file: standard, sfaturi și opțiuni avansate.
Puteți studia https://docs.reduxframework.com/core/arguments/ în paralel, dar acestea pot fi oricând modificate ulterior.

Din fericire, sunt setate unele valori implicite, ceea ce este destul de potrivit pentru pornire.

Versiunea Redux

Ei bine, bineînțeles, alegem versiunea stabilă.

Ce elemente să includeți în Redux

Elementele neutilizate din Redux pot fi dezactivate pentru a facilita acest lucru.

Subiect generat

În ultimul pas putem descărca fie folderul admin, pe care fie îl vom introduce în proiectul nostru existent cu o temă, fie îl vom descărca o temă personalizată gata făcută.

Înainte de a descărca tema, puteți specifica toate câmpurile necesare (theme slug & uri, autor, autor uri, descriere)

Folosind Redux

În subiectul generat ne interesează fișierul /admin/options-init.php.
Conține argumentele și opțiunile specificate.

Într-un fel sau altul, la început va trebui să vă referiți frecvent la documentație.
Merită spus că l-au scris minunat și cu exemple, atât de multe probleme de la început sunt rezolvate prin copy-paste.

Redux este un cadru de plugin gratuit și puternic, care este dezvoltat în mod activ. Este necesar să se monitorizeze în mod constant relevanța informațiilor.

  • Serghei Savenkov

    un fel de recenzie „scurtă”... de parcă s-ar grăbi undeva