WordPress custom theme Tutorial

WordPress custom theme Tutorial

învățarea de a crea teme personalizate WordPress deschide o lume cu totul nouă pentru a explora. Vă permite să construiți modele personalizate pentru dvs., clienții dvs. și chiar să contribuiți înapoi la comunitatea open-source.

în acest ghid, vă vom duce de la zero la o temă complet funcțională care poate fi trimisă la WordPress.org director temă.

pentru a urmări, veți avea nevoie de o înțelegere de bază a HTML, CSS, PHP și a modului în care funcționează WordPress.

tot codul utilizat în acest ghid va fi disponibil pentru referință în acest depozit Github.

Pasul #1: Crearea fișierelor esențiale pentru tema personalizată

o temă WordPress funcțională poate consta din doar două fișiere: stil.css și index.php. Acest lucru este posibil datorită ierarhiei șabloanelor WordPress.

când WordPress afișează o pagină web, caută cel mai specific șablon disponibil, dacă un șablon nu există, se va deplasa în jos în ierarhie până când va găsi unul care o face. Iată un exemplu practic:

utilizatorul este pe https://example.com/practical-example, care este o pagină. WordPress va încerca să localizeze un șablon în această ordine:

1. 1. • pagina – {slug}.php-pagina slug este / Practice-exemplu, WordPress va căuta să folosească-tema/pagina-practice-exemplu.php
      • pagină – {id}.php – id-ul paginii este 42, WordPress va căuta să vă folosească tema / pagina-42.php.
      • pagină.php-WordPress va încerca scopul general-tema / pagina.șablon php.
      • singular.php-șablonul singular poate reda postări și pagini, așa că este încercat după pagina mai specifică.php
      • index.php-în cele din urmă dvs.-tema/index.php este utilizat dacă nu se găsește niciun alt șablon.

să începem prin construirea unei teme doar cu fișierele esențiale și apoi putem stratifica mai multe funcții pe măsură ce explorăm modul în care funcționează.

în /wp-content/themes/, creați un folder numit my-custom-theme și creați următoarele două fișiere:

stil.css

pentru WordPress să recunoască tema noastră și de ieșire-l în mod corespunzător în aspectul Lista de teme de la sută avem nevoie pentru a plasa unele Cod WordPress-specifice în partea de sus a stilului.css, se pare ca acest lucru:

/*Theme Name: My Custom ThemeTheme URI: https://yourwebsite.com/themeAuthor: Your NameAuthor URI: https://yourwebsite.comDescription: This is my first custom theme!Version: 1.0.0License: GNU General Public License v2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Text Domain: my-custom-themeTags: custom-background*/

tehnic niciunul dintre câmpuri nu este necesar, dar dacă doriți ca tema dvs. să arate bine în wp-admin, atunci acestea sunt foarte încurajate. De asemenea, sunt necesare dacă distribuiți tema dvs. pe WordPress.

1. 1. • nume temă – ar trebui să furnizeze întotdeauna un nume temă. Dacă nu, atunci numele folderului va fi folosit, my-custom-theme în exemplul nostru.
      • URI temă – dacă este utilizat, uri temă ar trebui să ofere un link către o pagină unde vizitatorii pot afla mai multe despre temă.
      • autor – numele tău merge aici.
      • autor URI – un link către site-ul dvs. personal sau de afaceri poate fi plasat aici.
      • Descriere-descrierea este afișată pe wp-admin tema modal și, de asemenea, pe lista temă WordPress.
      • Versiune – numerele de versiune ajută dezvoltatorii să urmărească modificările și să anunțe utilizatorii dacă folosesc cea mai recentă versiune. Urmăm sistemul de numerotare SemVer pentru a indica severitatea modificărilor într-o actualizare.
      • Licență-modul în care licențiați tema depinde de dvs., dar dacă alegeți o licență non-compatibilă cu GPL, atunci nu veți putea distribui tema pe WordPress.
      • License URI – Acesta este pur și simplu un link către licența enumerată mai sus.
      • domeniu Text – domeniul text este utilizat atunci când traduceți tema în alte limbi. Nu vă faceți griji, vom explora acest lucru în profunzime mai târziu. Deocamdată, este suficient să știm că este o practică bună ca folderul tematic și domeniul text să fie numele temei separate prin cratime în loc de spații.
      • Tag – uri-tag-uri sunt utilizate numai dacă încărcați tema la WordPress.org director temă. Ele stau la baza mecanismului’ Feature Filter’.

copiați și lipiți cele de mai sus în stil.css și veți avea ceva de genul acesta:

notă: pare puțin gol în acest moment, deoarece nu avem încă o captură de ecran. Vom adăuga asta mai târziu.

index.php

index.php este singurul alt fișier strict necesar. Treaba sa este de a face toate ieșire front-end pentru tema noastră.

din moment ce indicele.php va reda toate paginile noastre (acasă, postări, Categorii, arhive) va face multă muncă. Pentru a începe avem nevoie de o secțiune cap care va acoperi elementele de bază HTML.

