Una vez descargadas las organizo en carpetas con el nombre de la página, post o producto al que pertenezcan.

Al principio las optimizaba una a una con GIMP. Escalar y exportar a webp con compresión del 85% . También aprovechaba en la exportacion para limpiar el nombre del archivo (quitar tildes, «eñes», caracteres especiales…

En proyectos con varias decenas de imágenes es una tarea que lleva más del tiempo del necesario.

Desde hace tiempo ya no uso GIMP para optimizar las imagenes, sino ImageMagick, un conjunto de comandos que permite convertir formatos, reescalar, comprimir (y más cosas) en lotes desde el terminal de Linux.

Lo primero que hago es situarme en el directorio y convertir a webp:

mogrify -format webp *.jpg
mogrify -format webp *.png

Elimino los archivos JPG o PNG:

rm *.jpg
rm *.png

Si algunas imágenes son demasiado grandes para web, las separo y las reescalo a un ancho máximo (en WordPress 2560px):

mogrify -resize 2560 *.webp

Por último aplico la compresión:

mogrify -quality 85 *.webp

Y nada más, en menos de un minuto he convertido, reescalado y comprimido todas las imágenes de un directorio.

Ahora solo faltaba limpiar el nombre, esto aún lo seguía haciendo a mano, hasta hoy…

Ya que uso Linux me pregunto, ¿y si creo un script en BASH que limpie los nombres de archivo de un directorio completo?

Aquí me ayudó DeepSeek, empezó generando un pequeño script en BASH para quitar las tildes de los nombres de archivo.

Pero seguí añadiendo cosas y al final tengo un script que limpia los nombres con todo lo que necesito:

• Elimina tildes.
• Cambia eñes por enes.
• Elimina cualquier caracter especial.
• Sustituye los espacios por guiones bajos.

Y este es el script completo:

limpiar-nombres() {
    local DIRECTORIO="${1:-.}"
    
    if [ ! -d "$DIRECTORIO" ]; then
        echo "❌ Error: El directorio '$DIRECTORIO' no existe."
        return 1
    fi
    
    echo "🔄 Limpiando nombres de archivos en: $DIRECTORIO"
    echo "📝 Caracteres que se eliminarán/reemplazarán:"
    echo "   - Tildes (á, é, í, ó, ú, ñ)"
    echo "   - Caracteres especiales (@, #, $, %, &, *, !, ¿, ?, ¡)"
    echo "   - Espacios (reemplazados por _)"
    echo "   - Paréntesis, corchetes, llaves"
    echo "   - Comillas y apóstrofes"
    local contador=0
    
    # Usar find para manejar mejor archivos con espacios
    find "$DIRECTORIO" -maxdepth 1 -type f -print0 | while IFS= read -r -d '' archivo; do
        local nombre_original=$(basename "$archivo")
        local directorio=$(dirname "$archivo")
        
        local nuevo_nombre=$(echo "$nombre_original" | sed -e '
            # Reemplazar tildes y ñ
            y/áàäâÁÀÄÂ/aaaaAAAA/
            y/éèëêÉÈËÊ/eeeeEEEE/
            y/íìïîÍÌÏÎ/iiiiIIII/
            y/óòöôÓÒÖÔ/ooooOOOO/
            y/úùüûÚÙÜÛ/uuuuUUUU/
            y/ñÑ/nN/
            
            # Eliminar caracteres especiales
            s/[@#%&*¿?¡!$]//g
            
            # Eliminar paréntesis, corchetes, llaves
            s/[()\[\]{}]//g
            
            # Eliminar comillas y apóstrofes
            s/['\''"`]//g
            
            # Reemplazar espacios por guiones bajos
            s/ /_/g
            
            # Reemplazar múltiples guiones bajos por uno solo
            s/__+/_/g
            
            # Eliminar guiones bajos al inicio y final
            s/^_//
            s/_$//
        ')
        
        if [ "$nombre_original" != "$nuevo_nombre" ]; then
            echo "📁 Renombrando: \"$nombre_original\" -> \"$nuevo_nombre\""
            mv -- "$archivo" "$directorio/$nuevo_nombre"
            ((contador++))
        fi
    done
    
    echo "✅ Proceso completado. Se renombraron $contador archivos."
    
    if [ $contador -eq 0 ]; then
        echo "💡 No se encontraron archivos que necesiten renombrarse."
    fi
}

# Alias para uso rápido
alias lnombres='limpiar-nombres'
alias limpiar-archivos='limpiar-nombres'

Añadiendo el script al archivo ~/.bashrc o ~/.zshrc (en mi caso uso ZSH) podremos usarlo en cualquier directorio sin necesidad de tener el script.sh dentro.

/home/user/Descargas/Fotos/limpiar-nombres

Ahora que se habla tanto de productividad, tanto Linux como la terminal, cada día mejoran la mía.

Kdenlive es la aplicación con la que edito todos mis vídeos de Youtube desde que en Febrero de 2018 me pasé completamente a GNU/Linux.

No soy ningún experto en edición de vídeo, ni siquiera aficionado, pero creo que con lo aprendido hasta ahora puedo facilitarle el camino a alguien que necesite, como yo, editar vídeos sencillos, añadir audios, crear transiciones, cortar silencios, pegar pistas, exportar en un formato adecuado, etc.

Es el tutorial que yo hubiese querido tener cuando empecé a «cacharrear» con el editor y que me llevó a consultar en numerosos blogs y videotutoriales para cada herramienta o efecto que necesitaba aplicar.

Artículo disponible en vídeo

Cómo conseguir Kdenlive

Kdenlive es multiplataforma, tienes instaladores tanto para GNU/Linux, Windows o Mac OS. Aunque en este artículo nos centraremos en las versiones para GNU/Linux.

La mejor forma de tener Kdenlive es usar una distribucion GNU/Linux con entorno de escritorio KDE Plasma, pues este integra todas las librerías necesarias para hacer funcionar las versiones más recientes del editor.

También es conveniente que la distribución no sea muy conservadora (como Debian), ya que Kdenlive tuvo una importante actualización a partir de la versión 19 (en el momento de escribir este artículo está en su versión 20.04), mejorando considerablemente la experiencia con la línea de tiempo y la estabilidad general de la aplicación. Algunas distros como Debian 10 KDE o Kubuntu 18.04 aún conservan en sus repositorios la versión anterior.

Si no usas Plasma, la mejor recomendación es que instales Kdenlive desde;

• Snap para Ubuntu y derivadas.
• Flatpak o AppImage para cualquier otra distro.

Descargar Kdenlive desde su web oficial como APPImage

Descargar Kdenlive desde FlatHub como Flatpak

Interfaz de Kdenlive

Podemos dividir la interfaz de Kdenlive en 5 grupos principales:

• Recursos del proyecto: Vídeos, audios e imágenes que compondrán el montaje.
• Efectos activos: Efectos aplicados a las pistas. Desde aquí se pueden configurar sus parámetros.
• Librería de efectos: Efectos disponibles tanto de imagen como de audio.
• Previsualización: Podemos ver en tiempo real los cambios aplicados antes de renderizar el vídeo final.
• Línea de tiempo: Donde añadimos las pistas de vídeo y audio, aplicamos los efectos, cortamos, pegamos, etc.

Lo primero al empezar un nuevo proyecto

La ventana de diálogo al crear un nuevo proyecto nos preguntará la resolución y tasa de FPS (fotogramas por segundo) que vamos a necesitar. También nos permite definir el número de pistas de video y de audio con los que se iniciará el proyecto.

Lo ideal es escoger la misma resolución y tasa de fotogramas que la fuente de vídeo original. Si la fuente original tiene una resolución de 1280×720 y hacemos el proyecto a 1920×1080, seguramente la imagen acabe pixelada o borrosa. Del mismo modo, si la fuente original está grabada a 24 FPS y configuramos el proyecto a 60 FPS, el resultado final se seguirá viendo a 24 FPS.

Añadir recursos al proyecto

Ahora que ya hemos definido la configuración inicial vamos a añadir los fragmentos de vídeo, audio e imágenes que formarán el montaje final.

Para este proyecto he añadido dos clips de vídeo y dos clips de audio, que son los audios originales de los clips de vídeo pero procesados por separado con Audacity para mejorar la ecualización y ganancia.

Entonces el objetivo es, silenciar el audio incrustado en el vídeo y sustituirlo por el audio procesado.

Para ello arrastramos el primer clip de vídeo hacia una de las pistas de vídeo:

Automáticamente se rellena una de las pistas de audio, debido al audio que ya hay incrustado en el clip de vídeo. Así que prodecemos a silenciarlo.

Ahora arrastramos el clip de audio procesado a la siguiente pista de audio:

Edición de pistas

Una de las tareas más comunes a la hora de editar un vídeo es la de eliminar silencios o fragmentos que han quedado mal. Para ello vamos a estar haciendo un uso frecuente de la herramienta de Corte así que mejor nos vamos quedando con su atajo de teclado (X):

Vamos a localizar fragmentos de silencio, son fácil de detectar si nos fijamos en la onda de la pista de audio. Para ayudarnos podemos hacer zoom en la línea de tiempo con el deslizador o pulsando Ctrl + rueda del ratón.

A la hora de hacer un corte en una pista, debemos tener en cuenta que estamos trabajando con 2 pistas independientes (vídeo y audio) y si aplicamos el recorte solamente a la pista de video, el audio se desincronizará.

En estos casos lo ideal es agrupar ambas pistas para que el corte se aplique a las dos a la vez en el mismo fotograma y tiempo. Para ello vamos a hacer uso de la herramienta de Selección (S), pinchamos en la pista de vídeo, mantenemos pulsada la tecla SHIFT y pinchamos en la pista de audio para seleccionar ambas:

Con las pistas seleccionadas, hacemos Clic Derecho – Agrupar Clips o el atajo de teclado Ctrl + G. Ahora el corte que apliquemos en el clip de vídeo, cortará también en el clip de audio.

Vamos a posicionarnos en el silencio y hacemos un corte al principio y otro corte al final.

Ahora podemos eliminar el trozo seleccionado con Clic Derecho – Borrar elemento seleccionado, o simplemente pulsando la tecla Supr (¿a que los atajos de teclado son más rápidos y cómodos?)

Ahora podemos arrastrar la pista derecha y unirla con la izquierda para que no se note el corte.

Transiciones entre pistas

Cuando tenemos varios clips de vídeo para el montaje final, una práctica habitual es la de hacer transiciones entre clips.

Primero añadimos el segundo clip a la pista de video a continuación del que ya hemos editado:

Y lo arrastramos para unirlo:

Para realizar la transición, vamos a aplicar un efecto de fundido tanto al final del clip anterior, como al principio del nuevo clip.

Buscamos en la zona de efectos: Fundido saliente:

Y lo arrastramos en el final del clip anterior:

Si seleccionamos la pista en la que hemos aplicado el efecto, veremos sus propiedades en la zona de efectos activos (recordar que en esta zona aparecen todos los efectos aplicados al clip seleccionado):

Por defecto, el fundido saliente tiene una duración de 3 segundos, vamos a reducirlo a 1 segundo para que la transición sea más rápida.

Ahora vamos a localizar el efecto Fundido entrante y lo arrastramos al inicio del nuevo clip:

Al igual que con el fundido saliente, vamos a reducir su duración a 1 segundo:

Y ya tenemos terminada la transición:

Añadir música de fondo

Si queremos añadir una música de fondo para amenizar el vídeo, podemos añadir una nueva pista de audio. Para ello vamos al Menú – Línea de Tiempo – Pistas – Insertar Pista.

O también podemos posicionarnos sobre una pista existente y Clic Derecho – Insertar Pista.

Seleccionamos pista de audio y la posicionamos a continuación.

Agregamos el audio musical a los recursos del proyecto y lo arrastramos a su nueva pista:

Cuando tenemos varias pistas de audio, seguramente necesitemos ajustar los volúmenes para que la pista de música no destaque sobre la pista de voz. Para ello podemos lanzar el panel mezclador.

Ajustar volúmenes de pistas

Para lanzar el panel mezclador, nos dirigimos al Menú – Ver – Mezclador de Audio:

En él veremos las 4 pistas principales de audio:

• La primera que está silenciada (audio del vídeo original).
• La segunda con el audio procesado.
• La tercera con la música de fondo.
• La cuarta que es la pista maestra y afecta a todas.

Podemos jugar con los deslizadores, bajando o subiendo el volumen de cada pista hasta dejarlo como deseamos (sin pasarse con los volúmenes altos para evitar distorsiones).

Exportar el resultado final

Una vez que hemos terminado de editar las pistas, llega el momento de exportar el trabajo final. Para ello vamos a darle al botón rojo Procesar, donde nos va a pedir:

• Ruta de la exportación.
• Formato de vídeo final.

A mí me gusta el formato WebM, es un formato de vídeo líbre y está pensado sobre todo para el vídeo streaming (es un buen formato para Youtube, Vimeo y generalmente cualquier plataforma de video-streaming). Pero si lo necesitas, también puedes exportar en formato MP4 o MPEG.

Llegados a este punto tendremos dos opciones: Procesar a un archivo directamente o generar un script.

Si solo tenemos que exportar un único video (proyecto), podemos procesar a un archivo directamente. Normalmente el tiempo de exportado (renderizado) dependerá de la duración del proyecto, de los efectos aplicados y de la conversión o reescalado (si tiene que procesar la resolución de la fuente original a una nueva) y por supuesto, de la capacidad de tu CPU.

Para el tipo de vídeos que yo suelo montar, el tiempo de renderizado suele ser de un 80-90% de la duración del proyecto final, porque no suelo usar muchos efectos ni reescalados. Pero hay proyectos que pueden tardar incluso un 200% o 300% de la duración del proyecto.

¿Y para qué sirve lo de Generar Script?

Esto es un «puntazo» en Kdenlive. Imagina que tienes que editar 10 vídeos independientes y renderizarlos uno a uno. Teniendo en cuenta que el renderizado merma considerablemente los recursos de la máquina, estarás perdiendo un tiempo precioso en realizar otras tareas.

¿Pero y si pudieras editar los vídeos y renderizarlos todos de una vez? Podrías escoger un momento del día en el que no estés usando el equipo para hacer este trabajo.

En este caso, en lugar de procesar a un archivo, genera un script el cual se quedará en Kdenlive esperando a que lo actives.

Ahora podrías abrir el siguiente proyecto a renderizar y generar un nuevo script, el cual se añadirá a la cola:

Cuando tengas todos los scripts generados, puedes iniciarlos de uno en uno, los cuales se irán yendo a la Cola de Tareas:

Y lo mejor es que en la Cola de Tareas puedes marcar que se apague el equipo cuando termine de renderizar el último vídeo:

Bien, con esta pequeña guía y un poco de tu parte para seguir explorando y probando, creo que puedes hacerte rápidamente con este excelente editor de vídeo.

Me reservo para un siguiente artículo, cómo generar fácilmente pases de diapositivas partiendo de un directorio de imágenes, y además aplicar interesantes efectos de paneo y zoom, de forma muy sencilla.

Un saludo y nos vemos en el siguiente post

Hoy vamos a ir un paso más allá y veremos un ejemplo de cómo calcular rutas partiendo de la geolocalización del usuario hasta el punto destino que estará predefinido (por ejemplo, nuestro negocio, un punto de interés, etc.).

Lo primero, debemos agregar un nuevo plugin que se encargará de realizar los cálculos de ruta y dibujar el trazado: Leaflet Routing Machine.

Este sería el código base de nuestra página HTML, con las llamadas tanto a las librerías de Leaflet como a las de Routing Machine.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
    <title>Calcular rutas</title>
    <style>
        #mapa{
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="mapa"></div>
</body>
</html>

Comprobar que el dispositivo (navegador) soporta geolocalización

Aquí me voy a centrar en la documentación de Mozilla donde no he tenido ningún problema para geolocalizarme con Firefox (en Chrome/Chromium si he tenido problemas para geolocalizarme debido a unas limitaciones que ha impuesto Google a la geolocalización a través de HTML5).

El siguiente código está probado para Firefox y podría no funcionar correctamente en otros navegadores.

<script>
    if(navigator.geolocation){
        //Funciona la geolocalización
    }
    else{
        //No funciona la geolocalización
    }
</script>

Con el código anterior comprobamos si la geolocalización está disponible en el dispositivo o navegador web del usuario, en caso afirmativo dibujaremos un mapa donde se mostrará la ruta calculada desde la posición del usuario hasta nuestra ubicación de interés.

En caso de que la geolocalización no funcione, podemos dibujar un mapa normal con la ubicación de nuestro destino (sin calcular rutas).

<script>
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position){
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

            var mymap = L.map('mapa', {
                center: [latitude, longitude],
                zoom: 12
            });

            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                maxZoom: 25,
                attribution: 'Datos del mapa de &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imágenes © <a href="https://www.mapbox.com/">Mapbox</a>', 
                id: 'mapbox/streets-v11'
            }).addTo(mymap);

            L.Routing.control({
                waypoints: [
                    L.latLng(latitude, longitude),
                    L.latLng(37.17059, -3.60552)
                ],
                language: 'es'
            }).addTo(mymap);
        });
    }
    else{
        var mymap = L.map('mapa', {
            center: [37.17059, -3.60552],
            zoom: 17
        });

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 25,
            attribution: 'Datos del mapa de &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imágenes © <a href="https://www.mapbox.com/">Mapbox</a>', 
            id: 'mapbox/streets-v11'
        }).addTo(mymap);
    }
