El anterior y el siguiente con la primera imagen en WordPress

Introducción

Si eres un seguidor asiduo de este sitio, habrás visto que en los últimos días he realizado un algunos cambios y el sitio se mueve con mas fluidez (o por lo menos a mi me lo parece). Hace unos días, escribí un artículo referente a la migración de WordPress a Pelican, …, sin embargo, después de todas las pruebas realizadas, no termino de tenerlo claro.

Antes de llegar a WordPress, pasé por Drupal y por Joomla (incluso implementé algunos complementos para este último), y finalmente, me decanté por WordPress, porque con este CMS me dedico (la mayor parte del tiempo a), a escribir en lugar, de a mantener el sitio. Y esto es lo que yo quiero hacer, yo quiero escribir. Por esta razón, he decidido, antes de realizar ninguna migración, optimizar este sitio en WordPress para ver si es posible aumentar la rapidez de carga, así como mejorar la estética del sitio. Todo en beneficio del lector, por supuesto.

En los próximos tres artículos, voy a explicar algunos de los cambios que he introducido por si pueden ser de utilidad a alguien. Soy consciente, que la mayoría de los artículos que publico, giran en torno a Ubuntu, sin embargo, de vez en cuando, toco algún tema de páginas Web, de forma colateral, y esto es motivado básicamente por el tiempo que he tenido que invertir para sacar adelante el sitio.

Cambios a realizar

Para mejorar el sitio he tomado tres caminos distintos:

Por un lado, reducir el número de complementos que actualmente utiliza el sitio. Para hacer este y a la vez mejorar el sitio, lo que hago es desarrollar yo mismo los complementos (esto me ha llevado a tener que aprender algo de PHP).
Reducir el numero de módulos de javascript que utiliza el sitio. Para ello, lo que estoy haciendo es quitar aquellos que no necesito o bien, implementarlo por mi cuenta, pero personalizado al sitio
Reducir el tamaño de los hojas de estilo (css), ciñéndome al máximo a aquello que utilizo, dejando de lado lo que no necesito

A parte de esto, también estoy realizando mejoras en la estética del sitio, buscando ante todo la facilidad de uso por parte del usuario, siempre, manteniendo que la página sea adaptativa, para que se pueda leer con facilidad desde cualquier dispositivo, requerimiento indispensable en los tiempos que corren.

Vamos a los primeros cambios…

Pasos previos

Antes de hacer ningún cambio, lo primero que he hecho es crear un tema hijo, de forma que siempre puedo volver atrás y mientras esto culmina, sigo teniendo soporte del desarrollador del tema, de forma que cualquier actualización la puedo seguir aplicando. Para saber como crear un sitio hijo, te recomiendo que visites Andy21

El anterior y el siguiente con imagen…

Desde el primer momento, que decidí optimizar el sitio, pensé en hacerlo lo mas visual posible. Para ello, junto a las flechas de anterior y posterior, y al título del artículo, quería que apareciera una imagen. Sin embargo, yo no tengo asignada ninguna imagen al sitio, sino que como algunos de vosotros sabéis utilizo Picapy, para insertar imágenes, y suelo poner una primera imagen en la introducción para llamar la atención del lector.

De esta manera el primer problema al que me enfrentaba era como hacer esto, sin haber asignado una miniatura a cada artículo, y por supuesto sin tener que hacerlo (menuda paliza). Para ello, he implementado la siguiente función, que añado al archivo «functions.php» del tema hijo:

	function catch_that_image_from_post($post) {
	  $first_img = '';
	  ob_start();
	  ob_end_clean();
	  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	  if(count($matches [1]))$first_img = $matches [1] [0];
	  if(empty($first_img)) {
		$first_img = get_stylesheet_directory_uri() . "/images/no_image.png";
	  }
	  return $first_img;
	}

Del código precedente tendrás que modificar «/images/no_image.png», que es la imagen que aparecerá si no encuentra ningún resultado en el artículo que le has indicado, y si en lugar de utilizar un archivo hijo, utilizas un archivo padre, tendrás que cambiar «get_stylesheet_directory_uri()» por «get_template_directory_uri()»