<!DOCTYPE html><html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head>

acesta este HTML standard cu o singură excepție, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head este o funcție de bază care permite pluginurilor WordPress și terțe părți să introducă cod în antet fără a modifica fișierele șablon. Aceasta se numește cârlig de acțiune.

dacă sunteți familiarizat cu HTML, este posibil să observați că nu există o etichetă < title> pentru a afișa titlul paginii. Asta pentru că WordPress poate folosi cârligul wp_head pentru a insera dinamic titlul.

o altă utilizare a wp_head este de a enqueue stiluri (.css) și script-uri (.js). Există motive foarte bune pentru a face acest lucru în loc să le codificăm, pe care le vom analiza mai târziu.

apoi, avem corpul paginii:

<body <?php body_class(); ?>>

body_class() este o funcție de ajutor oferită de WordPress care va afișa o listă de clase CSS utile care descriu pagina afișată, cum ar fi:

class="page page-id-2 page-parent page-template-default logged-in"

body_class(); acceptă, de asemenea, un parametru, astfel încât să puteți adăuga propriile clase, de exemplu:

<body <?php body_class( 'wide-template blue-bg' ); ?>>

apoi, avem antetul șablonului.

<header class="site-header"><p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p><p class="site-description"><?php bloginfo( 'description' ); ?></p></header><! – .site-header – >

aici folosim funcțiile șablonului încorporat WordPress pentru a afișa titlul și descrierea Site-ului. Am folosit, de asemenea, o funcție de ajutor, home_url (), pentru a lega titlul Site-ului înapoi la pagina de pornire.

în continuare, corpul paginii:

<div class="site-content"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();?><article <?php post_class(); ?>><header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header><! – .entry-header – ><div class="entry-content"><?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?></div><! – .entry-content – ></article><! – #post-## – ><?php// If comments are open or we have at least one comment, load up the comment template.if ( comments_open() || get_comments_number() ) :comments_template();endif;endwhile;else :?><article class="no-results"><header class="entry-header"><h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1></header><! – .entry-header – ><div class="entry-content"><p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p></div><! – .entry-content – ></article><! – .no-results – ><?phpendif;?></div><! – .site-content – >

acest lucru este în cazul în care devine interesant (și un pic mai complex). Aici folosim cea mai importantă caracteristică a WordPress, bucla. Bucla face munca grea de imaginind care pagina utilizatorul este pe și ceea ce ar trebui să fie afișate. Apoi returnează o listă cu una sau mai multe’ postări ‘ pe care le putem parcurge și transmite date folosind funcții șablon.

dacă bucla nu returnează niciun rezultat, de exemplu pe o pagină 404 sau o postare ștearsă, folosim un operator else pentru a afișa un mesaj predefinit.

fără nici un cod din jur, o buclă simplificată arată astfel:

if ( have_posts() ) : // check if the loop has returned any posts.while ( have_posts() ) : // loop through each returned post.the_post(); // set up the content so we can use template tags like the_title().the_title(); // output the post title.the_content(); // output the post content.endwhile;else : echo 'No Page Found'; // output an error message if there are no posts.endif;?>

notă: deoarece WordPress își are originea în blogging, o mulțime de funcții folosesc terminologia ‘post’, chiar dacă pot returna și afișa orice tip de conținut (postări, pagini, tipuri de postări personalizate).

în cele din urmă, avem subsolul, tot ce trebuie să facem aici este să închidem etichetele HTML pe care le-am deschis mai devreme. Există un alt cârlig de acțiune, wp_footer (), care este utilizat în mod activ de WordPress și pluginuri pentru a include scripturi în subsolul necesar randării paginii.

<?php wp_footer(); ?></body></html>

dacă ați urmărit până acum, veți avea o temă WordPress complet funcțională care arată astfel:

tema noastră nu va câștiga niciun premiu de design (nu are CSS) și lipsește o mulțime de caracteristici pe care utilizatorii le consideră esențiale (bare laterale, navigare, metadate, miniaturi, paginare etc.) dar este un început minunat!

să continuăm și să vedem cum o putem îmbunătăți.

Pasul #2: Creați funcții.php

funcții.php nu este strict un fișier necesar, dar oferă atât de multe beneficii încât 99,99% din teme îl au. În funcții.php puteți utiliza funcționalitatea tematică încorporată a WordPress și puteți adăuga, de asemenea, propriul cod PHP personalizat.

crearea unei funcții.php în folderul Tema acum ca vom fi adăugarea de cod să-l în secțiunile următoare.

adăugarea unui meniu de navigare

majoritatea, dacă nu toate site-urile web utilizează un meniu de navigare, dar până acum tema noastră nu acceptă unul. Pentru a spune WordPress tema noastră are un meniu de navigare, trebuie să-l înregistreze în funcții.php ca aceasta:

