Creați o temă pentru copii în WordPress Tutorial pas cu pas

În această postare, veți învăța cum să creați o temă copil în WordPress pas cu pas, Toate elementele de bază ale temelor pentru copii WordPress.

Veți învăța cum să importați stilurile CSS ale temei părinte, cum să înlocuiți stilurile temei părinte și de ce ar trebui să creați teme copii WordPress.

Pentru a afla de ce sunt importante temele WordPress pentru copii, ar trebui să citiți Ghidul nostru pentru începători pentru dezvoltarea temelor pentru părinți și copii WordPress

Ce poți face cu temele pentru copii WordPress?

Cu temele pentru copii WordPress, vă puteți personaliza foarte ușor tema WordPress activă implicită. Nu trebuie să cunoașteți HTML, CSS, PHP sau JavaScript avansat pentru a crea teme secundare.

Înțelegerea de bază sau bună a HTML, CSS și PHP ar putea fi de mare ajutor.

Lectură suplimentară: Cum să alegi o temă WordPress perfectă, gratuită sau premium

Puteți folosi o temă copil WordPress pentru a vă modifica site-ul cu CSS, pentru a adăuga noi zone widget, meniuri de navigare suplimentare, pentru a edita fișiere personalizate pentru a crea pagini noi cu stil personalizat.

Cu temele copil, puteți, de asemenea, să reordonați elementele site-ului, să adăugați conținut/elemente noi și să schimbați orice funcționalitate.

De ce ar trebui să creați o temă pentru copii WordPress

Motivul pentru care există temele copil este astfel încât să puteți personaliza o temă „părinte” (existentă/activă) fără a vă pierde modificările și modificările atunci când actualizați tema părinte.

De exemplu, dacă ați modificat direct fișierul single.php, personalizările dvs. ar funcționa bine la început.

Cu toate acestea, când veți actualiza tema la o versiune mai nouă a temei modificate, veți pierde toate modificările și nu va exista nicio modalitate de a vă restabili personalizarea.

De ce ai nevoie

Puteți crea rapid o temă copil și o puteți încărca pe serverul dvs., dar este recomandat să instalați WordPress local pe computer.

Cu instalarea locală WordPress, vă puteți crea și testa rapid tema, nu aveți nevoie de o conexiune la internet tot timpul.

Cu site-ul WordPress local, puteți face greșeli fără a vă afecta site-ul live și este o modalitate mult mai rapidă și mai bună.

Există multe modalități de a instala WordPress local pe Windows, MAC sau Linux. Citiți acest tutorial pentru a afla cum să instalați WordPress pe un computer local cu stiva Bitnami WordPress.

Am publicat deja un tutorial pas cu pas pentru începători.

Cum se instalează WordPress pe serverul WAMP în Windows 8

Cum se instalează WordPress pe Windows 8 folosind Bitnami Stack

cum să creezi o temă copil în ghidul pas cu pas WordPress?

Pentru fiecare temă copil din WordPress, sunt necesare două fișiere.

• funcții.php
• stil.css

În fișierul style.css, putem adăuga informații despre tema noastră copil, de exemplu, numele temei, descrierea temei, numele autorului, detaliile temei părinte, etichete etc.

Avem nevoie și de un fișier functions.php pentru a înregistra foaia de stil a temei părinte și copil. Cu fișierul functions.php putem adăuga și noi funcții, înregistra noi meniuri de navigare, zone widget etc.

Deci, să începem să creăm prima temă pentru copil. În această temă copil, nu vom adăuga noi zone widget, meniuri de navigare etc. Vom folosi tema copil pentru a face câteva modificări simple CSS, vom suprascrie stilurile CSS implicite.

Puteți utiliza orice temă WordPress ca temă părinte, pentru acest tutorial, voi crea o temă copil pentru tema TwentySixteen.

Creați un folder nou și salvați-l ca twentysixteen-child sau îl puteți numi orice doriți, de exemplu, design.

Creați două fișiere noi și salvați-le ca fișiere functions.php și style.css în folderul nostru cu tema copil. Numele folderului meu pentru copii este designbomb.

Acum adăugați următoarele informații în fișierul style.css al temei copilului și salvați fișierul.

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

Acum conectați-vă la tabloul de bord WordPress. Accesați Aspect > Teme > Adăugați nou și încărcați această nouă temă copil. Veți vedea o temă nouă fără nicio captură de ecran. Plasați mouse-ul pe temă și faceți clic pe butonul Detalii teme.

Veți vedea următoarele detalii pentru noua temă pentru copil.

În captura de ecran de mai sus, puteți vedea toate informațiile de bază despre tema copilului nostru. Numele temei noastre pentru copil, care este autorul acestei teme, descrierea temei copilului și puteți vedea, de asemenea, Aceasta este o temă copil din Twenty Sixteen. mesaj.

Am adăugat Șablon: douăzeci și șaisprezece în fișierul style.css al temei noastre copil. Această linie îi spune WordPress că douăzeci și șaisprezece este tema părinte.

Dacă utilizați orice altă temă, înlocuiți TwentySixteen cu numele temei părinte.

Acum, activează noua temă pentru copil și reîncarcă prima pagină. Ar trebui să vedeți tot conținutul fără nici un stil. Nu-ți face griji, este normal. Acest lucru se datorează faptului că nu am inclus fișierul style.css al temei părinte și copil

După activarea unei noi teme secundare Accesați Aspect > Editor și selectați fișierul functions.php (Funcții tematice), adăugați următorul cod în fișierul functions.php și faceți clic pe butonul Actualizare fișier pentru a salva modificările.

 <?php function theme_enqueue_styles() { $parent_; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Acum vizitați partea frontală a site-ului dvs. WordPress și reîncărcați pagina. Ar trebui să vedeți site-ul normal cu toate stilurile TwentySixteen.

Modificarea stilurilor existente

Înseamnă că tema copilului nostru este gata, este timpul să personalizăm tema noastră părinte cu noi stiluri CSS. Acum, sub Aspect > Editor, selectați fișierul style.css. Vom adăuga câteva stiluri noi.

Adăugați următorul stil în fișierul style.css al temei copilului și salvați fișierul.

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

reîncărcați front-end-ul site-ului dvs. și deschideți orice pagină. Am modificat stilurile implicite pentru elementul curent de meniu. Vedeți captura de ecran de mai jos.

Pentru elementul curent de meniu, am adăugat o nouă culoare de fundal, rază de margine, culoare și umbră de casetă. A fost foarte simplu și ușor să schimbi stilurile cu instrumentele Chrome Dev.

Asta e tot

Acum știi cum să creezi o temă pentru copii. Nu a fost atât de simplu și ușor. Cu temele copil WordPress, puteți personaliza aproape fiecare fișier al temei părinte, dar nu este recomandat să modificați fiecare fișier al temei părinte.

Folosiți întotdeauna temele pentru copii pentru a adăuga funcții, caracteristici sau pagini personalizate necesare.

Descărcați tema pentru copii Designs