Tutorial de WordPress: Com crear un tema de WordPress a partir de HTML (part 2)

  1. 1. Tutorial de WordPress: Com crear un tema de WordPress a partir de HTML (1a part)
  2. 2. Actualment Llegint: Tutorial de WordPress: Com crear un tema de WordPress a partir de HTML (part 2)
  3. 3. Una introducció a l’anatomia d’un tema de WordPress

A la primera part d’aquest tutorial, vam abordar els conceptes bàsics per convertir una plantilla HTML en un tema de WordPress. Si sou el més curiós, vam aprendre algunes coses sobre com dividir les plantilles HTML en fitxers PHP, tornar-les a reunir, dissenyar i anomenar temes de WordPress. Realment, vam aprendre molt i voldreu familiaritzar-vos amb els conceptes que vam tractar al nostre primer tutorial per gaudir d’aquesta segona porció. A la publicació d’avui, farem que les coses siguin més altes. Abastarem algunes àrees més perquè pugueu crear un tema de WordPress totalment funcional. Així, sense més detalls, aquí anem.


Configuració d’imatges i fitxers JavaScript

Si teníeu imatges a la plantilla HTML original (index.html), probablement heu observat que van deixar de mostrar-se després d’haver picat la plantilla als fitxers PHP. No us preocupeu del tot, és exactament com és PHP. Per exemple, si teniu un logotip a la secció de capçalera com a tal …

el teu_logo_alt_text

… haurà de jugar una mica amb el codi. El codi que revelaré en un moment ajudarà els navegadors a trobar el vostre logotip (o qualsevol altra imatge) al vostre imatges carpeta, que és (o hauria de ser) una subcarpeta del directori principal del vostre tema. Per tant, per visualitzar el vostre logotip a la secció de capçalera, obriu el fitxer header.php i substituïu el codi anterior pel següent:

el teu_logo_alt_text

La funció get_template_directory_uri () retorna la URL del vostre directori temàtic. Si afegiu el vostre logotip a una carpeta d’imatges, el codi agafarà el logotip.

Observeu alguna diferència? Evidentment, aquest tros de codi només arreglarà el vostre logotip. Per corregir altres imatges, haureu de reescriure els seus codis de manera similar. Coses fàcils de pintar.

Passem a JavaScript. Si el vostre lloc web HTML utilitzava JavaScript, creeu una carpeta anomenada js i col·loca els teus scripts allà. Podeu trucar-los al fitxer header.php mitjançant el codi següent:

El codi anterior utilitza exemple.js com a il·lustració. No oblideu substituir aquesta part pel nom del vostre fitxer JavaScript.

Per descomptat, si creeu un tema per a algú, hauríeu de carregar els fitxers js amb wp_enqueue_scripts. Consulteu les publicacions d’AJ en afegir JavaScript als temes de WordPress per obtenir més informació i consells.

Fitxers de plantilles

En la primera part d’aquest tutorial, esmentem quatre fitxers bàsics de plantilles, a saber index.php, header.php, sidebar.php i peu de pàgina.php. Els fitxers de plantilles controlen la visualització del vostre lloc web. Les plantilles obtenen informació de la base de dades MySQL de WordPress i la tradueixen al codi HTML que es mostra als navegadors web. És a dir, els fitxers de plantilla són els blocs de construcció dels temes de WordPress. Per entendre millor les plantilles, aprofundim en un concepte conegut com a jerarquia de plantilles.

Utilitzarem una analogia. Si un visitant fa clic en un enllaç de categoria (és a dir, enllaç a una categoria) com ara http://www.yoursite.com/blog/category/your-category/, WordPress utilitza la jerarquia de plantilles per generar el fitxer (i el contingut) adequats com a a continuació explicada:

  • Primerament, WordPress buscarà un fitxer de plantilla que coincideixi amb l’ID de categoria
  • Si l’ID de la categoria és, per exemple 2, WordPress buscarà un fitxer de plantilla anomenat categoria-2.php
  • Si la categoria-2.php no està disponible, WordPress anirà a buscar un fitxer de plantilla de categories genèriques, com category.php
  • Si aquest fitxer de plantilla no està disponible, WordPress buscarà una plantilla d’arxiu genèrica com a archive.php
  • Si no existeix la plantilla d’arxiu genèric, WordPress tornarà a aparèixer al fitxer de plantilla principal, index.php

Així funcionen les plantilles de WordPress i podeu utilitzar aquests fitxers per personalitzar el tema de WordPress segons les vostres necessitats. Altres fitxers de plantilles inclouen:

