En el articulo pasado aprendimos a crear la estructura básica para una plantilla para WordPress, ahora debemos comenzar a escribir código y dar forma a la plantilla. Para para empezar crearemos la cabecera (header) y pie de página (footer). Diseñaremos la pagina de inicio y el menú de navegación que podemos gestionar desde nuestro panel de administración WordPress. Hasta el momento debes tener la estructura de archivos que ves a continuación.

estructura-wordpress-plantilla

Para escribir código y modificar nuestros archivos necesitaremos un «editor de código» que permita guardar texto sin formato, podríamos hacerlo en el bloc de notas por defecto, pero con un editor de codigo todo sera mas sencillo, Te recomiendo Atom o Sublime Text como editor, son gratuitos y sencillos de usar, pero ustedes pueden usar el que crean mas conveniente.

Cabecera o Header

Abrimos el archivo header.php y escribimos las siguientes líneas:

<!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>

Aunque estamos creando la cabecera simple de una página HTML, ya estamos utilizando un parámetro de WordPress que es la función bloginfo(). Ésta función llama parámetros generales de tu sitio web, como el título, URL principal, idioma, URL del archivo style.css, entre otras. Otro parámetro es wp_head(), Esta función y la de wp_footer(), carga no solo los estilos, sino también las etiquetas «meta» y algunos scripts de WordPress necesarios para su funcionamiento.

Pie de página o Footer

Abriremos el archivo footer.php. Por ahora añadiremos la etiqueta <footer> que contendrá el copyright y la función wp_footer(), por ultimo cerraremos las etiquetas <body> y <html>. Debes escribir las siguientes lineas.

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

 

Lista de Entradas o Posts

Abriremos el archivo home.php, en este archivo crearemos el bucle que mostrará el listado de entradas o posts, es decir, mostrara las publicaciones en el orden que le asignemos desde nuestro panel de wordpressescribe las siguientes lineas:

<!-- 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(); ?>

Si analizamos el código del archivo home.php. Vemos una llamada a la función get_header(), esta función incluye el archivo header.php que ya hemos creado anteriormente. Lo mismo ocurre en el caso de la función get_footer(), la cual incorpora el archivo footer.php. La función get_sidebar() que incluimos, sera la que contenga la plantilla el archivo sidebar.php, el cual modificaremos mas adelante. El bucle de entradas comienza con un condicional if() y con la función de WordPress have_posts(), las cuales comprueban si hay entradas para mostrar.

Éstas funcionalidades nos permiten mostrar información referente al post o entrada.

El número de artículos que se mostrarán se puede personalizar desde el panel de administración de WordPress, accediendo a «Ajustes > «Lectura». Es necesario usar else, ya que mostrara el contenido alternativo en caso de que no existan entradas.

Página de entrada o post

Cuando accedemos a una entrada, la plantilla que se muestra es la que contiene el archivo single.php, la cual vamos a editar. El código es muy similar al que empleamos para las listas de entradas.

<!-- 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(); ?>

Todos los elementos del codigo anterior, el de la plantilla de nuestro archivo single.php los habíamos visto anteriormente en el listado de entradas.

Página de inicio o Front Page

Crearemos una página de inicio básica que ayude a generar la estructura básica de navegación, editaremos el archivo front-page.php. No nos centraremos en recuperar el contenido de un post, sino en recuperar el contenido de una página especifica creada en WordPress.

<!-- 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(); ?>

Repetimos los mismos patrones para recuperar información,sea para una entrada o a una página. Ya tendríamos preparadas las plantillas necesarias para crear una estructura básica de una página web basada en WordPress, nos mostraría una página de inicio y tendrá una sección de blog. Podemos acceder al administrador de WordPress y generar la estructura de paginas. Accedemos a «Páginas» en nuestro menu de WordPress y creamos dos páginas: «Inicio» y «Blog», sin ningún contenido. Crearemos también algunas entradas con contenido ficticio (LIpsum) para comprobar el funcionamiento del blog.

Siguiente Parte: Crear un tema para WordPress – Paginas, menu y widgets

Share This