Înainte de a intra în centrul problemei și de a edita șabloanele, aș dori să încep prin a răspunde la o întrebare simplă, dar importantă: De ce să creați propria temă WordPress? Există deja multe teme existente, dintre care multe sunt de foarte bună calitate.

Mai mult, angajarea într-o astfel de aventură necesită mult timp și energie. Da, dar există și multe avantaje în crearea propriei teme WordPress și acestea nu sunt neglijabile. Potrivit dezvoltatorilor WordPress:

• Personalizarea nu este afectată la actualizarea temei părinte.
• Moștenește caracteristicile temei părintești.
• Flexibilitatea personalizării fără a codifica întreaga temă.

Vom parcurge pașii pentru a crea tema Genesis pentru copii de la zero. Desigur, aceasta nu este o pregătire completă, având în vedere lățimea WordPress, dar acest articol vă va ghida pe o bază solidă pentru a începe proiectul cu piciorul drept.

Fișierele temei Genesis Child

Creați un folder nou în interiorul wp-content > teme și dați-i un nume la alegere. Denumim fișierul nostru personalizat .

Acum, în dosarul temei copilului dvs., creați următoarele trei fișiere noi:

• funcții.php
• stil.css
• prima pagină.php

1. Fișier Functions.php

Acest fișier conține funcțiile noastre personalizate pe care le vom crea în tema noastră Genesis pentru a modifica funcționalitatea implicită a Genesis, precum și WordPress în sine.

Pentru aceasta, deschideți fișierul în editorul de text și începeți cu adăugarea documentației standard sub formă de bloc doc.

 <? php

/ **
 * Personalizări tematice
 *
 * @Pachet personalizat
 * @autorul Ibad Rehman
 * @link https://github.com/ibadrehman/custom
 * @copyright Copyright (c) 2018, Ibad Rehman
 * @licență GPL-2.0 +
 * /

Această bucată dintr-un document conține informații despre numele temei noastre, autorul acesteia, link-ul unde a fost găzduit și tipul de licență.

Accesați codex.wordpress pentru informații detaliate despre fișierul functions.php din WordPress.

Următoarea linie de cod pe care o adăugăm va inițializa cadrul Genesis. Există două metode de a face acest lucru. În primul rând, făcând referire la fișierul ini.php în fișierul funcții.php și al doilea pe care îl vom folosi în tutorial este prin conectarea codului nostru la funcția de configurare Genesis.

 add_action ('Genesis_setup', 'custom_setup', 15);

Această funcție se leagă de configurarea Genesis, care este primul parametru. Următorul parametru este numele funcției pe care o vom folosi pentru a executa funcționalitățile personalizate ale temei copilului Genesis. În cele din urmă, al treilea parametru este valoarea care asigură că fișierul nostru de funcții se execută după tema părinte, astfel încât să poată anula funcționalitatea noastră personalizată.

Domeniul text din WordPress este un identificator care ajută WordPress să identifice între toate traducerile încărcate și, pentru aceasta, vom adăuga o altă funcție la fișierul nostru functions.php după cum urmează:

 // Încărcați domeniul text al temei copil.
load_child_theme_textdomain ('personalizat');

Pentru funcția de configurare a temei copilului Genesis, vom inițializa o funcție de împachetare personalizată.

 funcție custom_setup () {}

Și în interiorul acelei funcții vom inițializa următoarele:

• Constante
• Suport tematic

Constante

Constantele sunt utile atunci când trebuie să modificați tema copilului Genesis. Modificările făcute aici vor fi implementate pe toată tema.

Adăugați următorul fragment pentru a adăuga constante.

 // Definiți constantele temei.
define ('CHILD_THEME_NAME', 'Personalizat');
define ('CHILD_THEME_URL', 'https://github.com/ibadrehman/custom');
define ('CHILD_THEME_VERSION', '1.0.0');

Suport tematic

După definirea constantelor, ne îndreptăm spre adăugarea suportului tematic pentru tema copilului nostru Genesis. Suportul pentru temă poate fi adăugat la diferite opțiuni WordPress, cum ar fi meniuri, postări, galerie, subtitrare, comentarii etc.

Pentru a implementa acest lucru, vom folosi funcția add_theme_support function.

 // Adăugați o structură de marcare HTML5.
	add_theme_support ('html5', array ('listă de comentarii', 'formular de comentarii', 'formular de căutare', 'galerie', 'subtitrare'));
	
	// Adăugați metaetichetă viewport pentru browserele mobile.
	add_theme_support ('Genesis-responsive-viewport');
	
	// Adăugați suport pentru temă pentru accesibilitate.
	add_theme_support ('Genesis-accessibility', matrice (
		„404 pagini”,
		„meniu derulant”,
		„titluri”,
		„rems”,
		„formular de căutare”,
		„skip-links”,
	));

În cele din urmă, pentru asistența noastră pentru temă, vom adăuga și asistență pentru widgeturile de subsol.

 // Adăugați suport pentru temă pentru widgeturile de subsol.
add_theme_support ('Genesis-footer-widgets', 3);

Eliminarea aspectelor suplimentare ale barei laterale

În mod implicit, Genesis vine cu șase opțiuni de aspect și, ca dezvoltator de teme, este responsabilitatea noastră să oferim suport pentru stil pentru fiecare dintre ele. Deși nu este obligatoriu să aveți toate cele șase opțiuni de aspect. Prin urmare, vom scăpa de trei opțiuni cu totul, astfel încât să rămânem doar cu trei opțiuni.