</script>

Obtener las coordenadas del usuario

Vamos a comentar un poco el codigo. En caso de que la geolocalización esté disponible, el método que obtiene la ubicación del usuario es getCurrentPosition, al que le pasamos una función de callback con un parámetro (position) en el que podemos obtener tanto la latitud como la longitud por separado:

navigator.geolocation.getCurrentPosition(function(position){
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
});

A continuación dibujamos el mapa posicionándolo en la ubicación del usuario:

var mymap = L.map('mapa', {
    center: [latitude, longitude],
    zoom: 12
});

Hay que tener en cuenta que la geolocalización a través de IP puede no ser muy fiable. Si la central a la que estás conectado se encuentra en tu misma población, la geolocalización te ubicará más o menos en tu pueblo, pero por ejemplo, mi conexión ADSL proviene de una red Air Wifi, cuya central se encuentra en otra ciudad, así que el navegador me geolocaliza en esa otra ciudad…

Esto no ocurre con el navegador de mi smartphone si además tengo activada la Ubicación, en este caso me geolocaliza a la perfección.

Tras dibujar el mapa llamamos al Routing Machine pasándole las dos coordenadas a calcular:

Llamar al método para calcular la ruta

L.Routing.control({
    waypoints: [
        L.latLng(latitude, longitude), //dirección obtenida del usuario
        L.latLng(37.17059, -3.60552) //dirección fija de destino
    ],
    language: 'es'
}).addTo(mymap);

No olvides especificar el código de idioma para que las indicaciones aparezcan en español.

NOTA IMPORTANTE:

El cálculo de ruta se origina en un servidor OSRM de demostración cuya finalidad es la de probar la API, de hecho si abrimos la consola del inspector de elementos nos avisa de esto:

You are using OSRM’s demo server. Please note that it is NOT SUITABLE FOR PRODUCTION USE. Refer to the demo server’s usage policy: https://github.com/Project-OSRM/osrm-backend/wiki/Api-usage-policy

To change, set the serviceUrl option.

Please do not report issues with this server to neither Leaflet Routing Machine or OSRM – it’s for demo only, and will sometimes not be available, or work in unexpected ways.

Please set up your own OSRM server, or use a paid service provider for production.

El texto nos advierte que no es recomendable usarlo para entornos de producción, ya que el servidor puede no estar disponible en determinados momentos.

Por lo que si queremos implementar el cálculo de rutas en una aplicación web de producción, deberíamos configurar nuestro propio servidor OSRM en nuestro servicio de hosting (consultar al soporte técnico) y modificar la variable serviceURL dentro del leaflet-routing-machine.js

Calcular rutas enviando las coordenadas a OpenStreetMap.org

Si no queremos configurar un servidor OSRM siempre podemos hacer el cálculo de rutas directamente en la web de openstreetmap.org.

Para ello podemos enviar a través de un formulario HTML, las coordenadas mediante GET al action=»https://www.openstreetmap.org/directions?engine=fossgis_osrm_car» si queremos hacer la ruta en coche o a «https://www.openstreetmap.org/directions?engine=fossgis_osrm_foot» si queremos calcular la ruta a pie.

La cadena con las coordenadas tiene que tener la siguiente síntaxis:

latitud1,longitud1;latitud2,longitud2, por ejemplo:

37.17618,-3.96473;37.1894,-3.7216

Las coordenadas del usuario tendrán que enviarse en el formulario de forma dinámica, es decir, a través de una variable, mientras que las coordenadas de destino pueden especificarse estáticamente.

Para el ejemplo, vamos a crear una página HTML con el formulario, y un archivo de funciones .JS que obtendrá las coordenadas del usuario, las pasará al formulario y lo enviará a openstreetmap.org. En el código he integrado jQuery para hacer las escuchas al botón y enviar los datos.

Página HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
		integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>
    <script src="js/funciones.js"></script>
    <title>Document</title>
</head>
<body>
    <h2>Cómo llegar</h2>

    <form id="formulario_rutas" method="get" action="https://www.openstreetmap.org/directions?engine=fossgis_osrm_car">    
        <input id="coordenadas" type="hidden" name="route" value=""/>
        <input id="calcular_ruta" type="button" value="Cómo llegar"/>
    </form>
</body>
</html>

Crearemos un formulario con un campo oculto (hidden) que contendrá como valor la cadena que pasaremos a openstreetmap ya formateada como éste espera recibirla. Y un botón que al hacer clic ejecute todo el proceso.

Archivo JS:

"use strict";

$(document).ready(function(){
    $("#calcular_ruta").click(function(){
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(function(position){
                var latitude = position.coords.latitude;
                var longitude = position.coords.longitude;

                var cadenaRuta = latitude+","+longitude+";37.1894,-3.7216";
                $("#coordenadas").val(cadenaRuta);
                $("#formulario_rutas").submit();
            });
        }
    });
});

En el archivo de funciones, captamos el clic al botón del formulario, geolocalizamos al usuario y construimos la cadenaRuta que pasaremos como valor al campo hidden (coordenadas) del formulario. Por último hacemos un submit al formulario y OpenStreetMap hará la magia.

No queda integrado en nuestra web como sí pasaría con un servidor OSRM, pero al menos es una solución elegante.

Paso a paso y no sin alguna dificultad vamos avanzando hacia la no dependencia del todopoderoso GoogleMaps. Seguiremos próximamente…

Me han comentado la preocupación de que estos usuarios colaboradores puedan subir archivos malintencionados aprovechando sus permisos de subida de archivos a WordPress.

Especificar únicamente los archivos permitidos

Para asegurarnos, podemos limitar el tipo de archivos permitidos para subir a WordPress utilizando la función:

function restringir_tipos_de_archivo($mime_types){
    $mime_types = array(
        'jpg|jpeg|jpe' => 'image/jpeg',
        'gif' => 'image/gif',
        'png' => 'image/png',
        'pdf' => 'application/pdf'
    );
    return $mime_types;
}
add_filter('upload_mimes', 'restringir_tipos_de_archivo');

Esta función sobreescribe los archivos permitidos por defecto de WordPress por nuestra lista, donde podemos añadir los tipos extra que necesitemos (por ejemplo archivos de video .avi, .mpeg, .webm…).

Bloquear tipos de archivo específicos

Si solamente queremos bloquear ciertos tipos de archivos, podemos usar la función:

function eliminar_tipos_de_archivo( $mime_types=array()){
    unset( $mime_types['mov|qt'] ); // Vídeos con la extensión .mov
    unset( $mime_types['mp4|m4v'] ); // Vídeos con la extensión .mp4
    unset( $mime_types['avi'] ); // Vídeos con la extensión .avi
    unset( $mime_types['mpeg|mpg|mpe'] ); // Vídeos con la extensión .mpg
 
    return $mime_types;
}
add_filter('upload_mimes','eliminar_tipos_de_archivo');

Añadiendo en cada unset() el tipo de archivo a bloquear.

Una capa extra de seguridad que podemos añadir a nuestros proyectos con una pocas líneas de código.

En el menú derecho utiliza la opción «Compartir», selecciona HTML y copia el código HTML que tendrás que incrustar en tu página.

Ejemplo de mapa incrustado:

Pero si necesitas crear un mapa personalizado, con varios marcadores, con la posibilidad de insertar áreas, personalizar la imagen del marcador, podemos integrar OpenStreetMap en nuestro proyecto web gracias a las librerías de Leaflet y a los fondos de MapBox.

Para dar nuestros primeros pasos vamos a ejecutar un ejercicio sencillo. Crea un nuevo directorio con los siguientes archivos:

• index.html
• estilos.css

En el archivo index.html añade las librerías de LeafLet:

Archivo CSS:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

Enlaza también tu archivo de estilos.css:

<link rel="stylesheet" href="estilos.css"/>

Archivo JS:

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin="">
</script>

Y crea un DIV con un identificador, por ejemplo:

<div id="mimapa"></div>

Ajusta con CSS el alto que desees para el mapa:

#mimapa {height: 600px;}

De forma que tu index.html quede más o menos así:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
    <link rel="stylesheet" href="estilos.css"/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
    <title>Mapa con Open Street Map</title>
</head>

<body>
    <div id="mimapa"></div>
</body>

</html>

A continuación vamos a añadir un poco de JavaScript para inicializar el mapa en una ubicación predefinida. Este código podemos insertarlo en el archivo index.html a continuación del DIV o en un archivo de funciones JavaScript externo.

<script>
    var mymap = L.map('mimapa').setView([37.1698, -3.965], 18);
</script>

Utiliza las coordenadas con las que quieras inicializar el mapa, el segundo parámetro «18» corresponde al ZOOM inicial.

Ahora tenemos que llamar a las librerías de MapBox para dibujar el mapa:

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 25,
    attribution: 'Datos del mapa de &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imágenes © <a href="https://www.mapbox.com/">Mapbox</a>', 
    id: 'mapbox/streets-v11'
}).addTo(mymap);

No olvides especificar las atribuciones tal y como se exige en las condiciones y términos de uso.

attribution: 'Datos del mapa de &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imágenes © <a href="https://www.mapbox.com/">Mapbox</a>

Existen varios tipos de mapa en MapBox, puedes consultar en su documentación y utilizar el que prefieras, para el ejemplo hemos utilizado «streets-v11».

Con este código ya tenemos inicializado un mapa con una ubicación y zoom predefinidos.

Añadir un marcador

Vamos a añadir nuestro primer marcador:

var marker = L.marker([37.1698, -3.965]).addTo(mymap);

Especifica las coordenadas del marcador.

Popups en marcadores

Podemos activar un popup utilizando el método bindPopup, con información al hacer clic en el marcador. La información podemos generarla en HTML con todas las ventajas que conlleva (insertar links, imágenes…):

marker.bindPopup("<b>Mi ubicación</b><br><a href='#'>Solicita más información</a>");

Personalizar el marcador

Incluso podemos personalizar el tipo de marcador por defecto agregando una imagen.

var marcador = L.icon({
        iconUrl:'images/marcador.png',
        iconSize: [60, 85]
});

Y asignarlo a un marcador:

var marker = L.marker([37.1698, -3.965], {icon: marcador}).addTo(mymap);

Y recuerda que puedes agregar todos los marcadores que necesites (por ejemplo, extraídos de una base de datos):

var marker2 = L.marker([37.1699, -3.968], {icon: marcador}).addTo(mymap);
var marker3 = L.marker([37.1697, -3.966], {icon: marcador}).addTo(mymap);

Añadir un área (círculo)

Hay casos en los que no nos interesa especificar la ubicación exacta del marcador, si no una zona aproximada (muy habitual por ejemplo en webs inmobiliarias, donde no queremos indicar dónde hay inmuebles vacíos…).

var circle = L.circle([37.1697, -3.964], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 40
}).addTo(mymap);

Entre los parámetros que podemos ajustar al area tenemos: las coordenadas, el color principal, el color del borde, la opacidad y el radio del area establecido en metros.

Añadir polígonos

Asímismo tenemos la posibilidad de crear polígonos para deliminar zonas específicas en el mapa, también muy útil para webs inmobiliarias donde podemos delimitar fincas y parcelas.

var polygon = L.polygon([
        [37.168474, -3.966202],
        [37.167482, -3.966827],
        [37.167602, -3.964477]
]).addTo(mymap);

Solo tenemos que especificar las coordenadas de cada punto del polígono.

Con esto ya tenemos para empezar a jugar con los mapas de OpenStreetMap.

Todos estos códigos y más los puedes consultar en la documentación de LeafLet y sacarle todo el partido a la API.

https://leafletjs.com/examples.html

Si te ha gustado, por favor, compártelo en tus redes. Nos vemos en el siguiente post

En nuestro caso y continuando con la serie de ejercicios anteriores en la que creamos un custom post para guardar vehículos, las columnas que aparecen por defecto son el título, el autor y las taxonomías que creamos: Tipo de Vehículo y Extras).

Estas taxonomías aparecen como columnas porque al definirlas especificamos el argumento:

'show_admin_column' => true

Lo que hace que lo muestre en la columna del administrador. Si no queremos que aparezca solo tenemos que cambiar el valor a «false».

En este artículo veremos cómo añadir nuestras propias columnas para mostrar por ejemplo, el precio y la matrícula que tenemos guardados en campos personalizados.

Para ello vamos a hacer uso del filtro ‘manage_edit-nombre-del-custom-post_columns’ y el action ‘manage_nombre-del-custom-post_posts_custom_column’.

1. Especificamos las columnas con el filtro manage_edit-xxxx_columns

function columnas_post_type_vehiculos($columnas){
    $columnas = array(
        'cb' => '<input type="checkbox" />',
        'title' => 'Título',
        'matricula' => 'Matrícula',
        'precio' => 'Precio',   
    );
    return $columnas;
}
add_filter('manage_edit-vehiculos_columns', 'columnas_post_type_vehiculos') ;

Analizando el código, estamos haciendo referencia a las columnas del tipo de post «vehiculos».

Hemos especificado que aparezca:

1. El checkbox para poder seleccionar el post y realizar acciones en lote con él.
2. El título del post.
3. La matricula.
4. El precio.

Si nos fijamos en los elementos matrícula y precio, el primer valor es la variable que tenemos que especificar sin caracteres especiales, el segundo valor es la etiqueta o nombre que aparecerá en la columna.

Ahora tenemos que especificar de donde tomar los datos para cada columna.

2. Tomar los datos para cada columna

function filas_post_type_vehiculos($columna, $post_id){
    global $post;
    switch($columna){
        case 'matricula':
            $matricula = get_post_meta($post_id, 'matricula', true);
            the_field('matricula');
            break;          
        case 'precio':
            $precio = get_post_meta($post_id, 'precio', true);
            the_field('precio');
            break;     
        
        default :
            break;
    }
}
add_action('manage_vehiculos_posts_custom_column', 'filas_post_type_vehiculos', 2, 10);

