Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Creando un tema de WordPress desde HTML estático: creando archivos de plantilla

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a WordPress Theme From Static HTML.
Creating a WordPress Theme From Static HTML: Preparing the Markup
Creating a WordPress Theme From Static HTML: Uploading Your Theme to WordPress

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

En la primera parte de esta serie, te mostré cómo preparar tus archivos HTML y CSS para WordPress, asegurándome de que la estructura funcionaría, el código era válido y que se estaban usando las clases correctas.

En este tutorial, aprenderá cómo tomar su archivo index.html y dividirlo en un conjunto de archivos de plantilla para su uso por WordPress.


Lo que necesitarás

Para este tutorial, todo lo que necesitas es la herramienta más básica para editar HTML y PHP:

  • Un editor de código de su elección.

¿Qué son los archivos de plantilla?

Un tema de WordPress consiste en una serie de archivos de plantilla. Como mínimo, un tema debe contener dos archivos para que funcione, estos son index.php y style.css.

Sin embargo, en un tema bien escrito, el contenido del archivo index.php se dividirá en el archivo de plantilla principal (index.php) y un conjunto de archivos de inclusión. Estos son los archivos que contienen el código para el encabezado, la barra lateral y el pie de página.

En algunos temas, se utiliza un archivo de inclusión adicional para The Loop; Llegaré a eso en la Parte 4 de esta serie. Los archivos se llaman archivos de inclusión porque agrega código a su archivo index.php para decirle a WordPress que incluya su contenido.

Nuestro archivo index.html se dividirá en cuatro archivos PHP:

  • index.php, que contendrá el contenido principal más el código para incluir los otros archivos
  • header.php, que incluirá la sección <head> más todo en el encabezado y la navegación
  • sidebar.php, que contendrá el área del widget de la barra lateral
  • footer.php que contendrá (¡lo has adivinado!) el pie de página, más la etiqueta de cierre </body>

A lo largo de esta serie, los agregará a estos archivos para que su tema pueda incluir widgets, menús y un bucle, y agregará ganchos que serán utilizados por los complementos. También agregará archivos de plantilla adicionales para mostrar diferentes tipos de contenido. Si desea obtener una ventaja inicial en esto, eche un vistazo a la página de Codex en la Jerarquía de plantillas de WordPress.

Pero por ahora, todo lo que vas a hacer es crear un conjunto de archivos PHP y dividir el contenido de tu archivo index.php.


Creando archivos PHP

El primer paso es crear archivos vacíos. Cree cuatro archivos en blanco con los siguientes nombres y ábralos en su editor de código:

  • index.php
  • header.php
  • sidebar.php
  • footer.php

Asegúrese de que todos estos estén en una carpeta que tenga el nombre de su tema; en mi caso, nombraré a la carpeta 'wptutsplus-demo-theme'.

Copia tu hoja de estilo en esta carpeta, también. No lo editarás en este tutorial, pero lo harás en la siguiente parte de la serie.


Rellenando el archivo de encabezado

A continuación, copiará la parte superior de index.html en su archivo header.php.

Abra index.html y seleccione todo, desde la declaración DOCTYPE de apertura hasta la etiqueta div class = "main" de apertura:

Copie este código y péguelo en su archivo header.php.

Guarde su nuevo archivo de encabezado.


Rellenando el archivo de la barra lateral

Ahora repita esto para la barra lateral.

En su archivo index.html, seleccione el elemento aside class = "sidebar" y todo lo que contiene:

Ahora copia esto en tu archivo sidebar.php y guárdalo.


Rellenar el archivo de pie de página

El proceso de llenar el archivo footer.php es idéntico al encabezado y la barra lateral.

Selecciona todo después de la barra lateral en tu archivo index.html:

Cópialo y pégalo en tu archivo footer.php.

Guarde su archivo de pie de página.

Quizás se esté preguntando por qué el archivo .main div está cerrado en el archivo de pie de página y no en la barra lateral. Esto es así, si más adelante configura un archivo de plantilla para las páginas que no tienen una barra lateral, se perderá la barra lateral de inclusión en esa plantilla y mantendrá el pie de página incluido, y el div .main se cerrará correctamente.

Rellenando el archivo de índice

El último paso es configurar su archivo index.php. Esto es un poco más complicado, tendrá que agregar algunas funciones de PHP que WordPress utiliza para incluir el encabezado, la barra lateral y el pie de página.

Abra su archivo index.php vacío y agregue el código que se muestra a continuación:

Asegúrese de dejar un espacio entre la inclusión del encabezado de apertura y la barra lateral, es aquí donde agregará el contenido del archivo de índice que no se encuentra en el encabezado, barra lateral o pie de página.

Ahora abra su archivo index.html nuevamente y seleccione todo el código entre el elemento de apertura div class = "main" y la barra lateral:

Copie esto y péguelo en su archivo index.php debajo de la línea get_header ().

Guarde su archivo index.php.


Resumen

Ahora tienes los inicios de un tema de WordPress. Ha convertido su archivo HTML en un conjunto de archivos PHP y los ha configurado para que trabajen juntos.

En la siguiente parte de esta serie, te mostraré cómo editar la hoja de estilo para que funcione tu tema y subirlo a WordPress.


Recursos

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.