<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1500086133623123&amp;ev=PageView&amp;noscript=1">
logo de inboundcycle

Agencia de Inbound Marketing

Blog de Inbound Marketing

Técnicas y recursos para ayudarte a generar oportunidades comerciales y branding basados en las experiencias de todo un equipo de profesionales del marketing digital.


Cómo crear una plantilla de WordPress desde cero (II)

por Jordi Cuenca  |  28/10/2015

Inbound Marketing: Estrategia y Herramientas

Un mejor posicionamiento en los resultados de búsqueda de Google, la posibilidad de darse a conocer como experto/a en un ámbito determinado, un modo asequible y eficaz de hacer branding... ¿Qué más argumentos se necesitan para poner en marcha un blog? Para que tú tampoco tengas excusa, hoy seguimos explicándote las claves para que puedas crear y mantener tu propio escaparate online de una manara rápida, fácil y efectiva. ¡Toma nota! 

Recuperemos el hilo; como seguramente recordarás, en un post anterior aprendimos a crear la estructura básica para una plantilla 100% funcional para WordPress. Pues bien: hoy toca arremangarse, comenzar a escribir código y dar forma a la plantilla. Para comenzar con buen pie, en primer lugar veremos cómo crear una cabecera y un pie de página general. Eso será antes de contarte cómo diseñar una página de inicio y un menú de navegación que podrás gestionar desde el administrador de menús de WordPress.

Una vez más, antes de profundizar más en el contenido, te recomendamos que vas a publicar una nua web, te descargues gratis esta guía con 25 elementos imprescindibles que incluir en tu web para conseguir tráfico,  leads y ventas.

¿Estás preparado/a? ¡Pues vamos a ello! 

iStock_000062226308_Medium-1

➡ Haz clic aquí para descargarte la guía

Si retomamos el proceso indicado en el post previo, tendríamos que contar con una instalación de WordPress para realizar pruebas, con un template que presente la siguiente estructura:

estructura-plantilla-wordpress-completa-1

Utilizaremos HTML5 para todo el tutorial. Por lo tanto, si posees conocimientos de este lenguaje de programación pero hay etiquetas del que aún no dominas, te recomendamos echar un vistazo aquí.

La cabecera

El primer paso será abrir el archivo header.php con un editor de código o algun editor de texto que te permita guardar texto sin formato y comenzar a escribir tus primeras 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>

Como puedes comprobar, estarás creando la cabecera simple de una página HTML. Sin embargo, ya estarás utilizando un primer parámetro de WordPress: la función bloginfo(). Ésta permite llamar a parámetros generales de tu página, tales como el título, la URL principal, el idioma, la codificación de carácteres o la URL del archivo style.css, entre muchas otras opciones.

Otro parámetro que puedes ver justo antes del cierre de la etiqueta es wp_head(). Esta función —junto con la de wp_footer(), que veremos en el próximo código que te mostramos— carga una serie de estilos, metas y scripts de WordPress que hace visible la barra de administrador en nuestra plantilla (siempre y cuando se haya accedido previamente mediante la opción login). Otra razón para añadir estas funciones es que los plugins que instalarás en tu WordPress las necesitarán para agregar sus propios metas, scripts y estilos.

El pie de página

A continuación, abriremos el archivo footer.php. De momento, lo único que haremos será añadir la etiqueta <footer> con el copyright y la función wp_footer() y cerrar las etiquetas <body> y <html>.

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

La lista de entradas o posts

Volvamos de nuevo a nuestro post anterior, donde explicábamos que el archivo front-page.php es utilizado por WordPress como página de inicio por defecto. En cualquier caso, si en vez de un blog quieres mostrar una página estática como página de inicio, lo que habrá que editar en la lista de entradas será el archivo home.php. Puesto que queremos obtener una plantilla básica, pero que cubra las necesidades más importantes en theme de WordPress, optaremos por crear el blog en una sección, reservando así la página de inicio para una página estática.

