programación web – danisanchez.net

Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario

dani.sanchez — Thu, 16 Jan 2020 09:46:15 +0000

Hace unos días veíamos los conceptos básicos para integrar OpenStreetMap en nuestras aplicaciones web.

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.




    
    
    
    
    
    
    
    Calcular rutas

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.

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).

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:




    
    
    
    
    
    Document


    Cómo llegar

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…

Crear el Archive Page de nuestro Custom Post (sin plugins)

dani.sanchez — Fri, 26 Apr 2019 12:00:40 +0000

Seguimos con esta serie de artículos destinados a la creación de nuestros propios tipos de contenido en WordPress. Hasta ahora hemos visto cómo crear un custom post, asignarle taxonomías y campos personalizados y hasta creamos un template para cargar toda esta información.

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('','');
    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!

Crear un template para cargar nuestro custom post (contenido personalizado)

dani.sanchez — Thu, 11 Apr 2019 08:05:32 +0000

Continuamos con esta serie de artículos en los que vemos cómo crear contenidos personalizados en WordPress. Una vez que ya hemos creado nuestro custom post, nuestras taxonomías y campos personalizados, quedará crear la plantilla o template que cargará toda esta información.

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('','
');

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('',''); //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 (

) 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 "Precio: " . $precio . "€";
echo "Matrícula: " . $matricula . "";

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 "Precio: " . number_format($precio, 2, ',', '.') . "€
";

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.

Taxonomías, para qué sirven y cómo crearlas (sin plugins)

dani.sanchez — Mon, 08 Apr 2019 10:56:34 +0000

Tras el último post en el que veíamos cómo crear custom posts, continuamos esta serie de artículos aprendiendo a generar nuestros propios contenidos en WordPress. Uno de los elementos más importantes son las taxonomías.

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.

Crear un custom post en WordPress (sin plugins)

dani.sanchez — Fri, 05 Apr 2019 08:09:47 +0000

En WordPress no estamos limitados a crear páginas internas y entradas de noticias, podemos crear nuestros propios contenidos a través de los llamados «custom posts«, es aquí donde nos damos cuenta del verdadero potencial de WordPress.

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:

 _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.

Crear un select con buscador integrado, gracias a select2

dani.sanchez — Fri, 22 Mar 2019 09:16:13 +0000

Cuántas veces hemos generado formularios con campos selects interminables (por ejemplo un listado de clientes, de países, de productos…). Navegar a través de un select de varios cientos de elementos es algo tedioso que seguramente tu cliente o empresa te pedirá solucionar.

Lo más óptimo sería ofrecer un campo de búsqueda dentro del propio select aprovechando jQuery y algo de CSS, lo que nos tocaría unas cuantas horas de investigar y programar.

Afortunadamente existe Select2, una librería pensada precisamente para esto, insertar un campo de búsqueda dentro del campo select que deseemos y que además sea sencillo de implementar.

Instalación de select2

Para empezar vamos a llamar a los dos archivos (css y js) necesarios para ejecutar el script y que tendrán que llamarse dentro del de nuestra página.

Para WordPress tendremos que integrarlos a través de una función que podemos llamar en nuestro archivo de funciones (functions.php):

