Una introducció a l’anatomia d’un tema de WordPress

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

Fa un temps us presentem el concepte de crear un tema de WordPress a partir de HTML. Dividim el tutorial en dues parts i avui ens trobem a detallar els dos tutorials, així que no dubteu a considerar aquesta publicació com la tercera publicació de la sèrie de publicacions. El meu objectiu és desglossar el tema de WordPress per donar-vos una imatge clara de com funciona (el tema).


Aquesta publicació suposa que teniu un coneixement de HTML i CSS. Passaré endavant i declararé que tenir habilitats HTML i CSS és un requisit previ per dissenyar temes de WordPress. Una cosa més: aquesta publicació es mantindrà clara de grans paraules i conceptes difícils: serà fàcil d’entendre, així que estigueu a punt per divertir-vos i aprendre.

Una petita elaboració HTML

Cada pàgina web HTML es divideix en diferents parts mitjançant el botó

etiqueta. Per exemple, podeu trencar el cos () del lloc web en diverses seccions com ara navegació, capçalera, contingut principal, barra lateral i peu de pàgina entre d’altres.

Un cop tingueu la pàgina web en seccions, podeu ordenar (o organitzar) les seccions tal com vulgueu mitjançant CSS. Aquest procés es coneix amb el nom d’estil i consisteix a afegir altres elements d’estil com ara color, mida, sanefes, efectes especials, etc. Aquest és el poder de CSS, que, per cert, és curt per a Fulls d’estil en cascada. Quan ajunteu els fitxers HTMl i CSS i feu un parell d’imatges, acabareu amb un lloc web complet.

Les coses no són gaire diferents amb els temes de WordPress. Com vam veure a la primera part de Com crear un tema WordPress a partir de HTML, els temes de WordPress es divideixen en fitxers diferents. Si no podeu detectar alguna semblança en aquest moment, permeteu que us expliqui.

Les pàgines web estàtiques HTML es divideixen en divisions (el que abans anomenàvem seccions) mitjançant

etiquetes (o taules, si sou una antiga escola). D’altra banda, els temes de WordPress es divideixen en diferents fitxers php, que es tornen a reunir mitjançant etiquetes de plantilla.

Per tant, en lloc de tenir tots els elements del cos (capçalera, contingut principal, barra lateral, peu de pàgina, etc.) que viuen en un sol fitxer (com és el cas de HTML estàtic), cadascun dels elements del cos (en temes de WordPress) viu en un fitxer independent.

Així doncs, l’encapçalament es viurà a header.php, la barra lateral la trobareu a sidebar.php, el contingut principal es publicarà a index.php, o single.php (si es tracta d’una publicació) o page.php (si es tracta d’una pàgina ). La secció de pàgina de pàgina es mostrarà a footer.php, etc..

Està seguint? Consulteu la il·lustració següent:

html-wordpress = estructura

De la nostra il·lustració anterior, , i s’anomenen etiquetes de plantilla. La seva tasca és buscar header.php, sidebar.php i footer.php en aquest ordre del directori temàtic i mostrar el contingut a index.php, completant així la pàgina web.

No ho deixis .php l’extensió t’espanta, el contingut dels fitxers php és només el codi HTML que coneixes. Per exemple, el vostre capçalera.php pot contenir navegació de la llista HTML típica. De la mateixa manera, podeu posar codi HTML típic a footer.php, sidebar.php i index.php.

També podeu col·locar el botó bucle.php funciona a index.php (o a qualsevol lloc que us agradi) per mostrar les publicacions del vostre bloc, però hauria de retardar-me i tornar a l’anatomia dels temes de WordPress. He esmentat una cosa o dues sobre el bucle de la segona part de com crear un tema de WordPress a partir de HTML. i en parlarem (el bucle) i altres funcions en el futur.

Continuant …

El tema bàsic de WordPress consta d’almenys quatre fitxers de plantilles, a saber:

  1. index.php
  2. capçalera.php
  3. barra lateral.php
  4. peu de pàgina.php

