Cum se creează o temă personalizată WordPress

Publicat: 2021-08-06

WordPress ocupă un procent uriaș din site-urile web din lume, reprezentând 37% din toate site-urile online în prezent. Deși există multe motive și factori pentru acest succes, unul dintre motivele principale este popularitatea funcțiilor disponibile pentru toți utilizatorii. Pluginuri, teme, postări, pagini, categorii, taxonomii, roluri de utilizator și manipulare media doar pentru a numi câteva. Pentru a profita la maximum de WordPress, se recomandă utilizatorilor să studieze și să învețe cum să folosească toate aceste funcții. În acest blog, ne vom concentra și discuta temele WordPress și vă vom ghida prin elementele de bază necesare despre cum să creați o temă personalizată WordPress.

Ce este o temă personalizată?

Tot ce se află pe front-end-ul site-ului tău este rulat și controlat folosind ceva numit „temă”. Tema unui site web este responsabilă pentru designul specific și funcționalitatea site-ului. Puteți consulta depozitul de teme WordPress sau Themeforest pentru exemple de teme; aici veți găsi listate mii de teme pe care să le explorați și să le descărcați.

Deși temele WordPress consacrate sunt grozave, dacă aveți capacitatea și nevoia, este posibil să doriți să vă creați propria temă personalizată pentru un client, pentru dvs. sau să vă prezentați piețelor cu intenția de a o vinde. Când creați o temă comercială, va trebui să urmați ghidurile piețelor pentru standardele de codare, structura fișierelor și folderelor etc. Puteți găsi mai multe detalii despre aceste reguli pe site-urile piețelor web .

În acest blog, vom parcurge un tutorial pentru a vă arăta o prezentare generală de bază despre cum să vă creați propria temă WordPress, acoperind toate elementele de bază și pașii asociați procesului.

Creați o temă personalizată WordPress

Temele WordPress sunt construite cu fișiere șablon, scripturi, stiluri, imagini etc. Pentru a continua, ar trebui să aveți cunoștințe de lucru despre PHP, HTML și CSS, care sunt necesare pentru a construi o temă personalizată. Înțelegerea JavaScript poate fi, de asemenea, un avantaj suplimentar.

Pentru a începe, vom numi mai întâi tema „Updraft”. Creați un folder numit „Updraft” în interiorul wp-content/themes . În acest folder „Updraft”, veți scrie codul legat de tema, veți stoca fișiere, imagini, fonturi etc.

Fișierele principale ale temei personalizate WordPress sunt:

stil.css
index.php
funcții.php

Style.css va fi fișierul principal foaia de stil și puteți adăuga toate CSS-ul dvs. în acest fișier. Amintiți-vă că trebuie să includeți un antet de informații despre temă. Antetul ar trebui să arate similar cu formatul de mai jos și să fie în partea de sus a style.css .

 [cod]
/*
Numele temei: Updraft
URI temei: https://updraftplus.com
Autor: UpdraftPlus
URI autor: https://updraftplus.com
Descriere: tema personalizată creată pentru site-ul web.
Versiune: 1.0
Licență: GNU General Public License v2 sau o versiune ulterioară
URI licență: http://www.gnu.org/licenses/gpl-2.0.html
Domeniu text: updraft
*/
[/cod]

Apoi, mergeți la Aspect >> Teme, unde veți vedea tema listată. Activează-l. Când verificați interfața site-ului dvs., acesta va afișa un ecran gol - deoarece încă nu am adăugat nimic la temă.

Nu uitați să vă stocați imaginile, scripturile și stilurile în directorul de teme. Directorul de teme se referă la folderul „wp-content/themes/Updraft”. Asigurați-vă că le păstrați organizate folosind o structură bună de foldere, creând foldere specifice pentru imagini, scripturi și stiluri; Copiați fișierele în directorul respectiv.

Fișierul de funcții

Functions.php este fișierul în care puteți adăuga cod în diferite scopuri. Acest fișier este încărcat automat în timpul inițializării WordPress, cu codul scris în el executat automat.

Următoarele operațiuni din fișierul functions.php sunt de obicei efectuate în această ordine:

Puneți în coadă foile de stil și scripturile teme (adăugați fișierele JS și CSS pe site).
Activați barele laterale, meniurile de navigare, postați miniaturi etc.
Definiți funcțiile utilizate în întreaga aplicație.
etc.

Utilizatorul își poate adăuga stilurile și scripturile din fișierul functions.php , după cum urmează. Vă rugăm să consultați următorul link pentru mai multe documente .

 [cod]
