Cauți o foaie de trișare pentru teme WordPress pentru a-ți modifica rapid tema sau pentru a crea o nouă temă personalizată? WordPress vine cu multe etichete de șablon încorporate pe care le poți folosi pentru a începe. În acest articol, vom împărtăși o foaie de trișare pentru teme WordPress pentru începători.
Înainte de a începe
WordPress vine cu un motor de șabloane puternic care permite dezvoltatorilor de teme să creeze designuri frumoase pentru site-urile web alimentate de WordPress. Există atât teme WordPress premium, cât și gratuite pe care le puteți instala pe site-ul dvs. web.
Fiecare temă WordPress vine cu o serie de opțiuni de personalizare. Aceste opțiuni îți permit să schimbi culorile, să adaugi imagini de antet, să configurezi meniuri de navigare și multe altele.
Cu toate acestea, sunteți în continuare limitat la funcționalitățile pe care le suportă tema dvs. Uneori, este posibil să doriți să faceți mici modificări la tema dvs. WordPress care necesită puțin cod. Pentru a face acest lucru, va trebui să cunoașteți elemente de bază de PHP, HTML și CSS.
Primul lucru pe care ați dori să-l faceți este să vă familiarizați cu cum funcționează WordPress în culise și cu șabloanele temelor WordPress.
După aceea, există câteva bune practici pe care ați putea dori să le urmați. De exemplu, crearea unei teme copil în loc să faci modificările direct în fișierele temei tale.
Puteți, de asemenea, să exersați pe tema dvs. prin instalarea WordPress pe computerul dvs..
Acestea fiind spuse, să intrăm în foaia noastră de referință pentru temele WordPress pentru începători.
Șabloane de bază pentru teme WordPress
Fiecare temă WordPress este formată din fișiere diferite numite șabloane. Toate temele WordPress trebuie să aibă o foaie de stil și un fișier index, dar de obicei vin cu multe alte fișiere.
Mai jos este lista fișierelor de bază pe care le are fiecare temă:
- style.css
- header.php
- index.php
- sidebar.php
- footer.php
- single.php
- page.php
- comments.php
- 404.php
- functions.php
- archive.php
- searchform.php
- search.php
Dacă îți construiești propria temă, poți începe cu una dintre temele de start WordPress. Aceste teme vin cu fișiere de șabloane WordPress gata de utilizare și CSS care îți oferă un cadru pe care să construiești.
Etichete șablon în antet
WordPress vine cu o mulțime de funcții utile care pot fi utilizate pentru a afișa diferite lucruri în tema dvs. Aceste funcții se numesc etichete de șablon.
Prima și probabil cea mai importantă funcție necesară în toate temele WordPress conforme standardelor se numește wp_head și arată astfel:
<?php wp_head(); ?>
Acest cod preia toate elementele HTML importante pe care WordPress le necesită pentru a fi adăugate în secțiunea <head> a fiecărei pagini de pe site-ul dvs. Este, de asemenea, esențial pentru funcționarea corectă a multor plugin-uri WordPress pe site-ul dvs.
Mai jos este o listă de etichete de șablon pe care le veți găsi și utiliza frecvent în fișierul header.php al șablonului dvs. Cu toate acestea, ele pot fi utilizate și în alte părți ale șablonului dvs. atunci când aveți nevoie de ele.
// Title of the Blog, or Blog Name
<?php bloginfo('name'); ?>
// Title of a Specific Page
<?php wp_title(); ?>
// Exact URL for the site
<?php bloginfo('url'); ?>
// Site's Description
<?php bloginfo('description'); ?>
// Location of Site’s Theme File
<?php bloginfo('template_url'); ?>
// Link to the Style.css location
<?php bloginfo('stylesheet_url'); ?>
// RSS Feed URL for the site
<?php bloginfo('rss2_url'); ?>
// Pingback URL for the site
<?php bloginfo('pingback_url'); ?>
// WordPress version number
<?php bloginfo('version'); ?>
Etichete de șablon utilizate în alte fișiere de temă
Acum să aruncăm o privire la câteva alte etichete de șablon utilizate frecvent și la ce fac ele.
Următoarele etichete șablon sunt utilizate pentru a apela și include alte șabloane. De exemplu, fișierul index.php al temei dvs. le va folosi pentru a include șabloanele de antet, subsol, conținut, comentarii și bara laterală.
//Displays Header.php file content <?php get_header(); ?> // Displays Footer.php file content <?php get_footer(); ?> // Displays Sidebar.php file content <?php get_sidebar(); ?> // Displays Comment.php file content <?php comments_template(); ?>
Următoarele etichete de șablon sunt utilizate în bucla WordPress pentru a afișa conținutul, rezumatul și metadatele postărilor dvs.
// Displays the Content of the Post
<?php the_content(); ?>
// Displays the excerpt that is used in Posts
<?php the_excerpt(); ?>
// Title of the Specific Post
<?php the_title(); ?>
// Link of the Specific Post
<?php the_permalink() ?>
// Category of a Specific Post
<?php the_category(', ') ?>
// Author of the Specific Post
<?php the_author(); ?>
//ID of a Specific Post
<?php the_ID(); ?>
// Edit link for a Post
// Oonly visible to logged in users with editing privileges
<?php edit_post_link(); ?>
// URL of the next page
<?php next_post_link(' %link ') ?>
// URL of the previous page
<?php previous_post_link('%link') ?>
Teme WordPress vin cu zone pregătite pentru widgeturi numite Bara laterală. Acestea sunt locații în fișierele temei dvs. unde utilizatorii pot trage și plasa widgeturi WordPress. Adesea, o temă are mai multe locații unde utilizatorii pot adăuga widgeturi.
Cu toate acestea, cel mai frecvent aceste zone de widget sunt situate în bara laterală dreaptă sau stângă a aspectului temei. Pentru a afla mai multe, consultați ghidul nostru despre cum să adăugați bare laterale dinamice pregătite pentru widget-uri în tema dvs. WordPress.
Iată codul utilizat pentru a afișa o bară laterală în tema dvs.
<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
Va trebui să înlocuiești sidebar-1 cu numele definit de tema ta pentru zona respectivă pregătită pentru widget-uri sau bara laterală.
Etichete de șablon pentru afișarea meniurilor de navigare
WordPress vine cu un sistem puternic de gestionare a meniurilor care permite utilizatorilor să creeze meniuri de navigare pentru site-ul lor. O temă WordPress poate avea mai mult de o locație pentru meniul de navigare.
Vezi ghidul nostru despre cum să creezi propriile meniuri de navigare personalizate într-o temă WordPress.
Următorul este codul care va fi utilizat în tema ta pentru a afișa un meniu de navigare.
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
Locația temei depinde de numele pe care tema l-a folosit pentru a înregistra meniul de navigare. Clasa containerului CSS poate fi numită oricum dorești. Aceasta va înconjura meniul tău de navigare, astfel încât să îl poți stiliza corespunzător.
Etichete șablon diverse
Mai jos sunt câteva dintre etichetele pe care le veți folosi frecvent în șablonul dvs. WordPress.
// Displays the date current post was written
<?php echo get_the_date(); ?>
// Displays the last time a post was modified
get_the_modified_time
// Displays the last modified time for a post
<?php echo the_modified_time('F d, Y'); ?>
// Displays post thumbnail or featured image
<?php the_post_thumbnail( ); ?>
// Displays monthly archives
<?php wp_get_archives( ); ?>
// Displays the list of categories
<?php wp_list_categories(); ?>
// Displays the gravatar of a user from email address
// 32 pixels is the size, you can change that if you need
<?php echo get_avatar( 'email@example.com', 32 ); ?>
// Displays gravatar of the current post's author
<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>
Tag-uri condiționale în temele WordPress
Etichetele condiționale sunt funcții care returnează rezultate Adevărat sau Fals. Aceste etichete condiționale pot fi utilizate în întreaga temă sau plugin pentru a vedea dacă anumite condiții sunt îndeplinite și apoi a face ceva în consecință.
De exemplu, dacă postarea curentă are o imagine de antet sau nu. Dacă nu are o imagine de antet, atunci puteți afișa o imagine implicită de antet în schimb.
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/images/thumbnail-default.jpg" />';
}
?>
Următoarele sunt câteva etichete condiționale suplimentare pe care le puteți utiliza.
// Checks if a single post is being displayed is_single() // Checks if a page is being displayed is_page() // Checks if the main blog page is displayed is_home() // Checks if a static front page is displayed is_front_page() // Checks if current viewer is logged in is_user_logged_in()
Există multe alte etichete condiționale pe care le puteți utiliza. Lista completă a etichetelor condiționale poate fi găsită pe pagina codexului WordPress despre etichete condiționale.
Bucle WordPress
Bucla (The Loop) sau bucla WordPress este codul utilizat pentru a prelua și afișa postări în WordPress. Multe etichete de șablon WordPress pot funcționa doar în interiorul buclei, deoarece sunt asociate cu obiectele postare sau post_type.
Urmează un exemplu de buclă WordPress simplă.
<?php
// checks if there are any posts that match the query
if (have_posts()) :
// If there are posts matching the query then start the loop
while ( have_posts() ) : the_post();
// the code between the while loop will be repeated for each post
?>
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="date-author">Posted: <?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_content(); ?>
<p class="postmetadata">Filed in: <?php the_category(); ?> | Tagged: <?php the_tags(); ?> | <a href="<?php comments_link(); ?>" title="Leave a comment">Comments</a></p>
<?php
// Stop the loop when all posts are displayed
endwhile;
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</p>
<?php
endif;
?>
Pentru a afla mai multe despre buclă, consultați Ce este o buclă în WordPress (infografic).
Sperăm că acest articol vă ajută ca foaia de referință de bază pentru teme WordPress pentru începători. De asemenea, ați putea dori să vedeți lista noastră de cele mai utile trucuri pentru fișierul Functions WordPress.
Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la canalul nostru de YouTube pentru tutoriale video WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.
Mrteesurez
Postare grozavă, de fapt aceasta este una dintre postările care mi-au explicat clar etichetele de șabloane și au fost categorizate în funcție de utilizare și funcții.
Fișierele de bază WordPress pe care le-ați partajat sunt, de asemenea, utile pentru a începe propriul meu temă. Este esențial să înțelegeți aceste etichete de șabloane și fișierele de bază pentru a edita sau crea o temă personalizată.
Vă mulțumesc pentru asta, aștept cu nerăbdare să văd acest tip de postări.
Fajri
tutorial bun
Uneori, chiar trebuie să edităm conținutul unora dintre fișierele PHP de mai sus, mai ales dacă există personalizări care nu sunt furnizate de temă.
pentru inserarea simplă de cod, un plugin care ajută mult este WPCode Lite
Mrteesurez
Sunt de acord cu tine. Este adevărat că personalizarea fișierelor PHP este uneori necesară pentru cerințe unice neacoperite de temă. WPCode a fost un salvator pentru mine în aceste situații. Permite inserări simple de cod fără bătaia de cap de a edita direct fișierele temei, făcând mai ușoară și mai sigură implementarea modificărilor personalizate. L-am folosit pe aproape toate site-urile mele, deoarece este foarte util.
Marco
Acesta este un articol grozav.
Dar mai este relevant în 2022 cu editorul de blocuri Gutenberg?
WPBeginner sunteți cei mai buni!
Suport WPBeginner
Ceea ce împărtășim în acest articol este încă relevant în prezent.
Admin
Fajri
Salut, frate
Da, așa este, acest tutorial este încă relevant pentru versiunea curentă de WordPress, inclusiv dacă site-ul dvs. folosește un editor de blocuri sau chiar editorul clasic.
trebuie să încerci, prietene
Henry Obilor
Aș dori să întreb când creez o temă nouă. Pot să-mi creez propriul header.php și să folosesc footer.php de la o temă premium?
Combinând ale tale cu șablonul deja construit. Va funcționa?
Suport WPBeginner
Acest lucru ar depinde în mare măsură de conținutul fișierului footer.php și de modul în care ați codat tema. Dacă aveți un footer, cea mai bună metodă ar fi să testați pe o instalare locală.
Admin
Biplob
Este un lucru grozav. Este foarte util
Zaki
Acesta cu siguranță nu este pentru începători. Mi-e teamă că voi ajunge să-mi stric site-ul. Partea de codare este complet neclară. Aș aprecia dacă ați putea oferi câteva capturi de ecran grozave pentru a ilustra „Cum să adăugați o pagină personalizată”.
Sanam
Frate, unde să lipesc acest cod în functions.php
Suport WPBeginner
La sfârșit. Dacă aveți eticheta ?> ca ultimă linie, atunci trebuie să inserați codul înainte de acea linie.
Admin
Shahbaz Ahmed Bhatti
Foarte frumos și excelentă muncă, continuați așa, informații foarte bune pentru începători.
Solomon
Mulțumesc mult, apreciez cu adevărat.
Pali Madra
Mulțumesc pentru tutorialul grozav. Recomand tutorialul oricui încearcă să învețe WordPress.
Continuați munca bună!
Ben
Mulțumesc pentru un articol foarte util. Exact ce căutam.
Mulțumesc.
Ben
madalinignisca
ce este – Descrierea site-ului
Cred că este
madalinignisca
ce înseamnă „<?php bloginfo(%u2019description%u2019); ?> – Descrierea site-ului”? Cred că este „<?php bloginfo(‘description’); ?>”
mirzayasir4
Aceasta este o foaie de trișare grozavă și utilă atunci când editezi teme. Mulțumesc
John
Fantastic, căutam o foaie de indicii WordPress ușoară de ceva timp, mulțumesc că ați făcut asta, face viața mult mai ușoară și pot deveni puțin mai creativ. Wordpress are atâta putere sub capotă.
mark
acesta este grozav pentru începători
Russell Poulter
Acest lucru este FOARTE salvat!
Mulțumesc.
asif eminov
Mulțumesc pentru aceste detalii.
Ersatzknochen
Da, foarte util. Mulțumesc.
Încântat
Vă mulțumesc pentru partea cu Coduri în Header.php, Foarte ușor de înțeles și FOARTE util! Vă mulțumesc pentru asta.
SleepY
Wow… asta căutam de zile întregi.
mulțumesc mult!
Victor Duwon Jackson
Acesta este grozav, Mulțumesc.
Manoj
Great info! bookmarked
Obed Ward
Excelentă foaie de trișare pentru teme WP, o voi salva în marcaje (și, desigur, o voi twitta). Mulțumesc!
Naeem Noor
Foarte util, tocmai l-am printat.
Blog2Life
Aceste shortcode-uri sunt exact ceea ce căutam pentru a începe lucrul la câteva teme noi.. mulțumesc pentru postare și continuați munca bună!
Hami
Yes exactly. This post has solved out and let us (beginners) start working instantly on new ideas
A.D.K.
Acesta este foarte util, mulțumesc.
Jon Rawlins
Retweetat pentru tine. Tocmai urmează să-mi configurez un blog, așa că acest site a fost foarte util.
Angad Sodhi
Aah! Salvez asta imediat..
Referirea temei implicite pentru aceste detalii mici este acum istorie!
Vă mulțumesc, oameni buni.
DaveK
Cool, Thanks for sharing, consider it tweeted