Para ello contamos con Composer, un avanzado gestor de paquetes y dependencias para PHP, con el cual podemos instalar de forma sencilla una completa librería PHP para nuestro proyecto y mantener todas sus dependencias al día.

Si tienes contratado un alojamiento web, es posible que desde el panel de gestión (CPanel, Plesk…) ya cuentes con un apartado dedicado a Composer, para facilitarte la instalación de librerías en tus proyectos.

Si eres de los que como yo, desarrollas tus proyectos web en modo local (localhost) para posteriormente subirlo a un hosting final, necesitarás instalar Composer en tu sistema operativo para descargar todas las librerías y dependencias correctamente.

Yo me muevo entre distribuciones basadas en Ubuntu (Debian), aunque seguramente el proceso de instalación no difiera mucho de otras basadas en Arch o Red Hat.

Instalar Composer en Ubuntu (y derivadas)

Cuando hablamos de derivadas, nos referimos a distribuciones que tienen como base Ubuntu, ya sean los sabores oficiales de Ubuntu (Ubuntu Mate, Xubuntu, Lubuntu, Kubuntu…) y otras tales como Linux Mint, KDE Neon, Zorin OS, Elementary OS…

Instalar paquetes necesarios

Antes de instalar Composer, necesitamos contar con los siguientes paquetes previamente instalados:

sudo apt update
sudo apt install wget php-cli php-zip unzip

Descarcar Composer desde el terminal

Vamos a descargar Composer directamente desde la línea de comandos:

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

Con esto hemos descargado el archivo composer-setup.php en el directorio en curso del terminal.

Verificar la instalación

Para garantizar la integridad del archivo descargado utilizamos el HASH SHA-384. Primero tomamos el HASH desde la propia fuente:

HASH="$(wget -q -O - https://composer.github.io/installer.sig)"

Y lo comparamos con nuestro archivo recién descargado:

php -r "if (hash_file('SHA384', 'composer-setup.php') === '$HASH') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

Si la verificación es correcta debemos ver el mensaje «Installer verified», de lo contrario nos dirá «Installer corrupt». En este último caso, tendríamos que volver a empezar el proceso desde el principio hasta que la verificación sea la correcta.

Instalar Composer de modo global

Para poder utilizar Composer desde cualquier ubicación de nuestor equipo, vamos a instalarlo en /usr/local/bin

sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

Deberíamos ver algo como:

All settings correct for using Composer
Downloading...

Composer (version X.X.X) successfully installed to: /usr/local/bin/composer
Use it: php /usr/local/bin/composer

Si todo ha ido bien, lanzamos Composer desde el terminal y deberíamos ver algo así:

Instalar librerías en nuestro proyecto usando Composer

Si decesitamos instalar una librería en nuestro proyecto web, solo tenemos que situarnos en el directorio de nuestro proyecto y ejecutar:

composer require vendor/name

Hay que sustituir vendor/name por el nombre de la librería.

Normalmente se instala un directorio /vendor en nuestro proyecto con todos los archivos y dependencias de la librería referenciada.

Para usarla solo tenemos que hacer require once en nuestro script PHP o archivo de funciones del proyecto y ya tendremos acceso a todas las funciones y métodos de la librería:

require once '/vendor/autoload.php';

Si usas Visual Studio Code, es tan sencillo como abrir un terminal en el directorio y ejecutar la orden:

Y nada más, una vez terminado el proyecto, subimos todo al hosting (incluyendo el directorio /vendor).

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.

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

Las taxonomías sirven para categorizar, organizar y filtrar nuestros contenidos de una forma mucho más concisa que utilizando el simple cajetín de categorías que WordPress incorpora por defecto. De hecho, tanto las categorías como las etiquetas de WordPress son en sí taxonomías. Veremos más adelante por qué.

Continuando con el ejemplo del concesionario de vehículos, supongamos que necesitamos catalogar estos vehículos de diferentes formas. Por ejemplo, podríamos categorizarlos por tipo de vehículo: coche, camión, motocicleta…, pero también podríamos necesitar categorizarlo por el tipo de motor: diesel, gasolina, eléctrico…, por el número de puertas: 3, 4, 5…, por la marca, color, etc.

En este caso, la categoría por defecto se nos quedaría corta, de ahí que necesitemos extender el número de «categorías» para definir correctamente el vehículo. Esa es la función principal de las taxonomías.

Además, gracias a las taxonomías, podremos construir consultas personalizadas para mostrar únicamente las entradas que tengan marcadas esas taxonomías.

