WP desde cero (13): reciclar el código

En esta entrada aprenderemos a separar algunas partes del código para reutilizarlas en las distintas páginas de un tema.

Roy Lichtenstein

archivado en: WordPress / 27 diciembre, 2012 / taller:

DRY

Seguimos con la serie de WordPress desde cero.

En las próximas entradas veremos cómo se prepara  la barra lateral, la cabecera, el pie y el menú. Pero antes es importante que comencemos a aplicar una técnica de programación conocida como DRY, «Dont Repeat Yourself», que traducido significa no te repitas a ti mismo. Esta técnica consiste en no  escribir una línea de código igual que otra o que sirva para lo mismo, lo cual permite optimizar el esfuerzo en desarrollo y mantenimiento.

Como vimos, WordPress utiliza distintas plantillas para cada parte de una web. En la portada es index.php; para las entradas individuales, single.php; para las páginas, page.php... Todas esta páginas suelen compartir fragmentos de código idénticos, como el que va en la cabecera, en el pie o en la barra lateral.

Así, por el principio DRY, se pueden separar esos fragmentos comunes y ponerlos en archivos que usen cada una de las plantillas. De momento, los tres archivos compartidos que vamos a preparar son header.php para la cabecera, sidebar.php para el sidebar y footer.php para el pie.

Insertar archivos

Hay dos sentencias de PHP que sirven para insertar archivos dentro de otro: include y require. Se diferencian en que require genera un error que interrumpe el flujo del código en el caso de que el archivo no se haya podido cargar por la razón que sea, por lo que en general siempre conviene utilizar esta sentencia en vez de include. Además, también suele ser recomendable emplear una variante que evalúa si el archivo ha sido cargado ya para no hacerlo dos veces: require_once.

La sintaxis es muy sencilla. Entre paréntesis se indica la ruta y el nombre del archivo a cargar:

  • <?php require_once('mi_archivo.php'); ?>

En WordPress, podemos cargar con require_once cualquier archivo que necesitemos, pero cuenta además con unas funciones especiales que hacen el mismo trabajo con las tres partes reciclables más importantes de un sitio web: la cabecera, el sidebar y el pie.

En realidad hay más, pero de momento solo nos interesan esas tres, que vamos a utilizar de la siguiente manera:

1) header.php

En el archivo index.php seleccionamos lo que habrá en la cabecera común a todos los archivos. Es decir, esto:

  • <?php
  • /*
  • * @package WordPress
  • * @subpackage mmfilesi-bones
  • * @since mmfilesi-bones 1.0
  • */
  • ?><!DOCTYPE html>
  • <html>
  • <head>
  • <title>
  • </title>
  • <!-- CSS -->
  • <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
  • <!-- Script Media Queries y semánticos-->
  • <!--[if lte IE 8]>
  • <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  • <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  • <![endif]-->
  • </head>
  • <body>
  • <div id="wrap">
  • <header id="cabecera_principal">
  • <div id="cabecera_principal_col_izda">
  • Aquí irá la imagen
  • </div>
  • <div id="cabecera_principal_col_dcha">
  • Aquí irá el buscador
  • </div>
  • </header>
  • <nav id="barra_navegacion">
  • Aquí irá la barra de navegación
  • </nav>

nos lo llevamos a un archivo nuevo llamado header.php y, en su lugar, ponemos la función de WordPress que sirve para insertar este archivo:

  • <?php get_header(); ?>

2) sidebar.php

Para la barra lateral, cortamos este par de líneas y las pegamos en un archivo llamado sidebar.php:

  • <aside id="secondary">
  • Aquí irá la columna secundaria o sidebar
  • </aside> <!-- #secondary -->

En su lugar ponemos la función para insertar la barra lateral:

  • <?php get_sidebar(); ?>

3) footer.php 

Por último, cogemos el código del pie:

  • <footer id="pie">
  • Aquí irá el pie
  • </footer>

Nos lo llevamos a footer.php y ahí ponemos esta función:

  • <?php get_footer(); ?>

El sidebar inferior

Nos queda otro fragmento de código en index.php que quizás se podría reutilizar y es el sidebar inferior. Ahí ya depende de los gustos. En general, yo solo suelo incluir este tipo de sidebars complementarios en la portada, ya que creo que es mejor mantener las entradas individuales con el menor ruido posible.

Entonces, si solo se va a usar para la portada, no hace falta sacarlo a un archivo aparte, pero si se necesita también en otro sitio, hay que sacarlo. Es decir, esto:

  • <?php // if (mobile_detect()==0) { ?>
  • <aside id="sibebar_inferior">
  • Aquí irá el sidebar inferior
  • </aside>
  • <?php // } ?>

Habría que llevarlo a un archivo que podemos llamar sidebar_inferior.php.

Para insertarlo en index.php y las demás páginas donde se quiera utilizar podemos seguir utilizando al función get_sidebar(). Para eso hay que hacer dos cosas:

  1. el archivo donde se guardan los sidebar complementarios debe llamarse sidebar-el_nombre_que_sea.php. Por ejemplo, sidebar-inferior.php
  2. en el paréntesis de la función hay que indicar el nombre del archivo a insertar sin la palabra sidebar ni la extensión, solo el nombre):

  • <?php get_sidebar('inferior'); ?>

Lo mismo sucede con get_header y get_footer. Es decir, se pueden incluir cabeceras o pies distintos indicando el nombre entre los paréntesis de la función.

Bueno, este ha sido un post un tanto espeso, pero es que esto de las navidades es fatal para el entendimiento. En el próximo ya sí que comenzamos con el sidebar.

He dejado todos los archivos vistos hasta ahora en git hub.

|| Tags:

valoración de los lectores sobre WP desde cero (13): reciclar el código

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.8 sobre 5 (4 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.