martes, 24 de septiembre de 2013

11. La plantilla de búsqueda (search) y la plantilla página (page) del Tema de WordPress

(El artículo original y en inglés, fue publicado el 6 de noviembre de 2012)

ThemeShaper es el sitio del Equipo de Temas de Automattic, que, en junio de 2009, publicó una muy popular serie de 11 artículos de Ian Stewart, bajo el título: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (Como crear un Tema de WordPress: el tutorial definitivo).
El año pasado, reflotó y actualizó ese tutorial. Esta vez con 16 artículos a cargo de Michelle LangstonThe ThemeShaper WordPress Theme Tutorial: 2nd Edition (Tutorial de Temas de WordPress de ThemeShaper. Segunda edición).
Me propongo traducir libremente esas 16 entradas (además de la introducción) e ir publicándolas a medida que las tenga listas.
Al final de cada entrada va el listado con todas las entradas de este tutorial.


Las plantillas búsqueda (search) y página (page) son vitales para cualquier tema completo de WordPress. Y ambos son, realmente, muy sencillos de codificar.

Para ambas plantillas comenzaremos, otra vez, con nuestra plantilla de plantillas, single.php. Para refrescar la memoria, aquí tienen a single.php.

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package Shape
 * @since Shape 1.0
 */
 
get_header(); ?>
 
        <div id="primary" class="content-area">
            <div id="content" class="site-content" role="main">
 
            <?php while ( have_posts() ) : the_post(); ?>
 
                <?php shape_content_nav( 'nav-above' ); ?>
 
                <?php get_template_part( 'content', 'single' ); ?>
 
                <?php shape_content_nav( 'nav-below' ); ?>
 
                <?php
                    // If comments are open or we have at least one comment, load up the comment template
                    if ( comments_open() || '0' != get_comments_number() )
                        comments_template( '', true );
                ?>
 
            <?php endwhile; // end of the loop. ?>
 
            </div><!-- #content .site-content -->
        </div><!-- #primary .content-area -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Pero, por supuesto, cada una va a tomar su camino propio.



La plantilla buscar (search.php)

En search.php vamos a envolver nuestro bucle dentro de una declaración  IF — en caso que no tengamos ningún post para recorrer con el bucle.
Así es como funcionará: SI (if) tenemos entradas, o, en otras palabras, si hay entradas que coincidan con los criterios de búsqueda, ENTONCES (then) las recorremos, de forma similar a como se hace en index.php, pero SI (if) no tenemos entradas para recorrer, o, ninguna entrada coincide con nuestros criterios de búsqueda, daremos a nuestros visitantes una nueva oportunidad en este asunto de la búsquedas.

En código, se vería así:

<?php
/**
 * The template for displaying Search Results pages.
 *
 * @package Shape
 * @since Shape 1.0
 */

get_header(); ?>

  <section id="primary" class="content-area">
   <div id="content" class="site-content" role="main">

   <?php if ( have_posts() ) : ?>

    <header class="page-header">
     <h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'shape' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
    </header><!-- .page-header -->

    <?php shape_content_nav( 'nav-above' ); ?>

    <?php /* Start the Loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>

     <?php get_template_part( 'content', 'search' ); ?>

    <?php endwhile; ?>

    <?php shape_content_nav( 'nav-below' ); ?>

   <?php else : ?>

    <?php get_template_part( 'no-results', 'search' ); ?>

   <?php endif; ?>

   </div><!-- #content .site-content -->
  </section><!-- #primary .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Bastante directo, ¿no le parece? Revisemos algunas áreas de este código.

Primero, preste atención a todo lo que se encuentra entre if ( have_posts() ) : (línea 14) y shape_content_nav( 'nav-below' ); (línea 29).
Si hay resultados de la búsqueda, esta es la porción de código que controla cómo se verá la página de resultados. Arriba tendremos un bonito título que incluye el término buscado, seguido por un listado de las entradas resultantes de la búsqueda.

También, shape_content_nav() funciona de la misma manera que lo hace en  index.php.

Recordará la función get_template_part() de lecciones anteriores. Carga el archivo que contiene el código que da formato a las entradas resultantes de la búsqueda. Primero buscará un archivo llamado “content-search.php”, pero dado que no vamos a crear ese archivo, en su lugar usará  content.php. Si desea darle otro formato a las entradas resultanes de la búsqueda (como ya hicimos con el formato de entrada "Aside" - Microformato), siéntase libre de crear un archivo “content-search.php” e ir por su lado.

A continuación, demos una ojeada al código entre else : (línea 31) y endif; (línea 35). Si no hay resultados de la búsqueda para mostrar, queremos avisárselo, delicadamente, a nuestro visitante. Para hacer eso, cargamos el mismo archivo no-results.php que creamos en la lección sobre index.php. Seguramente, se siente bien el hecho de poder reutilizar código sin necesidad de pegarlo en cada archivo.

La plantilla del formulario de búsqueda
En una de las lecciones pasadas, Plantillas y estructura de directorios de un Tema de WordPress, agregamos el archivo searchform.php. Si quiere personalizar el código del formulario de búsqueda de su Tema, este es el archivo que deberá utilizar para que eso ocurra. Por otra parte, searchform.php es opcional. Si su Tema no tiene un searchform.php, entonces WordPress muestra el formulario de búsqueda con su propia codificación incorporada.

Aquí está el código a pegar dentro de searchform.php.

<?php
/**
 * The template for displaying search forms in Shape
 *
 * @package Shape
 * @since Shape 1.0
 */