register_nav_menus( array( 'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),);

notă: register_nav_menus () acceptă o matrice, astfel încât să puteți înregistra mai mult de un meniu, dacă este necesar.

WordPress știe acum despre meniul nostru, dar trebuie să-l scoatem în tema noastră. Facem acest lucru adăugând următorul cod sub descrierea site-ului în index.php:

wp_nav_menu( array( 'theme_location' => 'menu-1',) );

acum avem un meniu de navigare (unstyled) :

adăugarea unei Sidebar

tema noastră nu are o bara laterală (zona widget), fie, să stabilească că acum.

în primul rând, trebuie să înregistrăm bara laterală în funcții.php:

function my_custom_theme_sidebar() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'my-custom-theme' ), 'id' => 'sidebar-1', ) );}add_action( 'widgets_init', 'my_custom_theme_sidebar' );

acum creați bara laterală.php în folderul temă și adăugați următorul cod:

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

aici folosim o instrucțiune if pentru a verifica dacă bara laterală este ‘activă’ înainte de a scoate codul. O bară laterală activă este una la care utilizatorul a adăugat cel puțin un widget.

ultimul pas este să includeți bara laterală în index.php, deasupra wp_footer() adăugați un apel get_sidebar ().

adăugarea de imagini recomandate

cum ar fi barele laterale și meniuri de navigare, nu putem doar de ieșire imagini prezentate în tema noastră și se așteaptă ca acestea să funcționeze, trebuie să spunem WordPress susținem această caracteristică în primul rând. În funcții.php adaugă:

add_theme_support( 'post-thumbnails' );

acum putem adăuga the_post_thumbnail(); în bucla noastră și miniaturile vor funcționa. Singura problemă este că vor ieși la dimensiunea maximă a WordPress de 1920px x 2560px, care este prea mare pentru majoritatea utilizărilor. Din fericire WordPress are o altă funcție de ajutor: add_image_size ();

când un utilizator încarcă o imagine și dacă dimensiunea imaginii este definită, WordPress va genera o versiune a imaginii încărcate la acea dimensiune (păstrând în același timp originalul). Dacă imaginea utilizatorului este mai mică decât dimensiunile pe care le-ați setat, WordPress nu va face nimic, deoarece nu poate face o imagine mai mare decât originalul.

pentru a utiliza o imagine caracteristică optimizată mai degrabă decât originalul, plasați următorul cod în funcții.php:

add_image_size( 'my-custom-image-size', 640, 999 );

primul parametru este mânerul, al doilea este lățimea imaginii, iar al treilea este înălțimea. Atât înălțimea, cât și lățimea sunt opționale în cazul în care doriți să limitați doar o dimensiune.

în index.php:

the_post_thumbnail( 'my-custom-image-size' );

Enqueueing stiluri și script-uri

mai devreme am afirmat că este mai bine să enqueue stiluri și script-uri, mai degrabă decât hardcoding-le direct în Fișierele șablon. Asta pentru că enqueuing permite mult mai multă flexibilitate.

când este făcut corect, enqueuing spune, de asemenea, WordPress ce resurse sunt încărcate. Când WordPress știe ce resurse sunt necesare, se poate asigura că aceeași resursă nu este încărcată de mai multe ori. Acest lucru este deosebit de important atunci când aveți o bibliotecă extrem de populară, cum ar fi jQuery sau FontAwesome, pe care o vor utiliza mai multe teme și pluginuri.

un alt beneficiu al enqueuing este că o resursă care este enqueued poate fi dequeued de un plugin, evitând necesitatea de a modifica fișierele șablon.

deși tema noastră are un stil.fișier css nu este folosind-o încă, să întreb că acum:

function my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() este o funcție de ajutor care preia URI-ul foii de stil a temei curente. Dacă am fost enqueueing orice alt fișier ne-ar trebui să facă acest lucru în schimb:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

tema noastră nu are nici un script-uri, în cazul în care a făcut ne-ar întreba-le ca aceasta:

