Începeți cu temele pentru copii WordPress?

Publicat: 2016-06-22

În acest tutorial, veți învăța cum să creați o temă copil WordPress. Dacă sunteți nou în WordPress și nu știți ce este o temă copil WordPress, vă voi explica totul.

Temele WordPress sunt o colecție de fișiere PHP, JavaScript și CSS. Cu cuvinte simple, cu temele WordPress, poți schimba aspectul blogului tău. Temele WordPress pot fi foarte puternice.

Temele premium WordPress oferă o mulțime de caracteristici și funcționalități avansate. Sunt disponibile mii de teme WordPress gratuite și premium.

Puteți crea o temă WordPress de la zero sau puteți crea o temă WordPress bazată pe o altă temă. Fiecare versiune de WordPress vine cu teme WordPress preinstalate și dacă nu vă place tema WordPress preinstalată, puteți instala o altă temă WordPress sau puteți crea o temă copil.

De ce teme copii WordPress?

Crearea unei teme copii WordPress înseamnă că luați o temă existentă și vă creați propria temă care se bazează pe aceasta. Tema copil moștenește majoritatea caracteristicilor din tema originală, cunoscută sub numele de tema părinte.

Tema copilului economisește mult timp și muncă. Crearea unei teme WordPress de la zero necesită mult timp și, uneori, este necesară cunoștințe avansate de HTML, CSS, PHP. Cu temele pentru copii, puteți face o mulțime de modificări.

Dacă nu sunteți mulțumit de personalizarea, opțiunile și caracteristicile pe care le oferă tema WordPress pe care o utilizați, atunci puteți crea o temă copil. Chiar dacă doriți să faceți o schimbare în tema dvs. WordPress, ar trebui să creați o temă copil sau să utilizați pluginul de editor CSS.

Puteți edita direct fișierele de teme WordPress existente, dar apoi, atunci când faceți o actualizare, veți pierde toate personalizările. De aceea ai nevoie de o temă pentru copii.

Ce puteți face cu temele pentru copii WordPress

Cu temele pentru copii WordPress, puteți adăuga oricâte funcții doriți. Depinde de tine. Dacă doriți să schimbați dimensiunea fontului sau culoarea pentru titluri sau linkuri, o puteți face foarte ușor cu CSS.

Puteți adăuga noi meniuri de navigare, puteți înregistra noi bare laterale, puteți crea pagini personalizate pentru produse sau puteți adăuga suport pentru fonturi web personalizate.

Ce vei avea nevoie:

Acum știți ce este o temă copil WordPress și de ce ar trebui să creați teme pentru copii. Este timpul să învățați cum să creați o temă copil WordPress.

Nu este obligatoriu, dar se recomandă să configurați o instalare WordPress locală pentru dezvoltare și învățare. Cu instalarea locală WordPress, puteți testa rapid și foarte ușor noile plugin-uri și teme.

Există multe modalități de a instala WordPress la nivel local, dacă sunteți un utilizator MAC, puteți utiliza MAMP, utilizatorii de Windows pot folosi programul de instalare XAMPP, WAMP sau Bitnami WordPress.

  • Cum se instalează WordPress cu WAMP Server
  • Cum se instalează WordPress cu MAMP
  • Cum se instalează WordPress cu Bitnami Stack

Dacă sunteți un începător absolut, puteți descărca și instala stiva Bitnami WordPress pentru a crea un site web WordPress complet funcțional pe MAC sau PC.

Eu personal prefer serverul WAMP pentru dezvoltare locală. Nu este dificil să instalați WordPress pe WAMP, puteți citi tutorial sau viziona videoclipuri pentru a afla cum să instalați WordPress folosind WAMP, XAMPP sau MAMP.

De asemenea, veți avea nevoie de un editor de cod pentru a edita fișierele teme. Sublimetext, Brackets, Atom sunt puțini editori de cod populari.

Cum se creează o temă copil WordPress?

Odată ce site-ul dvs. WordPress local este gata, putem începe să creăm tema noastră pentru copil. Dacă utilizați serverul WAMP, accesați directorul de instalare WAMP > WWW > WordPress > wp-content > folderul teme.

În folderul cu teme WordPress, creați un folder nou și denumiți-l twentysixteen-child sau orice vă place, de exemplu, InstantShift. Vom folosi tema twentysixteen ca temă părinte. Înseamnă că tema copilului nostru se va baza pe tema TwentySixteen.

Pentru fiecare temă copil, avem nevoie de două fișiere.

  • functions.php
  • style.css

Cu în dosarul tău cu tema Twentysixteen-child creați aceste două fișiere. Acum deschideți fișierele în Editorul de text, pentru acces rapid, puteți trage folderul cu douăzeci și șaisprezece copii în bara laterală a editorului de text. Deschideți fișierul style.css și adăugați următorul cod.

[css]
/*
Numele temei: InstantShift
Descriere: Tema Douăzeci și șaisprezece copii pentru InstantShift.
Autor: Tahir Taous
URI autor: http://www.instantshift.com
Șablon: douăzeci și șaisprezece
Versiune: 0.1
*/
[/css]

