¿Cómo crear campos personalizados en WordPress?
Hoy vamos a hablar sobre cómo crear campos personalizados en WordPress. Esto es un tema muy interesante ya que a veces, necesitamos algunos campos para guardar información y WordPress por defecto no nos los proporciona.
Explicaremos lo que son estos campos personalizados, cómo agregarlos tanto con plugins y manualmente y por último te diremos algunos ejemplos de campos personalizados.
¿Qué son los campos personalizados?
Un campo personalizado es igual que cualquier otro campo que nos proporciona por defecto WordPress. La función de estos campos por defecto, es almacenar cualquier tipo de información, como podría ser el título de una entrada, la fecha de publicación, el extracto, etc. Todo dependerá de las necesidad que tenga cada uno.
La principal diferencia de estos campos con los campos personalizados, es que con esos campos, guardamos la información que a nosotros nos interesa. Por ejemplo, si utilizases las entradas como si fuese una biblioteca de libros, verás que el campo “Número de páginas” no aparece, por lo tanto tendrías que añadirlo y este campo, sería un campo personalizado de WordPress.
¿Cómo agregar campos personalizados?
Vamos a explicar dos métodos para que añadas los campos personalizados que necesites, uno será mediante el uso de plugins, por si no sabes sobre programación y el otro será mediante el uso de código. Mediante el uso de plugins, la creación de este tipo de campos resulta mucho más sencilla y rápida.
1# Agregar campos personalizados por medio de plugins
Esta es una de las opciones más fáciles, sencillas y rápidas. Te recomendaremos un par de plugins (los cuales consideramos de los mejores) que te ayudarán a la hora de añadir los campos personalizados que te hacen falta, de manera rápida y sencilla.
1.1# Advanced Custom Field
Este plugin cuenta con más de un millón de descargas activas. Lleva la personalización de WordPress a otro nivel, ya que aparte de poder crear campos personalizados, también es posible crear taxonomías y tipos de entradas entre otras cosas.
Además los campos personalizados que te permite crear son muy variados. Puedes crearlo tipo texto, archivos, imágenes, selectores, datepicker, etc. También te permite elegir dónde quieres que estos campos se muestran, si solo en las entradas, en las páginas, en una categoría concreta…
Para descargar este plugin puedes hacerlo desde aquí o desde el repositorio de plugins de WordPress.
1.2# Toolset
Este plugin te permite crear entradas, campos y taxonomías personalizadas. Es posible crear y mostrar todos los campos personalizados que necesitas, como por ejemplo listados, plantillas de páginas y todo lo que se te pueda ocurrir.
Se integra a la perfección con cualquier tema y respeta todos los códigos de este. Otra característica muy interesante, es que puedes manipular cosas de Woocommerce a tu antojo.
Para comprar este plugin puedes hacerlo desde aquí.
2# Agregar campos personalizados por medio de código
Para explicar este método, lo haré a través de un ejemplo. Este ejemplo en concreto es un campo personalizado para relacionar artículos o definiciones. Estaría en cada una de las entradas y sirve en resumidas cuentas para indicar qué artículos o definiciones, ya creados anteriormente,están relacionados con el que vamos a escribir. Lo explicaré paso a paso y de forma sencilla. Este código va en el archivo functions.php
Antes de nada, tenemos que registrar nuestro campo con la siguiente función. Esto lo que hará será que al iniciar nuestro sitio lo primero que se ejecutará será esta función debido al parámetro init.
add_action("init", "registrarCampos");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 o 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).
function registrarCampos()
{
register_meta(
"post",
"Relacionados",
[
'description' => _x("Seleccione un artículo o definición", "meta description", "magxp"),
'single' => true,
]
);
register_meta(
"post",
"Agregar",
[
'description' => _x("Agregar", "meta description", "magxp"),
'single' => true,
]
);
}
Una vez hecho esto, pasamos al siguiente paso, definir el metabox. Lo haremos 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 se ejecutará al añadirlo (el segundo parámetro).
add_action("add_meta_boxes", "insertarMeta");Esta función lo que hace es añadir el metabox pasándole cierta información.
-”relacionados”, sería el id que le vamos a dar a este campo personalizado (obligatorio).
-”Artículos/Definiciones Relacionados”, sería el título del campo personalizado (obligatorio).
-“magxp”, es el tema que tenemos activo.
-”insertarCampos”, es la función que se ejecutará al añadir el metabox (obligatorio).
-”array(‘post’, ‘definición’)”, aquí le indicamos sobre qué tipo de post se mostrará el metabox, en mi caso es uno llamado “definición”.
function insertarMeta()
{
add_meta_box("relacionados", __("Articulos/Definiciones Relacionados", "magxp"), "insertarCampos", array('post','definicion'));
}
A continuación vamos a generar el HTML de nuestro campo personalizado, o lo que es lo mismo, el cuerpo. Es una función extensa, pero iré explicandola poco a poco , mostrando al final el resultado de cómo quedaría.
Primero vamos a generar el HTML de los campos que necesitamos tener en nuestro campo personalizado, en mi caso son solo dos campos, un select donde tendré los artículos o definiciones y un botón. Adicionalmente añadiremos un buscador a este desplegable para facilitarnos la búsqueda de un elemento concreto de manera rápida (muy útil si tenemos muchas opciones en nuestro desplegable).
Antes de crear el selector, debemos sacar de la base de datos todos los elementos con los que queramos rellenar nuestro desplegable, esto lo haremos de la siguiente forma.
Crearemos una variable global para poder usar los métodos de consulta de base de datos de WordPress, cogemos el id de la entrada en la que estamos y ya con estas dos cosas podemos realizar las consultas que necesitemos. En este caso para sacar los elementos para rellenar el desplegable y comprobar si tenemos algún artículo o definición guardado.
global $wpdb;
$this_post_id=$post->ID;
$options=$wpdb->get_results("SELECT ID, post_title, post_type FROM wp_posts where ( post_type = 'post' OR post_type = 'definicion') AND ID <> '$this_post_id' AND post_status='publish' order by post_type desc, post_title asc");
$related_content=get_post_meta($post->ID, "related_content", false);
Una vez hecho esto, creamos el desplegable (rellenandolo con la información obtenida en las consultas) y el botón. Como puedes observar, en el selector, hacemos un foreach con las opciones y dándole valores diferentes según sean artículos o definiciones.
A continuación creamos el botón que nos permitirá agregar la definición o el artículo seleccionado en el desplegable y la pondrá justo debajo.
Si te fijas, justo debajo del botón habrás 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 artículo 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.
<div class="row_field">
<label class="label" for="rel"><?php _e("", "magxp"); ?></label>
<select id="rel" name="rel" type="number" value="">
<option value="empty">Seleccione un artículo o definición</option>
<?php $i=0;
foreach($options as $r):
switch ($r->post_type)
{
case 'post':
$post_type='artículo';
break;
case 'definicion' :
$post_type='definición';
break;
default:
echo "";
}
?>
<option value="<?php echo $r->ID; ?>"><?php echo $r->post_title; ?> (<?php echo $post_type; ?>)</option>
<?php $i++; endforeach; ?>
</select>
</div>
<div>
<button id="dupli" type="button" style="margin-top: 10px">Agregar</button>
</div>
</br>
<div id="relacionados_box">
<?php
$i=0;
foreach($related_content as $info)
{
?>
<div class="row_field" id="principal<?php echo $i; ?>">
<input id="related_id" name="related_id[]" type="hidden" value="<?php echo $info["post_id"]; ?>">
<input id="titulo" name="titulo[]" type="hidden" value="<?php echo $info["post_title"]; ?>">
<span><?php echo $info["post_title"]; ?></span><a style="margin-left:16px" onclick="eliminarFila('<?php echo $i; ?>')" class="eliminar"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
<?php
$i++;
}
?>
</div>
Llegados a este punto el campo personalizado ya podrá visualizarse en nuestro post o dónde hayamos indicado, aunque aún no es funcional, solo es visual, ya que no nos permitirá guardar nada. Ahora vamos a explicar el script de la función. Como puedes 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 artículo 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 pinchar 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.
<script type="text/javascript">
var i=<?php echo $i; ?>;
function eliminarFila(i)
{
jQuery("#principal"+i).remove();
}
jQuery(document).ready(function ($)
{
jQuery("#rel").select2();
jQuery("#dupli").click(function()
{
var relacionado=$("#rel").val();
var titulo=$("#rel option:selected").text();
var contenido='<div class="row_field" id="principal'+i+'"><input name="related_id[]" type="hidden" value="'+relacionado+'" /><input name="titulo[]" type="hidden" value="'+titulo+'" />'+titulo+'<a style="margin-left:20px" onclick="eliminarFila('+i+')" class="eliminar"><i class="fa fa-times" aria-hidden="true"></i></a></br></div>';
jQuery("#relacionados_box").append(contenido);
i++;
});
});
</script>
Después de ver paso a paso la función, te la mostraré completa por si te has perdido un poco, de esta forma lo verás de una forma más general y clara. Esta función incluye todas las partes de código que hemos ido explicando más arriba.
function insertarCampos($post)
{
wp_nonce_field("relacionados", "relacionados_noncename");
global $wpdb;
$this_post_id=$post->ID;
$options=$wpdb->get_results("SELECT ID, post_title, post_type FROM wp_posts where ( post_type = 'post' OR post_type = 'definicion') AND ID <> '$this_post_id' AND post_status='publish' order by post_type desc, post_title asc");
$related_content=get_post_meta($post->ID, "related_content", false);
?>
<div class="row_field">
<label class="label" for="rel"><?php _e("", "magxp"); ?></label>
<select id="rel" name="rel" type="number" value="">
<option value="empty">Seleccione un artículo o definición</option>
<?php $i=0;
foreach($options as $r):
switch ($r->post_type) {
case 'post':
$post_type='artículo';
break;
case 'definicion' :
$post_type='definición';
break;
default:
echo "";
}
?>
<option value="<?php echo $r->ID; ?>"><?php echo $r->post_title; ?> (<?php echo $post_type; ?>)</option>
<?php $i++; endforeach; ?>
</select>
</div>
<div>
<button id="dupli" type="button" style="margin-top: 10px">Agregar</button>
</div>
</br>
<div id="relacionados_box">
<?php
$i=0;
foreach($related_content as $info)
{
?>
<div class="row_field" id="principal<?php echo $i; ?>">
<input id="related_id" name="related_id[]" type="hidden" value="<?php echo $info["post_id"]; ?>">
<input id="titulo" name="titulo[]" type="hidden" value="<?php echo $info["post_title"]; ?>">
<span><?php echo $info["post_title"]; ?></span><a style="margin-left:16px" onclick="eliminarFila('<?php echo $i; ?>')" class="eliminar"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
<?php
$i++;
}
?>
</div>
<script type="text/javascript">
var i=<?php echo $i; ?>;
function eliminarFila(i)
{
jQuery("#principal"+i).remove();
}
jQuery(document).ready(function ($)
{
jQuery("#rel").select2();
jQuery("#dupli").click(function()
{
var relacionado=$("#rel").val();
var titulo=$("#rel option:selected").text();
var contenido='<div class="row_field" id="principal'+i+'"><input name="related_id[]" type="hidden" value="'+relacionado+'" /><input name="titulo[]" type="hidden" value="'+titulo+'" />'+titulo+'<a style="margin-left:20px" onclick="eliminarFila('+i+')" class="eliminar"><i class="fa fa-times" aria-hidden="true"></i></a></br></div>';
jQuery("#relacionados_box").append(contenido);
i++;
});
});
</script>
<?php
}
Por último, pero no menos importante, me queda mostrarte cómo guardar los datos en la base de datos, lo primero, es indicar que queremos crear una función para guardar los datos. Esto lo haremos con la siguiente función, en la que te 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).
add_action("save_post", "salvarDatos", 10, 2);La siguiente función lo primero que hace es recoger el id del post sobre el que hemos actualizado y el título del artículo 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 como elementos se vayan a guardar), iremos almacenando en un array los datos que vamos a almacenar en la base de datos, 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 del post, el nombre con el que queremos identificarlo y los datos que queremos almacenar.
function salvarDatos($post_id, $post)
{
$id=$_POST["post_id"];
$titulo=$_POST["titulo"];
delete_post_meta($post_id, "related_content");
for($e=0; $e<count($_POST["related_id"]); $e++)
{
$datos=array(
"post_id"=>$_POST["related_id"][$e],
"post_title"=>$_POST["titulo"][$e]
);
add_post_meta($post_id, "related_content", $datos);
}
}
Este sería el final del ejemplo y de cómo añadir tus propios campos personalizados en WordPress a través del archivo functions.php
Ejemplos de campos personalizados
Arriba te muestro un caso concreto de cómo puede ser un campo personalizado, pero las posibilidades pueden ser prácticamente infinitas, ya que puedes crear cualquier cosa que se te ocurra. Desde un campo para guardar información de una persona (si usas las entradas como perfiles de personas), hasta campos para guardar cantidad, medidas, ingredientes, etc. (si usas las entradas como si fueran recetas de cocina).
Conclusión
Aquí te hemos enseñado dos plugins para crear campos personalizados en WordPress, pero hay más. Estos dos que te hemos recomendado, los consideramos los dos mejores y son una opción bastante fácil y sencilla.La opción de crearlo mediante código es algo más compleja y varía según las necesidades que tenga cada usuario, ya que no es lo mismo el ejemplo que te hemos indicado, que por ejemplo querer crear un campo personalizado para insertar los alumnos de un aula.
Sea cuál sea la opción que elijas te deseamos suerte, coméntanos qué opción escogerías y de haber realizado ya un campo personalizado en WordPress, cuéntanos cómo lo hiciste.
Loading...Suscríbete. Déjanos tu email y recibe contenido genial cada mes