function my_custom_theme_enqueue() {wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

o excepție de la cele de mai sus sunt scripturile care au fost preînregistrate de WordPress, în aceste cazuri trebuie doar să furnizați primul parametru ($handle):

wp_enqueue_script( 'jquery' );

adăugarea de stil cu CSS

tema noastră are fundații puternice, dar nu are nici un design, adăugând unele CSS de bază pentru stil.css va face o mare diferență. Am adăugat în jur de ~100 de linii de CSS la tema noastră eșantion ca o demonstrație, iar rezultatul arata ca acest lucru:

tag-ul titlu

toate temele ar trebui să utilizeze WordPress built-in funcționalitate pentru a genera tag-ul titlu, care este activat prin adăugarea acestui cod la funcțiile.fișier php: add_theme_support( 'title-tag' ); asta e tot ce este de făcut, WordPress se va ocupa de ieșirea paginii<titlu > și, dacă este necesar, pluginurile pot modifica ieșirea folosind filtre. Pluginurile SEO fac adesea acest lucru într-un efort de a optimiza în continuare titlurile.

Pasul # 3: Adăugați piese șablon

chiar acum 80% din Codul nostru șablon este în index.php.

în timp ce acest lucru funcționează va duce la o mulțime de repetare cod atunci când avem alte fișiere șablon, cum ar fi singular.php, căutare.php și arhivă.php. Părțile șablonului facilitează dezvoltarea temei, permițându-ne să reutilizăm codul în șabloane. Deoarece antetul și subsolul nostru vor fi aceleași pe fiecare pagină, acestea sunt un candidat perfect pentru utilizarea pieselor șablon. Mai întâi, creați antet.php și mutați următorul cod din index.php:

<!DOCTYPE html><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="<https://gmpg.org/xfn/11>"><?php wp_head(); ?></head> <header class="site-header"> <p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> </p> <p class="site-description"><?php bloginfo( 'description' ); ?></p><?phpwp_nav_menu( array( 'theme_location' => 'menu-1',) );?> </header><! – .site-header – >

în index.php înlocuiește codul de mai sus cu:

<?php get_template_part( 'header' ); ?>

notă: atunci când obține o parte șablon, trebuie să omită .php din partea șablonului mâner.

apoi, creați o parte șablon subsol mutând acest cod în subsol.php și repetarea procesului de mai sus:

<?php wp_footer(); ?></body></html>

în cele din urmă, vom muta codul ‘no-results’ într-o parte șablon, deoarece este probabil să fie utilizat în mai multe șabloane. Creați conținut-nici unul.php și mutați acest cod în noul fișier.

<article class="no-results"> <header class="entry-header"> <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1> </header><! – .entry-header – > <div class="entry-content"> <p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> </div><! – .entry-content – ></article><! – .no-results – >

indexul dvs. ar trebui să arate acum astfel:

<?php get_template_part( 'header' ); ?> <div class="site-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <?php the_post_thumbnail(); ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><! – .entry-header – > <div class="entry-content"> <?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?> </div><! – .entry-content – > </article><! – #post-## – > <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; else : get_template_part( 'content-none' ); endif;?></div><! – .site-content – ><?phpget_sidebar();get_template_part( 'footer' );

în timp ce cele de mai sus vor funcționa perfect, există o ușoară îmbunătățire pe care o putem face. WordPress are funcții de ajutor pentru includerea părților șablonului antet, subsol și bară laterală. Deoarece este o bună practică să folosim funcționalitatea de bază acolo unde este posibil, ar trebui să le folosim în schimb.

înlocuiți get_template_part( 'header' ); cu get_header(); și get_template_part( 'footer' );cu get_footer();

Pasul #4: Adăugați singular.php, arhivă.php, căutare.php și 404.php

bazele pe care le-am completat cu piese șablon vor plăti dividende pe măsură ce adăugăm noi fișiere șablon la tema noastră. Mai jos am enumerat cele mai frecvente. Pentru a evita copleșirea dvs. cu exemple de cod, ne-am conectat la codul sursă de pe Github.

singular.php

postările și paginile, atunci când sunt afișate pe propriile adrese URL, sunt considerate ‘singulare’, deoarece de cele mai multe ori aspectul va fi același pentru ambele tipuri de pagini. Dar, în cazul în care nu este, puteți utiliza Pagina mai specifică.php și single.php (post) în schimb.

exemplu de cod – singular.php

arhivă.php

șabloanele de arhivă diferă de obicei de șabloanele singulare în două moduri: ele arată fragmente mai degrabă decât conținutul complet și prezintă un antet de arhivă care explică conținutul.

consultați ierarhia șabloanelor și veți vedea că șablonul de arhivă acoperă toate tipurile de arhive (autor, categorie, etichetă, taxonomie, dată) dacă acest lucru nu funcționează pentru cazul dvs. de utilizare, puteți utiliza în continuare șabloanele mai specifice:

1. 1. • autor.php
      • Categorie.php
      • etichetă.php
      • taxonomie.php
      • data.php

exemplu de cod-arhivă.php

căutare.php

Site-urile WordPress pot fi căutate folosind ?s = parametrul URL, de exemplu, yourwebsite.com?s=test. Căutarea.șablon php ieșiri rezultatele acestor căutări.

exemplu de cod – căutare.php

404.php

declarația else am adăugat în index.php captează Erorile „page not found”, dar poate doriți să decuplați această funcționalitate în propriul fișier șablon pentru a avea mai mult control asupra ieșirii. Acesta este cazul de utilizare al 404.fișier șablon php.

Exemplu De Cod – 404.php

Pasul # 5: fișiere auxiliare

dacă distribuiți tema publicului, atunci următoarele fișiere sunt imperative. Fără acestea, tema dvs. va fi respinsă din depozitele și piețele tematice.

captură de ecran.png

captura de ecran este afișată în lista teme wp-admin atunci când utilizatorul selectează o temă nouă. Iată câteva dintre cele mai bune practici pe care ar trebui să le urmați:

1. 1. • capturi de ecran ar trebui să fie 1200px x 900px
      • capturi de ecran ar trebui să fie în .png sau .jpg format
      • capturi de ecran ar trebui să fie o reprezentare exactă a temei
      • capturi de ecran ar trebui să fie optimizate (utilizare tinypng.com sau similar)

readme.Txt

WordPress nu utilizează nicio informație de la readme.txt, trage tot ce are nevoie de la stil.css. Pe de altă parte, directorul tematic WordPress trage informații importante din fișierul readme și consideră că este un fișier necesar.

majoritatea dezvoltatorilor folosesc readme.txt ca locație centrală pentru a stoca toate informațiile despre tema lor. Un simplu readme.txt arată astfel:

=== Theme Name ===Requires at least: 5.0Tested up to: 5.2Requires PHP: 5.6License: GPLv2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Short description. No more than 150 chars.== Description ==Theme desc.== Changelog === 1.0 =* Added new option== Resources ==* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, (<https://opensource.org/licenses/MIT>)

1. 1. • necesită cel puțin – aceasta este versiunea minimă a WordPress cu care tema dvs. este compatibilă.
      • testat până la – acest câmp denotă cea mai recentă versiune de WordPress Tema a fost testat cu.
      • necesită PHP – acest câmp denotă versiunea minimă a PHP Tema va funcționa pe.
      • Description – acest câmp de descriere nu este afișat nicăieri.
      • Changelog – changelog nu este folosit nicăieri, dar dezvoltatorii și unii utilizatori vor face referire la acest fișier pentru a vedea ce modificări au fost făcute.
      • Resurse – cele mai multe resurse terțe necesită atribuire de un fel. Secțiunea Resurse este un loc larg acceptat pentru a pune cele. Chiar și pentru resursele care nu necesită în mod explicit atribuire, este încă o practică bună să le enumerați aici, astfel încât utilizatorii să fie conștienți de licențele resurselor pe care le utilizează.

Pasul # 6: Crearea șabloanelor de pagină

șabloanele de pagină permit dezvoltatorilor să creeze șabloane personalizate care pot fi utilizate pentru postări și pagini individuale. De exemplu, majoritatea temelor au un aspect cu două coloane (conținut-bara laterală), dar pe unele pagini, Utilizatorul ar putea dori să se concentreze doar pe conținut și să nu afișeze o bară laterală. Aici vă poate ajuta un șablon de pagină.

cum sunt create” șabloanele de pagină”?

în folderul tematic, creați un folder nou numit ‘șabloane de pagină’ și în acel folder creați un fișier numit coloană unică.php. Pentru a accelera lucrurile copiați tot codul de la singular.php la pagina-template-uri / singură coloană.php și eliminați apelul la get_sidebar () deoarece acest șablon nu va avea nevoie de asta.

acum trebuie să adăugăm un antet special care să spună WordPress că acesta este un șablon de pagină, arată astfel:

/*Template Name: Single Column TemplateTemplate Post Type: post, page*/

codul este auto-explicativ, pur și simplu spunem WordPress numele șablonului și cu ce tipuri de postări poate fi folosit.

asta e tot, noul nostru șablon de pagină este acum disponibil în editor sub ‘atribute de pagină’.

pas #7: Asigurați-vă tema compatibil cu RTL.css

nu toate limbile citesc de la stânga la dreapta. Araba și ebraica, de exemplu, sunt citite de la dreapta la stânga (RTL). Există o modalitate simplă de a vă face tema compatibilă cu limbile RTL.

creați un fișier nou în folderul tematic numit rtl.css, apoi copiați și lipiți următorul cod:

body {direction: rtl;unicode-bidi: embed;}

dacă o limbă RTL este limba activă pe un site web WordPress, WordPress știe să încarce automat acest fișier CSS.

aceasta este o implementare foarte de bază a funcționalității RTL pentru a vă începe. Dacă sunteți interesat să aflați mai multe aici sunt două resurse fantastice:

dreapta la stânga documentația de suport lingvistic

douăzeci și douăzeci RTL Cod

pas #8: urmați întotdeauna cele mai bune practici

cele mai bune practici au evoluat în timp pentru a face construirea și menținerea WordPress teme mai ușor. Nu numai că respectarea acestor principii vă va ajuta, dar vor face și mai ușor pentru alți dezvoltatori atunci când trebuie să lucreze cu codul dvs.

1) utilizați teme Starter

teme Starter oferă o bază solidă pentru tine de a construi tema pe. De obicei, acestea sunt ușoare, conțin puțin sau deloc stil și fără opțiuni de configurare. De-a lungul timpului, s-ar putea să vă construiți propria temă de pornire pe care vă puteți baza toate proiectele, dar deocamdată iată câteva opțiuni populare:

1. 1. • subliniere
      • schelă
      • HTML5 Blank

2) cunoașteți standardele de codificare WordPress