Recorremos con un switch columna tras columna y obtenemos su valor con la función the_field() de advanced custom field que es donde tenemos el valor guardado.

En este ejemplo solo aparecerán las columnas, título, matrícula y precio:

Si queremos que también aparezcan las demás columnas (autor, tipo de vehículo y extras, tenemos que definirlas:

function columnas_post_type_vehiculos($columnas){
    $columnas = array(
        'cb' => '<input type="checkbox" />',
        'title' => 'Título',
        'matricula' => 'Matrícula',
        'precio' => 'Precio',  
        'tipo_vehiculo' => 'Tipo de Vehículo',
        'extras' => 'Extras',
        'author' => 'Autor',
    );
    return $columnas;
}
add_filter('manage_edit-vehiculos_columns', 'columnas_post_type_vehiculos');

function filas_post_type_vehiculos($columna, $post_id){
    global $post;
    switch($columna){
        case 'matricula':
            $matricula = get_post_meta($post_id, 'matricula', true);
            the_field('matricula');
            break;  
        case 'precio':
            $precio = get_post_meta($post_id, 'precio', true);
            the_field('precio');
            break;
        case 'tipo_vehiculo':
	    //consultar qué taxonomías hay marcadas
	    $terms = get_the_terms( $post->ID , 'tipo-vehiculo' );
	    if($terms != null){
		foreach( $terms as $term ) {
		    echo $term->name . " ";
		    unset($term);
		}
            }
            break;
        case 'extras':
	    //consultar extras
	    $terms = get_the_terms( $post->ID , 'extras' );
	    if($terms != null){
	        foreach( $terms as $term ) {
		    echo $term->name . " ";
		    unset($term);
		}
	    }
            break;
        default :
            break;
    }
}
add_action('manage_vehiculos_posts_custom_column', 'filas_post_type_vehiculos', 2, 10);

Consideraciones

Hay que tener precaución en cómo llamar a los filtros y acciones de forma que no cometamos errores.

En el add_filter y add_action, modifica únicamente el nombre de tu custom post:

manage_vehiculos_posts_custom_column
manage_animales_posts_custom_column
manage_casas_posts_custom_column

Espero que este artículo te haya sido de interés y puedas utilizarlo en tus proyectos. Seguro que a tus clientes les viene bien tener información a mano de sus contenidos sin necesidad de entrar al post.

En estos casos (no habituales pero tampoco imposibles) nos puede salvar tener un respaldo de nuestros datos en algún servicio cloud como Drive, Dropbox, Hostiso, etc. Tendremos la tranquilidad de que nuestros datos estarán a salvo, pues estos servicios suelen realizar backups diarios y tener varias réplicas en distintos servidores.

¿Pero la privacidad de tus archivos también está salvo? ¿Quién te asegura que no van a «husmear» en tus datos, e incluso tomar aquello que les interese para algún fin?

Partiendo de que no aconsejo utilizar ningún servicio de cloud, precisamente por el tema delicado de la privacidad, si no nos queda más remedio, al menos deberíamos seguir una serie de recomendaciones para ponérselo díficil a los «curiosos».

1. Empaquetar todos tus archivos en uno

La primera recomendación sería tomar todas las carpetas y archivos que compondrán el backup y empaquetarlos en un único archivo.

Vamos a imaginar que tenemos 3 documentos de texto sueltos. Los seleccionamos y abrimos nuestra herramienta de empaquetado, en mi caso Ark.

Existen varios formatos de empaquetado a elegir: zip, tar, tar-gz, gzip… Pero uno de ellos permite además, poner una contraseña de desempaquetado y cifrar el listado de archivos que contiene. Es el formato 7-zip. Seleccionamos este tipo y se habilitarán las opciones de Protección por contraseña.

Aceptamos y obtendremos un único archivo Documentos.7z.

Si intentamos abrirlo, no solo nos pedirá la contraseña de desempaquetado, si no que ocultará el listado de archivos que contiene.

2. Encriptar el archivo empaquetado

Ahora vamos a encriptar el archivo empaquetado para asegurarnos al 99,99% (nunca existe el 100% en seguridad) de que están seguros.

Para ello vamos utilizar el programa GNUPG, que viene incluido en prácticamente todas las distribuciones GNU/Linux. Si no está instalado lo localizamos a través de nuestro gestor de paquetes.

Para encriptar nuestro archivo, abrimos una terminal en el directorio donde se encuentra y nos identificamos como root:

Ahora tecleamos la orden:

gpg -c Documentos.7z

Nos pedirá una contraseña para poder desencriptarlo después.

Ponemos la contraseña y esto nos generará un archivo con extensión gpg (Documentos.7z.gpg).

Este archivo resultante es el que podríamos guardar en nuestro servicio de cloud como copia de seguridad.

Al intentar abrirlo veremos que el contenido está completamente cifrado:

Si necesitamos recuperar su contenido, solo tenemos que abrir una terminal y teclear el comando:

gpg Documentos.7z.gpg

Y poner la contraseña de desencriptación.

Y es todo. Disfrutar de las ventajas de la nube pero mantened la privacidad de vuestros archivos. Nos vemos en el siguiente post!

Ahora lo que nos falta es crear la página archivo (archive page) para listar nuestro custom post, a modo de listado de entradas de WordPress.

Para ello, al igual que hicimos con el template para el custom post (single-vehiculos.php), necesitamos crear un nuevo archivo (page.php) al que llamaremos por ejemplo page-todos-los-vehiculos.php y guardaremos en el directorio principal del tema activo.

page.php es el archivo que contiene la estructura básica para una página interna de WordPress y al igual que hicimos con single.php, vamos a aprovechar el codigo escrito para copiarlo en nuestro archivo page-todos-los-vehiculos.php y eliminaremos lo que no necesitamos, dejando únicamente el inicio y final del loop.

Dentro del loop vamos a crear la consulta que buscará todas entradas de tipo vehículo.

La esctructura de la consulta se define:

$args = array(
    'post_type' => 'vehiculos',
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order' => 'DESC'
);
$consulta_vehiculos = new WP_Query($args);

Primero declaramos una variable $args (argumentos) de tipo array donde pasamos los argumentos de la consulta. Los argumentos más básicos que vamos a definir son: el tipo de post al que hacemos referencia (vehículos), el número de resultados por página (-1 devuelve todos los resultados), el orden (por fecha) y el recorrido del orden (ascendente ASC o descendente DESC).

Existen muchos otros argumentos que ponemos incorporar a la consulta para complicarla todo lo que deseemos, pero de momento vamos a empezar por lo más básico.

Despues generamos una nueva consulta new WP_Query() pasándole los argumentos definidos anteriormente: new WP_Query($args).

A continuación vamos a mostrar los datos recogidos en la consulta creando nuestro propio loop. La síntaxis sería la siguiente:

while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
   //Código
endwhile; wp_reset_postdata();

La forma de declarar nuestro loop personalizado es muy similar al que toma WordPress para el loop principal, con la diferencia de que especificamos la variable donde tenemos nuestra consulta:

while($consulta_vehiculos->have_posts())
$consulta_vehiculos->the_post()

Lo que se traduciría en lenguaje comprensible como: «Mientras existan posts de vehículos, muestrame el post de vehículo«.

El final del loop finaliza con endwhile;

Además, para los loops personalizados añadimos la función wp_reset_postdata() para «limpiar» los datos de la consulta una vez mostrados y que no interfieran con otros loops que podamos definir en otras partes.

Para asociar este nuevo archivo con una página interna de WordPress que podamos, por ejemplo añadir al menú principal, crearemos una nueva página y utilizaremos como slug (enlace permanente) el nombre que le hayamos dado al archivo del listado, es decir si hemos llamado al archivo page-todos-los-vehiculos.php utilizaremos como slug en la nueva página «todos-los-vehiculos«.

Como siempre, actualizamos los enlaces permanentes de WordPress en Ajustes – Enlaces Permanentes – Guardar Cambios y en este momento quedará asociado el nuevo archivo page-todos-los-vehiculos.php con la página interna de WordPress Vehículos.

Para probar nuestra nueva página, vamos a incluir en loop una llamada a la función the_title(), que deberá devolvernos todos los títulos de los post de tipo vehículo que haya en la base de datos:

while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
    the_title();
endwhile; wp_reset_postdata();

Si visualizamos la página Vehículos, veremos que mostrará el título del post que hay actualmente creado de tipo vehículo:

Vamos a añadir algunos vehículos más para poder jugar con los listados de resultados:

Para la página de archivo de vehículos, tomaremos algunos datos para generar el listado, a parte del título, tomaremos la imagen destacada y una parte del contenido. Para ello, en lugar de llamar a la función the_content(), llamaremos a la función the_excerpt(), que toma solamente una parte del contenido.

while($consulta_vehiculos->have_posts()) : $consulta_vehiculos->the_post();
    the_post_thumbnail();
    the_title('<h2>','</h2>');
    the_excerpt();
endwhile; wp_reset_postdata();

Obtendríamos como resultado:

Por supuesto ya dependería de nosotros darle un poco de formato CSS, metiendo cada apartado en su correspondiente DIV, ajustando el tamaño de las miniaturas, etc. Detalles de diseño que no vamos a ver en este artículo, pues se extendería demasiado y el objetivo principal es el de generar el listado de entradas.

En siguientes artículos veremos cómo paginar este listado, para cuando tengamos un número importante de entradas.

Nos vemos en el siguiente post!

Dentro de cualquier tema WordPress, el archivo destinado a cargar la información de una entrada es el single.php.

La siguiente imagen muestra el contenido del archivo single.php del tema Twenty Sixteen de WordPress. Cada tema tendrá su código propio, pero lo que nos interesa identificar es dónde comienza y termina el loop. El loop es el código que recoge la información del post que estamos llamando y suele comenzar con:

while ( have_posts() ) : the_post();

y terminar con:

endwhile;

Todo lo que va dentro del loop suelen ser las funciones que llaman al título de la entrada, al contenido y a la sección de comentarios.

Para crear un fichero similar que cargue el contenido de nuestros custom posts, solo tenemos que crear un nuevo archivo al que llamaremos single-nombre_del_custom_post.php. En nuestro caso será single-vehiculos.php.

Para este nuevo archivo podemos aprovechar todo el contenido del single.php original (para llamar a la cabecera, sidebars, footer, y menús del tema…) y quedarnos únicamente con el loop vacío, pues añadiremos nuestro propio código para cargar el custom post de Vehículos.

Una vez creado el archivo single-vehiculos.php vamos a refrescar los enlaces permanentes de WordPress, para que este detecte que cada vez que accedamos a una URL del tipo mi-dominio.com/vehiculos/nombre-del-post, cargue la nueva plantilla en lugar de la original. Solo tenemos que ir a Ajustes de WordPress – Enlaces permanentes y Guardar cambios.

Si intentamos acceder a una entrada de tipo Vehículo, veremos que carga correctamente (la URL toma /vehiculos/ford-focus-1-8-tddi), pero el contenido está vacío. Es normal pues dentro del loop no hemos añadido nada de momento.

Para llamar al título del contenido, añadiremos la función the_title() dentro del loop:

Y como resultado obtenedremos el título de la entrada:

Lo normal es que el título tenga un tamaño destacado, para ello la función the_title() permite definir que el contenido aparezca entre etiquetas HTML, por ejemplo un H2, declarándolo de este modo:

the_title('<h2>','</h2>');

Y el resultado obtenido será:

También podríamos añadir la imagen destacada, con la función the_post_thumbnail(), declarándola a continuación del título, así como el contenido (procedente del editor de WordPress) con la función the_content():

// Start the loop.
while ( have_posts() ) :
    the_post();
    the_title('<h2>','</h2>'); //Llama al título del post
    the_post_thumbnail(); //Llama a la imagen destacada del post
    the_content(); //Llama al contenido
// End of the loop.
endwhile;

Esto nos dará como resultado:

Hay que tener en cuenta que la imagen destacada aparecerá con el tamaño del archivo original, o el que permita el contenedor (<div>) donde se encuentre. Podemos llamar a la imagen destacada con un tamaño específico siempre que este se haya declarado en el archivo de funciones del tema.

Por ejemplo, si quisiéramos que la imagen destacada apareciera en el post con un ancho de 500px, tendríamos que definirlo en el archivo de funciones (function.php) del tema activo con:

function tamano_miniaturas(){
    add_image_size('cabeceraPost', 500, false);
}
add_action('after_setup_theme', 'tamano_miniaturas');

La función add_image_size(), recibe 4 parámetros, el identificador del tamaño, la anchura, la altura y el factor de recorte de proporción (true o false). En este caso solo hemos especificado la anchura, ya que desconocemos la proporción de la imagen y de fijar un alto fijo esta podría aparecer desproporcionada.

Después tendríamos que llamar a la función the_post_thumbnail(‘cabeceraPost’), pasándole como parámetro el identificador del tamaño que hemos especificado en add_image_size().

Pero esto son temas de diseño que no vamos a abordar en este post.

Solo nos quedaría llamar a nuestros campos personalizados para mostrar el precio y matrícula del vehículo.

Advances Custom Field dispone de 2 funciones principales para extraer la información de los campos personalizados:

• the_field(‘identificador_del_campo’)
• get_field(‘identificador_del_campo’)

La principal diferencia entre ellos es que the_field() escribe directamente los datos del campo en el lugar donde lo invoquemos, (viene pre-formateado). Y get_field() está pensado para extraer el valor del campo y almacenarlo en algún lugar, por ejemplo una variable. El uso de uno u otro dependerá de nuestras necesidades. Si solo necesitamos pintar el valor del campo en un div vacío, puede que nos interese hacerlo directamente con the_field(), pero si el dato va a ir dentro de una estructura HTML más compleja, como una tabla, es posible que el pre-formateo de the_title() interfiera y no se muestre correctamente, en casos así sería mejor usar el get_field() guardando el dato en una variable y pintar la variable con un echo. Así es como lo vamos a hacer en nuestro ejemplo:

Definimos una variable $precio y le pasamos el valor del campo personalizado ‘precio’ con un get_field()

$precio = get_field('precio');

Y lo mismo con el campo matrícula:

$matricula = get_field('matricula');

Después pintamos los campos con un echo y un poco de HTML:

echo "<h3>Precio: " . $precio . "€</h3>";
echo "Matrícula: " . $matricula . "</h3>";

El resultado obtenido será:

Si necesitamos formatear el precio con separadores de miles y decimales, podemos usar la función number_format() de PHP:

echo "<h3>Precio: " . number_format($precio, 2, ',', '.') . "€</h3>";

A la función number_format() le pasamos la variable $precio, el número de decimales a mostrar, el separador de decimales ‘,’ y el separador de miles ‘.’ y tendremos como resultado:

De esta forma formateamos el precio en el momento de pintarlo en el front-end mientras que en la base de datos se mantiene en formato numérico puro, pudiendo más adelante utilizarlo para ordenar vehículos por precio.

En el siguient post veremos como crear una página archivo con los vehículos que ya tengamos guardados en la base de datos.

¿Para qué sirve un campo personalizado?

Por defecto, en una entrada o página de WordPress tenemos dos campos principales para agregar información, el campo de título y el editor donde se redacta el contenido principal. Pero adicionalmente podemos agregar otro tipo de campos para mostrar en secciones especificas de nuestra plantilla o simplemente como información que solo veremos desde el modo de edición.

Por ejemplo, podríamos crear un campo para poner el precio de un vehículo y llamar a ese dato en una ubicación especifica de nuestra plantilla. O podríamos crear un campo personalizado no visible al público, pero que guarde información importante sobre el vehículo, como información del anterior propietario, historial de revisiones etc.

Advanced Custom Field

WordPress tiene su propio sistema de creación de campos personalizados, pero es algo confuso y poco intuitivo, por lo que muchos desarrolladores optamos por utilizar el plugin Advanced Custom Field, que permite crear campos personalizados de múltiples tipos y llamarlos con sencillas funciones.

Una vez instalado, Advanced Custom Field organiza los campos en grupos, por si necesitas crear diferentes campos para varios custom posts o páginas concretas, así que lo primero que haremos será crear un Nuevo Grupo de Campos:

Lo primero será darle un título al nuevo Grupo de Campos, por ejemplo «Detalles Vehículos».

Antes de añadir los campos, vamos a ver algunos ajustes importantes del nuevo grupo de campos, para empezar su ubicación.

Ubicación del grupo de campos

Lo que nos interesa es que este grupo de campos aparezca en el modo de edición de Vehículos, siendo irrelevante que aparezca en otros modos de edición como Entradas o Páginas.

Así que definiremos la ubicación en los Post Type que sean igual a Vehículo:

Ajustes del grupo de campos

En el apartado de Ajustes definiremos el estilo del grupo de campos, lo recomendable es utilizar el estilo Estándar (WP metabox) que permite la funcionalidad de arrastarlo y soltarlo en la posición que deseemos. Y hablando de posiciones, la siguiente opción nos permite ubicarlo en la zona de central del modo edición (antes o después del contenido) o en el sidebar (lateral).

Agregando campos

Ahora vamos a agregar los campos que necesitemos:

Vamos a agregar un campo para el precio:

Los parámetros más importantes son la Etiqueta (texto que se mostrará en la página de edición), el Nombre del campo (identificador único sin espacios ni caracateres especiales) y opcionalmente, un campo para las intrucciones. Por ejemplo, para el campo Precio vamos a insertar un campo de tipo numérico, puede que un futuro nos interese ordenar los resultados de una búsqueda de vehículos por su precio y si lo especificamos como una cadena de caracteres (con puntuaciones, símbolos de moneda…), el sistema no sabría ordenarlo correctamente, por lo que solo se introducirán números sin puntuaciones ni signos.

Vamos a añadir un par de campos más, uno para la matrícula (de tipo texto) y otro para observaciones internas (de tipo área de texto):

Una vez definidos todos los campos, publicamos:

Publicar el primer Vehículo

Ya estamos listos para publicar un nuevo vehículo. Como en toda entrada pondremos un título y un texto descriptivo y seleccionaremos su/s taxonomía/s, en este caso «Automóvil»:

En la taxonomía de Extras rellenaremos algunas como: Aire Acondicionado, Dirección Asistida, ABS, etc. Y en nuestros nuevos campos personalizados rellenaremos el precio, la matrícula y las observaciones internas.

Ahora que ya tenemos nuestro nuevo contenido publicado es el momento de crear un Template para mostrarlo en pantalla, pero eso lo veremos en el próximo post