Tutorial de WordPress: Cómo crear un tema de WordPress desde HTML (Parte 1)

  1. 1. Actualmente leyendo: Tutorial de WordPress: Cómo crear un tema de WordPress desde HTML (Parte 1)
  2. 2. Tutorial de WordPress: Cómo crear un tema de WordPress desde HTML (Parte 2)
  3. 3. Una introducción a la anatomía de un tema de WordPress

Si comenzó con un sitio web HTML (+ CSS), no tiene que tirarlo todo al cambiar a WordPress. Puede convertir su HTML en WordPress y ejecutar su sitio web (ahora más potente) en la plataforma dinámica de WordPress.


O tal vez ese no es el caso. Quizás se esté preguntando cómo convertir el diseño HTML de un cliente en un tema completo de WordPress. O tal vez le gustaría aprender programación básica de WordPress (+ PHP) desde el lado HTML más familiar.

Cualquiera sea la razón por la que está aquí hoy, este tutorial de WordPress le presentará los conceptos básicos para crear un tema de WordPress a partir de HTML. Puede seguir esta guía para crear su tema desde cero o puede dirigirse a Github y descargar el tema de inicio WPExplorer que proporciona un “lienzo vacío” para crear su tema con todos los archivos y códigos de plantilla necesarios para comenzar. Entonces, si usted es una de esas personas que más bien aprende leyendo el código, descargue el tema de inicio, omita la guía y vea cómo funcionan las cosas … De lo contrario, obtenga un editor de código (lo uso y recomiendo Bloc++, o Texto sublime) y un navegador listo, luego siga esta sencilla guía hasta el final.

Nombrando su tema de WordPress

Lo primero es lo primero, tenemos que darle a su tema un nombre único, que no es necesario si está creando un tema solo para su sitio web. De todos modos, necesitamos nombrar su tema para que sea fácilmente identificable después de la instalación.

Suposiciones generales en este punto:

  • Tiene listas sus hojas de estilo index.html y CSS.
  • Tiene una instalación de WordPress en funcionamiento con al menos un tema, p. Veinte catorce
  • Ya ha creado una carpeta de temas donde guardará su nuevo tema de WordPress ��

Volvamos a nombrar su tema de WordPress. Abra su editor de código y copie y pegue el contenido de su hoja de estilo en un nuevo archivo y guárdelo como style.css en tu carpeta de temas. Agregue la siguiente información en la parte superior de la style.css recién creado:

/ *
Nombre del tema: el nombre de su tema
URI del tema: la URL de su tema
Descripción: una breve descripción de su tema
Versión: 1.0 o cualquier otra versión que desee
Autor: su nombre o nombre de usuario de WordPress.org
Autor URI: su dirección web
Etiquetas: etiquetas para ubicar su tema en el repositorio de temas de WordPress
* /

No omita las etiquetas de comentario (/ * … * /). Guarda los cambios. Esta información le dice a WordPress el nombre de su tema, el autor y cosas complementarias como esa. La parte importante es el nombre del tema, que le permite elegir y activar su tema a través del panel de WP.

Romper tu plantilla HTML en archivos PHP

Este tutorial asume además que tiene su plantilla HTML organizada de izquierda a derecha: encabezado, contenido, barra lateral, pie de página. Si tiene un diseño diferente, es posible que deba jugar un poco con el código. Es divertido y súper fácil.

El siguiente paso consiste en crear cuatro archivos PHP. Usando su editor de código, cree index.php, header.php, sidebar.php y footer.php, y guárdelos en su carpeta de temas. Todos los archivos están vacíos en este momento, así que no esperes que hagan nada. Para fines ilustrativos, estoy usando los siguientes archivos index.html y CSS de hoja de estilo:

INDEX.HTML




Cómo convertir una plantilla HTML a un tema de WordPress - WPExplorer



Esta es la sección del encabezado. Pon tu logo y otros detalles aquí.

Esta es el área de contenido principal..

Y este es el pie de página.

HOJA DE ESTILO CSS