standardele de codificare sunt o modalitate de formatare a codului într-o manieră consecventă pe întreaga bază de cod. WordPress are standarde de codificare pentru HTML, CSS, Javascript și PHP. În timp ce utilizarea unui standard de codare nu are niciun efect asupra experienței utilizatorului final, acesta face codul dvs. mult mai lizibil. Chiar dacă nu utilizați standardele de codificare WordPress, vă recomandăm întotdeauna să utilizați un standard.

1. 1. • WordPress.org standarde de codificare
      • WPC
      • standarde de codare PHP

3) Utilizați localizarea

datorită muncii grele a voluntarilor, WordPress este disponibil în sute de limbi. Dacă tema dvs. va fi lansată public, aceasta trebuie construită într-un mod care să permită și traducerea acesteia.

nu vă faceți griji, este foarte ușor de făcut. Tot ce trebuie să facem este să ne asigurăm că toate șirurile sunt trecute printr-o ‘funcție de localizare’, mai degrabă decât să fie transmise direct.

în loc de asta:

<?php echo 'Previous Post'; ?>

facem acest lucru în schimb:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() este o funcție de localizare care acceptă un șir și un text-domeniu. Funcția returnează o traducere a șirului furnizat sau șirul original dacă o traducere nu este disponibilă.

4) evitați funcționalitatea pluginului

