Tutorial de como crear tu tema en WordPress parte2

Este articulo es la segunda parte de como crear tu tema en WordPress.

Donde aprenderás qué código incluir en cada archivo creado en el anterior articulo.

¿Por Qué usar WordPress?

Volviendo al tema, desde el anterior articulo, recordarás que aprendimos cual es la estructura básica de nuestra plantilla de WordPress.

Bien, hoy vamos a escribir código HTML5 y PHP.

Hoy en día, son varios los argumentos para poner en marcha un proyecto de página web o blog.

Mejorar tu posicionamiento web en los resultados de búsqueda de Google.

Darte a conocer como experto de una materia en concreto, etc.

Vamos a darle forma a nuestra plantilla, para que WordPress reconozca todas las secciones de nuestra plantilla.

La cabecera o header

Lo primero que vamos a hacer, es abrir el archivo header.php con un editor de texto (yo uso notepad++), para empezar a escribir el código.

Escribiremos dentro el siguiente código:

<!DOCTYPE html>
<html lang="<?php bloginfo('language'); ?>">
  <head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>">
    <?php wp_head(); ?>
  </head>
  <body>
    <header>
      <h1><?php bloginfo('name'); ?></h1>
    </header>

Como verás, ya estamos añadiendo código de WordPress en nuestro primer archivo.

La función bloginfo(), se encarga de llamar a los parámetros generales de tu sitio web.

Título, URL principal, idioma, codificación, styles.css entre otras.

También hemos añadido la función wp_head(), que se encarga de mostrar los metas, scripts y estilos de los plugins instalados en nuestro WordPress.

El pie de página o footer

A continuación, abrimos el archivo footer.php para editar.

De momento, lo único que haremos será añadir la etiqueta wp_footer() antes de la etiqueta </body>:

<footer>
       <small>MiTemaWP © <?php echo date("Y") ?></small>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

La función wp_footer(), se encarga de mostrar el copyright de la web, entre otras cosas.

La lista de entradas o posts

Ahora vamos a abrir el archivo home.php para editar y vamos a escribir dentro el siguiente código:

<!-- Archivo de cabecera global de WordPress -->
<?php get_header(); ?>
<!-- Listado de posts -->
<?php if ( have_posts() ) : ?>
  <section>
    <?php while ( have_posts() ) : the_post(); ?>
      <article>
        <header>
          <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
          <time datatime="<?php the_time('Y-m-j'); ?>"><?php the_time('j F, Y'); ?></time>
        </header>
        <?php the_excerpt(); ?>
        <footer>
            <address>Por <?php the_author_posts_link() ?></address>
        </footer>
      </article>
    <?php endwhile; ?>
    <div class="pagination">
      <span class="in-left"><?php next_posts_link('« Entradas antiguas'); ?></span>
      <span class="in-right"><?php previous_posts_link('Entradas más recientes »'); ?></span>
    </div>
  </section>
<?php else : ?>
  <p><?php _e('Ups!, no hay entradas.'); ?></p>
<?php endif; ?>
<!-- Archivo de barra lateral por defecto -->
<?php get_sidebar(); ?>
<!-- Archivo de pié global de WordPress -->
<?php get_footer(); ?>

La primera función que hemos añadido, get_header(), crea una llamada al archivo header.php mostrándolo.

De igual manera, la función get_footer() hace una llamada al archivo footer.php mostrándolo.

La función get_sidebar() va hacer lo mismo, llamando al archivo sidebar.php y mostrándolo, este archivo vamos a editarlo más adelante.

Ahora está vacío, pero no hay problema.

También hemos añadido el bucle de artículos, es la línea que comienza por if() con la función de WordPress have_posts(), su función es comprobar si hay artículos en la Base de Datos de la web, si la respuesta es afirmativa, se creará el contenedor para los artículos.

Seguidamente vemos el bucle while(), que habilita la función , el cual nos permitirá mostrar información referente al articulo.

Éstas son las funcionalidades que ofrece WordPress:

  • the_permalink()
    Devuelve el enlace completo del post.
  • the_title()
    Muestra el título del post.
  • the_time()
    Permite mostrar la fecha de publicación del post y permite personalizar el formato de la fecha.
  • the_excerpt()
    Muestra un número limitado de caracteres del contenido del post.
  • the_author_posts_link()
    Muestra el nombre del autor del post y enlaza a su página de perfil.

Para terminar, cerramos el bucle con endwhile, y utilizamos las funciones next_post_link() y previous_post_link(), para mostrar los enlaces de paginación entre artículos.

