HOME || Wordpress || Cargar bloque dinámico personalizado en WordPress
Creado el: 16 marzo, 2019 - Actualizado el: 2 abril, 2019 - Autor: lornal
AMP Versión AMP: Cargar bloque dinámico personalizado en WordPress (Versión AMP)

Cargar bloque dinámico personalizado en WordPress

Cargar bloque dinámico personalizado en WordPress

Modificamos la plantilla PHP del tema para cargar un contenido (página HTML) dinámico para la entrada mostrada.

Indice de contenido

WordPress y el contenido dinámico

Todos sabemos que WordPress y la gran mayoría de los CMS trabajan en base a un contenido dinámico leido desde una base de datos. Que quiere decir esto, que si tenemos una página de categorías y programamos la misma para que cada vez que se publique un artículo relacionado a ella se muestre automáticamente, habremos creado un contenido dinámico en la página de dicha categoría.

Y esto es lo que específicamente hace WordPress a través de sus archivos PHP de plantilla, con sus funciones y plugins. Esto no es novedad si es que utilizas estos gestores de contenido pero para quien venga de la programación vieja de HTML simple donde creábamos un documento o página para cada contenido y no se usaba base de datos quizás sea un concepto algo difícil de entender.

En este artículo voy a explicar como agregar un contenido dinámico que se cargue según corresponda al post que se está viendo. La variable a utilizar será la URL (slug) de la entrada permanente y la ID almecenada en la base de datos de WordPress.

Que ventajas puede tener esto? que los enlaces cargados como relacionados a la entrada que se está leyendo serán los que yo elija. No se agregará cualquier vínculo, sino específicos bien vinculados y relacionados al contenido del post, algo que para el SEO y para el lector es muy bueno y además la ventaja de hacerlo uno mismo y sentirse poderoso 🙂

No nos demoremos más y vamos a ello!!

Contenido dinámico en las entradas

Captura del ejemplo terminado
Captura del ejemplo terminado

Queriendo agregar en un sector específico de mis entradas un bloque que contenga enlaces relacionados a la entrada que se carga, y no queriendo utilizar ningún plugins o bloque propio de WordPress, me decidí a modificar la plantilla PHP de mi tema para que cargue una página HTML según la entrada leída por el lector.

Después de investigar un poco di con la plantilla PHP de mi tema a la cual agregar este código. Como siempre digo hay muchas maneras de programar y llegar al mismo resultado así que comparto este método por si te interesa utilizarlo.

Lo primero que vamos a hacer es abrir el archivo single.php de nuestro tema ubicado en wp-content/themes/TU-TEMA/ . El archivo a modificar dependerá de dónde quieras que aparezca el contenido, en este ejemplo el archivo en cuestión es el encargado de “contener” todo el bloque de la entrada. Lo importante es que entiendas el método y el código PHP que utilizaremos para cargar un documento HTML o PHP de manera dinámica según la entrada que se esté visualizando.

Yo decidí cargar este contenido justo entre el final del texto del artículo y los comentarios. Aquí está una porción del archivo de plantilla con la modificación y el código necesario para realizar esta tarea.

