Blog personal de IT, viajes y otros hobbies

Etiqueta: plugin

imagen destacada del artículo custom post type ui

Crea tus Custom Post Types sin programar

WordPress puede almacenar y mostrar muchos tipos de contenido. Una unidad de este contenido es lo que denominamos «post» y todos ellos son guardados en una misma tabla de base de datos llamada wp_posts (Si me hubiesen dado a elegir yo hubiese llamado a esta tabla wp_entities). Estos registros de contenido se diferencian solamente por una columna llamada post_type que especifica el tipo de dato al que pertenece. De esta manera una entrada de blog tiene el tipo de post «post», una página tiene el tipo de post «page» y una imagen que adjuntamos a un artículo tiene el tipo de post «attachment»(entre otros que existen en el core). Lo bueno de WordPress es que nos permite extender esta funcionalidad para crear nuestros propios tipo de post. Son los denominados «Custom Post Types» o «Tipos de post personalizados».

Tipos de Posts en la base de datos de WordPress

Tipos de Posts en la base de datos de WordPress

Por ejemplo: Si tienes una web de dentistas podrías tener un CPT (Custom Post Type) «Pacientes», si tienes una web para una librería podrías tener un CPT «Libros», si tiene una web para promocionar tus servicios Freelance podrías tener un CPT para tu «Portfolio» o si tienes una web para una concesionaria podrías tener un CPT «Coches». Ya vas pillando la idea, ¿No?

Cada una de estas entidades compartirán los mismos campos que vienen por defecto en las «Entradas» o «Páginas»: Título, descripción, etiquetas, categorías, fecha de escritura, estado de la publicación, permalink, etc etc. También se pueden agregar campos específicos utilizando un plugin llamado ACF (Advanced Custom Field).

El problema está en que para crear Custom Post Type necesitamos saber de programación PHP y no todos somos desarrolladores. Hay personas que se apañan buscando temas de WordPress relacionados con la temática del proyecto y que ya tienen en su código lo necesario para registrar estos Custom Post Types (algo que desaconsejo totalmente ya que de esta manera estamos ligando un Custom Post Type a un tema de WordPress), hay desarrolladores que lo programan a mano siguiendo las instrucciones del Codex y también se puede utilizar un plugin que nos facilita esta tarea con un simple entorno gráfico y en el que no tocaremos ni una línea de código de programación. En este artículo os voy a enseñar este último método para lo que utilizaremos un plugin llamado Custom Post Type UI.

Banner del plugin Custom Post Type UI

Banner del plugin Custom Post Type UI


Instalación y Configuración

Instalamos el plugin desde el menú [ Plugins » Añadir Nuevo ] y luego lo buscamos con el nombre «Custom Post Type UI» como lo indica la siguiente imagen.

Cómo instalar el plugin custom post type ui

Cómo instalar el plugin Custom Post Type UI.

El plugin tiene su propia página de configuraciones desde donde podremos dar de alta, modificar y borrar Custom Post Types y Taxonomías como así también importar o exportar esta información (esta última funcionalidad la dejaremos para un próximo artículo del blog).

Página de configuración del plugin Custom Post Type UI

Página de configuración del plugin Custom Post Type UI

Veamos a continuación cómo podemos crear un nuevo Custom Post Type utilizando este plugin.


¿Cómo crear un CPT con el plugin Custom Post Type UI?

Después de pinchar en «Add / Edit Post Types» (sí, aún no está traducido al 100%) veremos la pantalla de la imagen del punto anterior. Tal como lo indican los asteriscos en rojo solo los siguientes tres campos son obligatorios:

CampoFunción
Post Type Slug
(obligatorio)
 El nombre clave que le vamos a dar al Custom Post Type. Solo se aceptan caracteres alfanuméricos latinos en minúsculas, los espacios tienen que ser reemplazados por guiones o guiones bajos.
Plural Label
(obligatorio)
Nombre en plural que se utilizará en el menú de WordPress.
Singular Label
(obligatorio)
Nombre en singular que se utilizará en distintos links y páginas del administrador de WordPress.

A modo de ejemplo vamos a crear la web de una concesionaria para listar todos los coches que tenemos en venta.

Ejemplo de uso del plugin Custom Post Type UI

Ejemplo de uso del plugin Custom Post Type UI

Una vez que registremos el Custom Post Type veremos un nuevo menú «Coches» en nuestra barra de herramientas de WordPress.

Icono y textos del nuevo Custom Post Type

Icono y textos del nuevo Custom Post Type

Estás pensando lo mismo que yo ¿No? Podríamos cambiar el icono por otro que tenga más sentido y también mejorar los textos ya que tienen mezcla de español e inglés ¡Vamos a ello!