No tenemos que olvidar de colocar un else para que se muestre el contenido alternativo en el caso de que no haya artículos que mostrar.

Por último, cerramos el condicional que hemos abierto que comprueba si hay o no artículos con endif.

La página de entrada o post

Cuando visitamos un articulo, el archivo plantilla que WordPress llama es single.php, este será nuestro próximo archivo a editar.

Y este es el código a escribir:

<!-- Archivo de cabecera global de WordPress -->
<?php get_header(); ?>
<!-- Contenido del post -->
<?php if ( have_posts() ) : the_post(); ?>
  <section>
    <h1><?php the_title(); ?></h1>
    <time datatime="<?php the_time('Y-m-j'); ?>"><?php the_time('j F, Y'); ?></time>
    <?php the_content(); ?>
    <address>Por <?php the_author_posts_link() ?></address>
  </section>
<?php else : ?>
  <p><?php _e('Ups!, esta entrada no existe.'); ?></p>
<?php endif; ?>
<!-- Archivo de barra lateral por defecto -->
<?php get_sidebar(); ?>
<!-- Archivo de pié global de WordPress -->
<?php get_footer(); ?>

Como ves, he utilizado algunas de las funciones añadidas en el archivo home.php.

Función get_header(), get_sidebar() y get_footer().

También he añadido un if() con la función have_posts() y para que compruebe si el articulo existe y de ser así, que lo muestre.

En este caso, en vez de añadir the_excerpt(), añadimos the_content() y the_author_posts_link().

No olvidemos la función else, por si el articulo no existe.

La página de inicio o homepage

Ahora vamos a editar el archivo front-page.php, para crear una página de inicio básica, este es el código:

<!-- Archivo de cabecera global de WordPress -->
<?php get_header(); ?>
<!-- Contenido de página de inicio -->
<?php if ( have_posts() ) : the_post(); ?>
  <section>
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>
  </section>
<?php endif; ?>
<!-- Archivo de barra lateral por defecto -->
<?php get_sidebar(); ?>
<!-- Archivo de pié global de WordPress -->
<?php get_footer(); ?>

Como ves, estoy repitiendo siempre los mismos patrones a la hora de recuperar la información, tanto si es para un post o una página estática.

Ahora toca configurar en WordPress, nuestra página de Inicio y nuestra página de Blog.

Para ello, vamos a la sección páginas del menú izquierdo de WordPress y añadimos 2 páginas, Inicio y Blog.

Una vez creadas vamos a “Ajustes>Lectura” y activamos la opción “Una página estática” y colocamos las nuevas páginas creadas Inicio y Blog.

El menú de navegación

Ahora vamos a crear la zona para nuestro menú.

Para ello abrimos el archivo functions.php para editar y añadimos el siguiente código:

<?php

/**
 * Crear nuestros menús gestionables desde el
 * administrador de WordPress.
 */

function mi_menu() {
  register_nav_menus(
    array(
      'navegation' => __( 'Menú de navegación' ),
    )
  );
}
add_action( 'init', 'mi_menu' );

Primero, creamos la función PHP mi_menu(), la cual registrará el menú para que WordPress permite editarlo con la función register_nav_menus().

Finalmente añadimos la función add_action() para ejecutar la función de mi_menu().

Ahora en “Apariencia>Menús” aparecerá nuestro nuevo menú para editar y añadir páginas o posts.

Es el momento de volver a nuestro administrador WordPress.

Allí veremos que, en “Apariencia”, tenemos el nuevo ítem “Menús”.

Ahora vamos a volver al archivo header.php y vamos a agregar el siguiente código:

<nav>
      <ul class="main-nav">
        <?php wp_nav_menu( array( 'theme_location' => 'navegation' ) ); ?>
      </ul>
    </nav>

Ahora ya tenemos nuestro menú, añadido en nuestra plantilla, donde aparecerá en todas las páginas de nuestro proyecto. Con la función wp_nav_menu(), llamamos al menú creado en functions.php.

Y hasta aquí hemos llegado. En el siguiente articulo, voy a explicar como enriquecer tu blog añadiendo etiquetas o tags, las categorías, los comentarios y el buscador.

Crearemos la barra horizontal para los widgets.

También voy a explicar como generar una plantilla de página genérica y preparare una plantilla personalizada, que podrás vincular a una página específica.

Espero que la información sea útil.

Cualquier duda, puedes comentar 😉

< Como crear tu tema en WordPress parte1 | Como crear tu tema en WordPress parte3 >