El siguiente paso es crear una copia del archivo «single.php» del tema padre en el tema hijo, y modificarlo añadiendo el siguiente código:

                 <div>
                    <br/>
                    <?php
                        $prevPost = get_previous_post(true);
                        $nextPost = get_next_post(true);
                        $thepntitle = "";
                        if(($prevPost)&&($nextPost)){
                            $thepntitle = "Otros artículos (el anterior y el siguiente)";
                        }elseif($prevPost){
                            $thepntitle = "Otros artículos (el anterior)";
                        }elseif($nextPost){
                            $thepntitle = "Otros artículos (el siguiente)";
                        }
                    ?>
                    <h3><? echo $thepntitle ?></h3>
                    <br/>
                    <div>                        
                        <?php
                        if($prevPost) {
                            $prevtitle = get_the_title($prevPost);
                            $previmage = catch_that_image_from_post($prevPost);
                            $prevlink = get_permalink($prevPost);
                            ?>                                
                            <div>
                                <a rel="external" href="<? echo $prevlink ?>">
                                    <div>
                                            <img src="<?php echo get_stylesheet_directory_uri() . '/images/atras.png' ?>" alt="back" width="50" border="0" />
                                    </div>
                                    <div>
                                        <div>
                                            <img src="<? echo $previmage ?>" alt="<? echo $prevtitle ?>" width="150" height="150" border="0" />                                                    
                                        </div>    
                                        <?php echo $prevtitle; ?>                                                                            
                                    </div>
                                </a>
                            </div>
                        <?php }?>                        
                        <?php
                        if($nextPost) {
                            $nexttitle = get_the_title($nextPost);
                            $nextimage = catch_that_image_from_post($nextPost);
                            $nextlink = get_permalink($nextPost);
                            ?>
                            <div>
                                <a rel="external" href="<? echo $nextlink ?>">
                                    <div>
                                        <div>                            
                                            <img src="<? echo $nextimage ?>" alt="<? echo $nexttitle ?>" width="150" height="150" border="0" />                                
                                        </div>
                                        <?php echo $nexttitle; ?>                                                                            
                                    </div><!-- end of .next-link -->
                                    <div>
                                        <img src="<?php echo get_stylesheet_directory_uri() . '/images/adelante.png' ?>" alt="forward" width="50" border="0" />
                                    </div>
                                </a>
                            </div><!-- end of .next -->
                        <?php }?>                        
                    </div><!-- end of .previous-next -->
                </div><!-- end of .previous-next-container -->

La primera parte del código es para indicar si hay artículo previo, artículo posterior o ambos (lo que le da un toque mas cercano), y a continuación entramos en sacar la imagen siguiente y la anterior.

Por último y para completar el asunto, es necesario darle forma al asunto. Para ello, utilizamos el siguiente estilo personalizado, que añadiremos al archivo «style.css» del tema hijo:

/* =Previous & Next
-------------------------------------------------------------- */

.previous-next-container{
	width: 100%;
}
.previous-next-container h3 {margin: 0 0 5px 0; } 
.previous-next{
	font-size: 12px;
    margin: 0px auto;
}
.previous:hover {background-color: #ddd;}
.previous{
	float: left;
	display: block;
	padding: 4px
}
.previous-icon{
	float: left;
	height: 100%;
	vertical-align:middle;
}
.previous-link{
	float: left;
	width: 150px;
}

.next:hover {background-color: #ddd;}
.next{
	float: right;
	display: block;
	width: 50%
	padding: 4px
}
.next-link{
	float: left;
	width: 150px;
}

.next-icon{
	float: right;
	height: 100%;
	vertical-align:middle;
}

Y ya está. Por supuesto que las flechas que indican posterior y siguiente las he creado con Inkscape, utilizando los complementos para la sombra arrojada.

Conclusiones

Este es el primero de los artículos referentes a los cambios en WordPress. Realmente, es muy sencillo, a la vez que interesante. Por otro lado, actualmente, si quieres desarrollar e implementar aplicaciones, casi para cualquier sistema operativo, y lenguaje de programación, casi que terminas por pasar por css y html, así que aunque esto no te sea plenamente productivo si que es recomendable darle un vistazo al código, puesto que siempre se sacan conclusiones interesantes…

Espero que aquellos que son seguidores de Ubuntu, entiendan esta serie de artículos, básicamente por la motivación que he comentado anteriormente. De cualquier modo, «el saber no ocupa lugar», o por lo menos eso es lo que dicen… (esto no es del todo cierto, porque las enciclopedias de antes, llenaban mas de una estantería, aunque muchas veces solo para adornar…)

atareao con Linux