Un Programador

El blog de un programador a otro programador

Breakpoint

Tutorial: Cómo hacer un tema para wordpress | Parte 3

por Nancy Toledo

En esta entrega vamos a comenzar a imprimir nuestros posts de manera dinámica.

Primero nos vamos a nuestro archivo index.php y nos centramos en la parte del contenido de la página que contendrá nuestras entradas:

<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">
  <!-- First Photo Grid-->
  <div class="w3-row-padding w3-padding-16 w3-center" id="food">
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
      <h3>The Perfect Sandwich, A Real NYC Classic</h3>
      <p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/steak.jpg" alt="Steak" style="width:100%">
      <h3>Let Me Tell You About This Steak</h3>
      <p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/cherries.jpg" alt="Cherries" style="width:100%">
      <h3>Cherries, interrupted</h3>
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
      <p>What else?</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/wine.jpg" alt="Pasta and Wine" style="width:100%">
      <h3>Once Again, Robust Wine and Vegetable Pasta</h3>
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
  </div>
  <!-- Second Photo Grid-->
  <div class="w3-row-padding w3-padding-16 w3-center">
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/popsicle.jpg" alt="Popsicle" style="width:100%">
      <h3>All I Need Is a Popsicle</h3>
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/salmon.jpg" alt="Salmon" style="width:100%">
      <h3>Salmon For Your Skin</h3>
      <p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
      <h3>The Perfect Sandwich, A Real Classic</h3>
      <p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/croissant.jpg" alt="Croissant" style="width:100%">
      <h3>Le French</h3>
      <p>Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
  </div>
  <!-- Pagination -->
  <div class="w3-center w3-padding-32">
    <div class="w3-bar">
      <a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
      <a href="#" class="w3-bar-item w3-black w3-button">1</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
    </div>
  </div>

Vamos a reducir ese código dejando unicamente un patrón de nuestro diseño de las entradas, si te das cuenta, cada parte se refiere a la imagen de la entrada, el título y un estracto.

Así que nuestro código HTML quedaría así:

<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">
  <!-- First Photo Grid-->
  <div class="w3-row-padding w3-padding-16 w3-center" id="food">
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
      <h3>The Perfect Sandwich, A Real NYC Classic</h3>
      <p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
  </div>


  <!-- Pagination -->
  <div class="w3-center w3-padding-32">
    <div class="w3-bar">
      <a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
      <a href="#" class="w3-bar-item w3-black w3-button">1</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
    </div>
  </div>

Entonces sustituiremos las partes que nos interesan con nuestro código php y funciones de WordPress. Para el encabezado agregamos la función the_title(), para el estracto agregamos the_excerpt() y para la imagen utilizaremos un par de funciones extras que veremos más adelante.

Entonces comenzamos con escribir el loop de WordPress, que es la estructura que nos permitirá imprimir la información de los posts, quedando nuestro código así:

<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">
  <!-- First Photo Grid-->
  <div class="w3-row-padding w3-padding-16 w3-center" id="food">
  <?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		    <div class="w3-quarter">
            <img src="https://www.w3schools.com//w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
            <h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
            <p><?php the_excerpt(); ?></p>
            </div>
	} // end while
} // end if
?>
  </div>
  <!-- Pagination -->
  <div class="w3-center w3-padding-32">
    <div class="w3-bar">
      <a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
      <a href="#" class="w3-bar-item w3-black w3-button">1</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
    </div>
  </div>

El título lo hemos encerrado en un nuevo tag <a> para hacer referencia al link del post mismo y con la función the_permalink() obtendremos esta información.

Recuerda identificar el patrón de visualización de tus posts, ya que dentro del loop únicamente debe ir el código que estructura la manera en que vamos a ver un solo post, pues se repetirá tantas veces como posts existentes.

Por default, WordPress maneja 55 palabras para el estracto o excerpt, así que para fines de este ejemplo, vamos a editar el archivo functions.php y vamos a hacer que el excerpt contenga 20 palabras. Agregamos el siguiente código:

function wpdocs_custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );

Para la imagen, vamos a utilizar un paso adicional. Primero, vamos a nuestro archivo functions.php y agregamos lo siguiente:

if ( function_exists( 'add_theme_support' ) ) { 
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 150, 150, true ); // default Post Thumbnail dimensions (cropped)

    // additional image sizes
    // delete the next line if you do not need additional image sizes
    add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
}

Con lo cual indicamos que requerimos esa funcionalidad para obtener la imagen destacada de nuestro post que agregaremos al momento de editarlo. Puedes agregar el tamaño default y tamaño adicional de la imagen para mantener un estandar.

Finalmente, vamos a agregar la función the_post_thumbnail( ) en donde se encontraba nuestro tag <img> para obtener la de nuestro post:

<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">
  <!-- First Photo Grid-->
  <div class="w3-row-padding w3-padding-16 w3-center" id="food">
  <?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		    <div class="w3-quarter">
            <?php the_post_thumbnail(); ?>
            <h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
            <p><?php the_excerpt(); ?></p>
            </div>
	} // end while
} // end if
?>
  </div>

Por ahora, vamos a concluir esta entrada aquí y en la siguiente abordaremos la paginación y otros detalles.

por Nancy Toledo

Entradas relacionadas

Base de Datos Breakpoint

Vistas Materializadas

Esther Lopez
Breakpoint

accesibilidad web y cómo llegar a una audiencia más amplia

Cesar Flores
Breakpoint Líneas de código nodejs

Controla tus versiones de Node.js con NVM

Cesar Flores
2 comentario en “Tutorial: Cómo hacer un tema para wordpress | Parte 3”

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Copyright © All rights reserved | Blogus por Themeansar.