<?php
/**
 * The template for displaying all single posts and attachments
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		// Start the loop.
		while ( have_posts() ) :
			the_post();

			// Include the single post content template.
			get_template_part( 'template-parts/content', 'single' );

// Comienza código bloque enlaces relacionados
global $wp_query;
$id = $wp_query->post->ID;
$anchor = basename(get_permalink($id));
$cargar_fichero = 'Relacionados/' . $anchor . $id . '/index.html';

// Comprobamos si el archivo relacionado existe		
$crl = curl_init('http://localhost/blog/wp-content/themes/twentysixteen_child/Relacionados/' . $anchor . $id . '/index.html');
curl_setopt($crl, CURLOPT_NOBODY, true);
curl_exec($crl);

$ret = curl_getinfo($crl, CURLINFO_HTTP_CODE);
curl_close($crl);

// fin comprobación

// Si existe (valor 200) lo cargamos
if ($ret == 200) {
	the_title('Enlaces relacionados a ');
    include ($cargar_fichero);
// Si no existe mostramos un mensaje
} else {
echo '<div>No hay artículos relacionados</div>';
}
		
// continua código de single.php

Como verás es un código PHP que almacena en la variable $anchor la URL (slug) del enlace permanente de la entrada leida y en $id el ID único de la entrada en la base de datos. De esa manera podemos identificar a cada entrada por su anchor como un dato único dentro de la base de datos y siempre sabremos de qué artículo se trata ya que usamos en nuestras entradas una URL amigable (lo que te recomiendo que hagas)

Con curl_init y las funciones relacionadas que siguen capturamos el estado del archivo para finalmente almacenarlo en $ret . Dicho de otra manera miramos si el archivo con los enlaces relacionados existe.

Luego mediante una condición verificamos si el archivo a cargar existe. De existir se cargará un archivo HTML con el contenido específico de la entrada. Si el archivo no existe se escribe una etiqueta DIV con un mensaje aunque podríamos cargar también un archivo especifico como mensaje default para las entradas que no dispongan del contenido personalizado.

$crl = curl_init('http://localhost/blog/wp-content/themes/twentysixteen_child/Relacionados/' . $anchor . $id . '/index.html');

En esa línea específica debes usar una URL absoluta a la carpeta de tu tema. Como verás yo utilizo para el ejemplo un tema hijo del tema original twentysixteen. Debes crear un directorio que se llame Relacionados (o cualquier otro nombre que quieras). Para cada entrada a la cual le quieras cargar un archivo deberás crear otro directorio con el nombre de la URL (slug) de la entrada seguido del ID y dentro estará el archivo index.html a cargar.

Por ejemplo si tienes una entrada con un slug hola-mundo y el ID es 1 la estructura del directorio a crear te quedará así:

http://www.tu-sitio.com/blog/wp-content/themes/TU-TEMA/Relacionados/holamundo1/index.html

Presta mucha atención a la estructura de directorios que tengas en tu sitio ya que variará el nombre del tema que uses (TU-TEMA) y el dominio que ingresaste en la instalación de WordPress (www.tu-sitio.com/blog)

El código de la página Relacionada

Al código es recomendable darle la misma clase que toma todo el bloque de nuestro artículo, de esta manera lo podremos modificar directamente con la hoja de estilo general del tema, el style.css

Pero también conviene darle una clase especial por si queremos estructurar de una manera un poco más específica nuestro bloque personalizado HTML

<div class="Relacionados">

	<a href="">Enlace relacionado 1</a><br>
	<a href="">Enlace relacionado 2</a><br>
	<a href="">Enlace relacionado 3</a>

</div>
<p></p>

El código no debe ser un documento HTML normal con su encabezado y etiquetas HEAD y BODY, solo los DIV y etiquetas de enlaces necesarios para mostrar el contenido y poder estructurarlo en el lugar que queramos.

Para que te quede más claro, supongamos que tenemos 5 entradas en nuestra base de datos de WordPress. Las carpetas y archivos a crear por cada uno de ellos sería:

http://www.tu-sitio.com/blog/wp-content/themes/TU-TEMA/Relacionados/slug-entrada1/index.html

http://www.tu-sitio.com/blog/wp-content/themes/TU-TEMA/Relacionados/slug-entrada2/index.html

http://www.tu-sitio.com/blog/wp-content/themes/TU-TEMA/Relacionados/slug-entrada4/index.html

http://www.tu-sitio.com/blog/wp-content/themes/TU-TEMA/Relacionados/slug-entrada5/index.html

Estructura de los directorios

El directorio Relacionados es el que utilizaremos para almacenar todo. Luego viene el directorio propio para cada entrada que es el nombre del enlace permanente (slug) más el número de ID del post y luego el archivo que queremos cargar (index.html). Como verás a todos los archivos HTML le debemos dar el mismo nombre. Nos conviene utilizar 1 directorio propio para cada entrada ya que si queremos agregar otro bloque podemos utilizar esta estructura para mantener todo bien organizado.

En el ejemplo verás que falta slug-entrada3 por lo que no se cargará ningún archivo pero el código PHP que agregamos en la plantilla hará su trabajo agregando el código HTML necesario o el archivo común que especifiquemos.

Resumen

Vimos como agregar contenido dinámico mediante código en las entradas de WordPress

Nos metimos de lleno en el gran mundo del contenido dinámico de las páginas web. Creamos nuestro propio plugin por código PHP que cargará páginas relacionadas a la entrada que se está viendo. Todo esto mediante la modificación de la plantilla PHP del tema que uses en WordPress.

Recuerda que todas estas operaciones pueden realizarse mediante plugins específicos, hay cientos de ellos aunque siempre un código que hagamos nosotros se adaptará más eficientemente al contenido de nuestro sitio y vamos que nos sentiremos orgullosos de hacerlo.

Si estás cansado de instalar plugins esta es la oportunidad de hacer algo tuyo! Anímate!

Te fue útil el artículo? Califícalo

Votos: - Promedio: