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:
1 |
<!-- add a class to the html tag if the site is being viewed in IE, to allow for any big fixes -->
|
2 |
<!--[if lt IE 8]><html class="ie7"><![endif]-->
|
3 |
<!--[if IE 8]><html class="ie8"><![endif]-->
|
4 |
<!--[if IE 9]><html class="ie9"><![endif]-->
|
5 |
<!--[if gt IE 9]><html><![endif]-->
|
6 |
<!--[if !IE]><html><![endif]-->
|
7 |
<meta charset="utf-8" /> |
8 |
<meta name="viewport" content="width=device-width" /> |
9 |
<title>WordPress Theme Building - Creating a WordPress theme from static HTML</title> |
10 |
<link href="style.css" rel="stylesheet" media="all" type="text/css" /> |
11 |
<header role="banner"> |
12 |
<div class="site-name half left"><!-- site name and description --></div> |
13 |
<div class="site-name half left"> |
14 |
<h1 class="one-half-left" id="site-title"><a title="Creating a WordPress theme from static html - home" rel="home">WordPress Theme Building</a></h1> |
15 |
<h2 id="site-description">Creating a WordPress theme from static html</h2> |
16 |
</div>
|
17 |
<!-- an aside in the header - this will be populated via a widget area later -->
|
18 |
<aside class="header widget-area half right" role="complementary"> |
19 |
<div class="widget-container">This will be a widget area in the header - address details (or anything else you like) goes here</div><!-- .widget-container --> |
20 |
</aside><!-- .half right --> |
21 |
</header><!-- header --> |
22 |
|
23 |
<!-- full width navigation menu - delete nav element if using top navigation -->
|
24 |
<nav class="menu main"><?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?> |
25 |
<div class="skip-link screen-reader-text"><a title="Skip to content" href="#content">Skip to content</a></div> |
26 |
<ul>
|
27 |
<li><a href="#">Home</a></li> |
28 |
<li><a href="#">Latest news</a></li> |
29 |
<li><a href="#">Featured articles</a></li> |
30 |
</ul>
|
31 |
</nav><!-- .main --> |
32 |
<div class="main"> |
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:
1 |
<!-- the sidebar - in WordPress this will be populated with widgets -->
|
2 |
<aside class="sidebar widget-area one-third right" role="complementary"> |
3 |
<div class="widget-container"> |
4 |
<h3 class="widget-title">A sidebar widget</h3> |
5 |
<p>This is a sidebar widget, in your WordPress theme you can set these up to display across your site.</p> |
6 |
</div><!-- .widget-container --> |
7 |
<div class="widget-container"> |
8 |
<h3 class="widget-title">Another sidebar widget</h3> |
9 |
<p>A second sidebar widget, maybe you could use a plugin to display a social media feed, or simply list your most recent posts.</p> |
10 |
</div><!-- .widget-container --> |
11 |
</aside>
|
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:
1 |
</div><!-- .main --> |
2 |
<footer>
|
3 |
<!-- the .fatfooter aside - I use this to enable a screen-wide background on the footer while still keeping the footer contents in line with the layout -->
|
4 |
<aside class="fatfooter" role="complementary"> |
5 |
<div class="first quarter left widget-area"> |
6 |
<div class="widget-container"> |
7 |
<h3 class="widget-title">First footer widget area</h3> |
8 |
<p>A widget area in the footer - use plugins and widgets to populate this.</p> |
9 |
</div><!-- .widget-container --> |
10 |
</div><!-- .first .widget-area --> |
11 |
<div class="second quarter widget-area"> |
12 |
<div class="widget-container"> |
13 |
<h3 class="widget-title">Second footer widget area</h3> |
14 |
<p>A widget area in the footer - use plugins and widgets to populate this.</p> |
15 |
</div><!-- .widget-container --> |
16 |
</div><!-- .second .widget-area --> |
17 |
<div class="third quarter widget-area"> |
18 |
<div class="widget-container"> |
19 |
<h3 class="widget-title">Third footer widget area</h3> |
20 |
<p>A widget area in the footer - use plugins and widgets to populate this.</p> |
21 |
</div><!-- .widget-container --> |
22 |
</div><!-- .third .widget-area --> |
23 |
<div class="fourth quarter right widget-area"> |
24 |
<div class="widget-container"> |
25 |
<h3 class="widget-title">Fourth footer widget area</h3> |
26 |
<p>A widget area in the footer - use plugins and widgets to populate this.</p> |
27 |
</div><!-- .widget-container --> |
28 |
</div><!-- .fourth .widget-area --> |
29 |
</aside><!-- #fatfooter --> |
30 |
</footer>
|
Cópialo y pégalo en tu archivo footer.php.
Guarde su archivo de pie de página.
.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:
1 |
<?php get_header(); ?> |
2 |
|
3 |
<?php get_sidebar(); ?> |
4 |
<?php get_footer(); ?> |
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:
1 |
<div class="two-thirds" id="content"> |
2 |
<article class="post" id="01"> |
3 |
<h2 class="entry-title">This is the title of a post or page</h2> |
4 |
<img class="size-large" alt="" src="images/featured-image.jpg" /> |
5 |
<section class="entry-meta"> |
6 |
<p>Posted on 5 November by Rachel McCollin</p> |
7 |
</section><!-- .entry-meta --> |
8 |
<section class="entry-content"> |
9 |
<p>This is the content of the post. On an archive page it might be an excerpt of the post or you might include the entire content.</p> |
10 |
<h3>Images in WordPress</h3> |
11 |
<img class="alignright" alt="" src="images/another-image.jpg" /> |
12 |
<p>This post has some images included - once you've converted this html to a WordPress theme you'll be able to get WordPress to handle images for you and life will be so much easier!</p> |
13 |
|
14 |
<p>It also has a featured image - again, WordPress will handle these for you and you'll never go back to static html again. You'll learn how to add support for featured images to your theme in Part 10 of this series. You can use them to automatically display images in your individual posts and pages and in archive pages, you'll learn how to set up a custom archive page in Part 11.</p> |
15 |
</section><!-- .entry-content --> |
16 |
<section class="entry-meta"> |
17 |
<h3>Post Categories and Tags</h3> |
18 |
<p>In this section you can display information about the categories and tags associated with your post, you'll learn how to do this using WordPress template tags in Part 4 of this series.</p> |
19 |
</section><!-- .entry-meta --> |
20 |
</article><!-- #01--> |
21 |
</div><!-- #content--> |
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
- La jerarquía de plantillas de WordPress (página Codex)
- Entrando en las plantillas (página del Codex)
- Anatomía de un tema de WordPress (blog post por Yoast)
- WordPress Theme Development Beginner's Guide por Tessa Blakeley Silver y Rachel McCollin (¡sí, yo!)
By