Para declarar una taxonomía, utilizaremos como siempre, el archivo de funciones del tema activo (functions.php) o nuestro propio plugin de funciones. Podemos declarar todas las taxonomías que necesitemos utilizando la misma función.

Declara una taxonomía

function mis_taxonomias(){
    //Tipo de Vehículo
    $labels = array(
     'name' => _x('Tipo de Vehículo', 'taxonomy general name', 'twentysixteen'),
     'singular_name' => _x('Tipo de Vehículo', 'taxonomy_general_name', 'twentysixteen'),
     'search_items' => __('Buscar Tipo de Vehículo', 'twentysixteen'),
     'all_items' => __('Todos los Tipos de Vehículos', 'twentysixteen'),
     'parent_item' => __('Padre Tipo de Vehículo', 'twentysixteen'),
     'parent_item_colon' => __('Padre Tipo de Vehículo', 'twentysixteen'),
     'edit_item' => __('Editar Tipo de Vehículo', 'twentysixteen'),
     'update_item' => __('Actualizar Tipo de Vehículo', 'twentysixteen'),
     'add_new_item' => __('Añadir Nuevo Vehículo', 'twentysixteen'),
     'new_item_name' => __('Nuevo Tipo de Vehículo', 'twentysixteen'),
     'menu_name' => __('Tipo de Vehículo', 'twentysixteen'),
    );
    $args = array(
     'hierarchical'  => true,
     'labels'  => $labels,
     'show_ui'  => true,
     'show_admin_column'     => true,
     'query_var'  => true,
     'rewrite'  => array('slug' => 'tipo_de_vehiculo'),
    );
    register_taxonomy('tipo-vehiculo', array('vehiculos'), $args);
}
add_action('init','mis_taxonomias');

La función register_taxonomy() es la encargada de declarar nuestras taxonomías personalizadas.

La declaración es bastante similar a declarar un nuevo custom post. Por un lado recibe las etiquetas (labels) para los textos que se mostrará en el panel de WordPress, y por otro los argumentos (args) que definen las caracteríticas y el comportamiento.

Los argumentos más interesantes son:

• hierarchical: su estado puede ser true o false. Si es true, la taxonomía mostrará los elementos a modo de listado para seleccionarlos tal y como se hace con las Categorías de WordPress. Si está en false, la taxonoḿia se verá como un campo de texto, donde insertaremos manualmente el nombre de los elementos de la taxonomía (como las Etiquetas de WordPress).
• rewrite: Donde especificaremos el slug de la taxonomía, que nos permitirá usar en un nuevo template para obtener un listado de las entradas que incluyan dicha taxonomía.

Una vez declarada, esta taxonomía se incluirá directamente como submenú dentro del menú de Vehículos (nuestro custom posts):

Accediendo a la taxonomía podremos añadir elementos:

Una vez creados los elementos de la taxomía, si añadimos un nuevo vehículo veremos el cajetín de la taxonomía, con su listado de elementos a modo de nueva categoría.

Aprovechando la misma funcion (mis_taxonomias()), vamos a añadir una nueva categoría pero de un estilo más «flexible», donde vamos a especificar los «extras» del vehículo: aire acondicionado, pintura metalizada, dirección asistida, navegador…). Para ello crearemos una taxonomía al estilo de Etiquetas de WordPress.

//Extras del Vehículo
    $labels = array(
     'name' => _x('Extras', 'taxonomy general name', 'twentysixteen'),
     'singular_name' => _x('Extras', 'taxonomy_general_name', 'twentysixteen'),
     'search_items' => __('Buscar Extras', 'twentysixteen'),
     'all_items' => __('Todos los Extras', 'twentysixteen'),
     'parent_item' => __('Padre Extras', 'twentysixteen'),
     'parent_item_colon' => __('Padre Extras', 'twentysixteen'),
     'edit_item' => __('Editar Extras', 'twentysixteen'),
     'update_item' => __('Actualizar Extras', 'twentysixteen'),
     'add_new_item' => __('Añadir Extras', 'twentysixteen'),
     'new_item_name' => __('Nuevo Extras', 'twentysixteen'),
     'menu_name' => __('Extras', 'twentysixteen'),
    );
    $args = array(
     'hierarchical'  => false,
     'labels'  => $labels,
     'show_ui'          => true,
     'show_admin_column'     => true,
     'query_var'  => true,
     'rewrite'  => array('slug' => 'extras'),
    );
    register_taxonomy('extras', array('vehiculos'), $args);