când un utilizator Schimbă tema, numai stratul de prezentare ar trebui să se schimbe. Conținutul și funcționalitatea ar trebui să rămână în mare parte aceleași. Ceea ce înseamnă acest lucru este că orice funcție care afectează modul în care rolurile WordPress ar trebui să fie conținute într-un plugin, nu în tema dvs. Câteva exemple de funcționalitate plugin includ:

1. 1. • tipuri personalizate Post
      • Page Builders
      • Social Media Sharing
      • Search Engine Optimization (SEO)

deși poate părea convenabil (și, eventual, un punct de Vânzare) să includă controale SEO într-o temă, de fapt doare utilizatorul pe termen lung. În viitor, vor trebui să-și schimbe tema, dar nu pot, deoarece toate configurațiile lor SEO sunt strâns legate de tema actuală. În schimb, în cazul în care configurațiile au fost stocate într-un plugin ar putea schimba tema fără griji.

5) prefixarea (Prevenirea Conflictelor)

pentru a preveni conflictele, toate funcțiile, clasele și variabilele globale create de tema dvs. ar trebui să fie prefixate. Acest lucru este important, deoarece este imposibil să știți ce alt cod rulează pe site-ul utilizatorului dvs. Prefixarea previne ciocnirile de nume și erorile fatale.

numele temei separate prin liniuțe sau subliniere va funcționa ca prefix de cele mai multe ori. Dacă numele temei este foarte lung, inițialele pot funcționa în schimb.

Theme Name: Scaffoldclass Scaffold_Class {}function scaffold_function() {}global $scaffold_globalTheme Name: My Long Theme Nameclass MLTN_Class {}function mltn_function() {}global $mltn_global

6) Utilizați funcționalitatea de bază

în cazul în care există, ar trebui să utilizați întotdeauna funcționalitatea de bază, spre deosebire de reinventarea roții. Aceasta include, dar nu se limitează la bare laterale, meniuri de navigare, miniaturi poștale, anteturi personalizate și fundaluri personalizate. Aceste caracteristici au fost testate de milioane de utilizatori și sunt menținute și îmbunătățite în mod activ.

dacă trebuie să modificați funcționalitatea sau ieșirea unei funcții de bază, atunci este posibil să utilizați unul dintre numeroasele cârlige și filtre oferite de WordPress. De exemplu, wp_nav_menu() are un parametru ‘walker’, astfel încât să puteți avea un control complet al ieșirii.

7) evadarea și igienizarea datelor

ca dezvoltator de teme, trebuie să fiți familiarizați cu evadarea și igienizarea datelor pentru a vă proteja utilizatorii de exploatările potențiale.

evadarea

Evadarea este procesul de verificare a datelor este sigură înainte de ieșire și igienizarea verifică datele înainte de a fi salvate în baza de date.

WordPress are funcții de ajutor pe care le puteți utiliza pentru a scăpa de date, astfel încât să nu aveți nevoie să le construiți singuri. esc_html este un exemplu de funcție de evadare. Aceasta este ceea ce o ieșire unescaped arata ca:

echo get_theme_mod( 'error_page_title' );

pentru a scăpa de ieșire facem acest lucru:

echo esc_html( get_theme_mod( 'error_page_title' ) );

unele alte funcții evadarea ar trebui să fie conștienți de sunt esc_attr(), absint(), esc_url().

de asemenea, este posibil să traduceți și să scăpați de un șir folosind o singură funcție:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

devine:

echo esc_html__( '404 Not Found', 'my-custom-theme' );// oresc_html_e( '404 Not Found', 'my-custom-theme' );

sfat: oriunde în tema dvs. unde aveți echo $ ar trebui să verificați dacă trebuie scăpat, de obicei.

igienizare

dacă adăugați setări la tema dvs., trebuie să vă asigurați că datele introduse de utilizatori la aceste setări sunt sigure înainte de a intra în baza de date. WordPress are o serie de funcții pentru a ajuta la igienizarea intrărilor.