Cómo cambiar los textos del Custom Post Type

Podremos modificar los textos de los enlaces de nuestro Custom Post Type editando la entidad «coche» que generamos en el paso anterior. Para ello debemos acceder al menú [ CPT UI » Add / Edit Post Types » Pestaña «Edit Post Types» ] y completar los campos de la sección «Additional Labels«. Detallo algunos de ellos:

CampoFunción
Menu NameNombre para el menú del administrador de WordPress.
All ItemsTexto para el enlace de «todos los ítems» presente en el submenú del Custom Post Type.
Add NewTexto para agregar un nuevo registro del Custom Post Type.
Add New ItemTexto utilizado en la esquina superior izquierda en el formulario de alta del Custom Post Type.
Edit ItemTexto utilizado en la esquina superior izquierda en el formulario de edición del Custom Post Type.
Search ItemTexto utilizado en el botón de búsqueda en la página de listado de los Post Types.
Etiquetas del Custom Post Type

Etiquetas del Custom Post Type


Configuraciones Extras

Además de los nombres y las distintas etiquetas también podemos definir cómo se comportará el Custom Post Type en el entorno de WordPress a través de la sección de «Configuraciones«. Son muchas las opciones de configuración pero voy a detallar en la siguiente tabla aquellas que creo más importantes:

CampoFunción
Has ArchiveEsta opción nos permite tener una página en el Frontend con el listado de los Post Types que demos de alta. En este caso una página con el listado de todos los coches que registremos. Atención porque esta opción está marcada como «false» por defecto.
El mismo campo incluye una caja de texto para que definamos la palabra que utilizará WordPress para mostrar dicho listado. Para el ejemplo de los coches podríamos usar «coches».
custom post type ui has archive
Exclude From Search¿Debemos tener en cuenta este Custom Post Type para las búsquedas que realiza el usuario en el Frontend? Si la respuesta es negativa debemos marcar esta opción como «True«.
Menu PositionSe puede modificar la posición del icono del Custom Post Type en la barra del menú del administrador de WordPress cambiado el número de esta propiedad (para más información leer el parámetro «Menu Position» en el Codex).
Menu IconPodemos definir un icono personalizado especificando la URL completa o bien utilizando el nombre de la clase de los iconos que se utilizan por defecto en WordPress (Dashicon).
Support El editor de posts tiene muchas funcionalidades/campos que pueden estar visibles u ocultos al usuario. Algunos de estos campos son: título, cuerpo del artículo, imagen destacada, resumen, campos personalizados, comentarios, revisiones, autor entre otros.
Built-in TaxonomiesSi queremos asociar una taxonomía a nuestro Custom Post Type esta es la opción. Por defecto incluirá las dos taxonomías estándar de WordPress: categoría y etiquetas. Pero también podemos crear nuestras propias taxonomías como veremos en un próximo artículo.
Relación de taxonomías con el Custom Post Type

Añadiendo datos al CPT

Ya tenemos nuestro Custom Post Type «coche» registrado y con sus correspondientes configuraciones, ahora solo nos resta agregar nuevos registros y visualizarlos en el Frontend.

Carga de datos con Custom Post Type UI

Carga de datos con Custom Post Type UI

resultado en frontend con el plugin Custom Post Type UI

Resultado en Frontend con el plugin Custom Post Type UI.


Conclusión

Como se ha visto es muy fácil generar nuestras propias entidades, no hace falta (ni se debería) buscar un tema específico que incluya este tipo de datos. En próximos artículos veremos cómo podemos generar taxonomías específicas para nuestra entidad (para los coches podríamos agregar una taxonomía llamada «marca» o «modelo») para que junto con los campos personalizados de ACF podamos tener nuestra estructura de información completa.

embed can i use plugin

Revisión de plugin – Embed Can I Use

Hace una semana leyendo una web descubro una nueva librería Javascript para incrustar los gráficos de Can I Use en nuestro páginas web. Para aquellos que no conozcan esta web es una página que muestra en tablas el soporte que dan los distintos navegadores a las tecnologías de Frontend tanto en escritorio como en móviles. Luego de leer el artículo se me ocurrió la idea de convertirlo en un plugin para WordPress aunque como es habitual ya existíaEmbed Can I Use desarrollado por Geoffrey Crofte.

embed can i use plugin

Instalación y configuración

No tiene gran historia, se instala el plugin como cualquier otro en nuestro WordPress y no tiene ningún pantalla de configuración ya que solo configura un shortcode para nuestros post/páginas.

Instalación de embed can i use plugin

Uso del plugin

