Cómo crear campos personalizados en WordPress sin plugins

En el área de Campos personalizados, verá los campos para completar los datos. El formulario es bastante simple, tiene dos campos:

1. Nombre : es un nombre arbitrario para el campo personalizado. Úsalo como clave del campo personalizado.
2. Valor : es el valor en el texto simple del campo personalizado.

Aunque es un campo de texto, es bastante flexible. Puede guardar cualquier dato que se pueda convertir a texto:

1. Texto simple
2. HTML, XML, SVG
3. JSON
4. Datos codificados en base64 de imagen, archivo, etc.

Este es un ejemplo de cómo guardar información sobre un producto con el precio y el tipo de texto e imagen codificados en base64 de un archivo SVG:

Guardar varios valores en un campo personalizado

Después de guardar la publicación, verá un cuadro adicional para elegir un nombre para los campos personalizados en lugar de crear uno nuevo. Si agregas datos a un campo personalizado existente, guardará ambos valores.

Cómo mostrar un campo personalizado

Esta parte necesitas un poco de código. Si no tienes idea de programación, puedes usar el plugin ACF. Si lo quieres hacer tú mismo, aquí una pequeña ayuda.

Dos funciones de uso frecuente son:

• the_meta(): muestra la lista de campos personalizados en el front-end en una lista desordenada.
• get_post_meta( $post_id, $key, $single ): obtiene el valor de un campo personalizado.

Adicionalmente:

• get_post_custom(): obtiene todos los valores de los campos personalizados en una matriz de clave / valor.
• get_post_custom_keys(): devuelve una matriz de todas las claves de los campos personalizados.
• get_post_custom_values( $key ): devuelve una matriz de todos los valores de un campo personalizado $key.

Tienes que llamar a estas funciones en el bucle del post.

Vamos a añadir el código al tema activado en WordPress. Hay 2 opciones:

1. Editar el tema directamente:
   • Ventaja: Rápido
   • Desventaja: los cambios se perderán cuando actualice el tema.
2. Crear un tema hijo:
   • Ventaja: los cambios NO se perderán cuando actualice el tema.
   • Desventaja: te llevará más tiempo aprender sobre childs themes.

Debido a que nos estamos concentrando solo en campos personalizados, elijo editar el tema directamente.

¡Aquí vamos!

MOSTRAR LA LISTA DE CAMPOS PERSONALIZADOS

Utilizo el tema Twenty Seventeen. Quiero que la lista de campos personalizados se muestre justo después del título de la publicación tanto en el archivo como en una sola página, por lo que agrego la función the_meta()al archivo de template-parts/post/content.php de la siguiente manera:

<? php 
the_meta (); ?>

MOSTRAR UN SOLO CAMPO PERSONALIZADO

Debes obtener el valor de cada campo personalizado y mostrarlo. Utiliza get_post_meta() para obtener un valor de campo personalizado:

get_post_meta ( $ post_id , $ clave , $ single );

Ahí:

1. $post_id: El ID de la publicación de la que deseas obtener campos personalizados.
2. $key: La clave del campo personalizado, también es el valor de la columna Nombre.
3. $single: Defina el tipo de datos, true para devolver un solo valor y false para devolver una matriz de todos los valores

Puedes usar get_the_ID()para obtener el ID de la publicación actual si la conoces.

Por ejemplo:  Reemplace the_meta() por el siguiente código:

<ul class="post-meta">
    <li><span class="post-meta-key">Price:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Price', true ) ); ?></li>
    <li><span class="post-meta-key">Image:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Image', true ) ); ?></li>
    <li><span class="post-meta-key">Type:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Type', true ) ); ?></li>
</ul>

En post Quite, debido a que nuestro parámetro $single es verdadero, el tipo de campo personalizado devuelve el primer valor («Hard») solo mientras tiene 2 unos. Para mostrar el valor Soft, editamos el código de la siguiente manera:

<ul class="post-meta">
    <li><span class="post-meta-key">Price:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Price', true ) ); ?></li>
    <li><span class="post-meta-key">Image:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Image', true ) ); ?></li>
    <li><span class="post-meta-key">Type:</span> <?php echo implode( ', ', array_map( 'esc_html', get_post_meta( get_the_ID(), 'Type', false ) ) ); ?></li>
</ul>