Cómo usar tus propios campos personalizados en WordPress (y 5 ejemplos útiles) trucos CSS

Un campo personalizado en WordPress es cualquier dato que se puede aplicar a publicaciones, páginas y tipos personalizados de publicaciones en WordPress. Metadatos, por así decirlo, en forma de pares clave/valor. Por ejemplo:

• llave: subtitle / valor: They are more than they are cracked up to be
• llave: header_color_override / valor: #e52e05
• llave: property_url / valor: https://example.com/123

WordPress tiene su propia documentación Esta función, así que no quiero duplicarla. Solo quiero mostrarles básicamente qué son los campos personalizados en WordPress, cómo funcionan, cómo usarlos y algunos usos de mi experiencia personal.

contenido

Cómo agregar/editar/eliminar campos personalizados en WordPress

La interfaz de usuario de campo personalizado en WordPress se ve así:

Si no lo ve, es posible que deba ir al menú de tres elementos "Preferencias" y encontrar el interruptor de Campos personalizados y activarlo.

Para agregar un campo personalizado, ingrese una clave (etiquetada como "Nombre") y un valor, y luego haga clic en Agregar campos personalizados.

Una vez agregado, puede eliminarlo o actualizarlo desde el botón clave / nombre:

Al usar campos personalizados, las teclas formarán un menú desplegable para facilitar la selección.

¿Por qué usar campos personalizados?

campos personalizados, así como tipos de publicación personalizados, ¿Qué hace WordPress? Sistema de gestión de contenidos Funciona de forma no estándar, no se limita a una simple plataforma de blogs.

Lo crea o no, en CSS-Tricks usamos más de 100 campos personalizados para hacer diferentes cosas en este sitio. más fácil Algo, esto es genial porque es una característica básica de WordPress que continuará funcionando para siempre sin preocuparse demasiado por la compatibilidad o el deber técnico inconveniente.

La idea más grande es Posibilidad de abrir plantillasImagina que tienes una página de listado de bienes raíces con:

• habla a
• Precio anunciado
• dormitorio
• cuarto de baño
• etc

Con campos personalizados, puede proporcionar toda la información como pequeños datos discretos que puede repetir (es decir, mostrar) en la plantilla de su página, donde lo necesite. es mas flexible Luego incluye todos los datos en el contenido de la propia publicación, incluso con el editor de bloques.

Ejemplo de uso de un campo personalizado de WordPress

¡Los campos personalizados en WordPress se pueden usar para muchas cosas diferentes! Pero veamos cinco casos de uso del mundo real que hemos implementado en CSS-Tricks.

1. Mostrar información adicional

Supongamos que está publicando un video y desea mostrar el tiempo de reproducción de ese video. Es como guardar running_time como un campo personalizado y mostrarlo donde quieras:

2. Ocultar/mostrar diferentes contenidos/características

Digamos que desea poder reducir el tamaño del área de comentarios. algunas veces en otra publicación de blog. Puede establecer un campo personalizado llamado should_toggle_comments y establecer un valor trueHacemos esto en CSS-Tricks. En nuestro comments.php plantilla, mostramos un <ol> en todos los comentarios, pero si existe este campo personalizado, envolvemos todo en un <details> elemento, reducirlo por defecto:

<?php if (get_post_meta($post->ID, 'should_toggle_comments', true)) { ?>
<details class="open-all-comments">
  <summary>Toggle All Comments (there are a lot!)</summary>
  <?php } ?>

    <ol class="commentlist" id="commentlist">
      <?php wp_list_comments('type=comment&avatar_size=512&callback=csstricks_comment'); ?>
    </ol>

  <?php if (get_post_meta($post->ID, 'should_toggle_comments', true)) { ?>
  </details>
<?php } ?>

3. Oferta especial de descarga

Supongamos que tiene un archivo especial de categorías que muestra un grupo de publicaciones que contienen la misma categoría, luego use una plantilla personalizada para esa categoría, p. category-fancypants.phpTal vez descargar personalizado cita de cada artículo como un campo personalizado llamado main-pullquote:

<blockquote>
  <?php
    echo get_post_meta($post->ID, 'main-pullquote', true);
  ?>
</blockquote>

Esto es lo que hicimos para nuestra serie anual al final del año:

Hemos creado varias fuentes RSS totalmente personalizadas de trucos CSS que son diferentes de WordPress fuera de la caja - uno para el video y otro para el boletín. En particular, el feed de video se basa en algunos campos personalizados de WordPress para mostrar los datos especiales necesarios para que el feed sea la fuente de nuestro podcast de video.

5. Ocultar/mostrar autor

Nuestras publicaciones patrocinadas de CSS-Tricks a veces suenan como anuncios corporativos. Están escritos de esta manera a propósito y pueden haber sido escritos por muchas personas en el momento de la publicación real. Publicaciones como esta realmente no necesitan ser "por nadie". Pero a veces, una publicación patrocinada definitivamente está escrita por una persona específica, a veces incluso por una primera persona, lo que sería extraño si no se mostrara la atribución. showSponsorAuthor Campo personalizado para mostrar este autor cuando lo necesitemos.

<div class="sponsored-post-byline">
  ❥ Sponsored
  <?php if (get_post_meta($post->ID, 'showSponsorAuthor', true)) { ?>
    (Written by <?php the_author(); ?>)
  <?php } ?>
</div>

Lo anterior es parte de la plantilla. Siempre marcamos las publicaciones patrocinadas como patrocinadas en el orden del autor (ejemplo), pero solo podemos mostrar opcionalmente al autor (ejemplo) visualmente, controlado por un campo personalizado.