home.php o index.phpS’utilitza per mostrar l’índex de publicacions del bloc
portada.phpS’utilitza per mostrar les pàgines estàtiques o les últimes publicacions tal com es defineix a les pantalles de la pàgina principal
single.phpS’utilitza per mostrar una pàgina de publicació única
single- {post-type} .phpS’utilitza per a representar tipus de publicació personalitzats, per exemple, si el tipus post era un producte, WordPress usaria single-product.php
pàgina.phpS’utilitza per a representar pàgines estàtiques
category.php o archive.phpS’utilitza per mostrar l’índex d’arxiu de categories
autor.phpUtilitzat per a representar l’autor
data.phpS’utilitza per presentar la data
cerca.phpS’utilitza per mostrar els resultats de la cerca
404.phpS’utilitza per mostrar la pàgina d’error del servidor 404

Aquesta és només una llista breu, n’hi ha moltes altres Plantilles de WordPress. El tema de les plantilles és un gran, i la millor manera d’aprendre a jugar amb fitxers de plantilles és llegint l’extensió Desenvolupament de temes biblioteca a WordPress. També podeu llegir el més curt Secció de plantilles a WordPress Codex.

Etiquetes de plantilles

Vist que acabem d’introduir fitxers de plantilles, només és just esmentar una cosa o dues sobre les etiquetes de plantilles i el paper que tenen en la temàtica de WordPress. Segons WordPress.org, “… les etiquetes de plantilla s’utilitzen dins de la plantilla del vostre blog per mostrar informació de forma dinàmica o personalitzar el vostre bloc, proporcionant les eines perquè sigui tan individual i interessant com sou”.

Al nostre tutorial anterior, vau trobar algunes etiquetes de plantilla, com ara get_header, get_sidebar, get_footer i bloginfo. A la secció següent, afegirem algunes etiquetes de plantilla al nostre tema de WordPress de nova creació. Suposo que ja heu inclòs la declaració DOCTYPE al fitxer header.php. Si no ho heu fet, aquí teniu el codi:

La declaració DOCTYPE dóna sentit al vostre codi HTML. Amb aquesta opció, modifiquem l’etiqueta HTML d’obertura. Inclourem un atribut lang utilitzant el botó Etiqueta language_attributes així:

El codi anterior generarà el següent:

Amb la declaració DOCTYPE i l’etiqueta language_attribute al seu lloc, l’estructura del tema és legítima i els navegadors entendran el vostre codi. Si creeu un tema per a un bloc, és important posar enllaços a l’URL de pingback i al canal RSS al vostre cap. Afegiu el codi següent a la capçalera.php:

Vàreu veure com vam fer servir el servei etiqueta bloginfo incloure el feed RSS (“rss2_url”) i pingback (“pingback_url”)? Abans de desar el fitxer header.php, afegiu també el codi següent:

L’etiqueta wp_head que apareix a continuació inclourà fulls d’estils i fitxers JavaScript requerits pels vostres complements. Si deixeu fora aquest petit tros de codi, és possible que els vostres plugins no funcionin tal com es desitgi. Amb aquesta opció, afegim títols de pàgines al nostre tema de WordPress mitjançant una altra vegada l’etiqueta de bloginfo. Afegiu el codi següent al fitxer header.php:

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

La primera etiqueta wp_title afegirà el títol de la vostra pàgina o publicació i la segona etiqueta bloginfo (“nom”) afegirà el vostre nom al bloc. Ara que el tema de WordPress té títols de pàgines, com podem crear una captura de pantalla per al nostre tema, tornar a empaquetar el tema i descansar?

Creació d’una captura de pantalla pel vostre tema

Quan vau penjar el tema del test per primera vegada, heu d’haver notat que no tenia cap captura de pantalla al tauler de temes de WordPress. Semblava tordós, sobretot si teníeu altres temes amb captures de pantalla de colors. Però no us preocupeu, és molt fàcil crear una captura de pantalla per al vostre tema. Només cal que creeu una imatge amb el vostre editor d’imatges favorit (per exemple, Adobe Photoshop) o bé prengueu una captura de pantalla del vostre tema. Assegureu-vos que la vostra imatge sigui 600px d’amplada i 450px d’alçada. Desa la imatge com a captura de pantalla.png a la carpeta temàtica. Desa tots els canvis, comprimeix la carpeta del tema en un arxiu ZIP. Pengeu el tema i activeu-lo per veure els vostres nous canvis ��

Conclusió

Vull creure que aquest segon tutorial us va oferir una visió més àmplia de la creació d’un tema de WordPress des HTML HTML estàtic. En un futur pròxim, us presentaré altres aspectes de temàtica de WordPress, però, mentrestant, he preparat els recursos següents per a vosaltres:

Feliç creació!

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