Como he comentado en el punto anterior este plugin configura por código un shortcode para que podamos utilizarlo en nuestros posts o páginas. La sintaxis del shortcode es la siguiente:

[ciu_embed feature="<Nombre del atributo>" periods="<-2,-1,current,+1,+2>"]

feature: Aquí debemos especificar el funcionalidad que queremos graficar.
periods: Aquí se debe especificar las versiones de los navegadores que queremos incluir en la tabla. Posibles valores:

  • Versión actual (obligatorio): current
  • Versiones futuras: +3, +2 y +1
  • Versiones anteriores: -3, -2 y -1

¿Cómo puedo saber el nombre de la feature?

Primero debemos buscar la funcionalidad en la página de caniuse.com y veremos que la URL agrega un # con el nombre de la característica. Ese es el valor que debemos agregar en el shortcode.

can i use embed feature
Debemos tomar el valor de la feature de la URL de la web.

Ejemplos:

Si agregamos en nuestro post o página el siguiente shortcode con la funcionalidad flexbox de CSS junto a todos los navegadores:

[ciu_embed feature="flexbox" periods="-3,-2,-1,current,+1,+2,+3"]

obtendremos el siguiente resultado:
[ciu_embed feature=»flexbox» periods=»-3,-2,-1,current,+1,+2,+3″]

Si indicamos el mismo atributo CSS pero sin navegadores:

[ciu_embed feature="flexbox"]

Obtenemos el siguiente resultado:
[ciu_embed feature=»flexbox»]


¿Agrega mucha carga Javascipt a nuestra página?

can i use embed javascript peso

El plugin agrega un solo Javascript (de 759 bytes) que está alojado en un CDN y que solo se carga cuando especificamos un shortcode en nuestros post o páginas, caso contrario no agrega ninguna carga extra a nuestra web.

can i use embed plugin enqueue

Video Resumen

Dependencias de plugins y opciones

En muchas ocasiones necesitamos desarrollar un plugin o un tema que necesita de las funcionalidades de otros tantos plugins. Tal vez para compartir los artículos en redes sociales, para generar un listado de posts relacionados o un plugin para crear nuevos campos personalizados. Pero, ¿Cómo podemos entregar nuestro desarrollo sin preocuparnos por si el usuario tiene instalado o no estas «dependencias«? Para ello les voy a mostrar cómo funciona la librería PHP «TGM Plugin Activation«.

TGM Plugin Activation PHP Library

Esta librería PHP, preparada y pensada para WordPress, nos permite definir dependencias al tema o plugin que estemos creando. Se pueden especificar 2 tipos de dependencias:

  1. Dependencias de plugins: Un array con los plugins que nuestro plugin o tema necesita para ejecutarse correctamente, indicando si son requeridos o aconsejables (entre otras tantas opciones).
  2. Dependencias de configuraciones: En muchas ocasiones nuestro desarrollo dependerá de valores guardados en la tabla de opciones de WordPress. Esta librería se encarga de crear estas variables y asignarle un valor por defecto para que nuestro desarrollo funcione sin problemas.

Hecha la introducción vamos a meter mano en el código:


Instalación

Para instalar el TGM Plugin Activation es necesario descargarse la librería de su página oficial y guardarla en alguna parte dentro de la estructura de nuestro desarrollo. Normalmente suelo guardar las librerías dentro de una carpeta llamada «includes».

Una vez descagada la librería debemos llamar a su fichero principal class-tgm-plugin-activation.php desde nuestro functions.php.

<?php
// Call the library to manage dependencies
include __DIR__ . "/includes/TGM-Plugin-Activation-2.6.1/class-tgm-plugin-activation.php";

Este clase define un hook llamado tgmpa_register al que tendremos que llamar para verificar las dependencias de nuestro desarrollo.
En esta función asignaremos 2 arrays, uno para la definir los plugins y otro para las configuraciones (este último es opcional) que luego pasaremos como parámetros a la función tgmpa.

<?php
function register_required_plugins() {
    // Variables
    $plugins  = array(
        // Mi plugin o tema necesita del plugin WP REST API para funcionar correctamente
        array(
            'name'               => 'WP REST API',  // El nombre del plugin.
            'slug'               => 'rest-api',     // El "slug" del plugin (normalmente el nombre de la carpeta).
            'required'           => true            // Si es falso, el plugin es "recomendado" en lugar de "requerido".
        )
    );

    // Mi plugin o tema necesita de las siguientes opciones en base de datos
    $config   = array(
        'id'           => 'maugelves',                 
        'default_path' => 'https://maugelves.com',                      
        'menu'         => 'maugelves-dependency-plugins' 
    );
    
    // LLamar a la función de la librería
    // que se encargará de las dependencias.
    tgmpa( $plugins, $config );

}
add_action( 'tgmpa_register', 'register_required_plugins' );

