WordPress: Campo personalizado de productos relacionados

Escrito por:

Luis Daniel Expósito

Hoy vamos a hablar sobre un tema interesante y muy útil que a todos en algún momento nos habrá tocado realizar, seguro que no sabéis de que vamos a hablar, os dejo pensar… ¿Lo habéis acertado? ¿Sí?, exacto, como dice el título, vamos a hablar sobre cómo crear un campo personalizado de productos relacionados.

Para los que no sepáis muy bien de que va el tema, esto es básicamente un desplegable, con buscador incorporado en el que tendremos todos nuestros productos, definiciones o lo que queráis relacionar. En mi caso, es un campo personalizado de artículos/definiciones relacionadas.

Este campo estaría en cada una de las entradas que creemos y servirá para indicar que artículos, previamente ya creados que tengamos en nuestra web, están relacionados con el que vamos a escribir.

Ahora os explicaré paso a paso cómo crear este campo sin ninguna dificultad y de forma sencilla y rápida. Todo este código lo pondremos en el archivo functions.php de nuestro tema.

 

ÍNDICE

1 – Registrar los “custom fields” o campos personalizados
2 – Definir los Meta Boxes
3 – Generar el HTML del Meta Box
4 – Guardar los datos

Registrar los “custom fields” o campos personalizados

Cada campo tenemos que registrarlo previamente. Con esta función llamamos a la función “registrarCampos” al iniciar nuestra web, para así registrar los campos.

 

 

Con esta función registramos los campos que vamos a tener en nuestro campo personalizado, en este caso será un botón y un desplegable dónde irán todos los artículos y definiciones que tengamos en la base de datos.

Iré explicando de uno en uno los argumentos utilizados en esta función:

“post”, es un argumento obligatorio, es el tipo de objeto para el que se registra el metadato y sus valores pueden ser post, user, term, entre otros.

“Relacionados”, es el nombre o identificador por el que se registrará nuestro campo. Es también obligatorio

“[…]”, son los argumentos que le pasaremos a ese campo, estos sirven para describir las propiedades de dichos campos.

En este caso he usado dos argumentos:

“description”, que sería la descripción del campo personalizado.

“single”, establece si el campo tendrá un solo valor por cada objeto o post (true) o por el contrario tendrá un array de valores por objeto o entrada (false).

 

 

Una vez hecho esto pasamos al siguiente paso, animo y no desesperes que ya mismo lo consigues.

Definir los Meta Boxes

Tenemos que definir el metabox que queremos crear mediante la siguiente función, en la que indicamos que vamos a añadir un nuevo metabox con el primer parámetro y la función que tiene que ejecutar al añadirlo (el segundo parámetro).

 

 

Esta función lo que hace es añadir el metabox pasándole cierta información.

“relacionados”, sería el id que le diésemos a este metabox (obligatorio).

“Articulos/Definiciones Relacionados”, sería el titulo del metabox (obligatorio).

“magxp”, es el tema que tenemos activo.

“insertarCampos”, es la fución que se ejecutará al añadir el metabox (obligatorio).

array(‘post’,’definicion’), aquí le indicamos sobre que tipo de post se mostrará el metabox, en mi caso es uno llamado “definición”.

¿Qué cómo podemos saber cuál es el que tenemos que poner?, muy fácil, nos vamos al escritorio de WordPress y en la parte izquierda nos aparecerá un listado de todos los post que tenemos (Entradas, Páginas, etc.), en mi caso es uno llamado “Definiciones”.

Pues bien, tenemos que entrar al que queramos ponerle el metabox, una vez dentro nos saldrá un  listado de todas las publicaciones que tengamos de ese post, debemos fijarnos en la URL, específicamente el argumento llamado post_type, el valor de este argumento es el que debemos indicar en el último parámetro de la función.

 

 

Vamos avanzando poco a poco, espero que lo llevéis bien. Ahora os explicaré paso a paso la función que hemos indicado que se ejecute en la función de arriba.

 

Generar el HTML del Meta Box

Es una función bastante extensa, por lo que iremos explicándola paso a paso, mostrando el resultado de cómo quedaría la función al final de la explicación.