Markupul de mai sus este necesar pentru o temă secundară. Fără o foaie de stil cu marcarea necesară, WordPress nu va putea recunoaște tema copilului.

Cred că poți înțelege totul. Nu este nimic de explicat. Numele temei copilului meu este InstantShift, dar îi puteți numi copilului dumneavoastră cum doriți. Cel mai important lucru este Template: twentysixteen . Acesta este numele temei noastre părinte. Asigurați-vă că scrieți corect.

Dacă utilizați orice altă temă ca temă părinte, schimbați pur și simplu Template: twentysixteen cu Template: parent-theme-name .

În antetul foii de stil putem adăuga și mai multe informații, dar nu este obligatoriu. Acum conectați-vă la tabloul de bord WordPress. Accesați Aspect > Teme. Ar trebui să vedeți tema InstantShift fără nicio captură de ecran, deoarece nu am adăugat nicio captură de ecran pentru tema noastră copil.

Treceți mouse-ul pe tema InstantShift și faceți clic pe butonul Detalii teme. Iată captura de ecran cu tema copilului meu.

Child Theme

Dacă puteți vedea acest ecran, înseamnă că tema copilului dvs. este gata. Acum putem începe să ne personalizăm tema. Activați această nouă temă și accesați partea frontală a blogului dvs. Veți vedea tot conținutul dvs. fără niciun stil.

Nu-ți face griji. Este normal. Nu putem vedea niciun stil, deoarece nu am inclus fișierul foaie de stil pentru temele părinte. haideți să ne asigurăm că foaia de stil a temei copilului nostru funcționează. În fișierul style.css al temei copilului, adăugați următorul cod.

[css]
corp{
culoare de fundal: #E7F5FB;
}
[/css]

salvați fișierul style.css, reîncărcați prima pagină a site-ului dvs. WordPress local și ar trebui să vedeți o culoare de fundal albastru deschis.

Înregistrarea foii de stil a temei părinte

Nu vrem să creăm toate stilurile de la zero. Vom adăuga doar câteva stiluri noi cu fișierul style.css al temei copil. Acum să adăugăm fișierul stye.css al temei părinte în tema noastră copil.

Deschideți fișierul functions.php și adăugați următorul cod în fișierul functions.php al temei copil.

[php]
<?php

// Stiluri teme părinte //
// https://codex.wordpress.org/Child_Themes //

funcția theme_enqueue_styles() {
$parent_style = 'stil-parent';
ks29so_enqueue_style( $style_parent, get_template_directory_uri() . '/style.css' );
ks29so_enqueue_style( 'stil copil',
get_stylesheet_directory_uri() . „/style.css”,
matrice ($parent_style)
);
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles');
[/php]

Acum, dacă vă veți reîncărca site-ul WordPress local, veți vedea tema normală cu toate stilurile TwentySixteen.

Asta e tot. Ai creat cu succes prima temă pentru copil. De asemenea, ați adăugat o nouă culoare de fundal pentru corp.

Dar nu am creat tema copilului nostru pentru a schimba pur și simplu fundalul pentru corp. Să începem să personalizăm tema noastră.

Suprascrierea stilurilor temei părinte

Personalizarea antetului:

În mod implicit, antetul temei Twenty Sixteen are multă umplutură. Să schimbăm umplutura și să adăugăm noua culoare de fundal pentru antetul site-ului. Adăugați următorul cod în fișierul style.css al temei copilului, salvați fișierul și reîncărcați front-end-ul site-ului pentru a vedea modificările.

[css]
.site-header {
umplutură: 0 4,5455%;
fundal: #CDDC39;
margine-jos: 2em;
}
[/css]

Aici puteți vedea captura de ecran pentru antetul site-ului înainte și după adăugarea noilor noastre stiluri.

Theme Header

Personalizarea navigației principale

Acum să schimbăm culoarea de fundal pentru elementele din meniul de navigare principal. Îmi place să folosesc instrumentele pentru dezvoltatori Chrome pentru a-mi edita stilurile CSS.

După ce editați pagini web cu instrumentele de dezvoltare Chrome, puteți copia noul cod din instrumentele de dezvoltare Chrome și îl puteți lipi în fișierul style.css al temei copilului.

Deschideți fișierul style.css al temei copilului și adăugați următorul cod în el.

[css]
#menu-header &gt; li {
fundal: rgba(185, 202, 22, 0,97);
margine-dreapta: 4px !important;
chenar-rază: 5px;
}
[/css]

Aici puteți vedea o captură de ecran a noului nostru antet. Am personalizat foarte ușor tema noastră cu tema copilului.

Theme Header Navigation

Cuvinte finale

Acum știți cum puteți crea teme pentru copii WordPress. Este foarte simplu și ușor. Cu înțelegerea de bază a HTML și CSS, puteți schimba complet designul site-ului dvs.

De asemenea, puteți adăuga noi meniuri de navigare, zone widget, suport pentru noi fonturi we etc cu tema copil. Dar nu putem acoperi totul într-un singur articol.

Dacă doriți să învățați dezvoltarea temelor WordPress, ar trebui să începeți cu temele copii WordPress. Aflați elementele de bază ale personalizării temei.