function buscador_en_select(){
    wp_enqueue_style('estilos-select', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css', array(),'1.0');
    wp_enqueue_script('jquery'); 
    wp_enqueue_script('script-select', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js', array('jquery'), '1.0');
    wp_enqueue_script('mi-script', get_template_directory_uri().'/js/mi-script.js', array('script-select'),'1.0');
}
add_action('wp_enqueue_scripts', 'buscador_en_select');

Como véis, hemos llamado también a jQuery, por si no está ya implementado en el tema y además hemos llamado a mi-script, que es un archivo que crearemos y subiremos al directorio del tema activo en la carpeta js (la crearemos si no existe).

Mi Script

Para integrar select2 crearemos un pequeño script en un archivo al que llamaremos mi-script.js y que guardaremos en la ruta /wp-content/themes/tema-activo/js/mi-script.js.

En él insertaremos el siguiente código:

jQuery(document).ready(function($){
    $(document).ready(function() {
        $('.mi-selector').select2();
    });
});

La línea $(‘mi-selector’).select2() indica que a todos los select que especifiquemos con la clase ‘mi-selector’, se les aplicará la funcionalidad de integrar un buscador.

Por ejemplo:

Se vería así:

También funciona perfecto con campos de selección múltiple, solo tenemos que especificarlo en el select, nombrándolo con corchetes (array) y especificando:

multiple="multiple"

, como puedes ver en el siguiente campo:



Selecciona una fecha: 



Cada navegador tiene su particular calendario, que como base, ayuda a que el usuario inserte una fecha correctamente, aunque de cara a funcionalidades más avanzadas están muy limitados.



Por ejemplo, no podemos enlazar dos campos de tipo fecha para que se comuniquen entre sí. Imagina que quieres incorporar un sistema de reserva de apartamentos en tu web, y quieres que cuando el usuario inserte la fecha de entrada, automáticamente la fecha de salida parta del día siguiente a la fecha de entrada, o que no se pueda escoger como fecha de salida, una fecha anterior a la de entrada. Con los calendarios basícos integrados por los navegadores actuales esto no es posible.



Pero con Datepicker si.



Para todo lo que requiera de una avanzada programación de fechas, Datepicker sigue siendo una excelente herramienta, y en este post vamos a ver cómo integrarlo en WordPress y cómo hacer las configuraciones más útiles dentro de cualquier sistema de reservas.



1. Descargar Datepicker



El primer paso es acudir a la web de descarga de Datepicker y descargar la última versión estable, que en el momento de escribir este post es la 1.12.1.



Tras descomprimir el ZIP, los archivos que nos interesa son:



jquery-ui.css
jquery-ui.structure.css
jquery-ui.theme.css
jquery-ui.js
Además, crearemos un archivo .js para nuestras propias funciones JavasScript, al que llamaremos funciones.js.



Y la carpeta images que tendremos que subir al mismo directorio que los archivos CSS.







Mi recomendación es subirlos a la misma carpeta donde se encuentra el tema activo de WordPress, es decir /wp-content/themes/tema_activo/



Y dentro crear, si no existen, dos subdirectorios, css y js.



/wp-content/themes/tema_activo/css/ donde subiremos los archivos CSS y la carpeta images de Datepicker.



/wp-content/themes/tema_activo/js/ donde subiremos el archivo .js de Datepicker y nuestro archivo funciones.js.



De tal forma que la estructura de archivos de Datepicker quede así en nuestro proyecto:



wp-content/themes/tema_activo/css/jquery-ui.css
wp-content/themes/tema_activo/css/jquery-ui-theme.css
wp-content/themes/tema_activo/css/jquery-ui.structure.css
wp-content/themes/tema_activo/css/images/
wp-content/themes/tema_activo/js/jquery-ui.js
wp-content/themes/tema_activo/js/funciones.js



2. Declarar los archivos de Datepicker en WordPress



Una vez subidos todos los archivos, necesitamos declararlos en WordPress para que este los reconozca. Lo normal es hacerlo dentro del archivo de funciones (functions.php) del tema activo, pero si es un tema que se actualiza con frecuencia, también podemos crear nuestro propio plugin de funciones y declararlo ahí de la misma forma:







3. Configuraciones básicas de Datepicker



Para personalizar nuestro calendario, nos vamos a dirigir a nuestro archivo funciones.js y escribimos:



$ = jQuery.noConflict();
$(document).ready(function(){
    $(function(){
        $("#datepicker1").datepicker();
    });
});



El identificador #datepicker1 es el que tenemos que usar en el campo input donde queremos que aparezca el calendario, por ejemplo:







Imprimiría:







Hasta aquí no difiere mucho de la funcionalidad del calendario integrado por los propios navegadores, además por defecto está inglés, tanto las cadenas de texto como el hecho de que la semana comienza en Domingo.



Vamos a comenzar definiendo las etiquetas para que aparezca en español. Para ello tenemos que añadir una serie de parámetros a la función datepicker(), tal y como se muestra en el siguiente código:



$("#datepicker1").datepicker({
   closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
});



Así conseguimos que nuestro calendario ahora se vea en español:







Pero nos falta un detalle más, y es hacer que la semana comience en Lunes en lugar de Domingo, para ello añadimos el parámetro:



firstDay: 1



$("#datepicker1").datepicker({
closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
   firstDay: 1, //Hace que la semana comience en Lunes
});



Y aquí el resultado:







Otra opción interesante es que no se pueda seleccionar un día anterior a la fecha actual, es decir, si hoy estamos a 10 de Diciembre de 2018, el calendario no nos va a permitir seleccionar una fecha anterior, para ello añadimos el parámetro:



minDate: 0



$("#datepicker1").datepicker({
closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
   firstDay: 1, //Hace que la semana comience en Lunes
   minDate: 0, //Hace que no se puedan seleccionar fechas pasadas
});



Fijaos cómo los días anteriores aparecen en un color más transparente, indicando que no se pueden seleccionar:







Respecto al formato actual de la fecha, si seleccionamos un día en concreto veremos que el formato está definido en «mes/dia/año»:







Si queremos modificar el formato de fecha usamos el parámetro:



dateFormat: «dd/mm/yy»



$("#datepicker1").datepicker({
closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
   firstDay: 1, //Hace que la semana comience en Lunes
   minDate: 0, //Hace que no se puedan seleccionar fechas pasadas
   dateFormat: "dd/mm/yy", //Establece el formato de fecha
});



Cuyo resultado sería:







Otra opción que podría resultarnos de interés es la posibilidad de cambiar el mes y el año directamente, para ello usaríamos los parámetros:



changeMonth: true,
changeYear: true,



$("#datepicker1").datepicker({
closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
   firstDay: 1, //Hace que la semana comience en Lunes
   minDate: 0, //Hace que no se puedan seleccionar fechas pasadas
   dateFormat: "dd/mm/yy", //Establece el formato de fecha
   changeMonth: true, //Permite seleccionar el mes directamente
   changeYear: true, //Permite seleccionar el año directamente
});



El resultado:







4. Enlazando dos Datepickers



Hasta aquí hemos realizado configuraciones básicas, sobre todo para adaptar Datepicker al sistema de calendario español. Ahora veremos algo realmente interesante que consiste en enlazar dos calendarios Datepicker, de forma que cuando se seleccione una fecha en el Datepicker1, el Datepicker2 impida seleccionar una fecha anterior, muy interesante para sistemas de reservas.



Para ello vamos a declarar un segundo Datepicker al que llamaremos #datepicker2, con los mismos parámetros que el #datepicker1.



$("#datepicker2").datepicker({
closeText: 'Cerrar',
   prevText: '< Ant',
   nextText: 'Sig >',
   currentText: 'Hoy',
   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
   monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
   dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
   dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
   dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], 
   firstDay: 1, //Hace que la semana comience en Lunes
   minDate: 0, //Hace que no se puedan seleccionar fechas pasadas
   dateFormat: "dd/mm/yy", //Establece el formato de fecha
   changeMonth: true, //Permite seleccionar el mes directamente
   changeYear: true, //Permite seleccionar el año directamente
});



Ahora añadimos como parámetro al #datepicker1 el siguiente código:



onClose: function (selectedDate){
    $("#datepicker2").datepicker("option", "minDate", selectedDate);
}



Y como parámetro del #datepicker2 el siguiente código:



onClose: function (selectedDate){
    $("#datepicker1").datepicker("option", "maxDate", selectedDate);
}



Recuerda añadir una coma (,) al final si vas a seguir añadiendo parámetros.



Creamos un nuevo input:







Y aquí el resultado, si seleccionamos como fecha de entrada el 25 de Diciembre, veremos que en fecha de salida no podemos seleccionar días anteriores al 25 de Diciembre:







Y ya para finalizar veremos una función para deshabilitar rangos de fechas, es decir, imagina que en tu web de reserva de apartamentos quieres que cuando el usuario despligue el calendario aparezcan bloqueados todos los días que esté reservado.



Para ello, previamente, tendríamos que hacer una consulta a la base de datos para traernos las fechas de entrada y salida de cada reserva y guardarlas en un vector o array:



Para la función siguiente necesitamos recoger las fechas de la base de datos y pasarlas a formato «mes/día/año».



En PHP es fácil:



format('m/d/Y');
?>



Cada grupo de fechas entrecomilladas representa un rango (fecha de entrada y fecha de salida), añadimos tantos rangos como reservas haya en la base de datos:



var RangeDates = ["01/10/2019,01/15/2019","01/17/2019,01/24/2019"];
var RangeDatesIsDisable = true;



Este ejemplo tomaría 2 rangos de fechas, compuestos por:



Del 10 de Enero de 2019 al 15 de Enero de 2019.
Del 17 de Enero de 2019 al 24 de Enero de 2019



Pasamos la siguiente función que hará las comprobaciones, desglosando los meses, días y años de cada fecha:



function DisableDays(date){
    var isd = RangeDatesIsDisable;
    var rd = RangeDates;
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();
    for (i = 0; i < rd.length; i++){
        var ds = rd[i].split(',');
        var di, df;
        var m1, d1, y1, m2, d2, y2;
        if(ds.length == 1){
            di = ds[0].split('/');
            m1 = parseInt(di[0]);
            d1 = parseInt(di[1]);
            y1 = parseInt(di[2]);
            if (y1 == y && m1 == (m + 1) && d1 == d) return [!isd];
        }
 else if (ds.length > 1){
            di = ds[0].split('/');
            df = ds[1].split('/');
            m1 = parseInt(di[0]);
            d1 = parseInt(di[1]);
            y1 = parseInt(di[2]);
            m2 = parseInt(df[0]);
            d2 = parseInt(df[1]);
            y2 = parseInt(df[2]);
          if(y1 >= y || y <= y2){
              if ((m + 1) >= m1 && (m + 1) <= m2){
             if (m1 == m2){
                 if (d >= d1 && d <= d2) return [!isd];
                }
 else if(m1 == (m + 1)){
                    if (d >= d1) return [!isd];
                }
 else if(m2 == (m + 1)){
                    if (d <= d2) return [!isd];
                }
 else return [!isd];
              }
          }
        }
    }
    return [isd];
}



Y por último añadimos el parámetro: beforeShowDay: DisableDays, a los dos Datepicker, quedando finalmente ambos así:



$("#datepicker1").datepicker({
    closeText: 'Cerrar',
    prevText: '< Ant',
    nextText: 'Sig >',
    currentText: 'Hoy',
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
    firstDay: 1,
    minDate: 0,
    dateFormat: "dd/mm/yy",
    changeMonth: true,
    changeYear: true,
    beforeShowDay: DisableDays,
    onClose: function (selectedDate){
        $("#datepicker2").datepicker("option", "minDate", selectedDate); 
    }
});
$("#datepicker2").datepicker({
    closeText: 'Cerrar',
    prevText: '< Ant',
    nextText: 'Sig >',
    currentText: 'Hoy',
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
    firstDay: 1,
    minDate: 0,
    dateFormat: "dd/mm/yy",
    changeMonth: true,
    changeYear: true,
    beforeShowDay: DisableDays,
    onClose: function (selectedDate){
        $("#datepicker1").datepicker("option", "minDate", selectedDate);
    }
});



Como se aprecia al desplegar el calendario de fecha de entrada, ambos rangos aparecen deshabilitados:







Esto es solo un extracto de lo que considero es más importante y habitual configurar en cualquier sistema de reservas, pero en la documentación oficial de Datepicker encontrarás más funcionalidades, métodos y parámetros de configuración:







Espero que este post te haya sido de interés y utilidad, si es así no dudes en compartirlo o guardarlo en tus favoritos para futuras consultas.



Nos vemos en el siguiente post!



Cómo crear roles personalizados en WordPress (sin plugins)
dani.sanchez — Wed, 21 Nov 2018 18:45:19 +0000

En WordPress existen 5 roles predefinidos que, en función de los permisos y sus capacidades para con el Dashboard, podemos ordenar en:



Suscriptor (Subscriber): No puede crear ningún tipo de contenido pero puede acceder a zonas o contenidos, programados previamente, a los que no pueda acceder un usuario Público.
Colaborador (Contributor): Puede crear sus propias entradas aunque estas quedan en estado pendiente de publicación hasta que las apruebe un Editor o Administrador.
Autor (Author): Puede publicar, editar y eliminar sus propias entradas pero no las de otro usuario.
Editor (Editor): Puede publicar, editar y eliminar cualquier entrada, tanto propia como de otros usuarios. Además puede crear, editar y eliminar páginas.
Administrador (Administrator): Puede gestionar cualquier contenido o configuración del sitio web.
Super Administrador (Super Admin): En proyectos Multi-Sitio puede crear y eliminar nuevos proyectos, administrar redes, administrar usuarios de red, etc.



Pero por si estos roles se nos quedasen cortos, podemos añadir tantos roles queramos con las capacidades específicas que necesitemos.



Lo primero será consultar las capacidades que tenemos a nuestra disposición para otorgar a cada uno de los roles que creemos:



Capability Super Admin Administrator Editor Author Contributor Subscriber
create_sites Y          
delete_sites Y          
manage_network Y          
manage_sites Y          
manage_network_users Y          
manage_network_plugins Y          
manage_network_themes Y          
manage_network_options Y          
upload_plugins Y          
upload_themes Y          
upgrade_network Y          
setup_network Y          
Capability Super Admin Administrator Editor Author Contributor Subscriber
activate_plugins Y Y
(single site or
enabled by network setting)        
create_users Y Y (single site)        
delete_plugins Y Y (single site)        
delete_themes Y Y (single site)        
delete_users Y Y (single site)        
edit_files Y Y (single site)        
edit_plugins Y Y (single site)        
edit_theme_options Y Y        
edit_themes Y Y (single site)        
edit_users Y Y (single site)        
export Y Y        
import Y Y        
Capability Super Admin Administrator Editor Author Contributor Subscriber
install_plugins Y Y (single site)        
install_themes Y Y (single site)        
list_users Y Y        
manage_options Y Y        
promote_users Y Y        
remove_users Y Y        
switch_themes Y Y        
update_core Y Y (single site)        
update_plugins Y Y (single site)        
update_themes Y Y (single site)        
edit_dashboard Y Y        
customize Y Y        
delete_site Y Y        
Capability Super Admin Administrator Editor Author Contributor Subscriber
moderate_comments Y Y Y      
manage_categories Y Y Y      
manage_links Y Y Y      
edit_others_posts Y Y Y      
edit_pages Y Y Y      
edit_others_pages Y Y Y      
edit_published_pages Y Y Y      
publish_pages Y Y Y      
delete_pages Y Y Y      
delete_others_pages Y Y Y      
delete_published_pages Y Y Y      
delete_others_posts Y Y Y      
delete_private_posts Y Y Y      
edit_private_posts Y Y Y      
read_private_posts Y Y Y      
delete_private_pages Y Y Y      
edit_private_pages Y Y Y      
read_private_pages Y Y Y      
unfiltered_html Y Y (single site) Y (single site)      
Capability Super Admin Administrator Editor Author Contributor Subscriber
edit_published_posts Y Y Y Y    
upload_files Y Y Y Y    
publish_posts Y Y Y Y    
delete_published_posts Y Y Y Y    
edit_posts Y Y Y Y Y  
delete_posts Y Y Y Y Y  
Capability Super Admin Administrator Editor Author Contributor Subscriber
read Y Y Y Y Y Y



Para crear un nuevo rol, insertamos el siguiente código en el archivo de funciones del tema activo (functions.php) o en nuestro propio plugin de funciones. Vamos a crear por ejemplo, un rol llamado Cliente:



$resultado = add_role(
    'cliente',
    __( 'Cliente' ),
    array(
        'read'         => true,  // true allows this capability
        'edit_posts'   => false,
        'delete_posts' => false,
    )
);



En el array añadimos las principales capacidades por defecto:



read (lectura como verdarero).
edit_posts (editar entradas como falso).
delete_posts (borrar entradas como falso).



A continuación añadimos las capacidades extras para el nuevo rol:



//Actualizar capacidades Cliente
function capacidades_cliente(){
    $role = get_role('cliente');
    $role->add_cap('publish_posts', true);
    $role->add_cap('edit_posts', true);
    $role->add_cap('delete_posts', true);
}
add_action('init', 'capacidades_cliente', 11);



Esta función añade al Rol Cliente las capacidades para publicar entradas, editarlas y eliminarlas, pero solamente sus propias entradas, para afectar a las entradas de otros usuarios habría que usar la capacidades «publish_others_posts», «edit_others_posts» y «delete_others_posts».



A TENER EN CUENTA: Tanto la creación de nuevos roles con add_role(), como las capacidades añadidas, quedan grabadas en la base de datos y aunque eliminemos las funciones, permanecerán activas en el sitio. Si queremos eliminar un rol o una capacidad determinada, usamos remove_role() y remove_cap(‘capacidad’, true), por ejemplo si queremos quitar la capacidad de eliminar entradas, crearíamos la función:



//Eliminar capacidades Cliente
function eliminar_capacidades_cliente(){
   $role = remove_cap('delete_posts', true);
}
add_action('init', 'eliminar_capacidades_cliente', 11);



O para eliminar completamente el rol:



//Eliminar rol Cliente
$resultado = remove_role('cliente');



Y una vez que se ejecute por primera vez, la capacidad quedará eliminada de la base de datos.



Espero que este post os sirva para sacar más partido a vuestros usuarios, definiendo exactamente aquellas funciones o permisos que queráis otorgarles.



Añadir campos adicionales en el registro de WordPress
dani.sanchez — Fri, 02 Nov 2018 16:24:39 +0000

En WordPress existe la posibilidad de que los usuarios creen su propia cuenta de forma automática sin que el administrador tenga que intervenir.



Para ello debe estar habilitada la opción «Cualquiera puede registrarse» en los Ajustes Generales de WordPress.







Una vez habilitada la casilla de registro, cuando accedamos a la pantalla de login, veremos la opción Registrarse:







El link de registro tiene la estructura: www.tudominio.xxx/wp-login.php?action=register, por lo que puedes crear un enlace personalizado donde quieras (en el menú principal, widgets…).



El formulario de registro solamente solicita un nombre de usuario y una dirección de correo electrónico, por lo que no se guardarán maś datos del usuario y no sabremos nada más de él.



En posts anteriores vimos cómo podíamos añadir un check de aceptación de términos de privacidad en el formulario de registro de WordPress, pero ese checkbox no era un dato que se registrase en ningún sitio, tan solo servía para comprobar la acción del usuario que valida que se hace responsable de aceptar dichos términos.



Imaginemos que además de añadir el checkbox de aceptación, queremos también añadir un campo para solicitar el teléfono del usuario y que este además, se guarde junto a los datos del usuario.



El proceso consta de 4 funciones que habrá que especificar en el archivo functions.php del tema activo, o en nuestro propio plugin de funciones.



Añadir los campos al formulario de registro



//Añadir campos adicionales al registro del usuario
function campos_adicionales_registro_usuario(){
  $user_phone = (isset($_POST['user_phone'])) ? $_POST['user_phone'] : ''; ?>
  
    Teléfono

    
  
 
  Acepto los términos y condiciones de la política de protección de datos.
 




El resultado sería:







Validar los datos introducidos antes de guardarlos



El siguiente paso consistiría en validar que el usuario ha insertado un dato válido en el campo teléfono y ha aceptado los términos y condiciones de la política de privacidad.



//Validar campos adicionales del registro de usuario
function validar_datos_usuario($errors, $sanitized_user_login, $user_email){
  if(empty($_POST['user_phone'])){
    $errors->add('user_phone_error', __('ERROR: Por favor, introduzca su Nº de Teléfono'));
  }
  if(empty($_POST['acepto'])){
    $errors->add('acepto_error', __('ERROR: Debe marcar la casilla de aceptación de privacidad.'));
  }
  return $errors;
}
add_filter('registration_errors', 'validar_datos_usuario', 10, 3);



Si los campos están vacíos darán el correspondiente aviso y no dejará continuar:







Guardar los datos adicionales del formulario de registro



//Guardar los campos adicionales del usuario
function guardar_campos_adicionales_usuario($user_id){
  if(isset($_POST['user_phone'])){
    update_user_meta($user_id, 'user_phone', sanitize_text_field($_POST['user_phone']));
  }
}
add_action('user_register', 'guardar_campos_adicionales_usuario');



Con este código guardamos los campos adicionales del formulario de registro, en este caso, el campo teléfono.



Visualizar los datos guardados en el panel «Tu perfil» y «Editar Usuario»



//Agregar los campos adicionales a Tu Perfil y Editar Usuario
function agregar_campos_personalizados_usuario_backend($user) {
  $user_phone = esc_attr(get_the_author_meta('user_phone', $user->ID ));?>
  Campos adicionales
  
      Teléfono
    

      
    
  




Con esto últmo ya veremos el teléfono registrado por el cliente desde el panel de usuarios:







Recuerda que puedes guardar todos los campos que desees solicitar al usuario, pidiéndolos en la primera función mediante los «inputs», validándolos en la segunda función, y guardándolos y visualizándolos en la tercera y cuarta función.



Si crees que este artículo te ha sido útil, compártelo! Hasta el siguente post

Capability	Super Admin	Administrator	Editor	Author	Contributor	Subscriber
create_sites	Y
delete_sites	Y
manage_network	Y
manage_sites	Y
manage_network_users	Y
manage_network_plugins	Y
manage_network_themes	Y
manage_network_options	Y
upload_plugins	Y
upload_themes	Y
upgrade_network	Y
setup_network	Y
Capability	Super Admin	Administrator	Editor	Author	Contributor	Subscriber
activate_plugins	Y	Y (single site or enabled by network setting)
create_users	Y	Y (single site)
delete_plugins	Y	Y (single site)
delete_themes	Y	Y (single site)
delete_users	Y	Y (single site)
edit_files	Y	Y (single site)
edit_plugins	Y	Y (single site)
edit_theme_options	Y	Y
edit_themes	Y	Y (single site)
edit_users	Y	Y (single site)
export	Y	Y
import	Y	Y
Capability	Super Admin	Administrator	Editor	Author	Contributor	Subscriber
install_plugins	Y	Y (single site)
install_themes	Y	Y (single site)
list_users	Y	Y
manage_options	Y	Y
promote_users	Y	Y
remove_users	Y	Y
switch_themes	Y	Y
update_core	Y	Y (single site)
update_plugins	Y	Y (single site)
update_themes	Y	Y (single site)
edit_dashboard	Y	Y
customize	Y	Y
delete_site	Y	Y
Capability	Super Admin	Administrator	Editor	Author	Contributor	Subscriber
moderate_comments	Y	Y	Y
manage_categories	Y	Y	Y
manage_links	Y	Y	Y
edit_others_posts	Y	Y	Y
edit_pages	Y	Y	Y
edit_others_pages	Y	Y	Y
edit_published_pages	Y	Y	Y
publish_pages	Y	Y	Y
delete_pages	Y	Y	Y
delete_others_pages	Y	Y	Y
delete_published_pages	Y	Y	Y
delete_others_posts	Y	Y	Y
delete_private_posts	Y	Y	Y
edit_private_posts	Y	Y	Y
read_private_posts	Y	Y	Y
delete_private_pages	Y	Y	Y
edit_private_pages	Y	Y	Y
read_private_pages	Y	Y	Y
unfiltered_html	Y	Y (single site)	Y (single site)
Capability	Super Admin	Administrator	Editor	Author	Contributor	Subscriber
edit_published_posts	Y	Y	Y	Y
upload_files	Y	Y	Y	Y
publish_posts	Y	Y	Y	Y
delete_published_posts	Y	Y	Y	Y
edit_posts	Y	Y	Y	Y	Y
delete_posts	Y	Y	Y	Y	Y
Capability	Super Admin	Administrator	Editor	Author	Contributor	Subscriber
read	Y	Y	Y	Y	Y	Y