El plugin en acción

Cuando activemos nuestro tema o plugin en WordPress y nos falte alguna/s de las dependencias definidas en la clase recibiremos un lindo mensaje en el header de nuestro administrador.

Plugins requeridos

De esta manera el usuario está informado sobre la necesidad de tener instalado un conjunto de plugins para el correcto funcionamiento de la web. La clase dispone de otras opciones que nos permiten especificar versiones, url’s de descarga, forzar la activación o desactivación.

Estas y más opciones pueden encontrarla en la sección Configuration de su web.

Por cierto ¿algún voluntario para traducir el plugin?

Foto: https://www.flickr.com/photos/joelogon/5112896429/

acf active custom fields

Campos personalizados en WordPress con ACF

Una de las cosas que más me gusta de ser informático es interiorizarme y captar conocimientos de los distintos tipos de negocios de mis clientes. Ellos me contactan y, como si estuvieran en un consultorio de psicología, me van detallando cómo funciona su circuito de información, lo que necesitan para acrecentar sus ventas, cómo buscan agilizar sus procesos o simplemente cómo quieren tener presencia en internet. Mientras los escucho voy generando una posible solución en mi cabeza: entidades, campos, relaciones y desde hace algunos años cómo implementar todo esto con WordPress.  En la mayoría de los casos los campos que ofrece WordPress por defecto en su tabla wp_post (título, descripción, fecha de alta, estado, etc) no son suficientes para brindar una buena solución. Es por eso que necesitamos extender la tabla wp_posts con nuevos campos personalizados y para ello utilizaremos un plugin llamado «ACF» (Advanced Custom Fields) el cual explicaré a continuación.

Logo de ACF Advanced Custom Fields
Al 19/03/2016 ACF tiene más de 1.000.000 de descargas activas.

Este plugin fue creado por el australiano Elliot Condon y en su versión PRO (unos €17)  nos permite agregar una gran variedad de campos que nos facilita enormemente el desarrollo de cualquier solución WordPress:

  • Campos básicos:
    • Texto, textarea, número, email, password.
  • Campos de contenido:
    • Editor WYSIWYG, imagen, archivo.
  • Campos Selectores:
    • Select, checkbox, true / false, radio.
  • Campos relacionales:
    • Link de página, post object, relación, taxonomy, user.
  • Campos jQuery:
    • Google Map, selector de fecha, selector de color.
  • Campos de Layout:
    • Mensaje, tab.
  • Campos PRO:
    • Repeater, gallery, options page, flexible content.

¿Cómo aplicar estos campos en un caso real?

Para mostrar la utilización de este plugin vamos a desarrollar un tema para una supuesta concesionaria de coches.

El dueño de la concesionaria nos pide una web en la que necesita mostrar sus datos institucionales, un formulario de contacto y un listado de los coches actuales en venta.

Indago un poco más sobre este listado para saber qué campos necesitamos agregar a esta nueva entidad «coche». El cliente nos cuenta que quiere indicar la marca, el modelo, el año de fabricación, una fotografía, una descripción de sus características y una casilla para indicar si se vendió y en qué fecha.

Luego de hacer el análisis de lo que necesita el cliente podemos esbozar un diagrama para plasmar una solución con WordPress:

Diagrama con campos ACF

Una vez encontrada la solución es hora de marcar prioridades  y desarrollar el código necesario:

  1. Generamos el Custom Post Type «Coche» tal como hemos visto en el artículo wp_post el corazón de WordPress.
  2. Registraremos para la entidad «coche» un taxonomía a la que llamaremos «modelos» utilizando la función register_taxonomy. Esta taxonomía tendrá como padre las marcas y como hijos los modelos propiamente.
  3. Generamos los campos personalizados con ACF los cuales veremos cómo implementar a continuación.

Creando los campos del Custom Post Type «Coche»

Para los campos «titulo» y «descripcion» utilizaremos las columnas post_title y post_content de la tabla wp_post. Para la fotografía usaremos la funcionalidad Post Thumbnails propia de los posts. Para el resto generaremos los campos con el plugin ACF. En primer lugar debemos generar un nuevo conjunto de campos al que llamaremos «CPT Coche».

Formulario para generar un nuevo grupo de campos ACF.