funcția include_js_css() {
wp_register_style( „bootstrap”, get_stylesheet_directory_uri() .
„/styles/bootstrap.min.css”, array(), false, „toate” );
wp_enqueue_style( "bootstrap" );
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', array(), false, adevărat);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/cod]

Funcția get_stylesheet_directory_uri() oferă o cale relativă a directorului de teme activ. Restul codului poate fi văzut ca fiind calea activelor.

În mod similar, pentru adăugarea meniurilor de navigare, postați miniaturi:

 [cod]
funcția updraft_theme_setup() {
add_theme_support( 'post-miniaturi');
register_nav_menus(
matrice(
'primary' => __( 'Meniul principal' ),
'footer1=' => __( 'Meniul de subsol' ),
'shop' => __( 'Meniul paginii de magazin' ),
)
);
}
add_action('after_setup_theme', 'updraft_theme_setup');
[/cod]

Apoi, accesați tabloul de bord WordPress și adăugați o postare sau o pagină. Ar trebui să vedeți secțiunea „Imagine recomandată”. În plus, sub Aspect >> Meniuri, veți găsi Meniul principal și Meniul de subsol sub Gestionare locații .

Acestea sunt doar câteva dintre caracteristicile de bază pe care le puteți acoperi în timp ce utilizați fișierul „Funcție”. Există multe altele pe care le puteți adăuga în acest fișier dacă doriți.

Fișiere șablon

Când construiți tema, fișierele șablon pot fi folosite pentru a afecta aspectul și designul diferitelor părți ale site-ului dvs. De exemplu, ați folosi șablonul header.php pentru a crea un antet sau șablonul comments.php pentru a include comentarii pe site-ul dvs. Fișierele șablon au extensia .php . Deoarece sunt fișiere PHP, toate paginile ies ca HTML.

Folosind șabloane, dezvoltatorii pot distribui codul între mai multe fișiere. Mai jos sunt enumerate câteva dintre fișierele în cauză.

index.php : șablonul principal. Acest fișier ar trebui să fie responsabil pentru listarea postărilor. Când setați pagina Postări din Setări >> Citiri , acest șablon este executat.
page.php : Acest șablon este responsabil pentru redarea paginilor dvs. Această setare poate fi înlocuită prin atribuirea unui șablon de pagină personalizat paginilor individuale.
single.php : Folosit atunci când este interogată o singură postare.
header.php : Adăugați partea dvs. de antet în acest șablon.
footer.php : Adăugați partea de subsol în acest șablon.
sidebar.php : Adăugați widget-uri în acest șablon.

Obțineți o listă cu toate fișierele șablon disponibile aici .

Șabloane de pagină personalizate

În mod implicit, toate paginile dvs. sunt redate prin șablonul page.php . Dar, în practică, uneori trebuie să afișați fluxuri separate pe pagini diferite. În acest scenariu, se recomandă să utilizați puterea șabloanelor de pagină personalizate.

De exemplu, dacă aveți o pagină „Carieră” și doriți să adăugați codul dvs. la această pagină; pentru a realiza acest lucru, ar trebui să creați un fișier career.php în directorul temei și să plasați comentariul de mai jos în partea de sus a fișierului.

 [cod]
<?php
/*
Nume șablon: carieră
*/
[/cod]

Apoi, accesați secțiunea de editare a paginii și atribuiți acest șablon „Carieră” de sub caseta Atribute pagină .

Acum, când vizitați pagina Carieră – va fi executat codul din career.php .

Fișier antet

Site-ul dvs. web va avea un antet comun pe toate paginile. Puteți plasa acest antet comun în header.php . Codul antetului va fi cam așa:

 [cod]
<!DOCTYPE html>
<html <?php atribute_limbă(); ?>>
<cap>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</cap>
<corp <?php clasa_corp(); ?>>
<?php wp_body_open(); ?>
<!-- meniul tău -->
[/cod]

În codul de mai sus, veți observa că am folosit câteva funcții disponibile în WordPress.

wp_head() : Această metodă inserează elemente cruciale în documentul dumneavoastră – de exemplu, scripturi, stiluri și meta-etichete.
body_class() : Aceasta va adăuga clase diferite la elementul body.
wp_body_open() : Folosit pentru a introduce codul imediat după deschiderea etichetei body. Un exemplu în acest sens ar fi scriptul Google Analytics.

Meniurile pot fi adăugate dinamic prin funcția wp_nav_menu() . Presupunând că mai întâi ați creat deja un meniu sub Aspect >> Meniuri și i-ați atribuit locația „primară”. Codul de mai jos generează elementele de meniu în mod dinamic.

 [cod]
<?php
wp_nav_menu(
matrice(
'theme_location' => 'principal',
'container_class' => 'meniuri',
)
);
?>
[/cod]

Odată ce fișierul antet este setat, utilizați funcția get_header() pentru a include acest fișier în celelalte șabloane.

Fișier subsol

Similar cu fișierul antet, codul tău comun pentru subsol va intra în șablonul footer.php .

 [cod]
<!-- elemente de subsol -->
<?php wp_footer(); ?>
</corp>
</html>
[/cod]

Aici, utilizați wp_footer() care inserează elemente, în special scripturi, în această locație. Folosirea get_footer() va include conținutul acestui fișier în alte locuri.

Fișier din bara laterală

Bara laterală este o coloană verticală folosită pentru a afișa informații de pe site-ul dvs. care nu sunt afișate în conținutul principal. Poate include articole populare, bannere publicitare, un formular de trimitere a unui buletin informativ etc. Barele laterale conțin widget-uri pe care un administrator le poate personaliza. Șablonul sidebar.php va include widget-urile site-ului dvs.

În acest exemplu, vom crea o bară laterală de bază adăugând codul de mai jos în fișierul functions.php .

 [cod]
funcția updraft_widgets_init() {
register_sidebar(
matrice(
'name' => esc_html__( Home Sidebar' ),
'id' => 'bara laterală-1',
'description' => esc_html__( 'Adăugați widget-uri aici pentru a apărea în bara dvs. laterală.' ),
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action('widgets_init', 'updraft_widgets_init');
[/cod]

Apoi, accesați Aspect >> Widgeturi . Aici veți găsi bara laterală de mai sus. În acest exemplu, vom adăuga câteva widget-uri la această bară laterală. Pentru a adăuga această bară laterală la interfață, adăugați următorul cod în sidebar.php.

 [cod]
<div class="sidebar">
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) {
dynamic_sidebar( 'sidebar-1' );
}
?>
</div>
[/cod]

În cele din urmă, nu uitați să denumiți metoda „ get_sidebar()” astfel încât să puteți include cu ușurință bara laterală oriunde în orice alte pagini, atunci când este necesar.

Redarea paginilor și postărilor

După cum sa menționat deja, toate paginile WordPress sunt redate și executate folosind codul pe care l-ați scris în fișierul page.php , cu excepția paginilor cu șablon de pagină personalizat. Codul de mai jos este un exemplu care va afișa o pagină cu titlul paginii, descrierea și imaginea prezentată.

 [cod]
<?php
get_header();
?>
<div class="content-area">
<main class="site-main">
<?php
în timp ce ( have_posts() ):
bara();
?>
<?php
if ( are_post_thumbnail() ):
the_post_thumbnail();
endif;
?>
<header class="entry-header">
<?php the_title(); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
sfârşitul timpului;
?>
</principal>
</div>
<?php
get_footer();
[/cod]

Cod similar va intra în fișierul single.php pentru a afișa informațiile postării. Pentru a reda corect lista postării ( index.php dvs. ), în plus față de metodele de mai sus – poate doriți să utilizați și următoarele:

the_catgeory() : Afișează lista de categorii pentru o postare.
the_permalink() : Afișează permalink-ul pentru postarea curentă.
the_excerpt() : Afișează fragmentul postării.

I18n pentru teme personalizate WordPress

În timp ce construiți o temă personalizată, încercați să vă amintiți că aceasta ar trebui dezvoltată într-un mod care să susțină internaționalizarea. Făcând acest lucru, face posibil ca tema dvs. să fie tradusă cu ușurință în alte limbi.

Pentru a adăuga suport I18n, nu uitați să utilizați un domeniu de text din care puteți analiza fișierele sursă și din care puteți extrage șirurile translabile. În acest exemplu, folosim domeniul text „Updraft”, dar puteți alege orice identificator unic. Putem defini domeniul text după cum urmează.

 [cod]
funcția i18n_setup() {
load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/languages' );
}
add_action('after_setup_theme', 'i18n_setup');
[/cod]

Acum, ori de câte ori utilizați șiruri statice în fișierele de temă, includeți-le în funcțiile __() sau _e() .

 [cod]
<h2><?php _e('Prenumele', 'updraft); ?></h2>
<?php echo __('E-mail utilizator', 'updraft'); ?>
[/cod]

Există instrumente speciale disponibile, cum ar fi POEDIT, care ajută la generarea fișierelor în limba tradusă. Vă rugăm să consultați acest blog pentru mai multe informații.

Acest blog a acoperit elementele de bază despre crearea temelor personalizate WordPress. Cu toate acestea, este un subiect vast care necesită mult timp și răbdare. Mai jos sunt câteva resurse utile cu care ar trebui să vă familiarizați, care vă vor ajuta să începeți să vă creați temele WordPress.

Bucla WordPress
Etichete șablon
Pagini de categorie
Funcție_Referință
Etichetă condiționată
Standarde de codare WordPress

Când creați o temă nouă pentru site-ul dvs. WordPress, amintiți-vă că va trebui să o faceți o copie de rezervă după fiecare modificare sau riscați să vă pierdeți toată munca. Utilizați UpdraftPlus – cel mai important și de încredere plugin WordPress de backup, restaurare și clonare.

Postarea Cum se creează o temă personalizată WordPress a apărut mai întâi pe UpdraftPlus. UpdraftPlus – Plugin de backup, restaurare și migrare pentru WordPress.