Tutorial WordPress: Cum să creezi o temă WordPress din HTML (partea 2)

  1. 1. Tutorial WordPress: Cum să creezi o temă WordPress din HTML (partea 1)
  2. 2. Acum citesc: Tutorial WordPress: Cum să creezi o temă WordPress din HTML (partea 2)
  3. 3. O introducere în anatomia unei teme WordPress

În prima parte a acestui tutorial, am abordat elementele de bază ale convertirii unui șablon HTML într-o temă WordPress. Dacă sunteți cel mai minunat curios, am învățat câteva lucruri despre împărțirea șabloanelor HTML în fișiere PHP, redactarea lor, stilarea și denumirea temelor WordPress. Într-adevăr, am învățat multe și veți dori să vă familiarizați cu conceptele pe care le-am acoperit în primul nostru tutorial pentru a ne bucura de această a doua servire. În postarea de astăzi, vom duce lucrurile cu o notă mai mare. Vom acoperi alte câteva domenii, astfel încât să puteți crea o temă WordPress complet funcțională. Așa că, fără alte întrebări, aici mergem.


Configurarea imaginilor și a fișierelor JavaScript

Dacă aveți imagini în șablonul HTML original (index.html), probabil că ați observat că au încetat să apară după ce ați picat șablonul în fișiere PHP. Nu vă faceți griji, este exact așa cum este PHP. De exemplu, dacă aveți un logo în secțiunea antet ca așa …

your_logo_alt_text

… va trebui să te joci puțin cu codul. Codul pe care îl voi dezvălui într-o clipă va ajuta browserele să vă găsească logo-ul (sau orice altă imagine) în dvs. imagini folder, care este (sau ar trebui să fie) o sub-dosar a directorului principal al temei. Deci, pentru a afișa logo-ul dvs. în secțiunea antet, deschideți fișierul header.php și înlocuiți codul de mai sus cu următoarele:

your_logo_alt_text

Funcția get_template_directory_uri () returnează URL-ul pentru directorul dvs. tematic. Deci, dacă adăugați logo-ul dvs. într-un folder de imagini, atunci codul va apuca acel logo.

Observați vreo diferență? Evident, această bucată de cod vă va repara doar sigla. Pentru a remedia alte imagini, va trebui să rescrieți codurile lor în mod similar. Lucruri ușoare peasy.

Să trecem la JavaScript. Dacă site-ul dvs. HTML a folosit JavaScript, creați un folder numit js și așezați-vă scripturile acolo. Le puteți apela în fișierul header.php folosind următorul cod:

Codul de mai sus folosește example.js ca o ilustrare. Nu uitați să înlocuiți acea parte cu numele fișierului dvs. JavaScript.

Desigur, dacă creați o temă pentru altcineva, atunci ar trebui să încărcați fișierele dvs. js cu wp_enqueue_scripts. Verificați postările AJ privind adăugarea JavaScript la temele WordPress pentru mai multe informații și sfaturi.

Fișiere de șabloane

În prima parte a acestui tutorial, am menționat patru fișiere de șabloane de bază și anume index.php, header.php, sidebar.php și footer.php. Fișierele șablon controlează modul în care site-ul dvs. web va fi afișat pe web. Șabloanele obțin informații din baza de date MySQL a WordPress și le traduc în cod HTML care este afișat în browserele web. Cu alte cuvinte, fișierele de șabloane sunt elementele de bază ale temelor WordPress. Pentru a înțelege mai bine șabloanele, să ne aducem într-un concept cunoscut sub numele de șablon de ierarhie.

Vom folosi o analogie. Dacă un vizitator face clic pe un link de categorie (adică link către o categorie), cum ar fi http://www.yoursite.com/blog/category/your-category/, WordPress folosește ierarhia de șabloane pentru a genera fișierul (și conținutul) drept explicat mai jos:

  • În primul rând, WordPress va căuta un fișier șablon care să se potrivească cu ID-ul categoriei
  • Dacă ID-ul categoriei este, de exemplu 2, WordPress va căuta un fișier șablon numit categoria-2.php
  • Dacă categoria-2.php nu este disponibilă, WordPress va merge pentru un fișier de șablon de categorie generică, cum ar fi categoria.php
  • Dacă acest fișier de șablon nu este de asemenea disponibil, WordPress va căuta un șablon generic de arhivă, cum ar fi archive.php
  • Dacă nu există șablonul de arhivă generică, WordPress va reveni asupra fișierului șablon principal, index.php

Așa funcționează șabloanele WordPress și puteți utiliza aceste fișiere pentru a vă personaliza tema WordPress pentru a se potrivi nevoilor dvs. Alte fișiere șablon includ:

