Wordpress | Cortesía de Pixabay
Que tal, saludos a todos:
Soy usuario de Wordpress desde el 2009 cuando conocí por primera vez este CMS (Content Management System) cuando hice un blog para mi hermano. Para quien no conozca aún Wordpress les comento brevemente que gracias a este sistema pueden hacer un blog en poco tiempo (desde minutos hasta unas horas como máximo) sin saber nada de programación pues ya todo está prearmado en Wordpress, solo subir los temas y plugins que gustemos, activarlos y configurarlos a nuestro gusto y listo.
Es genial esto, pero también está lleno de malas prácticas que hasta el día de hoy sigo viendo. Una de ellas es mediante la hoja de estilos principal del tema instalado en Wordpress es ajustar al 100% el ancho de todas las imágenes. De verdad yo no entiendo esa "manía" de ajustar a todo el ancho disponible cualquier imagen, ¿PARA QUE QUEREMOS UNA IMAGEN AL 100% SIEMPRE?, de veras que no entiendo y es una de las cosas que francamente más me molestan de los temas de Wordpress, y lo mismo es para las tablas.
Ok, ustedes dirán: "pues ve a la hoja de estilos y quita esa característica", sí, es cierto; desde ahí se puede quitar, salvo que la mayoría de las veces la hoja de estilos es una auténtica selva haciendo que tome mucho tiempo corregir ese problema. Pero bueno, supongo que es parte del ecosistema junto con otras malas prácticas de programación que hay en otros entornos.
Pero el objetivo de este post no es solo quejarse de un problema, sino buscar soluciones. Como mencioné antes, es posible buscar en la hoja de estilos la sección que ocasiona ese efecto molesto y quitarlo, pero encontré que no "es tan malo" para todos los casos. Hace diez o quince años atrás solo diseñábamos páginas web y blogs para funcionar sin problemas en cualquier navegador web, pero de escritorio únicamente. Hoy en día no es así, nuestra web debe verse bien tanto en PC como en un teléfono celular o una tableta.
Entonces, para estos casos (por lo menos en el celular) si conviene que el ancho de las imágenes sea el 100% debido al reducido tamaño de pantalla de cualquier celular (sobretodo si vamos a mostrar fotografías u otras imágenes de tamaño considerable), pero para PC no, teniendo que cancelar ese efecto si navegamos por este dispositivo y a continuación muestro un método muy sencillo para conseguir esto.
Wordpress incorpora un método nativo para detectar si estamos la web desde un dispositivo móvil o no y vamos a usarlo para anexar una hoja de estilos extra que cancele el 100% de nuestras imágenes pero solo en PC y evitando con ello tocar la hoja de estilos principal.
Colocaremos esto en el archivo "header.php" de nuestro tema (el nombre puede variar dependiendo del tema instalado).
<?php
wp_head();
if(wp_is_mobile() == false)
echo '<link rel="stylesheet" type="text/css" href="'.get_template_directory_uri().'/extra.css?time='.time().'">';
?>
Esto va dentro de nuestra sección <header></header>, guardaremos los cambios.
Crearemos el archivo "extra.css" que guardaremos en la carpeta inicial del tema a modificar y le anexaremos las siguientes líneas:
img
{
max-width: 600px;
max-height: 400px;
}
Donde max-width y max-height es el tamaño máximo que debe tener nuestra imagen a la que no queramos que se le cambie el tamaño por 100% (nota, yo probé con tamaños auto pero no resultó), subimos todo y listo, ya nuestro blog solo muestra el 100% de ancho en las imágenes en dispositivos móviles.
Versión móvil de un blog usando Wordpress:
Versión PC de un blog usando Wordpress:
