En el proceso de crear un tema para WordPress podemos empezar por la creación o migración de un sitio en HTML / CSS y JS o desde una plantilla HTML de terceros. Aunque existe el plugin HTML Import 2 aquí veremos cómo crear un tema propio para WordPress a partir de una plantilla HTML / CSS y JS.
Básicamente debemos de encontrar en ese HTML aquello que debe ser dinámico, aquello que debe cambiar según la configuración de WP o que debe ser editable desde el backend y sustituir ese HTML por PHP.
En esta primera parte de una serie de artículos sobre la creación de temas para WordPress veremos:
De HTML a WordPress (Preparando el entorno de desarrollo)
Diseccionando el index.html
Encolar los archivos CSS y JS
Sustituir lo estático por lo dinámico (template tags)
El Loop
Resto de páginas (distintos Loops)
Contenido dinámico
En el siguiente artículo publicaremos el proceso de conversión de una una plantilla HTML / CSS / JS a un tema de WordPress gratuito que subiré al repositorio.
Empezamos
1. De HTML a WordPress (Preparando el entorno de desarrollo)
Importamos contenido dummy (falso) para poder trabajar. Nos descargamos el archivo XML del Codex. En nuestro WP –> Herramientas –> Importar –> WordPress –> Instalamos plugin –> Ejecutar importador –> subimos el archivo XML que nos hemos descargado –> Dejamos los autores tal como están pero marcamos la casilla de importar los datos adjuntos.
Para no trabajar desde cero comenzaremos con un starter theme, nos descargamos el tema http://underscores.me/ (de código abierto, gratuito y creado por Automattic) En las opciones marcamos la opción Sassify para tener los archivos SASS. Lo instalamos en nuestro WP –> Apariencia –> Temas –> Añadir nuevo.
Abrimos la carpeta de nuestro tema en nuestro editor (Brackets, Sublime Text o mejor VS Code).
En esa misma carpeta metemos los archivos HTML / CSS y JS a convertir.
2. Diseccionando el index.html
La mayoría de las plantillas para WordPress actuales tienen la opción de mostrar un diseño diferente en la home de nuestro sitio que en las páginas de su interior. En nuestra plantilla HTML el archivo index.html sería la home. Lo tienes que dividir en 4 partes: header, contenido, footer y sidebar (este último es opcional).
El header.php contiene desde <!doctype HTML> hasta aquello que se va a repetir en todas las páginas, normalmente hasta el menú.
El contenido (index.php, single.php, archive.php, front-page.php…) es aquello que dinámicamente muestra según la página que se visite (una entrada, una página, un producto…)
El footer.php contiene aquello que se repite al final de todas las páginas, termina con </html>
El sidebar.php contiene el código que muestra la barra lateral, si no vas a usarla puedes omitirlo
El tema Underscores trae por defecto creados ya los acrhivos header.php, index.php, footer.php y sidebar.php Debes editar cada uno para poner el marcado HTML que has creado, con sus clases CSS.
3. Encolar los archivos CSS y JS
Si la plantilla HTML tiene archivos CSS y JS lo ideal es sustituir sus llamadas en el HTML a una función dinámica de WP que encola esos archivos. En el tema Underscores, en el archivo functions.php ya tienes la función creada, sólo tienes que añadir los archivos.
Ejemplo para encolar el archivo main.css (*) y el jquery.scrollex.min.js dependiente de jQuery de esta forma:
* Nota: como seguramente utilices SASS lo mejor es que compiles ese archivo junto a los de Underscores y los que tú añadas en el style.css y así sólo cargas un CSS.
4. Sustituir lo estático por lo dinámico (template tags)
Aquello que sea dinámico se marca con PHP <php código PHP ?> para ello utilizamos las templates tags.
Como WP trabaja con PHP vimos cómo en el mismo archivo conviven perfectamente estos dos lenguajes HTML y PHP, de forma que aquello que queremos que sea dinámico lo cambiamos a PHP, por ejemplo para poner el título del sitio en vez de poner
<h1>El título de mi sitio</h1>
ponemos
<h1><?php blogingo(‘name’); ?></h1>
Son lo que llamamos las “template tags”. La sintaxis básica será:
Abrimos PHP
<?php
Nombre de la template tag + () + ; <- en algunas ocasiones dentro de los paréntesis indicaríamos uno o varios parámetros por ejemplo ‘name’
bloginfo(‘name’);
Cerramos PHP
?>
Ejemplos:
<?php blogingo('name'); ?> <- Imprime el Título del sitio indicado en Ajustes –> Generales
<?php get_header(); ?> <- Inserta el archivo del tema llamado header.php
Hay algunos template tags que no imprimen el resultado, normalmente se diferencian de otras porque empiezan por get, por ejemplo tenemos the_title() y get_the_title(), si queremos imprimirlo (que se muestre en el navegador) utilizaríamos “echo” pudiendo concatenar con puntos HTML y PHP
<?php echo '<h1>El título de esta entrada es '. get_the_title() . '</h1>'; ?>
Nota: Si queremos que el texto sea traducible utilizaremos la función _e() para imprimir las cadenas de texto.
_e( 'El título de esta entrada es', 'textdomain' );
Por ejemplo para referenciar la ruta a una imagen subida a tu tema a la carpeta img pondrías
Luego está la parte que carga dinámicamente el contenido (entradas, productos o ítems de portfolio), es lo que se conoce como el Loop, tiene esta sintaxis:
Es un condicional que accede a la BBDD para ver si hay contenido. Si hay contenido mostrará uno de los contenidos (máximo el número indicado en ajustes, por defecto 10) con la plantilla del acrhivo «content-home.php» que está en la carpeta «template-parts». En ese archivo tendrás que utilizar otras template tags como the_title, the_permalink (el enlace a ese contenido), the_excerpt (el extracto o resumen).
6. Resto de páginas (distintos Loops)
En las partes donde se muestran artículos (o productos si fuera una tienda) seguimos utilizando el Loop de WordPress, dependiendo de qué página sea visitada se mostrarán el loop devolverá de la BBDD algo distinto. Por ejemplo en la página de una categoría se muestran sólo los que pertenecen a esa categoría, en la de fecha sólo de esa fecha, etc. El loop de un artículo tiene la misma sintaxis que cualquier otro pero lo que muestre de la BBDD será distinto del que usarás en la home.
El loop siempre tiene la misma sintaxis:
<?php if (have_posts()) : ?>
<!—Se comprueba que existan entradas publicadas. -->
<?php while (have_posts()) : the_post(); ?>
<!—En el caso de que existan se crea un bucle por el número de publicaciones que hayamos definido en Ajustes – Lectura, por defecto son 10 entradas. -->
<!—Aquí se pone lo que queramos que se muestre de cada publicación, por ejemplo el título, la imagen destacada, el autor, la fecha, etc. En vez de ponerlo aquí podemos ponerlo en un archivo vinculado con get_template_part(). Por ejemplo get_template_part( 'template-parts/content', 'single' ); -->
<!—Cargamos el archivo content-none.php con lo que queramos que aparezca si no hay ninguna entrada publicada. -->
<?php endif; ?>
El proceso es el mismo, sólo tendrás que cambiar la ruta del archivo PHP en get_template_part() en single.php a por ejemplo a get_template_part( 'template-parts/content', 'single' );
En el archivo content-single.php en vez de mostrar el excerpt mostrarás todo el contenido de ese artículo con la template tag the_content().
Puedes ayudarte del plugin What The File para ver qué archivo de tu tema es el que se está cogiendo, para la portada te aconsejo que hagas un archivo front-page.php, si recuerdas la jerarquía de WP cuando no existe un archivo más específico se tira de index.php por eso hacemos uno específico para la portada si buscamos un diseño único.
7. Contenido dinámico
La home o página de inicio además de poder tener un diseño distinto, de mostrar las últimas entradas, testimonios, portafolio puede tener algún contenido (texto + multimedia) propio. Para que sea editable y dinámico creas una página en WP y esa página la pones en los Ajustes -> Lectura como página de portada.
Otra forma de añadir contenido dinámico es con los Custom Fields. Puedes crearlos para hacer editable los títulos y textos que ahora son Lorem puedes añadir a la página que pongas como inicio Custom Fields, puedes crearlos con este plugin y luego los llamas en front-page.php con
En próximos artículos publicaremos el caso práctico real donde convertiremos una plantilla HTML / CSS / JS a un tema de WordPress que pondré a vuestra disposición para que podáis ver el código y/o utilizarlo de forma gratuita en vuestro WordPress.
Un dominio, un nombre por el que entrar a tu web desde un navegador, otra opción sería tener un subdominio
Un hosting o alojamiento web, un servidor, un ordenador que aloje los archivos y la base de datos de tu web y que esté conectado a Internet 24/7
0. Introducción. El mercado de los dominios y alojamientos
Aunque vamos a ver cómo tener ambos de forma gratuita os explico un poco cómo funciona su mercado.
Ambos productos, tanto el dominio como el hosting, puedes adquirirlos por separado o en la misma empresa. Los dominios se contratan de forma anual y el alojamiento puedes contratarlo mensual o anualmente aunque lo habitual es también hacer el pago anual.
El coste de un dominio, dependiendo de su extensión, puede ser bastante económico, menos de 10€, el alojamiento es algo más, depende de sus características. Funciona como los planes de las teleoperadoras móviles.
Los proveedores presentan los planes de hosting resaltando “el recomendado” con características que debemos estudiar antes de decidirnos, si buscamos tener un WordPress es imprescindible que nos permita tener PHP y al menos una Base de Datos, luego está ya el espacio en disco para alojar archivos, la transferencia de archivos, cuentas de email, características del servidor, etc.
Normalmente ofrecen ofertas jugosas para el primer año, estudia y compara si luego de ese primer año te va a convenir seguir en esa empresa sin los descuentos. Aunque si hemos hecho una mala elección o simplemente nuestro sitio lo está petando y por ejemplo necesitamos más transferencia de datos siempre podemos cambiar de plan, como os decía, funcionan igual que las teleoperadores móviles, si te quedas sin datos siempre puedes contratar más.
Decidir con qué empresa trabajar tampoco es una decisión vitalicia, puedes migrar o transferir tanto tu dominio como la base de datos y los archivos de tu web a otra empresa cuando lo necesites.
Ahora os explicaré paso por paso lo que hay que hacer para tener tu propio WordPress bajo un dominio .design y un hosting gratuito. Si no gustas de leer te dejo un esquema con los pasos a seguir:
Contratar uno de pago (tiene que tener al menos una BBDD)
Apuntar el dominio a los servidores. Si has elegido el dominio .design gratuito entra en porkbun y despliega los «details» de tu dominio. En Nameservers de la columna central borra lo que hay y pega los nameservers de tu hosting. Si has optado por Infinity Free usa estos Nameservers
1. Conseguir un dominio .design gratuito
Antes de adquirir un dominio debemos pensar y repensar, el naming es muy importante. Y luego hay que tener suerte para que esté libre. Hay sitios que te pueden ayudar a encontrar el dominio adecuado insertando alguna palabra clave, aquí hice una recopilación de sitios webs que nos ayudan a elegir un dominio
Luego hacemos una preselección siguiendo estos consejos:
Original,
breve,
simple,
fácil de recordar.
¿Lo tienes? Ahora hay que tener suerte para que esté libre. Comprobar su disponibilidad. Y en esto influye qué dominio de nivel superior (TLD) nos conviene, en nuestro ejemplo necesitamos que esté libre el .design
O para que nos entendamos extensiones para dominios, haber hay muchísimas. Las más habituales son las .com y .es, aunque en nuestro caso vamos a optar por .design porque podemos conseguirla a coste cero. Hace algún tiempo estaban los dominios gratuitos tk que regalaba el gobierno de Tokelau, un país del Pacífico sur para promocionarse pero hoy día ya lo lleva una empresa holandesa y no es posible adquirirlos gratuitamente.
Tienes que registrarte y poner los datos de pago, tu tarjeta bancaria, pero te aseguro que no hacen ningún cargo. Si no deseas adquirir el dominio gratuito por cualquier motivo siempre puedes optar en el hosting por un subdominio gratuito.
El dominio en Porkbun será gratis sólo el primer año así que si no quieres llevarte sorpresas puedes desactivar la renovación automática para que tú decidas si quieres renovar o transferir el dominio a otra empresa cuando cumplas el año.
Es gratis sólo el primer año así que si no quieres llevarte sorpresas puedes desactivar la renovación automática para que tú decidas si quieres renovar o transferir el dominio a otra empresa cuando cumplas el año.
En verde activada, en gris desactivada.
¡Listo! Ya tienes tu dominio .design gratuito
2. Conseguir un Hosting o alojamiento web gratuito
Servicios de hosting gratuito hay también varios, normalmente como gancho para que pases a un plan de pago, asociados a la adquisición de un dominio, velocidad de pena, cortes programados del servicio, con acceso privado mediante unas claves… Nadie da duros a cuatro pesetas, qué viejuno que soy ;)
Los hostings gratuitos son para es testear, para aprender, para tener un sitio de pruebas, para un proyecto personal de presupuesto cero. Algunas opciones:
Hosting para WordPress | Gratis para siempre | Piensa Solutions (actualizado nov 2023) – Un hosting gratuito en el que podrás tener tu WordPress o lo que gustes gratis para siempre, no te hace falta contratar un dominio, al darte de alta se te asignará un subdominio.
Web Hosting Gratis Con PHP, MySQL Y cPanel, Sin Publicidad – si el idioma es un problema, aquí está todo en español aunque la pega es que tu web no estará activa durante una hora a la semana https://es.000webhost.com/
Un tercer paso es decirle al dominio que tu web está alojada en el servidor XXX. Para ello tienes que editar los Nameservers en eldominio.
En Porkbun están en la columna central cuando despliegas los “Details” de tu dominio. Editas la opción “AUTHORITATIVE NAMESERVERS”, borras lo que aparece y pones los de tu hosting. Si has optado por Infinity Free usa estos Nameservers
Una vez cambiados deberás esperar unas horas para que se propaguen las DNS.
4. Instalar un WordpPress
Ya tenemos dominio y hosting y ahora toca instalar WordPress, podemos hacerlo de forma manual o de forma automática. Para que os resulte más fácil veamos esta segunda opción.
Entras en el panel de control de tu hosting, suponemos que Infinity Free si has seguido todos los pasos y bajas hasta la sección de Software
Al entrar en Softaculous Apps Installer verás a WordPress en los Top Scripts y si no siempre puedes encontrarlo en el buscador de la barra lateral izquierda, desgraciadamente todavía en la sección de “Blogs” :( porque ¡WordPress no es sólo para Blogs 😠! como de hecho vais a comprobar.
La instalación automática es muy sencilla y rápida. Lo que sí te aconsejo es que cambies la sección de Admin Account:
el nombre de usuario y la contraseña que aparecen por defecto “admin” y “pass” porque no son precisamente seguras.
y el email,
Lo demás déjalo igual, lo podrás editar luego, baja y pincha en “Install”, en minutos o segundos te aparecerá la URL de tu WP público con tu dominio y la URL a tu panel de administración de WordPress.
Todo bueno, bonito y barato ;)
Ya tienes las llaves, ahora ve pensando y recopilando los muebles: textos, fotografías y vídeos porque en breve vamos a decorar tu casa.
Los recursos de tu servidor son finitos, el espacio en disco que tienes contratado puede acabarse si no gestionas bien la librería multimedia de tu WordPress. Seguramente cuando haces copias de seguridad es cuando eres consciente del enorme tamaño de tu sitio.
Un altísimo porcentaje de ese tamaño es por la carpeta «uploads» donde se guardan por defecto las imágenes y los archivos que subes a tu WordPress.
Claro que esto es lógico si consideramos que el 53% del peso de una web tipo son imágenes. Aunque no tan lógico cuando descubramos que muchas de las imágenes que guarda nuestro WordPress no sirven para nada.
En este artículo vamos a tratar de reducir en lo posible el tamaño de nuestra carpeta «uploads». Como más que un artículo me ha salido un libro os dejo un pequeño índice y si tienes prisa ve directamente a las conclusiones:
El primer problema es que el tamaño de esas imágenes puede no ser el adecuado, debes optimizarlas, así que lo primero que debes hacer es tener optimizadas esas imágenes, previa subida o mediante plugins como EWWW Image Optimizer o con ShortPixel cuyos brutales resultados explico en Cómo optimizar las imágenes de tu WordPress
El segundo problema, que es el que vamos a tratar en este artículo, es que puedes tener muchas imágenes en tu servidor que nunca se utilizan en tu sitio web, así que veremos cómo identificarlas y cómo deshacerte de imágenes que no sirven para absolutamente nada y están ocupado un preciado espacio.
Lo primero que tenemos que hacer es una copia de seguridad, no sólo de la carpeta uploads sino también de la BBDD.
1. Cómo guarda WordPress la información de las imágenes en la BBDD
La tabla wp_posts además de guardar la info de entradas, páginas, revisiones y CPT guarda la info de cada imagen donde:
post_type será attachment,
post_parent será el ID de la publicación a la que se adjunta
guid se guarda la ruta absoluta al archivo.
Y en la tabla wp_postmeta es donde se almacenan otros metadatos:
_wp_attachment_image_alt guarda el contenido del atributo ALT
_wp_attached_file guarda la ruta relativa dentro de «uploads»
_wp_attachment_metadata guarda la información sobre distintos tamaños de imagen, algo de lo que hablaremos más adelante.
2. Identificar y eliminar las imágenes inútiles de nuestro WordPress
Depende del tipo y edad de tu proyecto:
este sitio, un simple blog de 11 años que tiene 8.649 elementos multimedia que ocupan 2,2 GB
mientras que elfinalde.com con sólo 2 años tiene ya 70.476 elementos que ocupan 26,5 GB
En este artículo veremos cómo reducir el tamaño de esa carpeta:
Identificar esas imágenes inútiles y
Cómo eliminarlas.
2. 1. Cómo identificar imágenes que no usamos
Hay dos tipos de imágenes que debemos identificar:
las imágenes que por algún motivo subimos a nuestro WordPress pero que no utilizamos, serían las imágenes sin adjuntar
una misma imagen suele tener distintas versiones, debemos identificar cuáles usamos y cuáles no
2.1.1.- Identificar elementos multimedia sin adjuntar
Imágenes, vídeos o audios o archivos PDF que subiste pero que no añadiste a ninguna publicación. Estos elementos puedes verlos desde Medios > Biblioteca y en el primer desplegable donde pone «Todos los medios» elegir «Sin adjuntar».
Debes revisarlo de vez en cuando, aquí quedan esas imágenes que subimos desde la biblioteca para un posible artículo pero que nunca llegamos a publicar o imágenes de publicaciones que han pasado a mejor vida porque aunque las hayas eliminado de la papelera los archivos adjuntos no se eliminan.
Pero mucho cuidado, que aunque aparezcan como medios «Sin adjuntar» no siempre significa que no lo utilices. Una imagen sólo se adjunta a una publicación (Entrada, página o Custom Post Type) Va a ser una imagen «Sin adjuntar» aunque útil cuando:
una imagen subida a la biblioteca la usas sólo como Imagen destacada
una imagen subida a la biblioteca la uses en algún widget
subas una imagen desde la edición un widget, aunque la uses en el mismo
Y por último también puede ocurrir que haya archivos adjuntos que no uses. Si escribiendo una entrada subes 10 imágenes pero luego no las insertas serán imágenes «adjuntas» pero inútiles.
Una solución parcial es instalar el plugin Find Posts Using Attachment que nos mostrará un listado de las publicaciones y la forma en que un medio está siendo usado (contenido o imagen destacada) o no usado. La info la tendremos en una nueva columna de la Biblioteca pero también en la página individual de cada imagen. Es una forma mucho más segura de saber si es una imagen útil que simplemente ver si está sin adjuntar aunque no detecta si la imagen se usa en un widget o shortcode.
Otro plugin interesante para la gestión de medios aunque todavía en beta es Media Usage. Este plugin nos muestra en una nueva columna las distintas versiones de una imagen, iconos con la inicial del ID del tamaño. Al hacer clic en ellos accedemos a las estadísticas de uso de esa imagen, por IP y desde qué página. Ojo, como te habrás imaginado una imagen sin visitas no tiene porqué ser inútil.
En cualquier caso antes de eliminar cualquier imagen y como medida extra de seguridad os aconsejo activar la papelera en la Biblioteca de Medios añadiendo esto a wp-config.php
2.1.2. Identificar los tamaños de imagen que me sobran
Todo WordPress crea por defecto distintas versiones de una misma imagen. El número de archivos y sus tamaños vienen definidos por:
Imagen original
La configuración de medios
Imágenes responsive añadidas por el propio Core
El tema que utilices
Algún plugin
2.1.2.1. Imagen original
El archivo original lógicamente ocupa se guarda y ocupa espacio, no deberíamos subir archivos mayores del tamaño máximo que vayamos a necesitar. Es decir, si el tamaño mayor de imagen que vamos a utilizar es de 1024px de ancho lo ideal es subir todas las imágenes a ese ancho, no más.
Debemos tener en cuenta que si subimos una imagen de menor resolución a otras versiones que necesitamos no se crearán dichas versiones, es decir, WordPress puede escalar una imagen reduciendo su tamaño pero nunca ampliando. Siguiendo el ejemplo anterior si subimos una imagen de 1023 píxeles de ancho la imagen de 1024px no se creará.
2.1.2.2. Imágenes creadas por los ajustes de WordPress
En Ajuste > Medios se especifican 3 tamaños: miniatura, medio y grande que luego puedes utilizar desde el editor, que se creen los 3 dependerá del tamaño del original como explicado en el apartado anterior.
Tendrás que pensar si utilizas estos 3 tamaños cuando:
publicas desde el editor
desde el tema (ver en 1.2.4 cómo averiguarlo)
2.1.2.3. Imágenes responsive añadidas por el propio Core
Desde la versión 4.4 WordPress añade a la etiqueta HTML <img> los atributos scrset y sizes sirviendo un tamaño acorde con la resolución del dispositivo de todos los tamaños disponibles de una imagen. Ahorramos ancho de banda y ganamos en velocidad.
Además se añadió una función para crear un tamaño extra, llamado medium_large para resoluciones de 768px de ancho.
2.1.2.4. Imágenes que crea el propio tema
El tema que utilices puede añadir nuevos tamaños a través de add_image_size haz una búsqueda de esta función en los archivos de tu tema para saber qué tamaños añade.
Por ejemplo el tema Twenty Seventeen añade dos nuevos tamaños en su archivo functions.php
Para saber dónde se utilizan estas imágenes podemos volver a hacer una búsqueda pero esta vez por el nombre del tamaño de imagen. Generalmente los distintos tamaños de imagen se pintan usando
the_post_thumbnail( 'nombre del tamaño de imagen: thumbnail | medium | medium-large | full | twentyseventeen-featured-image | ... ' );
Aunque también se pueden usar otras resoluciones no registradas:
Siguiendo con el tema Twenty Seventeen si buscamos «twentyseventeen-featured-image" lo encontramos en 8 archivos, en header.php, en los de front page y en todos los archivos de loop de single incluidos los formatos de entrada. En resumen, el tema utiliza este imagen de 2000×1200 como imagen de cabecera.
Ahora busquemos la otra imagen, la llamada twentyseventeen-thumbnail-avatar y ¡sorpresa! no hay ningún archivo que pinte esta imagen de 100×100, hemos encontrado una imagen completamente inútil.
2.1.2.5. Imágenes creadas por plugins
Los plugins también pueden utilizar add_image_size Por ejemplo:
el plugin Featured Image Admin Thumbañade una imagen de 60×60 desde add_image_size( $this->fiat_image_size, 60, 60, array( 'center', 'center' ) );
El plugin Jetpack añade una de 50×50 para el módulo de portafolios con add_image_size( 'jetpack-portfolio-admin-thumb', 50, 50, true );
El widget del plugin SiteOrigin Post Carousel añade uno de 272×182 con add_image_size('sow-carousel-default', 272, 182, true);
Puedes escanear tu carpeta de plugins en busca de «add_image_size» para ver qué plugins añaden versiones de imágenes. Ten en cuenta que si desactivas y borras el plugin las imágenes que haya creado no se eliminarán.
Nota: Las imágenes que crean los plugins puede que no se guarden con la misma estructura de año/mes y lo hagan en una carpeta independiente cuyo nombre probablemente haga alusión al del plugin.
Nota 2: El bloque de Imagen del proyecto Gutenberg (versión 1.9.1 del plugin) lista todos los tamaños de una imagen, no sólo el original y los 3 por defecto. Podemos elegir también cualquier otro tamaño que haya sido creado desde el tema o desde un plugin.
2.2. Cómo eliminar y dejar de crear las imágenes inútiles
Una vez que detectamos aquellas imágenes inútiles que no hacen más que consumir recursos debemos eliminar las que tengamos ya creadas y decirle a WordPress que deje de crearlas.
2.2.1. Eliminar imágenes inútiles
Si tu WP es nuevo puedes saltarte este paso pero si llevas un tiempo con él lo más probable es que tengas un montón de imágenes inútiles en tu servidor.
Veremos cómo deshacernos de todas esas imágenes que se han estado creando y que sólo sirven para ocupar espacio.
Digamos que has cambiado los ajustes de medios o has cambiado de tema. Surgirán dos problemas:
El nuevo tema utiliza tamaños de imagen nuevos, por ejemplo uno de 275×275
El tema viejo utilizaba tamaños de imagen que ya no necesitas, por ejemplo uno de 450×250
El plugin Regenerate Thumbnails Reminder te advertirá si surge algún problema del tipo 1, si detecta algún tamaño nuevo te recomendará que regeneres ese nuevo tamaño para las imágenes que ya tenías subidas. El plugin que ya hemos comentado Media Usage muestra con iconos las versiones de cada imagen de forma que puedes comprobar si hay variaciones entre los tamaños nuevos y los antiguos.
Vamos a ver cómo regenerar estos nuevos tamaños.
2.2.1.2 Cómo volver a crear los nuevos tamaños útiles en imágenes antiguas
Para que todas tus imágenes antiguas tengan las versiones nuevas de tamaño útiles, en nuestro caso el nuevo tamaño 275×275 tenemos muchos plugins, el más famoso y clásico ya Regenerate Thumbnails. Hace exactamente lo que pedimos regenerar en lote o individualmente los nuevos tamaños sin borrar ningún tamaño antiguo. Veamos otras opciones:
Plugins que regeneran y también eliminan imágenes inútiles
Image Regenerate & Select Crop: Divide la acción de regenerar por tamaño, tipo de publicación a la que se ha adjuntado, calidad para regenerarla, además si es un tamaño recortado puedes elegir el punto de anclaje. Puedes desactivar el tamaño que quieras y también eliminar todas las imágenes pertenecientes a ese tamaño para luego regenerarlas. Muy, muy completo.
reGenerate Thumbnails Advanced: elimina todos los tamaños que no estén activos además de regenerar los nuevos tamaños, puedes elegir el período de tiempo de las imágenes a regenerar. Tendremos información del proceso así como un log de errores, por ejemplo si hay algún medio que no es una imagen.
Force Regenerate Thumbnails: elimina todos los tamaños que no estén activos además de regenerar los nuevos tamaños, te muestra un resumen de esos tamaños eliminados y regenerados.
ONet Regenerate Thumbnails: Puedes regenerar las imágenes en lote como muchos otros pero además puedes elegir el ratio de compresión, añadir un botón al lado del uploader del editor de publicaciones y crear nuevos tamaños de imagen. No elimina ninguna imagen.
Simple Image Sizes: Este plugin mejora la página Ajustes > Medios mostrando todos los tamaños disponibles y pudiendo crear los nuestros. De cada tamaño puedes editar su tamaño, recorte e incluso dando la opción de que un tamaño añadido por un tema, un plugin o creado por nosotros esté disponible en el editor. Por último permite regenerar aquellos tamaños que seleccionemos. No elimina ningún archivo.
Thumbnails (Miniaturas): en vez de regenerar todas las imágenes, las crea y cachea cuando se necesitan evitando procesar una gran cantidad de imágenes. Además puede añadir la Imagen Destacada a entradas que no tengan ninguna asignada. Es muy útil cuando un tema o plugin crea un tamaño sin ID, por ejemplo los plugins de sliders suelen usar tamaños específicos.
2.2.2.2 Cómo eliminar los tamaños inútiles de imágenes antiguas
Otra opción es hacerlo de forma manual, aunque no es aconsejable puedes usar por ejemplo Filezilla. Haces una búsqueda recursiva (icono prismáticos) en la carpeta uploads de archivos que contengan «-300x» y te devolverá todos los archivos cuyo ancho es 300px. Ej: imagen-inutil-300x127.jpg
Si tienes acceso por SSH a tu servidor puedes hacer lo mismo yendo al directorio wp-content/uploads y luego ejecutando
find . -name "*-300x*" -type f -delete
Bonus: Actualizar el HTML después de regenerar y eliminar
Regenerar y eliminar las imágenes no modifica el contenido de tus publicaciones, si pusiste una imagen de tamaño grande en una página y luego cambiaste su tamaño esa página seguirá buscando la imagen antigua. Afortunadamente tenemos una solución:
Regenerate Thumbnails HTML: Muy útil sobre todo cuando los cambios son en los ajustes de Medios. Digamos que en mis entradas he añadido imágenes de tamaño medio durante meses cuyo tamaño máximo son 300px y ahora decido cambiarlo a 250px, si vamos a la pestaña HTML de una de esas entradas vemos que WP ha estado generando este código
Donde la ruta del archivo será aquella versión de ancho 300, lo sabemos por el sufijo del nombre del archivo «nombre-archivo-anchoxalto.jpg» y que el atributo width toma como valor también los 300px. WordPress no actualiza este HTML aunque hayamos cambiado el tamaño medio, sigue llamando a la imagen anterior incluso si la eliminamos lo que puede resultar en enlaces rotos.
Este plugin te permite hacer una búsqueda de etiquetas img según el atributo ancho y el ID del tamaño. Si da resultados puedes actualizar el HTML de tus publicaciones.
2.2.1.3. Eliminar imágenes sin adjuntar
Las podemos eliminar desde la misma Biblioteca de medios como hemos visto antes o pero mejor utilizando el plugin gratuito Media Cleaner, DNUI o incluso mejor el plugin Theia Upload Cleaner for WordPress que trae funciones extras. Estos plugins escanearán más a fondo la BBDD que un simple filtro de imágenes sin adjuntar que como vimos en el apartado sobre identificar imágenes sin adjuntar no siempre te asegura que sea inútil.
Entre las ventajas de estos plugins están:
que cuando eliminas las imágenes además de enviarla a la papelera las mueve a otro directorio (uploads/wpmc-trash en el caso de Media Cleaner) y Theia Upload Cleaner además te crea una copia de seguridad. Si envías una imagen a la papelera desde la Biblioteca de Medios los archivos se quedarán en el mismo sitio
también escaneará posibles imágenes utilizadas en widgets, galerías o shortcodes
detectará como inútil aquellas imágenes adjuntadas pero que realmente no se utilizan
Theia Upload Cleaner permite eliminar tamaños inútiles de imagen
Image Cleanup ofrece una interfaz más pobre que los otros, de hecho no tenemos una miniatura de la imagen aunque es muy potente indexando todas las imágenes posibles.
Como dijimos al principio del artículo recuerda que antes de eliminar cualquier imagen debemos hacer una copia de seguridad de la carpeta uploads y de la BBDD.
2.2.2. Dejar de crear tamaños de imagen inútiles
Añadiendo esta función evitarás que se creen tamaños de imagen especificados tanto en los ajustes, en el Core, en un plugin o en un tema.
function no_crear_useless_image_sizes ($sizes) {
unset( $sizes['medium']); /* tamaño por defecto (ver otro método 2.2.1) */
unset( $sizes['medium_large']); /* tamaño responsive (ver 2.2.2) */
unset( $sizes['jetpack-portfolio-admin-thumb']); /* tamaño del plugin Jetpack (ver 2.2.3) */
unset( $sizes['twentyseventeen-thumbnail-avatar']); /* tamaño del tema Twenty Seventeen (ver 2.2.3) */
return $sizes;
}
La función se la pasamos al hook intermediate_image_sizes_advanced que filtra todos los tamaños que genera WP automáticamente cada vez que subamos una imagen.
En principio puedes añadirlo a tu archivo functions.php o mejor al functions.php de un tema hijo o como plugin.
Si no quieres meterte en código puedes utilizar el plugin que hemos comentado antes Image Regenerate & Select Crop para desactivar tamaños de imagen.
Otra opción es usar el plugin gratuito Optimize Images Resizing lo que hace es generar los tamaños sólo cuando se necesitan, no cuando se sube una imagen, es decir, este plugin evitaría que se generara el tamaño twentyseventeen-thumbnail-avatar del tema Twenty Seventeen porque jamás se va a necesitar. También puedes eliminar con él las imágenes inútiles antiguas.
Me parece muy interesante para algunos tipos de proyectos que por ejemplo utilicen muchos tamaños y tengan una enorme librería de medios. Para un sitio al uso es un poco arriesgado dejar que WP genere el tamaño X cuando un usuario visite tu esa página.
2.2.2.1. Dejar de crear tamaños por defecto
Para que WordPress no genere alguna o todas las versiones que por defecto crea (thumbnail, medium y large) de cada imagen podemos ir a Ajustes > Medios y definir en cero los anchos y altos de las imágenes que nos sobren.
Con esta configuración no se crearían imágenes de tamaño medio (‘medium’)
2.2.2.2. Dejar de crear el tamaño responsive medium-large
Igual quieres que WP no cree una versión de 768px de ancho de todas tus imágenes, quizás no porque no te preocupa esto de las imágenes responsive sino porque tu tema ya crea una imagen de este tamaño o casi y ves absurdo tener dos.
2.2.2.3. Dejar de crear tamaños de plugins y temas
Podemos evitar que se creen imágenes inútiles desde plugins o temas, simplemente conociendo el nombre de esa imagen. Si la función que hemos visto antes la añades al archivo functions.php debe estar después de que se haya definido el tamaño con add_image_size de ahí que os recomiendo hacerlo mejor desde un tema hijo.
3. Conclusiones
Tener optimizado tu WordPress es un trabajo de detalles, hay muchos factores en los que pensar, uno de ellos son los archivos. Como empezamos el artículo, tu servidor tiene un espacio finito.
Resumen de pasos facilito y con plugins:
Hagas una copia de seguridad
Instales Image Regenerate & Select Crop y veas todos los tamaños que se están generando por cada imagen ¿De verdad los necesitas todos? Imagino que si estás leyendo esto es porque piensas que no
Elimina las imágenes de los tamaños que no necesitas
Desactiva los tamaños que no necesites para que no se vuelvan a crear
Opcional: Si ves que alguno de los tamaños al margen de Miniatura, Medio y Grande te pueden ser útiles para incluirlos en alguna publicación en vez de tener que recortar o escalar la imagen instala el plugin Simple Image Sizes para añadirlo a los tamaños de inserción de imágenes del editor.
Además si has cambiado de tema o los ajustes de medios
Regenera los tamaños que han sido afectados
Instala el plugin Regenerate Thumbnails HTML para actualizar los cambios en el HTML de inserciones de imágenes de tamaños que han cambiado.
En el artículo Cómo eliminar las imágenes inútiles de WordPress vimos cómo configurar bien nuestro WordPress para que no genere versiones inútiles de una imagen. La idea era ahorrar espacio en el servidor, recursos, optimizar.
En este artículo vamos a ver cómo optimizar esas imágenes restantes, las que sí son útiles y mostramos a nuestros usuarios, ahora no sólo estaremos ahorrando recursos del servidor sino que mejoraremos la velocidad de nuestro sitio, su rendimiento y por tanto el posicionamiento y la experiencia de nuestros usuarios.
Tenía una versión «inútil», era muy parecida a la que crea WP para «responsive», la medium_large para resoluciones de 768px de ancho. Decidí quedarme sólo con 3 versiones de cada imagen además de la original. Es cierto que cuantos más tamaños disponga mejor resultado tendrás, pero en este proyecto el nº de imágenes es muy grande, así que opté por reducir las opciones, la mayoría se muestran pequeñas en una galería (100×100) y se amplían en una lightbox, además como tienen carga perezosa no me preocupa.
Así que para que WP no me creara el código de imágenes responsive con <picture> lo desactivé:
Existen varias soluciones, desde la manual hasta la automatización con un cron y la línea de comandos (ver WP CLI). En medio hay varios plugins que nos facilitan el proceso de optimización.
Yo he utilizado ShortPixel, un plugin freemium gratuito hasta 100 imágenes al mes. Antes había utilizado EWWW Image Optimizer porque el volumen de imágenes en elfinalde.com supera con creces la centena, en cambio en muchos sitios será más que suficiente con la versión gratuita de ShortPixel. La cuestión es que me contactaron para probarlo en elfinalde.com y el resultado ha sido brutal.
¡Alerta SPOILER! con ShortPixel pasé de 22,2GB a 9,9GB (ahorrado más de 12GB)
Principalmente el ratio de compresión es mucho mayor además de características como copias de seguridad. Puedes hacer un test online del % de optimización que puedes lograr con ShortPixel. En elfinalde ha sido del 79%. Siempre tendrás acceso a las estadísticas
La optimización se hace cada vez que subes una imagen aunque si ya tienes imágenes anteriores como era mi caso debes ejecutar la optimización en masa, por lotes. Tuve que procesar más de 70.000 imágenes, daros cuenta que cada tamaño es una imagen es 1 crédito, es decir, si tu sitio crea 4 versiones distintas de una imagen, el proceso se hará en 5 imágenes y también estarás consumiendo 5 créditos con ShortPixel. Por tanto asegúrate de no estar creando imágenes inútiles.
Entre las opciones os recomiendo que activéis la eliminación de datos EXIF y que limites el tamaño máximo sobre todo si esas subidas no son manuales, si la hace un cliente o es a través de una API, en mi caso lo he fijado a 1200px.
En los ajustes avanzados puede que te resulte llamativo crear una versión gratuita en formato WebP de Google. Con la configuración adecuada se incluirá esa versión en el elemento <picture> generado por WP. Yo lo hice, generé un imagen .webp por cada imagen pero me di cuenta que no sólo no ocupaban menos que su homónimo JPEG sino que muchas veces ocupaban más. Además de que si mi intención era ahorrar espacio en disco con esto lo estaba duplicando.
Otra opción que me dio problema es la de convertir los PNG en JPEG, aunque el proceso lo hace bien, la imagen destacada que usaba el PNG no se actualiza con el JPEG.
La optimización en lote te va informando del proceso, se hace en segundo plano y puedes seguir trabajando aunque siempre es recomendable no hacerlo por no saturar. Yo decidí para ahorrar créditos y recursos no optimizar las miniaturas, sólo las imágenes originales y tardó 4 días :O
Por último debes tener en cuenta que ShortPixel crea una copia de seguridad que te permite revertir ese proceso. Y claro, esa copia ocupa espacio en tu servidor, puedes eliminarla desde la misma interfaz de ShortPixel.
Conclusiones
Dependerá del tipo de web que tienes, si usas o no muchas imágenes. En un blog donde publiques un par de artículos a la semana tienes de sobra con ShortPixel gratuito pero en un proyecto con miles de imágenes tener bien optimizada tu librería de medios es muy importante. Date cuenta que no sólo ahorras el espacio en tu librería sino también cada vez que haces un simple backup.
Hace 1 minuto me he dado cuenta que este dominio lo compré un 25 de octubre de 2006, hace ya 11 años. Esta mañana lluviosa de beernes me apetece recordar esos comienzos a ver si vislumbro si a ceslava.com le queda sólo pasado o es posible un futuro.
Si ser viejuno tiene alguna ventaja es la de tener muchos recuerdos, confesables y no confesables ;)
La culpa fue del…
Todo comenzó dando un curso, quería compartir recursos con mis alumnos, compartir esos enlaces «favoritos» que añadía a del.icio.us ¿recordáis el ya extinto del.icio.us? Y también quería un sitio para comunicarme de forma asíncrona con los alumnos. Si me hacían una consulta por email la respuesta sólo podía consultarla el destinatario.
Así que me instalé un Joomla! y un Moodle. Tenía blog, foro y una plataforma de e-learning con cursos gratuitos de… FreeHand ;)
Cometí todos los errores que podía cometer como bloguero, con la excusa de que lo que publicaba era sólo para mis alumnos copié y pegué contenido, utilicé imágenes sin preocuparme de su autor y de darle crédito, hasta hice Hotlinking, un desastre vamos.
A los pocos meses te das cuenta que las estadísticas suman más que tus alumnos + ex-alumnos. Que te visitan de otros puntos del planeta. Entonces empiezo a cortarme, esto ya no es privado. Lo primero que hice fue migrar de Joomla! a WordPress, por una vez acerté ;) Digamos que ahí empezó el blog, empecé a compartir utilidades, recursos y tutoriales de diseño, dando el crédito correspondiente e intentando crear contenido original. Me divertía y aprendía con cada artículo.
El paso a Pofe$ioná
Pasado el tiempo dejó de ser una afición, empecé a rentabilizarlo. Tampoco es que haya sido mi principal fuente de ingresos pero sí me ha dado bastantes caprichos.
En estos 11 años parí otros proyectos web, algunos pensados para que el protagonista fuera el usuario y otros con sección blog donde volvía a disfrutar, algunos pensados sólo con el CPC en mente y otros sólo por la necesidad de contar cosas.
El gran bache
Hace ahora 3 años me ocurrió algo que hizo perder el sentido a «compartir», me quitó las ganas de escribir, ya no quería ser «visible». El ritmo de publicación descendió muchísimo y casi que abandoné La Leyenda de Caillou. Al tiempo me embarqué en un sitio de cine, elFinalde, y en vez de escribir me he dedicado a publicar películas y series. Me desenganché.
El trabajo, la familia, las redes sociales, que los Blogs han muerto son todo excusas. ¿Cuántos blogs conoces que siguen publicando con la misma pasión? Lo que a veces se nos apaga es la pasión. He visto despedirse muchos blogueros y resucitar a otros muchos para luego volverse a despedir.
Entonces ¿Despedida o resurrección?
Sinceramente no sé si esto es mi despedida o mi resurrección. A veces, cuando tengo un rato y estoy sentado en el equipo me apetece publicar un artículo, pero en vez de eso acabo pensando que antes de regresar tengo que dar un giro, no sólo a ceslava.com, a todos los sitios.
Además de un rediseño a fondo tendría que pensar qué puedo aportar a la blogosfera. Sé que a algunos os interesan los tutoriales sobre diseño web y sé que estos mismos tutoriales os suenan a chino a los seguidores de La Leyenda de Caillou.
Al ser un blog personal están todos los temas que me interesan, no hay definida una línea editorial, un nicho. Además los blogs personales suelen ser de influencers que dan su opinión sobre su campo de trabajo, en esta definición no encaja el mío como «blog personal». Siempre he tenido esa lucha interna sobre si separar los contenidos en distintos blogs temáticos o seguir como ahora compartiendo churras y merinas en el mismo sitio.
¿Escribo o lanzo otro sitio?
Quizás lo mío no es escribir, no es ser bloguero. Quizás lo mío sea crear sitios web, que por otra parte es mi trabajo. De hecho:
creé un sitio de debates donde no he dado una sola opinión,
uno de chistes siendo todo un saborío,
uno sobre cáncer sin tener cáncer,
uno de reseñas de cine y series sin ser capaz de recordar la peli que vi anoche.
Pero es cierto que esto de rellenar los píxeles en blanco y darle al botoncito azul de publicar tiene un no sé qué que engancha.
En cualquier caso si vuelvo en condiciones debe ser después de reflexionar bien a dónde debe ir este sitio, de hacerle un gran rediseño y si no vuelvo «en serio» pues habrán sido 11 años con unas 500 publicaciones anuales al margen de los chistes, debates y películas…
Si todavía no has cambiado tu WordPress al protocolo HTTPS (HyperText Transfer Protocol Secure – Protocolo seguro de transferencia de hipertexto) ya estás tardando, a continuación te mostraré cómo hacerlo muy fácil y además de forma gratuita.
¿Por qué cambiar a HTTPS?
¿Pero esto de los certificados SSL no era sólo para tiendas? ¿No era algo para asegurar las plataformas de pago? ¿Y si yo tengo un blog de cine donde no vendo nada ni tengo ningún contenido sensible de seguridad también debo migrar?
La respuesta es SÍ. Cualquier sitio web debe hoy día utilizar esta capa extra de seguridad. De hecho tus usuarios serán advertidos por los navegadores «Este sitio no es seguro» y lo contrario cuando visitas con Google Chrome un sitio con HTTPS en la barra de direcciones pone «Es seguro». Y Google agradece que la web sea más seguro añadiendo como factor de posicionamiento SEO este extra de seguridad. A todo esto hay que añadir las ventajas de la actualización del protocolo HTTP a HTTP/2 para la que necesitas un certificado SSL.
Resumen: con HTTPS tu sitio será más seguro, ayudará a mejorar tu SEO y podrás beneficiarte de HTTP/2.
Migrar tu WordPress a HTTPS en 5 pasos
El artículo veremos los 5 pasos que he seguido para migrar mi sitio de cine y series https://elfinalde.com
PASO 1: Cómo conseguir un certificado SSL gratuito
PASO 2: Instalar tu certificado SSL en tu servidor
PASO 3: Activar HTTPS en tu WordPress
PASO 4: Configurar Google Search Console (Google Webmaster Tools)
PASO 5: Configurar Google Analytics
PASO 1: Cómo conseguir un certificado SSL gratuito
Lo primero es conseguir un certificado SSL (Secured Socket Layer / Capa de conexión segura) Algunos hostings ofrecen este servicio extra a un coste o incluyen el servicio gratuito de Let´s Encrypt. Compruébalo en tu plan de alojamiento, si no te ofrecen un SSL gratuito sigue estos pasos.
Completa los campos de su configuración, muy fácil, el nombre, tu país y su código. En los campos adicionales marca «Auto-generate Certificate» para que cuando caduque vuelva a generarse cada 90 días.
Luego haz clic en «Register account» y luego en «Generate Certificate». Se te indicará la ruta de tu Certificado SSL totalmente gratuito en una nueva carpeta creada «letsencrypt», descarga esta carpeta a tu equipo por FTP.
PASO 2: Instalar tu certificado SSL en tu servidor
El siguiente paso es instalarlo el certificado creado en tu servidor. Vamos a verlo en Plesk
Haz clic en la opción «Certificados SSL»
En la siguiente pantalla haz click en Añadir certificado SSL
Ahora tienes que ponerle un nombre y subir 3 archivos .pem que creaste en el PASO 1 en tu WordPress.
Como Clave privada (*.key) subes el archivo key.pem
Como Certificado (*.crt) subes el archivo cert.pem
Como Certificado CA (*-ca.crt) subes el archivo chain.pem
Listo, ya tenemos el certificado, por último debes asociarlo a tu dominio. En Configuración de Hosting > Seguridad seleccionamos nuestro certificado
En cPanel el proceso es similar, existen también plugins para cPanel de Let´s Encrypt. Si te surge alguna duda en este paso puedes consultar a tu proveedor de hosting.
PASO 3: Activar HTTPS en tu WordPress
Ya puedes visitar tu sitio con https://tudominio.com aunque si navegas por él o alguien te visita desde un buscador volverán a encontrarse con el antiguo «http». Hay que redireccionar todas las URLs que hasta ahora apuntaban a HTTP a HTTPS, puedes hacerlo manualmente en los ajustes, en .htaccess y con Buscar y Reemplazar en la base de datos o servirte de un plugin gratuito que no miente en su nombre Really Simple SSL
Instalas, activas y ejecutas.
Contenido mixto
Si visitas tu sitio ahora desde HTTPS y aún no aparece el candado verde es porque el navegador ha encontrado algún contenido mixto, es decir, tu sitio es HTTPS pero hace peticiones a URLs HTTP. Por ejemplo desde CSS, JS tuyo o de algún plugin. El plugin Really Simple SSL corrige algunos pero a veces tendrás que comprobar con la consola qué URL está provocando esto y solucionarlo manualmente o probar otros plugins también gratuito como SSL Insecure Content Fixer o la versión Premium (de pago) del mismo Really Simple SSL
PASO 4: Configurar Google Search Console (Google Webmaster Tools)
El último paso es decirle a Google que hemos cambiado a HTTPS. Debemos crear dos nuevas propiedades, una por cada nueva versión de nuestro sitio (con y sin www) https://www.midominio.com y https://midominio.com
Si lo prefieres puedes crear un conjunto con las 4 propiedades del mismo dominio.
Añade el sitemap y en Configuración del sitio elige como dominio preferido (con o sin www) el mismo que tengas como Dirección del sitio en los ajustes generales de tu WordPress.
PASO 5: Configurar Google Analytics
Ya tienes tu sitio funcionando con HTTPS ahora debes cambiarlo en GA. Vas a Administrar y eliges la cuenta, propiedad y vista correspondiente.
En Configuración de la vista cambias a https:// la «URL del sitio web» y en Configuración de la propiedad la URL predeterminada.
Y si lo deseas más abajo en la Configuración de la propiedad asocias tu propiedad de Search Console a la de GA.
El atributo alt (texto alternativo) tiene la función de describir una imagen en la etiqueta HTML <img>. Debes tomarlo como un atributo obligatorio para accesibilidad web y SEO.
Cada imagen que publiques debería sí o sí tener una descripción en su atributo altpor tres razones:
Harás tu web más accesible para personas con alguna discapacidad visual, el atributo altes utilizado por los lectores de pantalla y navegadores para invidentes.
Por SEO, ayudarás al posicionamiento de tu sitio.
En el caso de que haya algún problema por el que no se puede mostrar la imagen el navegador mostrará el texto del atributo altDe ahí lo de texto alternativo.
No debes confundirlo con el atributo title que los navegadores lo utilizan a modo de tooltip.
Cómo añadir el atributo alt en WordPress
Cuando añadimos una imagen en WordPress tenemos opción de incluirlo en un campo. Bien desde la Biblioteca multimedia
o desde el editor
Si no completas ese campo el resultado será un alt vacío: alt=""WordPress no lo coge ni del nombre del archivo ni del título.
Cómo añadir alt a todas las imágenes de WordPress
Si no quieres hacer este trabajo de forma manual puedes automatizarlo, generar un texto alt para todas las imágenes de tu WordPress, las antiguas y para todas las que publiques desde ahora.
Puedes utilizar el plugin SEO Friendly Images aunque lleva más de años sin actualizarse aún tiene más 200.000 instalaciones activas-
O bien puedes añadir en tu archivo functions.php este código que buscará todos los alt vacíos, la cadena alt=""en el contenido de tus páginas y entradas y los sustituirá por alt="Título de la página o entrada nº imagen" Si pusiste manualmente el altno cambiará nada.
* Este código lo publicaron hace un tiempo los amigos de Nelio Software pero le he hecho algunas modificaciones para que funcione correctamente.
Como hemos comentado esto es para las imágenes de tus entradas, páginas y Tipos de entradas personalizadas (CPT) pero en un WP hay más imágenes a las que añadir el atributo alt.Por un lado las imágenes de tu tema, para ello haz una búsqueda de las <img> en los archivos de tu tema y asegúrate de que tienen el atributo alt y por otro las imágenes destacadas.
Cómo añadir alta las imágenes destacadas en WordPress
Las imágenes destacadas la suelen utilizar los temas en la página de inicio, en el sidebar, en el footer, en las páginas de archivo, etc. En esta entrada hablamos de todo lo concerniente a las imágenes destacadas en WordPres
Normalmente se hace uso de la función the_post_thumbnail o get_the_post_thumbnail en ambas funciones le puedes añadir los atributos que quieras al <img> que genere.
Para añadir un alt con el título de la publicación busca esas 2 funciones en los archivos de tu tema y añade el array entero
Existen algunas reglas básicas para hacer nuestros diseños web accesibles al mayor rango de usuarios independientemente de sus capacidades técnicas, cognitivas o físicas. Según la OMS hay en el mundo alrededor de 600 millones de personas con algún tipo de discapacidad. Facilitar el acceso a nuestro sitio web, nuestro servicio o al de nuestro cliente no es tan complicado.
La diseñadora Karwai Pun que trabaja para Home Office Digital del Gobierno del Reino Unido ha creado 6 carteles con estas reglas básicas de lo que hay que hacer y lo que no. Cada póster habla de un tipo de discapacidad específica: discapacidad auditiva, autismo, dislexia, discapacidad visual o discapacidad motora y uno específico para lectores de pantalla.
Podemos encontrar reglas comunes como hacer los textos los más descriptivos y simples, usar tamaños de fuente legibles, usar el atributo <alt> para describir elementos multimedia, etc. Y alguna con matices según la discapacidad, como la que aplicamos al contraste de colores donde las personas con autismo parecen necesitar menos brillo que los que tienen alguna discapacidad visual.
