Un ghid pentru WordPress Dezvoltarea temelor pentru copii

Există o serie de motive pentru care dezvoltatorii WordPress încep să utilizeze teme pentru copii. Acestea vă oferă posibilitatea de a personaliza un aspect unic pe lângă o altă temă existentă. Acest lucru este perfect pentru începătorii care doresc să se joace în jurul lor cu construirea propriilor teme.

În plus, multe modele premium vor lansa noi actualizări în timp. Dacă efectuați modificări în fișiere tematice principale, acestea vor fi suprascrise la efectuarea unei actualizări, dar temele copilului sunt separate și îngrijite. Aceasta înseamnă că puteți construi teme existente premium și puteți economisi timp în acest proces.

În acest ghid vreau să introduc conceptele de bază ale construirii unei teme de tip WordPress și de ce este o idee bună.

Noțiuni de bază

Temele copiilor nu sunt la fel de dificile cum ar putea apărea. Beneficiile de a lucra pe o temă părinte înseamnă că nu este nevoie să scrieți toate codurile HTML / CSS de la zero. O temă copil va folosi automat orice fișiere șablon pe care le includeți, cum ar fi sidebar.php sau footer.php. Dar dacă acestea lipsesc, atunci tema copilului dvs. va trage aceleași fișiere de la părintele său.

Această funcție oferă o cantitate enormă de libertate pentru personalizarea șabloanelor deja existente. De asemenea, este minunat să atingi zonele din jurul site-ului dvs. pentru evenimente speciale, cum ar fi adăugarea modelelor de design pentru Crăciun sau Anul Nou.

Fișierele dvs. necesare

Aveți nevoie doar de o singură foaie de stil .css pentru a crea o temă copil în WordPress. De asemenea, trebuie să creați un nou director în / wp-content / teme care va găzdui tema copilului tău. Fiți atenți ca voi nu sunt crearea acestui dosar în interiorul temei părinte, dar chiar alături de el în același director tematic.

Dezvoltatorii vor include adesea funcțiile.php și screenshot.png în același folder ca și noul dvs. fișier CSS. Imaginea de ecran este afișată în panoul de administrare WordPress și fișierul cu temele de funcții poate fi folosit pentru multe modificări de backend.

Dar pentru moment, ar trebui să ne concentrăm pe foaia de stil principală. Aceasta este denumită în mod obișnuit style.css și include un antet cu informații despre meta-cheie. Acest lucru este important deoarece tema dvs. va fi afișată numai ca un copil dacă includeți numele directorului părintelui. Mai jos este un exemplu de comentariu antet:

 / * Tema Nume: Twenty Eleven Child URI Tema: http: //example.com/ Descriere: Tema copilului pentru designul Twenty Eleven Autor: Jake Rocheleau Autor URI: http: //www.hongkiat.com/blog/ Format: twentyeleven Versiune: 0.1 * /

Valoarea pentru șablon ar trebui să fie numele directorului pentru tema parentală asociată. În afară de faptul că toate celelalte etichete ar trebui să fie familiare standardului WordPress theming.

Deși toate șabloanele PHP vor fi utilizate, stilul cc-ului original al părintelui va nu fi importate automat. Dacă doriți să lucrați cu stilurile originale, va trebui să le includeți în partea de sus a documentului stil.css al copilului dvs. Mai jos este un exemplu care include tema WP Twenty Eleven.

 @import url ("... /twentyeleven/style.css");

Configurarea stilurilor noi

Aplicarea regulilor CSS la tema dvs. este la fel de ușor ca editarea originalului. Dacă știți ce elemente trebuie să vizați, utilizați aceleași selectori în propria temă a copilului.