Luego damos de alta los campos con sus respectivos atributos:

  • Año de fabricación:
    • Field Label: Año de fabricación
    • Field Name: anio_de_fabricacion (atentos a no dejar ‘ñ’ ni acentos en este campo)
    • Field Type: number
    • Field Instructions: Indique el año de fabricación del coche
    • Required: Yes
    • Step Size: 1
  • ¿Está vendido?:
    • Field Label: ¿Está vendido?
    • Field Name: esta_vendido
    • Field Type: True / False
    • Field Instructions: ¿Se ha vendido el coche?
  • Fecha de Venta:
    • Field Label: Fecha de venta
    • Field Name: fecha_de_venta
    • Field Type: Date Picker
    • Field Instructions: Indique la fecha de venta del coche
    • Conditional Logic: Yes – ¿Está vendido? – is equal to – checked
      • Este campo solo se mostrará si el campo ¿Está vendido? está marcado como verdadero.
ACF Coche grupo de campos
Resultado final de la configuración de los campos personalizados.

Una vez generado los campos debemos indicar quién va a hacer uso de los mismos. El plugin nos permite asociarlo a un gran conjunto de entidades de WordPress: tipo de post, rol de usuario logueado, categoría de post, una determinada página, etc.
En nuestro caso debemos asociar el conjunto de campos al post type «Coche».

ACF Location fields

Eso es todo, al hacer click en «Publicar» tendremos nuestros grupo de campos asociado a nuestra entidad «Coche».

Vale aclarar que estas configuraciones se guardan en nuestra base de datos, en artículos posteriores explicaré cómo podemos utilizar la herramienta de exportación para generar el código PHP e incluirlo en el versionado del proyecto.

Podemos comprobar los campos generados dando de alta un nuevo coche en el administrador de WordPress.

ford mustang coche admin

Como podemos ver, aparte de los campos título y descripción propios de un post de WordPress tenemos los otros dos campos de ACF: «Año de Fabricación» y «¿Está vendido?». Y si seleccionamos el campo «¿Está vendido?» aparecerá el campo «Fecha de venta» tal como hemos especificado en sus condiciones lógicas.

campo esta vendido acf
campo jquery datepicker
Al seleccionar el campo «Fecha de venta» se despliega el DatePicker de jQuery para que podamos ingresar el valor.

Aplicando código para el Frontend

Ya tenemos nuestro primer «Coche» publicado con todos sus datos, ahora debemos escribir algo de código PHP para mostrar esta información en el frontend. En la plantilla single-coche.php usaremos las funciones get_field y the_field del plugin ACF.

<?php 
the_field('<nombre del campo>'); // Esta función imprime el valor del campo 
$variable = get_field('<nombre del campo>'); // Esta función obtiene el valor del campo 
?>
<?php get_header(); ?>
<?php if(have_posts()){ the_post(); ?>
	<p>Título del post: <?php the_title(); ?></p>
	<p><?php the_post_thumbnail('medium'); ?></p>
	Descripción del coche: <?php the_content(); ?>
	<?php
		$anioFabricacion = get_field('anio_de_fabricacion'); // Obtengo el campo y lo guardo en una variable
		if($anioFabricacion): // Si existe el campo y tiene un valor asignado...
	?>
	<p>Año de Fabricación: <?php echo $anioFabricacion; ?></p>
	<?php endif; ?>
	<?php
		$estaVendido = get_field('esta_vendido'); // Obtengo el campo y lo guardo en una variable
		if($estaVendido): // Si el campo es true entonces el coche está vendido.
			$fechaVendido = date_create_from_format('Ymd',get_field('fecha_de_venta')); // Obtengo el campo de fecha de venta y lo asigno a una variable.
	?>
	Estado: <span style="color:red">Vendido el día <?php echo $fechaVendido->format('d/m/Y'); ?></span> <!-- Doy formato a la fecha -->
	<?php }; //endif ?>
<?php endif; ?>
<?php get_footer(); ?>

Resultado

Y en el frontend obtenemos el siguiente resultado:

ACF coches frontend

Conclusión

Como pueden ver el proceso para crear campos personalizados es muy simple. Basta con tener bien claro las necesidades del proyecto, plasmarlo en un diagrama, configurar los campos y aplicar las funciones PHP en la maqueta del tema que estemos desarrollando. Este fue un ejemplo con campos muy simples pero como hemos visto la lista de posibilidades es muy amplia. Por fortuna su página web tiene una documentación muy completa de cada uno de ellos y en la que a veces se acompaña con videotutoriales. En artículos posteriores veremos cómo implementar estos y algunos campos más complejos pero en lugar de configurarlos en base de datos los desarrollaremos usando código PHP.

Imagen de cabecera: Emilio Küffer

Página 4 de 4

Funciona con WordPress & Tema de Anders Norén