Anem a veure què hi ha en cadascuna d’aquestes màgic Fitxers:

Fitxer plantilla Index.php

Aquest és el fitxer principal sense el qual no teniu un tema de WordPress que funcioni. És el primer fitxer (o per defecte) que es carrega quan visiteu un lloc web de WordPress. Considereu-lo l’equivalent a index.html.

Un index.php típic dels temes de WordPress tindrà un aspecte següent:





Podeu afegir el bucle entre i per mostrar publicacions de blocs a la pàgina principal (index.php) com es mostra a continuació:




Fitxer de plantilla de Header.php

Aquest fitxer de plantilla conté el vostre codi de capçalera, navegació i codi de cap HTML. Bàsicament, header.php emmagatzema tot el que voleu mostrar a la part superior del lloc web. Ja sabeu, coses com el títol del vostre lloc web i coses així.

També enllaceu el vostre full d’estils CSS a l’encapçalament.php. Aquí teniu un exemple bàsic de header.php:





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







Aquesta és la secció de capçalera. Posa aquí el teu logotip i altres detalls.

Fitxer de plantilla Sidebar.php

Sidebar.php conté tot el que necessiteu per aparèixer a la vostra barra lateral. La barra lateral conté menús addicionals, widgets, categories, icones de xarxes socials, contingut personalitzat, codi HTML, com ara anuncis, etc..

Sidebar.php pot contenir trucades HTML o trucades de funció php segons les vostres necessitats. Per tant, un sidebar.php bàsic podria semblar:

Fitxer plantilla footer.php

Què creus que entra a footer.php? Podeu posar les vostres dades de copyright, menús addicionals, enllaços, icones de xarxes socials, tot el que vulgueu. Voleu veure com és un footer.php bàsic? Aquí:

Poseu el contingut del peu de pàgina aquí incloses les trucades a la funció php (per obtenir diferents fitxers de plantilles, per exemple, search.php) si cal.

Fixeu-vos en el i tanqueu les etiquetes a footer.php? Podeu endevinar per què s’han d’incloure a la pàgina de pàgina de pàgina? De la mateixa manera, podeu endevinar per què i les etiquetes d’obertura s’inclouen a la capçalera.php? Feu-nos saber les vostres idees a la secció de comentaris al final d’aquesta publicació post

Els quatre fitxers de plantilles que acabem de cobrir constitueixen un tema de WordPress molt bàsic. Hi ha molts altres fitxers de plantilles; Hi ha un fitxer de plantilla per a cada element que veieu en un tema de WordPress, ja siguin comentaris, resultats de cerca i 404 pàgines d’error per esmentar-ne algunes.

Per comprendre l’anatomia d’un tema de WordPress, heu de familiaritzar-vos amb diferents fitxers de plantilles. Podeu navegar per tot rajoles de plantilla utilitzables a WordPress.

Després tenim etiquetes de plantilla, que WordPress utilitza per obtenir fitxers de plantilles del directori temàtic. Podeu obtenir més informació sobre les etiquetes de plantilla i el paper que juguen a WordPress.

Resum

Un tema de WordPress consta dels següents elements anatòmics:

  • Fitxers de plantilles com index.php, header.php, search.php, category.php, etc.
  • Etiquetes de plantilles com , etc
  • CSS
  • Imatges i altres fitxers multimèdia
  • Arxius JavaScript

I aquí teniu una il·lustració que resumeix l’anatomia d’un tema de WordPress:

Voleu continuar aprenent? Consulteu el detall Guia d’anatomia temàtica al Codi del WordPress.

Conclusió

Cada tema de WordPress que veieu al web utilitza la mateixa estructura anatòmica (fins i tot el nostre popular tema de WordPress total), que podeu personalitzar per satisfer les vostres necessitats. Un cop ajusteu el cap sobre els fonaments bàsics del desenvolupament de temes de WordPress, no hi ha cap límit sobre el que podeu fer amb els temes de WordPress o.

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