Hace un tiempo, le presentamos el concepto de crear un tema de WordPress a partir de HTML. Dividimos el tutorial en dos partes y hoy nos dedicamos a desarrollar los dos tutoriales, así que no dudes en considerar esta publicación como la tercera publicación de la serie de publicaciones. Mi objetivo es desarmar el tema de WordPress para darte una idea clara de cómo funciona (el tema).
Esta publicación asume que tiene un conocimiento práctico de HTML y CSS. Seguiré adelante y declararé que tener habilidades en HTML y CSS es un requisito previo para diseñar temas de WordPress. Una cosa más, esta publicación se mantendrá libre de palabras grandes y conceptos difíciles; será fácil de comprender, así que prepárate para divertirte y aprender.
Un poco de preparación de HTML
Cada página web HTML se divide en diferentes partes usando la etiqueta
Una vez que tenga su página web en secciones, puede ordenar (u organizar) las secciones como desee usando CSS. Este proceso se conoce como estilo e implica agregar otros elementos de estilo como color, tamaño, bordes, efectos especiales, etc. Tal es el poder de CSS, que, por cierto, es la abreviatura de Cascading Style Sheets. Cuando junta sus archivos HTMl y CSS y agrega un par de imágenes, termina con un sitio web completo.
Las cosas no son muy diferentes con los temas de WordPress. Como vimos en la parte 1 de Cómo crear un tema de WordPress a partir de HTML, los temas de WordPress se dividen en diferentes archivos. Si no puede detectar alguna similitud en este punto, permítame explicarlo.
Las páginas web HTML estáticas se dividen en divisiones (lo que llamamos secciones anteriormente) usando etiquetas
Por lo tanto, en lugar de tener todos los elementos del cuerpo (encabezado, contenido principal, barra lateral, pie de página, etc.) viviendo en un solo archivo (como es el caso del HTML estático), cada uno de los elementos del cuerpo (en los temas de WordPress) vive en archivos separados.
Por lo tanto, el encabezado vivirá en header.php, la barra lateral encontrará el inicio en sidebar.php, el contenido principal vivirá en index.php o single.php (si es una publicación) o page.php (si es una página) ). La sección de pie de página vivirá en footer.php y así sucesivamente.
Estas siguiendo? Mira la siguiente ilustración:
De nuestra ilustración anterior, , y se denominan etiquetas de plantilla. Su trabajo es buscar header.php, sidebar.php y footer.php en ese orden desde su directorio de temas, y mostrar el contenido en su index.php, completando así la página web.
No dejes que el .php te asuste, el contenido dentro de los archivos php es solo código HTML con el que estás familiarizado. Por ejemplo, su header.php puede contener una navegación típica por listas HTML. Del mismo modo, puede poner código HTML típico en footer.php, sidebar.php e index.php.
También puede colocar el loop.php funciona en su index.php (o en cualquier lugar que desee) para mostrar las publicaciones de su blog, pero debería reducir la velocidad y volver a la anatomía de los temas de WordPress. He mencionado un par de cosas sobre el ciclo en la parte 2 de cómo crear un tema de WordPress a partir de HTML. y hablaremos de él (el bucle) y otras funciones en el futuro.
Hacia adelante…
Un tema básico de WordPress se compone de al menos cuatro archivos de plantilla, a saber:
- index.php
- header.php
- sidebar.php
- footer.php
Veamos qué incluye cada uno de estos mágico archivos:
Archivo de plantilla Index.php
Este es el archivo principal sin el cual no tiene un tema de WordPress que funcione. Es el primer archivo (o predeterminado) que se carga cuando visita un sitio web de WordPress. Considérelo el equivalente de index.html.
Un index.php típico en los temas de WordPress se verá así:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Puede agregar el bucle entre y para mostrar publicaciones de blog en la página de inicio (index.php) como se muestra a continuación:
<?php get_header(); ?>
<div class="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--end post header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!--end entry-->
<div class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</div><!--end post footer-->
</div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Archivo de plantilla Header.php
Estos archivos de plantilla contienen su código de encabezado, navegación y código de encabezado HTML. Básicamente, header.php almacena todo lo que desea mostrar en la parte superior de su sitio web. Ya sabes, cosas como el título de tu sitio web y cosas así.
También enlaza a su hoja de estilo CSS en el header.php. Aquí hay un ejemplo básico de header.php:
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<div class="header">
<p>This is header section. Put your logo and other details here.</p>
</div>
Archivo de plantilla Sidebar.php
Sidebar.php contiene todo lo que necesita para aparecer en sus barras laterales. La barra lateral contiene menús adicionales, widgets, categorías, íconos de redes sociales, contenido personalizado, código HTML como anuncios, etc.
Sidebar.php puede contener marcado HTML puro o llamadas a funciones php dependiendo de sus necesidades. Como tal, un sidebar.php básico podría verse así:
<div class="sidebar">
Put your custom content or HTML code here.
</div>
Archivo de plantilla Footer.php
¿Qué crees que entra en footer.php? Puede poner su información de derechos de autor aquí, menús adicionales, enlaces, íconos de redes sociales, ¡lo que quiera! ¿Le gustaría ver cómo se ve un footer.php básico? Aquí:
<footer class="footer">
Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.
</footer>
</body>
</html>
¿Observa las etiquetas de cierre