Los Archivos de Plantilla Fundamentales para iniciar tu Tema Wordpress

Los temas de WordPress se pueden crear con sólo dos archivos que WordPress los utilizara para publicar cada página de tu sitio web:

• index.php
• style.css

El archivo style.css

El primer paso después de crear estos dos archivos es agregar información del tema en el archivo style.css en formato de comentarios CSS con varias líneas como se muestra a continucación:

/*
Theme Name: My Theme
Theme URI: https://www.exasoluciones.com
Author: Webmaster ExaSoluciones
Author URI: https://www.exasoluciones.com
Description: Mi Primer Tema Wordpress
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

* {
   box-sizing: border-box;
}
body { 
   background-color: #f9f9f9;
   font-family: Helvetica;
}

Worpress leera esta información para dar fe del tema y la utilizarla en el panel de control de administración. Hay varias palabras clave de encabezado disponibles para definir información como el autor (su nombre), sitio web del autor, una descripción del tema, el nombre del tema, la versión del tema, licencias, etc.

El formato para escribir encabezados es Palabra clave: Information, todo acotado como comentario.

Nota: Las últimas líneas de encabezado de licencias sólo son necesarias si planeas compartir tu tema en WordPress.org. Si va a utilizar el tema en su propio sitio web, puede omitir esas dos líneas y cerrar la sección de comentarios.

Nota: Despues de los encabezados se agregaran todas las reglas CSS requeridas del Tema; como cualquier archivo de estilos CSS.

Visualización del Tema en el Panel de Administración

En este punto, su tema ya está visible en la sección del tema del panel de control de administración. Verá una imagen de cuadro blanco y gris con My Theme escrito debajo de él. Podemos ver una captura de pantalla a continuación para mostrar el resultado:

Si activa el tema en este momento, obtendrá una página principal en blanco, ya que su index.php está vacío y no existen los archivos de plantillas.

El archivo index.php

El archivo index.php define la página de inicio y también se utilizará como el diseño predeterminado si no se encuentran archivos de plantillas específicas (por ejemplo, single.php, page.php que veremos más adelante).

<?php get_header(); ?>
<div class="principal">
  <main class="contenido">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-loop">
        <header>
          <h2>
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
          </h2>
          By: <?php the_author(); ?>
        </header>
        <?php the_excerpt(); ?>
      </article>
    <?php endwhile; else : ?>
      <article>
        <p>Error, No se encontró ninguna publicación!</p>
      </article>
    <?php endif; ?>
  </main>
  <?php get_sidebar(); ?>   
</div>
<?php get_footer(); ?>

Usaremos etiquetas de plantilla para asegurarnos de que el código de encabezado (get_header), barra lateral (get_sidebar) y pie de página (get_footer) esté incluido en nuestra página principal.

También utilizaremos los elementos semánticos HTML5 <main>, <header> y <article>. Algunos de nuestros elementos tendrán clases asignadas a ellos, y las clases se escribirán cuando lleguemos al archivo style.css.

El ciclo comienza en <?php if (have_posts ()): while (have_posts ()): the_post (); ?> y termina en <? php endif; ?>. Dentro del bucle, se utilizan las siguientes etiquetas de plantilla:

• <?php the_permalink (); ?> – genera la URL correcta de la publicación real
• <?php the_title_attribute (); ?> – emite el título de la publicación en un formato seguro para el atributo title del enlace
• <?php the_title (); ?> – emite el título de la publicación
• <?php the_author (); ?> – emite el nombre del autor
• <?php the_excerpt (); ?> – emite el extracto de la publicación, que se genera automáticamente si no escribe su propio

Guarda el archivo index.php y cargarlo en el directorio de su tema. Si visita su sitio ahora, verá una página muy simple.