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

  1. 1. Actualment Llegint: 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. Una introducció a l’anatomia d’un tema de WordPress

Si heu començat amb un lloc web HTML (+ CSS), no haureu de llençar-ho tot quan aneu a WordPress. Podeu convertir el vostre HTML en WordPress i executar el vostre lloc (ara més potent) a la dinàmica plataforma de WordPress.


O potser no és així. Potser només us estareu preguntant com convertir el disseny HTML d’un client en un tema de WordPress amb tota la seva eficàcia. O potser us agradaria aprendre la programació bàsica de WordPress (+ PHP) des del costat HTML més conegut.

Independentment de la raó per la qual us trobeu aquí, aquest tutorial de WordPress us introduirà els conceptes bàsics per crear un tema de WordPress a partir de HTML. Podeu seguir aquesta guia per crear el vostre tema des de zero o podeu dirigir-vos a Github i descarregar el tema d’inici de WPExplorer que proporciona un “llenç buit” per crear el tema amb tots els fitxers i codi de plantilla necessaris per començar. Així que si sou d’aquelles persones que més aviat aprenen a llegir el codi, descarregueu el tema d’inici, passeu la guia i vegeu com funcionen les coses … En cas contrari, obteniu un editor de codis (jo us recomano i us recomano Bloc de notes++, o SublimeText) i un navegador a punt, seguiu aquesta guia senzilla fins al final.

Nomenar el tema de WordPress

Primer de les coses, hem de donar al vostre nom un nom únic, que no és necessari només si creeu un tema només per al vostre lloc web. Independentment, hem de posar el nom del vostre tema perquè sigui fàcilment identificable a la instal·lació.

Supòsits generals en aquest moment:

  • Teniu a punt el vostre full d’estils index.html i CSS.
  • Teniu una instal·lació de WordPress funcionant amb almenys un tema, per exemple. Vint-catorze
  • Ja heu creat una carpeta temàtica on guardareu el nou tema de WordPress ��

Tornem a posar el nom del vostre tema de WordPress. Obriu el vostre editor de codis i copieu-enganxeu el contingut de la fitxa d’estils en un fitxer nou i guardeu-lo com estil.css a la carpeta temàtica. Afegiu la informació següent a la part superior de la secció style.css de nova creació:

/ *
Nom del tema: El nom del tema
URI de tema: URL del vostre tema
Descripció: una breu descripció del vostre tema
Versió: 1.0 o qualsevol altra versió que desitgeu
Autor: El vostre nom o nom d'usuari de WordPress.org
Autor URI: la vostra adreça web
Etiquetes: etiquetes per ubicar el tema al dipòsit de temes de WordPress
* /

No deixeu les etiquetes de comentaris (/ * … * /). Desa els canvis. Aquesta informació diu a WordPress el nom del vostre tema, l’autor i coses similars. La part important és el nom del tema, que permet triar i activar el tema a través del quadre de comandament WP.

Desglossem la plantilla HTML en fitxers PHP

Aquest tutorial suposa que teniu la vostra plantilla HTML disposada d’esquerra a dreta: capçalera, contingut, barra lateral, peu de pàgina. Si teniu un disseny diferent, potser haureu de jugar una mica amb el codi. És divertit i molt fàcil.

El següent pas consisteix en crear quatre fitxers PHP. Amb el vostre editor de codis, creeu index.php, header.php, sidebar.php i footer.php i deseu-los a la vostra carpeta temàtica. En aquest moment, tots els fitxers estan buits, així que no espereu que facin res. A efectes d’il·lustració, faig servir els fitxers de full d’estils CSS index.html i CSS següents:

INDEX.HTML




Com convertir la plantilla HTML en tema de WordPress - WPExplorer



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

Aquesta és l’àrea de contingut principal.

I aquest és el peu de pàgina.

CSS STYLESHEET