acasă.php sau index.phpFolosit pentru a reda indexul postărilor blogului
front-page.phpFolosit pentru a reda paginile statice sau cele mai recente postări, așa cum este setat pe afișajele din prima pagină
single.phpFolosit pentru a reda o singură pagină de postare
un singur {post-tip} .phpFolosit pentru a reda tipuri de postare personalizate, de ex. dacă tipul post ar fi un produs, WordPress ar folosi single-product.php
page.phpFolosit pentru redarea paginilor statice
category.php sau archive.phpFolosit pentru a reda indexul de arhivă de categorii
author.phpFolosit pentru redarea autorului
date.phpFolosit pentru redarea datei
search.phpFolosit pentru a reda rezultatele căutării
404.phpFolosit pentru a reda pagina de eroare a serverului 404

Aceasta este doar o listă scurtă, există multe altele Șabloane WordPress. Subiectul șabloanelor este unul mare, iar cea mai bună modalitate de a învăța cum să se joace cu fișierele de șabloane este citind extensia Dezvoltarea temei biblioteca la WordPress. Alternativ, puteți citi mai scurt Secțiunea șabloane la WordPress Codex.

Etichete de șabloane

Văzând că tocmai am introdus fișierele de șabloane, este corect să menționăm un lucru sau două despre etichetele șablonului și rolul pe care îl joacă în tematica WordPress. Conform WordPress.org, „… etichetele de șablon sunt utilizate în șablonul blogului dvs. pentru a afișa informații în mod dinamic sau pentru a personaliza blogul dvs., oferind instrumentele care să le facă cât mai individuale și interesante.

În tutorialul nostru anterior, ați întâlnit câteva etichete de șabloane, cum ar fi get_header, get_sidebar, get_footer și bloginfo. În secțiunea următoare, vom adăuga câteva etichete șablon la noua noastră creație WordPress. Presupun că ați inclus deja declarația DOCTYPE în fișierul dvs. header.php. Dacă nu aveți, iată codul:

Declarația DOCTYPE oferă semnificație codului dvs. HTML. Cu acest lucru, permiteți-ne să modificăm eticheta HTML de deschidere. Vom include un atribut lang folosind etichetă limbă_attribute ca astfel:

Codul de mai sus va genera următoarele:

Cu declarația DOCTYPE și eticheta limbă_attribut în loc, structura temei dvs. este legitimă, iar browserele vă vor înțelege codul. Dacă creați o temă pentru un blog, este important să plasați link-uri către URL-ul pingback și fluxul RSS în capul dvs. În antetul dvs., adăugați următorul cod:

Ai observat cum am angajat eticheta bloginfo să includeți fluxul RSS („rss2_url”) și pingback („pingback_url”)? Înainte de a salva fișierul dvs. header.php, adăugați și următorul cod:

Eticheta wp_head de mai sus va trage fișiere de stil și fișiere JavaScript cerute de pluginurile dvs. Dacă lăsați această bucată de cod minuscul, este posibil ca pluginurile dvs. să nu funcționeze așa cum doriți. Prin asta, să adăugăm titluri de pagini pe tema noastră WordPress folosind – încă o dată – eticheta bloginfo. În fișierul dvs. header.php, adăugați următorul cod:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

Prima etichetă wp_title va adăuga titlul paginii sau postării dvs. și a doua etichetă bloginfo („nume”) va adăuga numele blogului dvs. Acum, că tema dvs. WordPress are titluri de pagini, despre ce creăm o captură de ecran pentru tema noastră, reambalăm tema și ne odihnim?

Crearea unei capturi de ecran pentru tema dvs.

Când ați încărcat prima dată tema testului, trebuie să fi observat că îi lipsea o captură de ecran în Panoul cu temă WordPress. Arăta drab, mai ales dacă aveai alte teme cu capturi de ecran colorate. Dar nu vă faceți griji, crearea unei capturi de ecran pentru tema dvs. este foarte ușoară. Creați o imagine folosind editorul de imagini preferat (de exemplu Adobe Photoshop) sau luați o captură de ecran a temei dvs. Asigurați-vă că imaginea dvs. este 600px lățime și 450px înaltă. Salvați imaginea ca screenshot.png în folderul dvs. cu temă. Salvați toate modificările, comprimați folderul tematic într-o arhivă ZIP. Încărcați tema și activați-o pentru a vedea noile modificări ��

Concluzie

Vreau să cred că acest al doilea tutorial v-a oferit o perspectivă mai profundă asupra creării unei teme WordPress din HTML static. În viitorul apropiat, vă voi prezenta și alte aspecte ale tematicii WordPress, dar, între timp, am pregătit următoarele resurse doar pentru dvs.:

Creare fericită!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map