#wrap {margin: 0 auto; ancho: 95%; margen superior: -10px; altura: 100%;}
.encabezado {ancho: 99.8%; borde: 1px sólido # 999; altura: 135px;}
.contenido {ancho: 70%; borde: 1px sólido # 999; margen superior: 5px;}
.barra lateral {flotante: derecha; margen superior: -54px; ancho: 29%; borde: 1px sólido # 999;}
.pie de página {ancho: 99.8%; borde: 1px sólido # 999; margen superior: 10px;}

Puede tomar ambos códigos si no tiene nada con qué trabajar. Simplemente cópielos y péguelos en su editor de código, guárdelos, cree los cuatro archivos PHP que acabamos de mencionar y prepárese para la siguiente parte. Abra su recién creado (y vacío) header.php. Inicie sesión en su instalación de WordPress existente, navegue hasta Apariencia – >> Editor y abierto header.php. Copie todo el código entre etiquetas y péguelo en su archivo header.php. El siguiente es el código que obtuve del archivo header.php en el tema Twenty Fourteen:




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




Entonces abre tu index.html archivar y copiar el código del encabezado (es decir, el código en el

sección) a su header.php justo debajo de la etiquetas como se muestra a continuación:




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







Esta es la sección del encabezado. Pon tu logo y otros detalles aquí.

Luego añade…

… en cualquier lugar entre el etiquetas en el archivo header.php para vincular su hoja de estilo. Recuerde también poner el y abriendo etiquetas en el header.php como se muestra arriba. Guardar todos los cambios.

Copie la segunda sección (es decir.

desde index.html a la index.php recién creado , y añadir…

… en la parte superior y …


… hasta el fondo absoluto. Estas tres líneas obtienen el header.php, sidebar.php y footer.php (en ese orden) y las muestran en index.php, que vuelve a unir el código. Guarda todos los cambios. En este punto, su archivo index.php debería verse así:



Luego copie el contenido de las secciones de la barra lateral y el pie de página en su index.html a sidebar.php y footer.php respectivamente.

Agregar publicaciones

Su plantilla HTML está a punto de transformarse en un tema de WordPress. Solo necesitamos agregar tus publicaciones. Si tienes publicaciones en tu blog, ¿cómo las mostrarías en tu tema personalizado “HTML-to-WordPress”? Utiliza un tipo especial de función PHP conocida como Lazo. El Loop es solo un código especializado que muestra tus publicaciones y comentarios donde sea que lo coloques.

Ahora, para mostrar tus publicaciones en el sección de contenido de la plantilla index.php, copie y pegue el siguiente código entre

y

etiquetas como se muestra a continuación:

>

Eso se encargará de tus publicaciones. Fácil como abc. En este momento (y utilizando los archivos de muestra proporcionados en este tutorial), su header.php debería verse así:




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




Tu sidebar.php debería verse así:

Tu footer.php debería verse así:

Y este es el pie de página

¿Notaste el cierre? y etiquetas en el pie de página? No olvides incluirlos también.

Su style.css debería verse más o menos así:

/ *
Nombre del tema: Crear un tema de WordPress a partir de HTML
URI del tema: http://wpexplorer.com
Descripción: este tema muestra cómo crear temas de WordPress a partir de HTML
Versión: 1.0
Autor: Freddy para @WPExplorer
Autor URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Etiquetas: wpexplorer, tema personalizado, HTML a WordPress, crear tema de WordPress
* /
cuerpo {
Familia tipográfica: arial, helvética, verdana;
tamaño de fuente: 0.8em;
ancho: 100%;
altura: 100%;
}

.encabezado {
color de fondo: # 1be;
margen izquierdo: 14%;
arriba: 0;
ancho de borde: 0.1em;
color del borde: # 999;
estilo de borde: sólido;
ancho: 72%;
altura: 250 px;
}

.contenido {
color de fondo: # 999;
margen izquierdo: 14%;
margen superior: 5px;
flotador izquierdo;
ancho: 46%;
ancho de borde: 0.1em;
color del borde: # 999;
estilo de borde: sólido;
}

.barra lateral {
color de fondo: # 1d5;
margen derecho: 14%;
margen superior: 5px;
flotar derecho;
ancho de borde: 0.1em;
color del borde: # 999;
estilo de borde: sólido;
arriba: 180 px;
ancho: 23%;
}

.pie de página {
color de fondo: rojo;
margen izquierdo: 14%;
flotador izquierdo;
margen superior: 5px;
ancho: 72%;
altura: 50 px;
ancho de borde: 0.1em;
color del borde: # 999;
estilo de borde: sólido;
}

Y su index.php debería ser similar a:





Nuevamente, esto se basa en un sitio web de izquierda a derecha con un diseño de encabezado, contenido, barra lateral y pie de página. ¿Me estás siguiendo? Los cinco archivos deben guardarse en su carpeta de temas. Asigne un nombre a la carpeta como desee y comprímalo en un archivo ZIP utilizando WinRar o un programa equivalente. Cargue su nuevo tema en su instalación de WordPress, actívelo y vea su tema convertido en acción!

Eso fue fácil, ¿verdad? Puede diseñar su tema como desee, pero la mayoría de las funciones que amamos en WordPress todavía están inactivas ya que … este tutorial cubre los conceptos básicos para convertir plantillas HTML en WordPress y debería ser de gran valor para usted como principiante. En el próximo tutorial, llevaremos las cosas un poco más arriba y jugaremos con otros aspectos de la programación de WordPress (como Archivos de plantilla y Etiquetas de plantilla) que le permitirán convertir sus plantillas HTML de la forma que desee. Manténganse al tanto!

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