Am putea demostra cu câteva modificări foarte ușoare la linkuri și paragrafe. Am folosit codul din tema originală Twenty Eleven pentru direcționarea diferitelor elemente. Uneori este necesar să utilizați un selector mai specific pentru a suprascrie designul mai vechi.

 corp umplutură: 0 1,4;  #page margin: 1.667em auto; max-lățime: 900px;  a culoare: # 5281df; text-decorare: nici unul; font-familie: Calibri, Tahoma, Arial, sans-serif;  a: focalizare, a: activă, a: hover text-decoration: underline;

În aceste schimbări, am redus dimensiunea corporală și, de asemenea, am eliminat niște cearceafuri de pe margini. Toate aceste selectori pot fi găsite în documentul original .css. Este de remarcat faptul că schimb, de asemenea, unele proprietăți pentru toate legăturile de ancorare care includ un sir de font diferit și alegerea culorii.

Lucrurile importante!

CSS are o declarație specială pentru a marca prioritatea deasupra altor stiluri. Sintaxa este afișată ca !important începând cu semnul exclamării și terminând la sfârșitul proprietății CSS. Acest lucru este necesar dacă aveți stiluri în cascadă dintr-o temă părinte care depășesc propriile reguli personalizate.

 a culoare: # 5281df! important; text-decorare: nici unul; font-familie: Calibri, Tahoma, Arial, sans-serif;