?>
    <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
        <label for="s" class="assistive-text"><?php _e( 'Search', 'shape' ); ?></label>
        <input type="text" class="field" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" id="s" placeholder="<?php esc_attr_e( 'Search …', 'shape' ); ?>" />
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'shape' ); ?>" />
    </form>

La plantilla Página

Usted ya conoce la finalidad de la plantilla Página. WordPress la ve como una entrada fuera del orden cronológico. Nosotros la vemos como eso: una página. Pero, en gran medida, se define por lo que no tiene: todos los metadatos habituales (como la navegación, las marcas de tiempo, las categorías y las etiquetas) que se incluyen en una entrada de blog.
El archivo de nuestra plantilla de Página se verá muy similar a single.php. También colocaremos los contenidos del bucle de la Página dentro de  content-page.php.Primero, vamos a configurar la plantilla Página. Abra el archivo page.php y agréguele el siguiente código:

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package Shape
 * @since Shape 1.0
 */
 
get_header(); ?>
 
        <div id="primary" class="content-area">
            <div id="content" class="site-content" role="main">
 
                <?php while ( have_posts() ) : the_post(); ?>
 
                    <?php get_template_part( 'content', 'page' ); ?>
 
                    <?php comments_template( '', true ); ?>
 
                <?php endwhile; // end of the loop. ?>
 
            </div><!-- #content .site-content -->
        </div><!-- #primary .content-area -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ahora, vamos a colocar el etiquetado de la página real dentro de content-page.php. Para eso, pegue lo siguiente dentro de content-page.php.

<?php
/**
 * The template used for displaying page content in page.php
 *
 * @package Shape
 * @since Shape 1.0
 */
?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <h1 class="entry-title"><?php the_title(); ?></h1>
    </header><!-- .entry-header -->
 
    <div class="entry-content">
        <?php the_content(); ?>
        <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'shape' ), 'after' => '</div>' ) ); ?>
        <?php edit_post_link( __( 'Edit', 'shape' ), '<span class="edit-link">', '</span>' ); ?>
    </div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->

Es una versión reducida de content-single.php. En ella hemos omitido todo los metadatos que están asociados con entradas de blog.
Y con esto, estamos hechos por esta lección. Disfruten sus nuevas plantillas Página y Búsqueda.


Sumario de entradas

  1. Introducción.
  2. El desarrollo de su "sentido temático".
  3. Herramientas para el desarrollo de Temas de WordPress.
  4. Creación de una estructura html para su Tema de Wordpress.
  5. Plantillas y estructura de directorios de un Tema de WordPress.
  6. Configuración de las funciones de su Tema.
  7. Asegure su Tema de WordPress.
  8. La plantilla cabecera del tema de WordPress: header.php.
  9. La plantilla Index de su Tema de WordPress.
  10. Las plantillas Entrada Individual, Entrada de Adjuntos y error 404 del Tema de WordPress.
  11. La plantilla de comentarios de un Tema de WordPress.
  12. La plantilla de búsqueda (search) y la plantilla página (page) del Tema de WordPress.
  13. La plantilla Archivo .
  14. Las plantillas "sidebar" (barra lateral) y "footer" (pie de página) del Tema de WordPress.
  15. Como resetear y reconstruir los CSS de su Tema de WordPress y definir su diseño.
  16. Fondo y cabecera personalizados.
  17. Distribuir su Tema de WordPress.

No hay comentarios.:

Publicar un comentario

Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.