#wrap {margin: 0 auto; amplada: 95%; marge superior: -10px; alçada: 100%;}
.capçalera {amplada: 99,8%; vora: 1px sòlid # 999; alçada: 135px;}
.contingut {amplada: 70%; vora: 1px sòlid # 999; top-margin: 5px;}
.barra lateral {float: dreta; marge superior: -54px; amplada: 29%; vora: 1px sòlid # 999;}
.peu de pàgina {amplada: 99,8%; sanejament: 1px sòlid # 999; marge superior: 10px;}

Podeu agafar tots dos codis si no teniu res amb què treballar. Només cal que copieu-enganxeu-los al vostre editor de codis, deseu-los, creeu els quatre fitxers PHP que acabem de mencionar i prepareu-vos per a la següent part. Obriu el vostre producte nou (i buit) capçalera.php. Inicieu la sessió a la instal·lació de WordPress existent i aneu a Aparició – >> Editor i obert capçalera.php. Copieu tot el codi entre etiquetes i enganxeu-lo al fitxer header.php. El següent és el codi que he obtingut del fitxer header.php del tema Vint-Catorze:




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




A continuació, obriu el vostre index.html fitxer i copieu el codi de capçalera (és a dir, el codi de la secció

a la vostra capçalera.php, a sota de la secció etiquetes com es mostra a continuació:




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







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

A continuació, afegiu …

… en qualsevol lloc entre el etiquetes al fitxer header.php per enllaçar el vostre full d’estils. Recordeu també posar les i obertura de les etiquetes a la capçalera.php com es mostra més amunt. Desa tots els canvis.

Copieu la segona secció (és a dir,.

des d ‘index.html a index.php de nova creació , i afegeix …

… a la part superior i …


… fins al fons absolut. Aquestes tres línies busquen la capçalera.php, sidebar.php i footer.php (en aquest ordre) i les mostren a index.php, el qual torna a confluir el codi. Desa tots els canvis. En aquest moment, el fitxer index.php ha de semblar:



A continuació, copieu el contingut de les seccions de la barra lateral i del peu de pàgina del vostre index.html a sidebar.php i footer.php respectivament..

Addició de publicacions

La vostra plantilla HTML és a punt de convertir-se en un tema de WordPress. Només ens cal afegir les teves publicacions. Si teniu publicacions al vostre bloc, com les mostraríeu al vostre tema “HTML-a-WordPress” personalitzat? Feu servir un tipus especial de funció PHP coneguda com a Bucle. El Loop és només un codi de codi especialitzat que mostra les publicacions i els comentaris allà on el col·loqueu.

Ara, per mostrar les teves publicacions a la web secció de contingut de la plantilla index.php, copieu i enganxeu el codi següent entre

i

etiquetes com es mostra a continuació:

>

Això s’ocuparà de les teves publicacions. Fàcil com ABC. En aquest moment (i utilitzant els fitxers d’exemple proporcionats en aquest tutorial), el vostre capçalera.php hauria de quedar així:




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




El vostre sidebar.php hauria de ser així:

El vostre peu de pàgina.php hauria de ser així:

I aquest és el peu de pàgina

Vau notar el tancament i etiquetes al peu de pàgina? No oblideu incloure’ls també.

El vostre style.css hauria de semblar una cosa així:

/ *
Nom del tema: Creació del tema de WordPress a partir de HTML
Tema URI: http://wpexplorer.com
Descripció: aquest tema us mostra com crear temes WordPress des de HTML
Versió: 1.0
Autor: Freddy per a @WPExplorer
URI de l'autor: http://WPExplorer.com/create-wordpress-theme-html-1/
Etiquetes: wpexplorer, tema personalitzat, HTML a WordPress, crear tema de WordPress
* /
cos {
font-family: arial, helvetica, verdana;
font-size: 0.8em;
amplada: 100%;
alçada: 100%;
}

.capçalera {
color de fons: # 1be;
marge-esquerra: 14%;
superior: 0;
amplada de vora: 0,1em;
color de la vora: # 999;
estil de frontera: sòlid;
amplada: 72%;
alçada: 250px;
}

.contingut {
color de fons: # 999;
marge-esquerra: 14%;
marge superior: 5px;
flotar: a l'esquerra;
amplada: 46%;
amplada de vora: 0,1em;
color de la vora: # 999;
estil de frontera: sòlid;
}

.barra lateral {
color de fons: # 1d5;
marge-dret: 14%;
marge superior: 5px;
surar: dret;
amplada de vora: 0,1em;
color de la vora: # 999;
estil de frontera: sòlid;
part superior: 180px;
amplada: 23%;
}

.peu de pàgina {
color de fons: vermell;
marge-esquerra: 14%;
flotar: a l'esquerra;
marge superior: 5px;
amplada: 72%;
alçada: 50px;
amplada de vora: 0,1em;
color de la vora: # 999;
estil de frontera: sòlid;
}

I el vostre index.php hauria de semblar similar a:





Un cop més, es basa en un lloc web d’esquerra a dreta amb una capçalera, contingut, barra lateral, disposició del peu de pàgina. Està seguint? Tots els cinc fitxers s’han de desar a la vostra carpeta temàtica. Poseu un nom a la carpeta com vulgueu i comprimeu-lo en un arxiu ZIP mitjançant WinRar o un programa equivalent. Carregueu el nou tema a la instal·lació de WordPress, activeu-lo i vegeu el tema convertit en acció!

Això va ser fàcil, no? Podeu posar de moda el vostre tema que vulgueu, però la majoria de les funcions que ens agraden a WordPress continuen inactives, ja que … Aquest tutorial cobreix els fonaments bàsics per convertir les plantilles HTML en WordPress i us hauria de ser de gran valor com a principiant. En el següent tutorial, tindrem una mica més alt i jugarem amb altres aspectes de la programació de WordPress (com Fitxers de plantilles i Etiquetes de plantilles) que us permetran convertir les vostres plantilles HTML segons la forma que vulgueu. Estigueu atents!

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