Primero vamos a generar el HTML de los campos que necesitamos tener en nuestro metabox, en mi caso son solo dos campos, un select donde tendré los artículos y definiciones y un botón. Adicionalmente añadiremos un buscador a este select para facilitarnos la búsqueda de un elemento concreto de manera rápida (muy útil si tenemos muchos opciones en nuestro select).

Antes de crear el select, debemos sacar de la BBDD todos los elementos con los que queremos rellenar nuestro select, esto lo haremos de la siguiente forma.

Crearemos una variable global para poder usar los métodos de consulta de BBDD de WordPress, cogemos el id del post en el que nos encontramos y ya con estas dos cosas procederemos a realizar las consultas que nos sean necesarias. En este caso para sacar los elementos para rellenar el select y comprobar si teníamos algún artículo o definición guardada.

 

 

Una vez hecho esto, creamos el select (rellenándolo con la información obtenida en las consultas) y el botón. Como podéis observar,  en el select, hacemos un foreach con las opciones y dándole valores diferentes según sean definiciones o artículos.

A continuación creamos el botón que nos permitirá agregara la definición o articulo seleccionado en el desplegable y la pondrá justo debajo.

Si os fijáis, justo debajo del botón habréis visto un div con id “relacionados_box”. Este tiene la función de contener los posibles artículos o definiciones que ya hayamos seleccionado y guardado previamente, es decir, si con anterioridad hemos relacionado algún articulo o definición y lo hemos guardado, cuando volvamos a entrar a ese post en concreto, nos aparecerán estos elementos que habíamos guardado en ese div.

 

 

Llegados a este punto el metabox ya podrá visualizarse en nuestro post, aunque aún no es funcional, solo visual, ya que no nos permitirá guardar nada.

 

wordpress

 

Vamos a explicar el script de esta función. Como podéis ver la primera función lo que hace es darle funcionalidad a la “x” que le ponemos al div de “relacionados_box”. Esto es útil por si nos hemos equivocado en la selección del articulo o definición o en un futuro queremos quitar dicho elemento para sustituirlo por uno nuevo.

La segunda función lo que hace es que al clickar en el botón de agregar, nos duplique el div que contienen el elemento seleccionado, poniendo la información pertinente y todo lo demás.

 

 

Si aún no habéis intuido cómo crear el buscador es muy fácil, simplemente hay que añadir esta sentencia JQuery, indicándole a que seletc queremos ponérselo y listo.

 

 

wordpress2

 

Después de ver paso a paso la explicación de esta función, mostraré la función al completo por si os habéis perdido un poco por el camino. De esta forma lo veréis de forma general  y más clara.

 

 

Por último, pero no menos importante (quizá esto es lo más importante), nos queda saber cómo guardar los datos en la BBDD.

Guardar los datos

Lo primero de todo, es indicar que queremos crear una función para guardar los datos. Esto lo haremos con la siguiente función, en la que le indicamos que es una función que se ejecutará al guardar el post (primer argumento) y la función que se ejecutará al guardar el post (segundo argumento).

 

 

La siguiente función, lo primero que hace es recoger el id del post sobre el que hemos actuado y el titulo del articulo o definición que hemos seleccionado.

Una cosa muy importante antes de proceder a guardar los datos, es borrarlos previamente para no tener problemas o que nos surjan conflictos, esto lo haremos fácilmente con el delete_post_meta pasándole el id del post y el nombre que le hayamos puesto al registro al guardarlo.

Después mediante un for (que se repetirá tantas veces cómo elementos se vayan a guardar), iremos almacenando en un array los datos que vamos a almacenar en la BBDD, poniéndole un nombre distintivo y a nuestra elección, para poder localizarlos fácilmente.

Por último, llamaremos a la función add_post_meta para guardar los datos pasándole el id el post, el nombre con el que queremos identificarlo y los datos que queramos almacenar.

 

 

wordpress3

 

Esto es todo por hoy, espero que os haya servido y os haya resultado fácil de entender. Para cualquier duda o petición, podéis poneros en contacto con nosotros. Somos expertos en programación web.

 

 

Comparte el post

Share on Google+Share on FacebookTweet about this on TwitterShare on LinkedInPin on Pinterest

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Síguenos en Facebook
Categorias
Últimas Entradas
Síguenos en Google+
Últimos Tweeets