când adăugați o setare la tema dvs. utilizând API-ul Customizer, acesta are un parametru numit ‘sanitize_callback’ care acceptă numele unei funcții de igienizare. Orice intrare pe care o ia setarea este verificată de funcția pe care o furnizați la ‘sanitize_callback’ înainte de a intra în baza de date.

subliniază importanța igienizării că, dacă chiar și una dintre setările dvs. lipsește sanitize_callback, nu va fi acceptată în directorul tematic WordPress.

$wp_customize->add_setting( 'my_custom_theme_setting', array( 'sanitize_callback' => 'sanitize_text_field' // A core sanitization function. ));

o listă oficială a funcțiilor de igienizare și evadare poate fi văzută aici: igienizarea datelor/evadarea

Pasul #9: Distribuiți Tema WordPress

temele pot fi distribuite prin diferite canale, în funcție de rezultatul pe care doriți să îl obțineți. Dacă rezultatul dvs. este să contribuiți pur și simplu la comunitatea open-source, atunci nu există o modalitate mai bună de a face acest lucru decât să încărcați tema în directorul WordPress. Dacă în schimb, căutați să vă vindeți tema și să câștigați bani direct, există și modalități de a face acest lucru.

Iată principalele site-uri web pentru distribuirea temelor:

1) WordPress.org (cel mai bun loc pentru a obține descărcări și utilizatori)

beneficiul principal al găzduirii temei dvs. pe WordPress este că obțineți un impuls de vizibilitate din faptul că tema dvs. este văzută nu numai pe wordpress.site-ul org, dar și în tabloul de bord wp-admin.

un alt beneficiu al găzduirii temei dvs. cu WordPress este sistemul de actualizare încorporat. Dacă actualizați tema toți utilizatorii vor fi notificate în interiorul lor tablouri de bord wp-admin și dat o cale ușoară de a actualiza la cea mai recentă versiune.

WordPress.org acceptă doar teme gratuite, dar asta nu înseamnă că nu poți câștiga bani. O temă gratuită poate fi un canal excelent pentru promovarea temei, pluginului sau serviciului dvs. premium.

2) WordPress.com

WordPress.com găzduiește atât teme gratuite, cât și teme premium. Cu toate acestea, ei nu au fost deschise la noi propuneri de autor pentru câțiva ani acum.

3) ThemeForest

ThemeForest este cea mai importantă piață pentru teme premium. Tema de top-vânzare (Avada) are vânzări de peste 5.000.000 de dolari.

în general vorbind cumpărătorii pe tema Forest se așteaptă full-featured „multi-scop” teme. Toate temele de top au funcționalitate Page builder și sunt susținute de echipe de dezvoltatori. Este o piață foarte greu de pătruns pentru noii autori.

4) piața creativă și piața Mojo

piața creativă și piața Mojo sunt jucători mici pe piața temelor premium, motiv pentru care le-am grupat împreună. Ambele oferă în mod eficient același serviciu ca ThemeForest, dar la o scară mai mică.

5) Github

Github este cel mai simplu mod de a vă face publică tema gratuită. Nu există nici un proces de revizuire și nici un ghid de urmat. Cu toate acestea, nu veți beneficia de vizibilitatea wordpress.org și va trebui să vă construiți propriul mecanism de actualizare pentru ca utilizatorii să obțină cele mai recente versiuni.

Pasul #10: Testați și îmbunătățiți Codul

1) testarea temei

testul unității tematice

testul unității tematice este un fișier standard de import de conținut WordPress care conține o gamă largă de tipuri de conținut și cazuri de margine. Este ușor de încărcat în mediul dvs. de dezvoltare și va evidenția o mulțime de scenarii pe care le-ați trecut cu vederea.

WP_DEBUG

ca dezvoltator de teme, testarea temei dvs. cu WP_DEBUG activat este minimul necesar pe care ar trebui să îl faceți. Tema dvs. nu trebuie să returneze erori sau avertismente atunci când WP_DEBUG este setat la true.

de asemenea, este important să repetați testul cu diferitele versiuni PHP pe care le acceptă tema dvs. Cu fiecare versiune majoră PHP, există noi modificări, avertismente și depreciere. Nu este neobișnuit ca o temă să fie fără erori pe PHP5.6, dar să arate erori pe PHP7.

pentru a activa WP_DEBUG, adăugați următorul cod la wp-config.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget este un plugin util care vă permite să adăugați 13 widget-uri de bază pentru bara laterală la o dată. Widget-urile de bază folosesc o varietate de elemente HTML care le face perfecte pentru testarea tema.

Tema Sniffer

Tema Sniffer este un plugin creat de Theme Review Team (TRT). Prinde o mulțime de (dar nu toate) erori de evadare și localizare. De asemenea, verifică tema dvs. în raport cu standardele de codificare WordPress.

2) trimiterea Tema la WordPress.org

la începutul acestui ghid, am spus că până când veți ajunge la final veți avea o temă la care să vă puteți supune wordpress.org. să ne uităm la acest proces.

procesul de încărcare

procesul de încărcare este simplu. Creați sau conectați-vă la contul dvs. WordPress și apoi navigați la această pagină– https://wordpress.org/themes/upload/