API para mostrar campos personalizados en WordPress

La mayoría de las veces desea mostrar el valor de un campo:

<?php echo get_post_meta($post->ID, 'mood', true); ?>

Ese true El final significa "dame". único valor "significa que incluso si hay varios campos personalizados con el mismo nombre, solo obtendrá uno. Para obtener varios con el mismo nombre, use false, tal como:

<?php $songs = get_post_meta($post->ID, 'songs', false); ?>
<h3>This post inspired by:</h3>
<ul>
  <?php foreach($songs as $song) {
    echo '<li>'.$song.'</li>';
  } ?>
</ul>

Si solo quiere tirarlos a la basura (probablemente principalmente para la depuración), puede hacer:

<?php the_meta(); ?>

Tenga en cuenta, sin embargo, que esto omite los campos personalizados que comienzan con un guión bajo (_), por lo que es posible que desee considerar el uso de este enfoque.

Consultar campos personalizados en WordPress

Suponga que desea solicitar todas las publicaciones con un campo personalizado específico. ¡Esto es posible!

<?php
$the_query = new WP_Query(array(
  'meta_key' => 'example_field_name'
  'meta_value' => 'example_field_value' // as a string! 
));

if ($the_query->have_posts()) {
  while ($the_query->have_posts()) {
    $the_query->the_post();
    echo '<div>' . get_the_title() . '</div>';
  }
}

wp_reset_postdata();

function customfield_limit_increase( $limit ) {
  $limit = 150;
  return $limit;
}
add_filter( 'postmeta_form_limit', 'customfield_limit_increase' );

¿Alguna otra pregunta para el editor de bloques?

El problema principal es cuando no ve la interfaz personalizada de los campos personalizados. Hemos explicado cómo volver a activarlo (ya que probablemente esté desactivado de forma predeterminada), así que asegúrese de comprobarlo. Complemento para campos personalizados avanzados también lo apagará, por lo que si está usando el complemento, tenga en cuenta que hay una línea a continuación que puede ayudarlo a volver a encenderlo (si está usando ambos, como hicimos nosotros).

Además, no estoy seguro de si existe una forma estándar de mostrar el valor de un campo personalizado en un bloque en el editor de bloques. Si conoce una manera clara, ¡por favor deje un comentario!

Enlace a campos personalizados avanzados

La interfaz de usuario para los campos personalizados de WordPress está bastante... desatendida. No es obligatorio, hay bordes ásperos (encontramos que los campos personalizados tienen una forma extraña de duplicación, como múltiples grabaciones de publicaciones). Los márgenes personalizados, aunque naturales, no parecen ser una característica de primer nivel de WordPress.

Campos personalizados avanzados (ACF) ha cambiado mucho. El espíritu sigue siendo el mismo: añadir datos al contenido. Sin embargo, a diferencia de la sencilla interfaz clave-valor basada en cadenas que describimos en detalle, básicamente puede modelar datos con diferentes tipos y crear una interfaz de usuario personalizada muy agradable para ingresar esos datos e incluso integrarse directamente con el editor de bloques.

Imagine un sitio web de podcasts donde cada publicación es un episodio separado. Sin embargo, el editor de bloques puede trabajar en el contenido escrito de un episodio. es posible que no funcione con todos los metadatos que lo acompañan. Lista de invitados, duración, ubicación de archivos MP3, patrocinadores, enlaces de salto de tiempo, etc. Los campos personalizados son geniales para esto, pero como hay tantos, los campos personalizados avanzados aquí le servirán bien con los campos personalizados naturales en WordPress.Aquí hay un ejemplo de cómo configurar dónde estamos ShopTalk Show Podcast:

La ACF probablemente eliminó la interfaz de campos personalizados personalizados para alentar el uso directo en lugar de confundir a las personas con la interfaz de campos personalizados personalizados. Si usa ambos tipos de campos como nosotros, debe usar los filtros proporcionados por ACF para devolver su propia interfaz de usuario de campo al editor de publicaciones:

add_filter('acf/settings/remove_wp_meta_box', '__return_false');

Si usa sus propios campos personalizados en WordPress, querrá functions.php archivo o complemento funcional.

Nota para los desarrolladores de complementos

Usa técnicas de resaltado.

Algunos complementos usan la API de campos personalizados como un lugar para almacenar datos específicos de publicaciones. No creo que importe, pero me gustaría pedirles a los desarrolladores de complementos que siempre usen nombres de campos personalizados con guiones bajos y prefijos de complementos al hacerlo.

Cuando los campos personalizados comienzan con un guión bajo, no aparecen en la interfaz de usuario. Para aquellos de nosotros que trabajamos directamente con la interfaz de usuario de campos personalizados, esto significa que no estará abarrotada de campos creados por otros complementos. La excepción, por supuesto, es si desea que los usuarios puedan controlar lo que hace el complemento con valores de campo personalizados. En este caso, bueno, deje estos pocos campos sin el prefijo de subrayado.

_bobs_plugin_internal_value_1 // Hidden in UI
_bobs_plugin_internal_value_2 // Hidden in UI
bobs_plugin_config  // Shows in UI

_adrians_plugin_internal_value_1  // Hidden in UI
_adrians_plugin_internal_value_2 // Hidden in UI

Más ejemplos del uso de campos personalizados en WordPress

¿Para qué los utiliza?

¿Estás usando campos personalizados en WordPress? Tengo mucha curiosidad. local Utilice campos personalizados.