Para conseguir el aspecto de taxonomía a modo de etiquetas, solo tenemos que definir el parámetro ‘hierarchical’ en false.

Ahora que sabemos cómo declarar nuevas taxonomías, crearemos algunas más que usaremos para hacer pruebas.

En el siguiente post veremos cómo crear campos personalizados internos para nuestro custom post, como por ejemplo, un campo para el precio, otro para el año de fabricación, el kilometraje (si el vehículo es usado), etc.

Imaginemos que estamos desarrollando la web de un concesionario de vehículos y queremos publicarlos de forma que cada vehículo se trate como una entrada individual, y así poder categorizarlos, añadirles etiquetas, realizar búsquedas, etc.

Los custom post pueden ser declarados en el archivo de funciones del tema activo (functions.php) o en nuestro propio plugin de funciones.

Declarar un custom post

La estructura básica para añadir el nuevo custom post sería:

<?php
//Custom Post Vehículos
function post_Vehiculos(){
 $labels = array(
 'name'               => _x('Vehículos', 'twentysixteen'),
 'singular_name'      => _x('Vehículo', 'post type singular name', 'twentysixteen'),
 'menu_name'          => _x('Vehículos', 'admin menu', 'gestiona-inmobiliaria'),
 'name_admin_bar'     => _x('Vehículos', 'add new on admin bar', 'twentysixteen'),
 'add_new'            => _x('Añadir Vehículo', 'book', 'twentysixteen'),
 'add_new_item'       => __('Añadir Nuevo Vehículo', 'twentysixteen'),
 'new_item'           => __('Nuevos Vehículos', 'twentysixteen'),
 'edit_item'          => __('Editar Vehículo', 'twentysixteen'),
 'view_item'          => __('Ver Vehículo', 'twentysixteen'),
 'all_items'          => __('Todos los Vehículos', 'twentysixteen'),
 'search_items'       => __('Buscar Vehículos', 'twentysixteen'),
 'parent_item_colon'  => __('Parent Vehículos:', 'twentysixteen'),
 'not_found'          => __('No se han encontrado Vehículos', 'twentysixteen'),
 'not_found_in_trash' => __('No se han encontrado Vehículos en la papelera', 'twentysixteen')
 );
 $args = array(
     'labels'             => $labels,
     'description'        => __('Description.', 'twentysixteen'),
     'public'             => true,
     'publicly_queryable' => true,
     'show_ui'            => true,
     'show_in_menu'       => true,
     'query_var'          => true,
     'rewrite'            => array('slug' => 'vehiculos'),
     'capability_type'    => 'post',
     'has_archive'        => true,
     'hierarchical'       => false,
     'menu_position'      => 6,
     'supports'           => array('title', 'editor', 'author', 'thumbnail'),
 );
 register_post_type('vehiculos', $args);
}
add_action('init', 'post_Vehiculos');
?>

La función contiene 2 elementos principales, las etiquetas ($labels) y los argumentos ($args).

Las etiquetas hacen referencia a los textos que muestra WordPress acerca del custom post, tales como el nombre en singular, en plural, cómo se muestra en el menú, el texto para añadir uno nuevo, para editarlo, etc.

Los argumentos tratan cómo se comportará el custom post, algunos parámetros interesantes son:

• rewrite: el slug que generará nuestro custom post, ejemplo: www.tudominio.com/vehiculos/url_del_post. Es importante escoger uno apropiado de cara al SEO.
• capability_type: especifica si el custom post se va a comportar como una página interna (para información fija) o como un post (entrada). Normalmente pondremos tipo post.
• has_archive: define si el custom post va a tener su propio archivo-listado de posts.
• menu_position: Controla en qué posición del menú aparecerá el nuevo custom post, por ejemplo, antes o después de las Entradas normales. Podemos jugar con el número hasta dejarlo donde queremos.
• supports: Define los elementos que podremos utilizar dentro del custom post, por ejemplo un campo para el título, el editor de WordPress, el autor y la imagen destacada (thumbnail).

Una vez declarado estará disponible en nuestro menú:

Si añadimos un nuevo vehículo, veremos una pantalla de edición muy similar a las entradas, con su campo para el título, el editor de WordPress, la selección del autor y la imagen destacada:

Sin embargo esto podríamos enriquecerlo mucho más, añadiendo categorías, taxonomías y campos personalizados que desatarán realmente todo el potencial de los custom post y que harán que podamos realizar prácticamente cualquier tipo de web.

Veremos cómo integrarlos en siguientes posts.