Deasupra mi-am copiat modificările inițiale și am editat culoarea textului de ancorare cu o clauză importantă. Acest lucru va avea prioritate față de toate celelalte stiluri cu aceeași adâncime selector. Mai multe elemente definite (cum ar fi #access li: hover> a) vor deține, de obicei, propriile stiluri, cu excepția cazului în care culoare a fost încă moștenit de la selectorul nostru original. În acest caz, tema părinte nu stabilește o proprietate font-familie pe legăturile de ancoră, astfel încât nu ne confruntăm cu probleme de moștenire.

Dacă întâmpinați dificultăți în efectuarea modificărilor, încercați să introduceți unul dintre aceste semne importante la sfârșitul declarației dvs. de proprietate. Aceasta nu este o rezolvare perfectă pentru fiecare problemă de moștenire, dar este utilă mult mai frecvent decât ați crede.

Clonarea funcțiilor.php

Spre deosebire de foaia de stil principală, tema copilului dvs. va importa automat funcțiile părintelui. Acest lucru înseamnă că nu este nevoie să copiați codurile PHP pentru a le avea în continuare activă în noua dvs. temă. Cu toate acestea, dacă doriți să redefiniți unele dintre funcțiile pe care le puteți construi alte funcții.php și scrieți în noul cod cu orice modificări.

Ca exemplu, am construit o funcție care analizează câteva fișiere JavaScript când inițiază șablonul. Aceasta va elimina toate versiunile mai vechi ale scripturilor jQuery și SWFObject, adăugând simultan cele mai recente versiuni la wp_head zonă.

 // coadă fișiere js pentru funcția de încărcare mytheme_js () if (is_admin () return; wp_deregister_script ( 'jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ( 'jquery'); wp_deregister_script ( 'SWFObject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ( 'SWFObject');  add_action ('init', mytheme_js);

Ar trebui să subliniez că dacă importați codul din funcțiile părinte functions.php, atunci va trebui să utilizați un alt nume de funcție. În caz contrar, PHP va da o eroare fatală și va trebui să FTP în server pentru a remedia greșeala.

Lucrul cu fișiere tematice

Cea mai largă categorie de teme este construirea de machete personalizate și tipuri de pagini. În mod implicit, tema copilului dvs. va moșteni toate fișierele temei părintelui său. Dar aveți opțiunea de a crea fișiere tematice noi și WP le va înregistra ca șablon "primar".

De exemplu archive.php și index.php sunt utilizate pentru a afișa arhiva post și, respectiv, pagina de pornire. Dacă există modificări pe care doriți să le creați care necesită editări în HTML, atunci veți fi clonați mai sigur fișierele părinte și editați-le în directorul tematic al copilului.

Șabloane de pagini personalizate

În timp ce vorbim de fișiere de șabloane, doresc să introduc și o piesă de funcționalitate WordPress pe care mulți nu o cunosc. Puteți crea șabloane de pagini și postări care vor fi selectabile din panoul Admin atunci când creați conținut nou. Chiar dacă tema părinte nu are noul fișier template personalizat WordPress va folosi în continuare copilul în locul lui page.php sau single.php.

Mai întâi creați un nou fișier numit page-offer.php. Acesta va fi a “oferta speciala” pagina de promovare care este diferită de toate celelalte. Aici puteți copia peste codul paginii originale sau chiar puteți construi tema în întregime de la zero. Singurul cod de care avem nevoie pentru a permite WordPress să știe despre acest nou șablon este un set de comentarii în PHP.

O altă alternativă la această metodă este construirea de pagini personalizate numite după numărul unic de identificare. Deci, în loc de a încărca implicit archive.php pentru paginile autorului puteți crea un fișier, cum ar fi autor-ID.php unde ID-ul este numărul unic al ID-ului WordPress al utilizatorului. Deși acest sistem este mai impozabil, deoarece ar trebui să creați un nou fișier șablon pentru fiecare autor al site-ului dvs..

Este mai util dacă puteți combina aceste două tehnici cu alte fișiere șablon. În special, categoriile și etichetele funcționează bine utilizând propriile fișiere tematice. De asemenea, dacă vă conectați la atașamente în conținutul dvs., atunci veți dori să luați în considerare diferitele machete de șabloane posibile pentru fiecare tip de mime. Am inclus ierarhia șablonului de mai jos pentru o atașare simplă a imaginii JPEG:

image.php
jpeg.php
image_jpeg.php
attachment.php

Instrumente WordPress utile

WordPress în sine are un sistem versatil de pluginuri care poate gestiona o mulțime de personalizări. Din moment ce temele copilului sunt atât de noi, nu există încă un atac total al emisiunilor de terțe părți (încă). Cu toate acestea, există câteva instrumente pe care le puteți verifica pentru a vă face timpul de dezvoltare puțin mai scurt.

O mențiune evidentă este pluginul One-Click Child Theme construit și testat pentru cea mai recentă versiune WordPress 3.x. Se adaugă un link de meniu în Admin “tematică” pentru a construi automat un copil utilizând tema dvs. activă în prezent. Acest lucru este fantastic dacă nu doriți să vă dezorientați cu FTP și căutați să jucați cu niște idei noi.

Dacă intenționați să editați aceste fișiere în panoul de administrare, veți beneficia și de evidențierea sintaxelor mai clare. Acest lucru nu este oferit în WordPress în mod implicit, dar puteți instala Editorul de coduri avansate pentru unele funcționalități mult îmbunătățite. Acest lucru face ca blocarea codurilor PHP și HTML / CSS să fie mult mai ușor de gestionat.

Resurse aditionale

Împreună cu toate sfaturile din acest ghid vreau să împărtășesc un set de linkuri importante pentru dezvoltatorii de teme. Există deja atât de multe articole minunate și temele gratuite ale copiilor pe care le puteți examina pentru a studia mai profund acest subiect. Am adăugat o minunată colecție a acestor resurse de mai jos:

8 teme gratuite pentru douăzeci și unsprezece copii
WordPress Online Codex »Teme pentru copii
Cum de a construi o temă WordPress Child folosind Cârlige și Filtre
Câteva cuvinte pe temele copilului
Cum se creează, modifică și folosește temele pentru copii în WordPress

Concluzie

Sper că procesul de construire a temelor copilului WordPress este mai clar pentru dvs. după citirea acestui articol. Am încercat să explic cum temele copiilor pot moșteni atât șabloanele CSS, cât și cele de la un părinte. În plus, este foarte simplu să manipulați anumite fișiere și să creați propriile teme unice.