Al crear un tema de WordPress, una vez que el código HTML y CSS básico ha sido creado, necesitas convertirlo en algo que pueda ser usado por WordPress. Si estás listo para pasar al siguiente paso, este tutorial te mostrará la manera correcta de crear archivos de plantilla para WordPress.
Paso 1 – Entiende lo que son los archivos de plantilla
Para empezar, necesitas saber por qué crear estos archivos si es que quieres comprender lo que hacer. Básicamente, WordPress requiere un archivo index.php y un archivo style.css para mostrar todos los componentes necesarios.
Pero en los temas modernos de WordPress, dividirás el archivo index.php e incluirás un conjunto separado de archivos. Éstos contienen los datos para el encabezado, el pie de página y la barra lateral.
Vamos a crear un tema básico de WordPress con los siguientes cuatro archivos incluidos:
- index.php
- header.php
- sidebar.php
- footer.php
Paso 2 – Crea archivos PHP vacíos
Crea cuatro nuevos archivos en tu editor de código favorito. También deberías tener una carpeta con el nombre de tu tema de WordPress con fines organizativos. Ésta debería ser ‘[nombre de tu tema]-demo-theme’.
Copia tu hoja de estilos a esta misma carpeta. Esto es necesario para más tarde, pero es algo que está más allá del alcance de este tutorial y es irrelevante en nuestro caso.
Paso 3 – Añade código a los tres archivos
No necesitas ninguna experiencia en programación para seguir este paso. El código que necesitas añadir separadamente a cada uno de estos tres archivos lo puedes encontrar a continuación. Simplemente copia y pega todo lo que aparece en esta guía y listo. No necesitas comprender lo que significa, pero te permitirá crear el sitio web que quieres.
He aquí el código para el archivo header.php:
<!– añade una clase a la etiqueta html si el sitio web es visualizado en IE, para permitir correcciones de fallos mayores –>
<!–[if lt IE 8]><html class=»ie7″><![endif]–>
<!–[if IE 8]><html class=»ie8″><![endif]–>
<!–[if IE 9]><html class=»ie9″><![endif]–>
<!–[if gt IE 9]><html><![endif]–>
<!–[if !IE]><html><![endif]–>
<meta charset=»utf-8″ />
<meta name=»viewport» content=»width=device-width» />
<title>Título</title>
<link href=»style.css» rel=»stylesheet» media=»all» type=»text/css» />
<header role=»banner»>
<div class=»site-name half left»><!– nombre del sitio y descripción –></div>
<div class=»site-name half left»>
<h1 class=»one-half-left» id=»site-title»><a title=»Title» rel=»home»>Creación del tema de WordPress</a></h1>
<h2 id=»site-description»>Descripción</h2>
</div>
<!– un aside en el encabezado – esto será ocupado más tarde con un área de widget –>
<aside class=»header widget-area half right» role=»complementary»>
<div class=»widget-container»>Esto será un área de widget en el encabezado – los detalles de la dirección (o cualquier otra cosa que quieras) van aquí</div><!– .widget-container –>
</aside><!– .half right –>
</header><!– header –>
<!– menú de navegación de ancho completo – eliminar el elemento nav si se utiliza navegación superior –>
<nav class=»menu main»><?php /* Permite que los lectores de pantalla / navegadores de texto se salten el menú de navegación y vayan directamente a lo que importa */ ?>
<div class=»skip-link screen-reader-text»><a title=»Ir al contenido» href=»#content»>Ir al contenido</a></div>
<ul>
<li><a href=»#»>Inicio</a></li>
<li><a href=»#»>Últimas noticias</a></li>
<li><a href=»#»>Artículos destacados</a></li>
</ul>
</nav><!– .main –>
<div class=»main»>
Y aquí está el código para el archivo sidebar.php :
<!– la barra lateral – en WordPress será ocupada por widgets –>
<aside class=»sidebar widget-area one-third right» role=»complementary»>
<div class=»widget-container»>
<h3 class=»widget-title»>Un widget de barra lateral</h3>
<p>Éste es un widget de barra lateral. En tu tema de WordPress puedes configurarlos para hacer que aparezcan por todo tu sitio web.</p>
</div><!– .widget-container –>
<div class=»widget-container»>
<h3 class=»widget-title»>Otro widget de barra lateral</h3>
<p>Un segundo widget de barra lateral, quizás podrías usar un plugin para mostrar un feed de redes sociales, o simplemente listar tus entradas más recientes.</p>
</div><!– .widget-container –>
</aside>
Éste es el tercer fragmento de código para el archivo footer.php:
<!– .main –>
<footer>
<!– the .fatfooter aside – Usa esto para habilitar un fondo que ocupe toda la pantalla en el pie de página manteniendo al mismo tiempo el contenido del pie de página en línea con el diseño –>
<aside class=»fatfooter» role=»complementary»>
<div class=»first quarter left widget-area»>
<div class=»widget-container»>
<h3 class=»widget-title»>Primera área de widgets del pie de página</h3>
<p>Un área de widgets en el pie de página – usa plugins y widgets para ocuparla.</p>
</div><!– .widget-container –>
</div><!– .first .widget-area –>
<div class=»second quarter widget-area»>
<div class=»widget-container»>
<h3 class=»widget-title»>Segunda área de widgets del pie de página</h3>
<p>Un área de widgets en el pie de página – usa plugins y widgets para ocuparla.</p>
</div><!– .widget-container –>
</div><!– .second .widget-area –>
<div class=»third quarter widget-area»>
<div class=»widget-container»>
<h3 class=»widget-title»>Tercera área de widgets del pie de página</h3>
<p> Un área de widgets en el pie de página – usa plugins y widgets para ocuparla.</p>
</div><!– .widget-container –>
</div><!– .third .widget-area –>
<div class=»fourth quarter right widget-area»>
<div class=»widget-container»>
<h3 class=»widget-title»>Cuarta área de widgets del pie de página</h3>
<p> Un área de widgets en el pie de página – usa plugins y widgets para ocuparla.</p>
</div><!– .widget-container –>
</div><!– .fourth .widget-area –>
</aside><!– #fatfooter –>
</footer>
Paso 4 – Llenar el archivo de índice
El siguiente paso es configurar correctamente el archivo index.php, lo cual requiere un poco más de paciencia. Añade las funciones de PHP para que WordPress incluya el encabezado, el pie de página y la barra lateral.
Empieza con el siguiente código:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Pero deja un espacio entre el include del encabezado de apertura y el include de la barra lateral. Este espacio es donde añadirás código extra que no va en estas áreas del sitio web.
A partir de aquí tienes más código que introducir. A continuación hay otro fragmento largo de código. Pégalo en este archivo y estarás listo para seguir.
Este último fragmento de código debería ir en el archivo Index.php debajo de la función get_header():
<div class=»two-thirds» id=»content»>
<article class=»post» id=»01″>
<h2 class=»entry-title»>Éste es el título de una entrada o página</h2>
<img class=»size-large» alt=»» src=»images/featured-image.jpg» />
<section class=»entry-meta»>
<p>Publicado el…</p>
</section><!– .entry-meta –>
<section class=»entry-content»>
<p>Éste es el contenido de la entrada. En una página de archivo, podría ser un fragmento de la entrada o podrías incluir todo el contenido.</p>
<h3>Imágenes en WordPress</h3>
<img class=»alignright» alt=»» src=»images/another-image.jpg» />
</section><!– .entry-content –>
<section class=»entry-meta»>
<h3>Etiquetas y categorías de las entradas</h3>
<p>En esta sección puedes mostrar información sobre las categorías y las etiquetas asociadas con tu entrada.</p>
</section><!– .entry-meta –>
</article><!– #01–>
</div><!– #content–>
Paso 5 – ¿Qué es lo siguente?
Tu siguiente trabajo es añadir los requisitos de estilo. Esto va mucho más allá del alcance de este tutorial, pero a partir de aquí necesitarás saber algo de CSS para continuar. Te recomendamos que contactes con un profesional si no eres un experto en este campo.
CSS requiere que comprendas el lenguaje de programación, en lugar de sólo copiar y pegar lo que otra persona ha hecho.
Conclusión
Debes recordar que ésta es la forma más básica de archivo de índice. Muchos de los temas de WordPress más avanzados podrían tener más archivos, con multitud de opciones de personalización para ofrecer funciones adicionales a los usuarios.
Si estás buscando algo específico, no dudes en ponerte en contacto con un profesional.