ai putea zip tema și încărcați-l chiar acum, dar aici sunt unele lucruri pe care ați putea dori să știți mai întâi.

cerințe

echipa de revizuire a temei (TRT) are un set strict de cerințe. Tema dvs. nu va fi acceptată în director până când nu îndeplinește toate cerințele.

proces de revizuire

când încărcați o temă, există un proces de revizuire în două etape trebuie să treacă înainte de a putea fi acceptată în directorul.

în primul rând, o verificare automată este efectuată imediat ce apăsați încărcați. În spatele scenei, verificatorul automat funcționează într-un mod foarte similar cu pluginul Theme Sniffer. Dacă găsește erori, va respinge tema și procesul de încărcare se termină acolo.

dacă tema dvs. trece verificarea automată, atunci se alătură unei cozi de teme care așteaptă o revizuire umană. Analiza umană este completată de voluntari din TRT. Numărul de teme din coadă depășește cu mult numărul de recenzori, ceea ce înseamnă că poate dura adesea 2-3 luni pentru ca tema dvs. să ajungă în partea din față a cozii.

este imperativ ca tema dvs. să nu aibă erori și să respecte toate cerințele până când ajunge la etapa de revizuire umană ca și cum ar avea mai mult de 3 erori semnificative, poate fi respinsă. Dacă o temă este respinsă în etapa de revizuire umană, aceasta trebuie să se alăture cozii din spate, ceea ce înseamnă să aștepți din nou 2-3 luni pentru o altă revizuire umană.

Resursă Utilă: Cele mai frecvente greșeli de dezvoltare a temelor WordPress (și cum să le remediați)

este demn de remarcat faptul că TRT caută mereu noi recenzenți, voluntariatul poate fi o experiență excelentă de învățare și o modalitate de a contribui la comunitatea open-source.

3) lista dvs. de teme

Felicitări, tema dvs. a fost aprobată! Acum aveți propria dvs. listă care arată astfel.

Iată o prezentare generală a ceea ce vă puteți aștepta să vedeți pe această pagină:

1. 1. • Screenshot-screenshot-ul este primul lucru pe care îl văd potențialii utilizatori, astfel încât să fie cât mai atrăgător posibil. Dar amintiți-vă că trebuie să fie în continuare o reprezentare exactă a temei și nu o redare photoshop. Inspirați-vă din cele mai populare teme.
      • Descriere-descrierea care este extrasă din stil.css este un loc ideal pentru a descrie tema și este caracteristici cheie. De asemenea, vă ajută să enumerați pluginurile recomandate sau necesare aici. Descrierea nu acceptă nicio formatare (bold, italic, Hyperlinkuri) sau chiar pauze de linie.
      • etichete-aceasta este o reprezentare a etichetelor pe care le-ați listat în stil.css. Numai aceste etichete aici sunt acceptate.
      • butonul Previzualizare-previzualizarea este generată de wordpress.org și ca dezvoltatori de teme, nu avem control asupra producției. Din păcate, deoarece previzualizatorul folosește conținut de bază și nicio configurație, duce adesea la o previzualizare mai puțin decât perfectă.
      • Tema Homepage Link – URL-ul pentru butonul de previzualizare este tras din câmpul ‘Tema URI’ în stilul tău.css. Există cerințe stricte ca această adresă URL să fie utilizată numai pentru a afișa o pagină care afișează informații despre tema dvs.
      • instalări Active – acesta este numărul de site-uri web care utilizează în mod activ Tema. Numărul este rotunjit la cele mai apropiate zece, sute sau mii. Nu este posibil pentru a prelua un număr exact.
      • descărcări pe zi – acesta este de câte ori tema dvs. a fost descărcată. O ‘Download’ poate fi o nouă descărcare sau o actualizare temă.
      • Recenzii-pentru ca un utilizator să lase o recenzie, trebuie să fie conectat la un wordpress.org cont. În general, recenziile sunt greu de obținut dacă nu cereți în mod explicit utilizatorilor să le trimită.
      • suport – platforma de suport built-in este mare pentru gestionarea și rezolvarea problemelor cu tema. Utilizatorul trebuie să fie conectat pentru a crea un fir de asistență.
      • traduceri – platforma de traducere este o resursă fantastică. Dacă ați urmat sfaturile de-a lungul acestui ghid pentru localizarea temei dvs., utilizatorii dvs. vor putea să o traducă în alte limbi și să vă extindă baza de utilizatori potențiali dincolo de utilizatorii vorbitori de limbă engleză.

4) Actualizarea temei

când faceți modificări temei dvs. în viitor și trebuie să actualizați versiunea găzduită pe WordPress, procesul este simplu.

prima actualizare ‘Version:’ câmp și changelog în readme.txt. Apoi zip fișierul și re-încărcați-l folosind aceeași pagină de încărcare ca înainte.

sistemul îl va recunoaște ca o actualizare și îl va aproba automat, astfel încât să nu necesite o altă revizuire umană.