Pentru a face acest lucru, adăugați acest cod în fișierul functions.php .

 // Anulați înregistrarea aspectelor care utilizează o bară laterală secundară.
Genesis_unregister_layout ('content-sidebar-sidebar');
Genesis_unregister_layout ('sidebar-content-sidebar');
Genesis_unregister_layout ('sidebar-sidebar-content');

  // Anulați înregistrarea barei laterale secundare.
unregister_sidebar ('sidebar-alt');

2. Fișier Style.css

Vom începe stilizarea fișierului CSS adăugând textul standard al antetului care conține informații despre numele temei, autorul, versiunea, descrierea și șablonul etc.

Stilizare HTML

Acum trebuie să adăugăm suport pentru Resetare HTML5 și elemente implicite HTML5. Pentru început, HTML5 resetează orice stil implicit al browserului și asigură o redare mai bună a elementelor HTML5.

Elementele implicite HTML5 adaugă stil pentru elementele de bază precum titluri, listă, butoane, paragrafe etc.

Structura temei de styling

După aceea, vom adăuga CSS necesare pentru structura temei copilului Genesis. În această secțiune, intenționăm să stilizăm antetul, secțiunea și subsolul site-ului nostru, iar clasele respective sunt:

• site_header
• site_inner
• site_footer

Navigare tematică stilistică

Mergând mai departe, vom adăuga stil la navigarea tematică. În această temă specială pentru copii, vom avea o navbară solidă centrată în partea de sus a paginii noastre.

Dacă vă simțiți pierdut în timp ce vă stilizați tema copilului, puteți face referire la structura temei eșantionului Genesis. Are o structură simplă, iar codul este ușor de urmat.

Adăugarea de fonturi

Un element important în stilizarea temei este fontul folosit pentru titlurile și textul corpului. Pentru a adăuga fonturi la tema noastră copilă, vom folosi fonturile Google. Pentru a face acest lucru, trebuie să edităm două fișiere: functions.php și respectiv style.css.

În fișierul functions.php , vom folosi funcția wp_enqueue_style în cadrul funcției noastre personalizate.

 funcție custom_equeue_styles () {

	wp_enqueue_style ('google-fonts', '//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic|Lobster');

}

După cum puteți vedea privind adresa URL, am folosit două fonturi populare; Roboto pentru textul corpului și homar pentru titluri.

Acum trebuie, de asemenea, să adăugăm o acțiune pentru a ne conecta fonturile cu tema copilului nostru.

 // Adăugați foaia de stil Google Font.
add_action ('wp_enqueue_scripts', 'custom_equeue_styles');

3. Fișierul Front-page.php

Este posibil să fi observat că majoritatea temelor WordPress folosesc acest șablon, care afișează de obicei postări statice sau cele mai recente postări conform preferințelor utilizatorului. Acesta nu este un fișier de șablon pentru o temă, dar îl vom folosi în tema noastră copil pentru a afișa cele mai recente postări sau widget-uri personalizate (în afara domeniului acestui articol).

Să mergem mai departe și să creăm o nouă pagină în directorul rădăcină și să o numim ca front-page.php . La fel ca fișierele style.css și functions.php , aici vom adăuga și blocul de documentare după eticheta de pornire a PHP.

 <? php

/ **
 * Personalizări tematice
 *
 * @Pachet personalizat
 * @autorul Ibad Rehman
 * @link https://github.com/ibadrehman/custom
 * @copyright Copyright (c) 2018, Ibad Rehman
 * @licență GPL-2.0 +
 * /

Apoi, vom inițializa o funcție care va elimina postările afișate pe pagina noastră.

 funcție custom_home_page_setup () {

	// Eliminați postările.
	remove_action ('Genesis_loop', 'Genesis_do_loop');
}

Această funcție va fi inutilă dacă nu definim acțiunea WordPress pentru a specifica poziția temei noastre.

 add_action ('Genesis_meta', 'custom_home_page_setup');

În cele din urmă, vom inițializa cadrul Genesis.

Geneză(); (Necesar pentru orice șablon pe care îl creăm)

Exemple de date

În prezent, tema noastră este brută și nu pare atractivă. Prin urmare, pentru a condimenta lucrurile, putem folosi eșantionul de date disponibile de WordPress și să încărcăm exemple de pagini, comentarii și postări.

Accesați unitatea tematică WordPress, pagina de testare și faceți clic pe depozitul git pentru a descărca fișierul xml. Odată descărcat, accesați tabloul de bord WordPress, sub Instrumente, faceți clic pe Import > Rulați importatorul situat chiar în partea de jos WordPress pentru a începe procesul de importare.

Încheiat!

Practic am creat tema noastră Genesis pentru copii de la zero. Asigurați-vă că adăugați comentarii acolo unde este necesar, deoarece vă va ajuta pe dvs. sau pe orice alt dezvoltator să vă înțeleagă codul pentru viitoare modificări și depanare. Testează-ți tema pe diferite dimensiuni de ecran pentru a-i asigura capacitatea de reacție și, de asemenea, caută posibile erori. Proiectează o imagine miniatură atractivă pentru tema copilului tău.

Cod sursă: https://github.com/ibadrehman/custom

Provocare

După crearea temei copil, am mers mai departe și am creat câteva widget-uri personalizate pentru copii pentru tema noastră Genesis.

Așa arată tema noastră genesis child după adăugarea widgeturilor personalizate.

Creați o temă pentru copii Genesis urmând aceste două articole și împărtășiți produsul final. Noroc!