Así, pues, es el momento de abrir el archivo home.php, donde crearemos el bucle que mostrará el listado de posts. Fíjate bien:

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

Analicemos el código de nuestro archivo home.php. En primer lugar, vemos la llamada a get_header(), una función que incluye el archivo header.php que hemos creado anteriormente. Lo mismo ocurre con la función get_footer() que figura al final del código, y que incorpora el archivo footer.php. La función get_sidebar() incluirá en la plantilla el archivo sidebar.php. Por el momento está vacío, pero no te preocupes: ya nos ocuparemos de él más adelante.

Ahora toca centrarse en el bucle de posts que comienza con un condicional if() y con la función de Wordpress have_posts() que comprueba si hay posts para mostrar. Si la respuesta es afirmativa, crearemos el contenedor de posts con la etiqueta <section> y, seguidamente, un bucle while(), que mostrará las entradas y habilitará la función the_post(), que posibilita el acceso todas sus propiedades con funciones nativas de WordPress.

Éstas nos permiten mostrar información referente al post. Podemos ver algunas de ellas en el bloque en cuestión. Éstas son las funcionalidades que ofrecen:

  • 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.

Después de cerrar el bucle con endwhile, utilizaremos las funciones next_post_link() y previous_post_link(), que mostrarán los enlaces para paginar los posts. El número de artículos que se mostrarán por página se puede personalizar desde el administrador de WordPress, accediendo a "Ajustes > Lectura".

Para terminar con esta plantilla, hay que utilizar else para mostrar un contenido alternativo en el caso de que no haya posts que ver. Por último, se debe cerrar el condicional que hemos abierto que comprobaba si había o no posts con endif.

La página de entrada o post

Cuando accedemos a un post, la plantilla que se invoca es single.php, que será la próxima que editaremos. Como se puede constatar, el código que necesitamos para mostrar un post es muy similar al que se emplea para listar 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(); ?>

Mirando detenidamente el código, nos percataremos de que no hay ningún elemento que no hayamos visto anteriormente. Mediante un condicional if(), comprobamos si el post en cuestión existe realmente, para poder añadir un contenido alternativo en el caso de que no sea así. A continuación, invocaremos la función the_post() y volveremos a recuperar toda información que necesitemos del post.

La página de inicio

Por el momento, crearemos una página de inicio básica y que nos ayude a terminar de generar la estructura básica de navegación, editando el archivo front-page.php. Sin embargo, en lugar de recuperar el contenido de un post, nos decantaremos por recuperar el contenido de una página 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(); ?>

Como vemos, repetimos siempre los mismos patrones a la hora de recuperar información, tanto si ésta corresponde a un post o a una página.

Llegados a este punto, ya tendríamos preparadas las plantillas necesarias para crear una estructura básica de una página web basada en WordPress, que nos mostraría una página de inicio y tendría una sección con un blog funcional. Por lo tanto, es el momento de acceder al administrador de WordPress y generar esa estructura.

Lo primero que haremos será acceder a la opción "Página" y crear dos páginas: una con el título de "Página de Inicio" y otra con el título "Blog", sin ningún contenido extra. Te recomendamos que crees unos cuantos posts con contenido ficticio para comprobar si el funcionamiento del blog es correcto.

creando_paginas_en_wordpress-1

A continuación, vamos a asignar a cada una de estas página la función para la que fueron creadas. Para ello, accederemos a "Ajustes > Lectura" y activaremos la opción "Una página estática". Veremos entonces que se activan los dos desplegables que están justo debajo. Para "Página inicial", seleccionaremos la página que hemos creado —"Página de Inicio"— y para la opción "Página de entradas", elegiremos la página "Blog".

estructurando_paginas_en_wordpress

Si intentas navegar por la plantilla, aparecerá algo parecido a esto:

vista_de_theme_1

Ya tenemos la página de inicio funcionando, pero todavía no se puede acceder al blog. Por lo tanto, el siguiente paso consistirá en crear un menú de navegación que podremos gestionar facilmente desde el administrador.

El menú de navegación

