Tutorial: Cómo hacer un tema para wordpress

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.

Esto te podría interesar

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

yonathan dice:

13/03/2019 a las 2:21 pm

ponle notificaciones el sitio esta bueno man

Responder
1. Cesar Flores dice:
  
  13/03/2019 a las 6:37 pm
  
  Gracias estaremos trabajando en ello te invito a unirte al bot de un programador en telegram http://telegram.me/Unprogramadorbot aquí anunciamos los post que publicamos 👌
  
  Responder

Deja un comentarioCancelar respuesta

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

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

Me gusta esto:

Esto te podría interesar

por Nancy Toledo

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

Deja un comentarioCancelar respuesta

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

Comparte esto:

Me gusta esto:

Esto te podría interesar

por Nancy Toledo

Entradas relacionadas

Llamadas encadenadas con angular y switchmap

Vistas Materializadas

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

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

Deja un comentarioCancelar respuesta