Para activar los menús en la plantilla, tenemos que crear zonas de menú. Además de ser un paso muy sencillo, se pueden crear tantas como desees. Así, pues, vamos a generar nuestro primer menú. Para ello, hay que abrir el archivo functions.php e insertar el siguiente código:

<?php

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

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

Echemos un vistazo a este código. Primero, hemos de crear una función PHP; puedes ponerle el nombre que desees, aunque en este caso nos decantaremos por mis_menus(). Esta función sirve para registrar los menús, para que WordPress permita editarlos con la función register_nav_menus(). Mediante un array, añadiremos los menús que necesitamos. En el proceso, indicaremos primero el slug o identificador, que permitirá insertarlo en el lugar que quieras de la plantilla, y después, el nombre con el que aparecerá en el listado de menús del administrador.

Para que WordPress ponga en marcha la función de menús, hay que usar la función nativa add_action(). En ella, indicaremos en el primer parámetro cuándo se desea ejecutar la función y con el segundo parámetro el nombre de la función que se debe ejecutar (es decir, mis_menus).

Es el momento de volver a nuestro administrador WordPress. Allí veremos que, en "Apariencia", tenemos el nuevo ítem "Menús".

creando_menu_en_wordrpess_1

Crearemos ahora el menú en la zona en la que que hemos registrado en el archivo functions.php. Le podemos ponemos cualquier nombre que nos ayude a identificar de qué menú se trata (por ejemplo, Menú principal). Si hacemos clic en "Crear menú", se actualizará la página y nos aparecerá una serie de nuevas opciones:

creando_menu_en_wordrpess_3

A la izquierda, podremos seleccionar las páginas que queremos añadir al menú —en este caso, "Blog" y "Página de Inicio"—, y solo tendremos que hacer clic sobre "Añadir al menú". Arrastrando los nuevos elementos que aparecen a la izquierda, se puede personalizar el orden en que aparecerán los items. Para terminar, hay que indicar en qué zona de menú registrada queremos que figure este menú. Dado que por el momento únicamente hemos registrado una, sólo podemos seleccionar "Menú de navegación". Por último, guardamos de nuevo nuestro menú y ya estará listo.

creando_menu_en_wordrpess_4

Ahora bien, si volvemos a intentar navegar por la página, veremos que todavía no nos aparece ningún menú. Eso es porque hemos registrado el menú y le hemos añadido las páginas que queremos como secciones, pero no lo hemos indicado en qué parte de la plantilla queremos que aparezca. El siguiente paso, por lo tanto, será volver a abrir el archivo header.php y agregar el código que a continuación reproducimos (destacado en negro):

<!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>
    <nav>
      <ul class="main-nav">
        <?php wp_nav_menu( array( 'theme_location' => 'navegation' ) ); ?>
      </ul>
    </nav>

De este modo, hemos incorporado un elemento de navegación. Con la función wp_nav_menu(), llamamos al menú soportado por el slug que hemos indicado anteriormente (en este caso, navegation). Ahora sí que está todo: cuando guardemos este cambio, ya tendremos una plantilla con página de inicio y un blog completamente funcional con un menú de navegación que nos permite cambiar de sección.

No obstante, el proceso aún no ha concluido: en nuestro siguiente post, te explicaremos cómo enriquecer tu blog, añadiéndole etiquetas o tags, categorías, comentarios y un buscador. Crearemos una barra lateral zonas para widgets, que podrás gestionar desde el administrador. Además, te explicaremos cómo generar una plantilla de página genérica y prepararemos una plantilla personalizada, que podrás vincular a una página específica.

Esperamos que te haya resultado útil la información que te hemos proporcionado. Te invitamos a utilizarla y a consultarnos las dudas que te puedan surgir. Estaremos encantados/as de atenderte.

Ya está disponible el tercer post aquí!.

diagnostico inbound gratuito

como crear una landing page perfecta

blogging for business eBook

Inbound Marketing: Estrategia y Herramientas

¿Y tú qué opinas? ¡Déjanos aquí tus comentarios!