{"id":7898,"date":"2019-01-18T10:17:53","date_gmt":"2019-01-18T10:17:53","guid":{"rendered":"https:\/\/blog.hostinger.io\/mx-tutoriales\/?p=7898"},"modified":"2023-11-23T10:42:21","modified_gmt":"2023-11-23T09:42:21","slug":"campos-personalizados-wordpress","status":"publish","type":"post","link":"\/mx\/tutoriales\/campos-personalizados-wordpress","title":{"rendered":"Campos personalizados de WordPress: qu\u00e9 son y c\u00f3mo a\u00f1adirlos a entradas y p\u00e1ginas"},"content":{"rendered":"<p>Como uno de los sistemas de gesti&oacute;n de contenidos (CMS) m&aacute;s populares, <a href=\"\/mx\/tutoriales\/que-es-wordpress\">WordPress<\/a> es ampliamente conocido por sus diversas funciones y opciones de personalizaci&oacute;n.<\/p><p>Una de esas opciones es ampliar los metadatos, que se refieren a la informaci&oacute;n clave de una p&aacute;gina o entrada, incluidos los nombres de los autores, los t&iacute;tulos y las descripciones.<\/p><p>Los usuarios pueden incluir metadatos adicionales habilitando campos personalizados en WordPress, ampliando la funcionalidad de entradas o p&aacute;ginas espec&iacute;ficas. Por ejemplo, recopilando el correo electr&oacute;nico del autor, poniendo un descargo de responsabilidad en un post patrocinado o adjuntando detalles adicionales a un producto.<\/p><p>Al igual que la mayor&iacute;a de las funciones de WordPress, puedes a&ntilde;adir campos personalizados a tus entradas y p&aacute;ginas manualmente o mediante un plugin espec&iacute;fico.<\/p><p>En este art&iacute;culo, te explicaremos qu&eacute; son los campos personalizados y c&oacute;mo a&ntilde;adirlos al contenido de tu sitio web de WordPress utilizando ambos m&eacute;todos.<\/p><h2 class=\"wp-block-heading\" id=\"h-que-son-los-campos-personalizados-de-wordpress\">&iquest;Qu&eacute; son los campos personalizados de WordPress?<\/h2><p>Cada p&aacute;gina y <a href=\"\/mx\/tutoriales\/entrada-wordpress\">entrada de WordPress<\/a> que creas lleva sus propios metadatos. Los metadatos por defecto en WordPress incluyen el nombre del autor, la fecha y la hora. Por ejemplo, en la entrada de abajo, puedes ver los metadatos sobre el t&iacute;tulo de la entrada.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"671\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/como-crear-una-pagina-web-hostinger-1024x671.png\" alt=\"C&oacute;mo crear una p&aacute;gina web Hostinger\" class=\"wp-image-26701\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/como-crear-una-pagina-web-hostinger.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/como-crear-una-pagina-web-hostinger-300x197.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/como-crear-una-pagina-web-hostinger-150x98.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/como-crear-una-pagina-web-hostinger-768x503.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Sin embargo, en algunos casos necesitas a&ntilde;adir metadatos que WordPress no admite de forma predeterminada: aqu&iacute; es donde los campos personalizados resultan &uacute;tiles. Los campos personalizados de WordPress son una funci&oacute;n que introduce informaci&oacute;n adicional en una entrada o p&aacute;gina.<\/p><p>Los campos personalizados te ofrecen una forma de introducir esos datos y ampliar la informaci&oacute;n de tu contenido:<\/p><ul class=\"wp-block-list\">\n<li><strong>Flexibles y personalizables.<\/strong> Los campos personalizados est&aacute;n formados por fragmentos de c&oacute;digo, lo que te permite personalizar y controlar su ubicaci&oacute;n en el front-end de tu sitio.<\/li>\n\n\n\n<li><strong>M&aacute;s f&aacute;cil de introducir y actualizar.<\/strong> Si quieres actualizar la informaci&oacute;n mostrada en tus entradas, simplemente modifica los campos personalizados en lugar de editar cada entrada individualmente.<\/li>\n\n\n\n<li><strong>Coherentes. <\/strong>Los campos personalizados garantizan que todas tus entradas muestren la misma informaci&oacute;n con el mismo formato.<\/li>\n<\/ul><p>Por &uacute;ltimo, es importante tener en cuenta la diferencia entre campos personalizados y <a href=\"\/mx\/tutoriales\/custom-post-types-wordpress\/\">tipos de entrada personalizados<\/a>.<\/p><p>Un tipo de entrada personalizada es un tipo de contenido con un formato especial, como las entradas de opini&oacute;n o las p&aacute;ginas de producto. En muchos casos, la gente a&ntilde;ade campos personalizados a sus entradas personalizadas, pero tambi&eacute;n puedes utilizarlos por separado.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-anadir-campos-personalizados-de-wordpress-a-tus-entradas-y-paginas\">&iquest;C&oacute;mo a&ntilde;adir campos personalizados de WordPress a tus entradas y p&aacute;ginas?<\/h2><p>En la siguiente secci&oacute;n, te ayudaremos a crear tus propios campos personalizados utilizando dos m&eacute;todos diferentes.<\/p><p>El primer m&eacute;todo implica instalar un plugin dedicado para simplificar el proceso. El segundo requiere que edites manualmente los archivos de tu <a href=\"\/mx\/tutoriales\/instalar-tema-wordpress\">tema de WordPress<\/a>.<\/p><h3 class=\"wp-block-heading\">Utiliza el plugin de campos personalizados avanzados<\/h3><p>Hay muchos plugins que te ayudan a a&ntilde;adir r&aacute;pidamente campos personalizados en WordPress. El m&aacute;s popular es <a href=\"https:\/\/es.wordpress.org\/plugins\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noreferrer noopener\">Advanced Custom Fields (ACF)<\/a>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"466\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-10.png\" alt=\"\" class=\"wp-image-26700\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-10.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-10-300x137.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-10-150x68.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-10-768x350.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Viene con una interfaz de usuario f&aacute;cil de usar que te permite a&ntilde;adir 30 tipos de campos personalizados con solo unos clics. Para empezar, necesitas <a href=\"\/mx\/tutoriales\/plugins-en-wordpress-gratis\">instalar el plugin<\/a> y activarlo.<\/p><p>Ve a tu panel de control y a la pesta&ntilde;a <strong>Plugins &rarr; A&ntilde;adir nuevo<\/strong>. Una vez all&iacute;, utiliza la barra de b&uacute;squeda para buscar <strong>Advanced Custom Fields<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"352\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/advanced-customs-fields-en-wordpress-1024x352.png\" alt=\"Add plugins section en WordPress\" class=\"wp-image-26702\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/advanced-customs-fields-en-wordpress.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/advanced-customs-fields-en-wordpress-300x103.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/advanced-customs-fields-en-wordpress-150x52.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/advanced-customs-fields-en-wordpress-768x264.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/advanced-customs-fields-en-wordpress-1536x528.png 1536w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/advanced-customs-fields-en-wordpress-2048x704.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Sigue adelante y haz clic en el bot&oacute;n <strong>Instalar ahora<\/strong>. Espera a que el texto cambie a <strong>Activar<\/strong> y vuelve a hacer clic en &eacute;l.<\/p><p>Una vez que Advanced Custom Fields est&eacute; en funcionamiento, ver&aacute;s que aparece una nueva pesta&ntilde;a <strong>Campos personalizados<\/strong> en tu escritorio. Al hacer clic en ella, aparecer&aacute; una lista de grupos de campos personalizados, que deber&iacute;a estar vac&iacute;a.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"452\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-perzonalidados-en-wordpress-1024x452.png\" alt=\"Campos personalizados en el escritorio de WordPress\n\" class=\"wp-image-26704\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-perzonalidados-en-wordpress.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-perzonalidados-en-wordpress-300x132.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-perzonalidados-en-wordpress-150x66.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-perzonalidados-en-wordpress-768x339.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-perzonalidados-en-wordpress-1536x678.png 1536w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-perzonalidados-en-wordpress-2048x904.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Para configurar un grupo de campos, simplemente haz clic en el bot&oacute;n <strong>A&ntilde;adir nuevo<\/strong> de la parte superior de la pantalla.<\/p><p>Contin&uacute;a pulsando el bot&oacute;n <strong>A&ntilde;adir campo<\/strong>. Elige una etiqueta para tu nuevo campo que tambi&eacute;n servir&aacute; como su nombre. Tambi&eacute;n tienes que elegir qu&eacute; tipo de campo quieres configurar: algunas de las opciones son texto, casilla de verificaci&oacute;n y correo electr&oacute;nico.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/Agregar-un-campo-de-grupo-edited.png\" alt=\"\" class=\"wp-image-26706\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/Agregar-un-campo-de-grupo-edited.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/Agregar-un-campo-de-grupo-edited-300x169.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/Agregar-un-campo-de-grupo-edited-150x84.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/Agregar-un-campo-de-grupo-edited-768x432.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/Agregar-un-campo-de-grupo-edited-1536x864.png 1536w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/Agregar-un-campo-de-grupo-edited-2048x1152.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Para este ejemplo, vamos a crear un campo de <strong>Correo electr&oacute;nico<\/strong> para recoger la direcci&oacute;n de correo electr&oacute;nico de cada autor.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"405\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/completar-campo-de-grupos-1-1024x405.png\" alt=\"Formulario para crear un nuevo campo de correo electr&oacute;nico\" class=\"wp-image-26708\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/completar-campo-de-grupos-1.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/completar-campo-de-grupos-1-300x119.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/completar-campo-de-grupos-1-150x59.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/completar-campo-de-grupos-1-768x304.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/completar-campo-de-grupos-1-1536x607.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Para escribir un conjunto de instrucciones, solo tienes que completar el campo correspondiente. Por ejemplo, puedes a&ntilde;adir &ldquo;Por favor, completa tu direcci&oacute;n de correo electr&oacute;nico antes de publicar tu entrada&rdquo;.<\/p><p>Aunque este paso no es necesario, ayuda a que otros administradores del sitio web sepan qu&eacute; hacer con el campo personalizado.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"329\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campo-de-instrucciones-1024x329.png\" alt=\"Campo de instrucciones\" class=\"wp-image-26722\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campo-de-instrucciones.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campo-de-instrucciones-300x96.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campo-de-instrucciones-150x48.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campo-de-instrucciones-768x247.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Adem&aacute;s, deber&aacute;s indicar si se trata de un campo obligatorio o no. De esta forma, no ser&aacute; posible guardar entradas o p&aacute;ginas sin rellenarlo.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"326\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campo-de-validacion-1024x326.png\" alt=\"Campo de validaci&oacute;n\" class=\"wp-image-26721\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campo-de-validacion.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campo-de-validacion-300x96.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campo-de-validacion-150x48.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campo-de-validacion-768x245.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Hay algunas otras <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/field-settings\/\" target=\"_blank\" rel=\"noopener\">opciones avanzadas<\/a> que puedes ajustar si es necesario. Una vez rellenadas las propiedades b&aacute;sicas, despl&aacute;zate hacia abajo para localizar el bot&oacute;n <strong>Cerrar campo<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"396\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/boton-de-cerrar-campo-1024x396.png\" alt=\"Boton de cerrar campo\" class=\"wp-image-26723\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/boton-de-cerrar-campo-1024x396.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/boton-de-cerrar-campo-300x116.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/boton-de-cerrar-campo-150x58.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/boton-de-cerrar-campo-768x297.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/boton-de-cerrar-campo.png 1154w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Al hacer clic en &eacute;l, se a&ntilde;adir&aacute; autom&aacute;ticamente tu grupo de campos personalizados a la lista. Para a&ntilde;adir m&aacute;s campos personalizados, solo tienes que elegir el bot&oacute;n <strong>A&ntilde;adir campo <\/strong>y repetir el proceso.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"320\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/lista-de-campos-personalizados-1024x320.png\" alt=\"Lista de campos personalizados\" class=\"wp-image-26724\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/lista-de-campos-personalizados.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/lista-de-campos-personalizados-300x94.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/lista-de-campos-personalizados-150x47.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/lista-de-campos-personalizados-768x240.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/lista-de-campos-personalizados-1536x479.png 1536w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/lista-de-campos-personalizados-2048x639.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Una vez que hayas creado tus grupos de campos personalizados, tendr&aacute;s que configurar d&oacute;nde se mostrar&aacute;n estos grupos de campos personalizados personalizando la configuraci&oacute;n de <strong>Reglas de ubicaci&oacute;n<\/strong>.<\/p><p>Hay una opci&oacute;n llamada <strong>Mostrar este grupo de campos si <\/strong>que puedes utilizar para configurar las opciones de visualizaci&oacute;n.<\/p><p>En este ejemplo, hemos configurado el campo personalizado para que aparezca en las publicaciones normales. Si quieres, puedes a&ntilde;adir m&aacute;s de una ubicaci&oacute;n para mostrar tu campo personalizado utilizando el bot&oacute;n <strong>A&ntilde;adir grupo de reglas<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/mostrar-este-campo-si-1024x572.png\" alt=\"Agregar regla al grupo de campos personalizados\" class=\"wp-image-26725\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/mostrar-este-campo-si.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/mostrar-este-campo-si-300x168.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/mostrar-este-campo-si-150x84.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/mostrar-este-campo-si-768x429.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/mostrar-este-campo-si-1536x858.png 1536w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/mostrar-este-campo-si-2048x1144.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Por &uacute;ltimo, pulsa el bot&oacute;n <strong>Guardar cambios <\/strong>para guardar tu nuevo campo personalizado.<\/p><p>Cuando tu campo est&eacute; listo, abre el editor de entradas de WordPress. El campo personalizado aparecer&aacute; justo debajo del editor de texto.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-personalizados-debajo-del-editor-de-texto-1024x548.png\" alt=\"Secci&oacute;n de campos personalizados bajo el editor de texto\" class=\"wp-image-26726\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-personalizados-debajo-del-editor-de-texto.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-personalizados-debajo-del-editor-de-texto-300x160.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-personalizados-debajo-del-editor-de-texto-150x80.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-personalizados-debajo-del-editor-de-texto-768x411.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-personalizados-debajo-del-editor-de-texto-1536x821.png 1536w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/campos-personalizados-debajo-del-editor-de-texto-2048x1095.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Ten en cuenta que no puedes utilizar Advanced Custom Fields para mostrar campos personalizados a los visitantes del sitio web: el campo personalizado solo aparecer&aacute; en tu panel de control.<\/p><p>Si quieres mostrar los campos personalizados en el front-end del sitio, tendr&aacute;s que editar el archivo del tema. Te guiaremos a trav&eacute;s de este proceso m&aacute;s adelante en el art&iacute;culo.<\/p><h2 class=\"wp-block-heading\" id=\"h-otros-plugins-de-campos-personalizados\">Otros plugins de campos personalizados<\/h2><p>Si buscas un plugin que ofrezca m&aacute;s opciones que Advanced Custom Fields, hemos listado tres alternativas para ayudarte a encontrar una herramienta que se adapte mejor a las necesidades de tu sitio web.<\/p><p>1.&nbsp;<a href=\"https:\/\/es.wordpress.org\/plugins\/meta-box\/\" target=\"_blank\" rel=\"noreferrer noopener\">Meta Box<\/a><\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-12.png\" alt=\"Banner de Meta Box\" class=\"wp-image-26727\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-12.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-12-300x146.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-12-150x73.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-12-768x374.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Con Meta Box, habilita campos personalizados en entradas, p&aacute;ginas y formularios de WordPress. Admite hasta 40 campos personalizados, desde listas de texto y casillas de verificaci&oacute;n hasta im&aacute;genes y campos de usuario.<\/p><p>Proporciona <a href=\"https:\/\/metabox.io\/plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">extensiones gratuitas<\/a>, que te permiten a&ntilde;adir campos personalizados en los comentarios y <a href=\"\/mx\/tutoriales\/yoast-seo-tutorial\">Yoast SEO<\/a> para mejorar la puntuaci&oacute;n SEO de tu contenido.<\/p><p>Tambi&eacute;n se integra con <a href=\"\/mx\/tutoriales\/page-builders-wordpress\">creadores de p&aacute;ginas de WordPress<\/a> como <strong>Elementor <\/strong>y<strong> Beaver Builder<\/strong>.<\/p><p>Adem&aacute;s, Meta Box ofrece versiones <strong>gratuitas <\/strong>y premium.<\/p><p>Con su versi&oacute;n premium, a partir de <strong>99 d&oacute;lares al a&ntilde;o<\/strong>, obtendr&aacute;s acceso a su constructor de meta boxes. Esta funci&oacute;n te permite a&ntilde;adir campos personalizados de WordPress mediante una interfaz de arrastrar y soltar f&aacute;cil de usar.<\/p><p>[<a href=\"https:\/\/metabox.io\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">PRECIOS<\/a> \/ <a href=\"https:\/\/metabox.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">DESCARGA<\/a>]<\/p><p>2.&nbsp;<a href=\"https:\/\/es.wordpress.org\/plugins\/custom-field-suite\/\" target=\"_blank\" rel=\"noreferrer noopener\">Custom Fields Suite<\/a><\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"152\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/custom-fields-suite--1024x152.png\" alt=\"\" class=\"wp-image-26728\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/custom-fields-suite-.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/custom-fields-suite--300x45.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/custom-fields-suite--150x22.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/custom-fields-suite--768x114.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/custom-fields-suite--1536x229.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Custom Fields Suite ofrece una soluci&oacute;n ligera y sencilla para habilitar campos personalizados en sitios web WordPress.<\/p><p>Este plugin <strong>gratuito<\/strong> admite 14 tipos de campos, incluidos los de pesta&ntilde;a, editor WYSIWYG, fecha y verdadero\/falso. Puedes a&ntilde;adir campos personalizados a tus entradas, p&aacute;ginas y tipos de entradas personalizadas de WordPress.<\/p><p>Utiliza el plugin para crear grupos de campos personalizados y mostrarlos en el editor de entradas. Con el cuadro de colocaci&oacute;n de reglas, tambi&eacute;n puedes decidir d&oacute;nde aparecer&aacute; el grupo de campos. Por ejemplo, es posible colocarlo encima o debajo del editor de texto.<\/p><p>El &uacute;nico inconveniente de Custom Fields Suite es que no cuenta con un equipo de atenci&oacute;n al cliente. Sin embargo, proporciona <a href=\"https:\/\/mgibbs189.github.io\/custom-field-suite\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentaci&oacute;n<\/a> a la que puedes acceder para obtener m&aacute;s informaci&oacute;n sobre el plugin.<\/p><p>3.&nbsp;<a href=\"https:\/\/es.wordpress.org\/plugins\/pods\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pods<\/a><\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"326\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-13.png\" alt=\"\" class=\"wp-image-26729\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-13.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-13-300x96.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-13-150x48.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-13-768x245.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Pods gestiona todo el contenido personalizado en una interfaz sencilla y limpia. Esto facilita la adici&oacute;n de campos personalizados a tus entradas, p&aacute;ginas o cualquier tipo de contenido personalizado.<\/p><p>Utiliza los shortcodes, widgets o plantillas del plugin para mostrar los campos en cualquier parte del sitio. Pods tambi&eacute;n viene con tipos de campos personalizados predeterminados, pero es posible crear nuevos tipos seg&uacute;n tus necesidades.<\/p><p>Pods se integra bien con otros plugins de WordPress como <strong>Polylang, Beaver Builder<\/strong> y <strong>Gravity Forms<\/strong>. Adem&aacute;s, est&aacute; equipado con una <a href=\"https:\/\/docs.pods.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">amplia documentaci&oacute;n<\/a> y <a href=\"https:\/\/support.pods.io\/chat\/\" target=\"_blank\" rel=\"noreferrer noopener\">soporte por chat en vivo<\/a> para guiar a los usuarios y resolver cualquier problema.<\/p><p>[<a href=\"https:\/\/pods.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">DESCARGAR<\/a>]<\/p><h2 class=\"wp-block-heading\" id=\"h-anade-manualmente-campos-de-entrada-personalizados-de-wordpress-y-edita-tu-tema-para-mostrarlos\">A&ntilde;ade manualmente campos de entrada personalizados de WordPress y edita tu tema para mostrarlos<\/h2><p>Por defecto, la opci&oacute;n de campos personalizados est&aacute; oculta en WordPress. Para activar esta funci&oacute;n, accede a tu editor de p&aacute;ginas o entradas.<\/p><p>Si usas el editor de bloques <a href=\"\/mx\/tutoriales\/gutenberg-wordpress\">Gutenberg<\/a>, haz clic en el men&uacute; de <strong>Opciones<\/strong> en la parte superior derecha del editor y elige la opci&oacute;n de <strong>Preferencia<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-gutenberg-wordpress-1024x569.png\" alt=\"Men&uacute; de opciones en el editor Gutenberg\" class=\"wp-image-26730\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-gutenberg-wordpress.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-gutenberg-wordpress-300x167.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-gutenberg-wordpress-150x83.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-gutenberg-wordpress-768x427.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-gutenberg-wordpress-1536x853.png 1536w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-gutenberg-wordpress-2048x1138.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Haz clic en la opci&oacute;n de <strong>Paneles<\/strong> y despl&aacute;zate hacia abajo hasta encontrar <strong>Campos personalizados<\/strong> y act&iacute;valo.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"616\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/activar-campos-personalizados-1024x616.png\" alt=\"Men&uacute; de preferencias en el editor Gutenberg\" class=\"wp-image-26731\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/activar-campos-personalizados.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/activar-campos-personalizados-300x180.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/activar-campos-personalizados-150x90.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/activar-campos-personalizados-768x462.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/activar-campos-personalizados-1536x924.png 1536w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/activar-campos-personalizados-2048x1232.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Luego de hacerlo, aparecer&aacute; un cuadro de&nbsp;<strong>Campos personalizados<\/strong>&nbsp;en la parte inferior de la pantalla, que se ve as&iacute;:<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"295\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/cuadro-de-campos-personalizados-1024x295.png\" alt=\"Cuadro de campos personalizados\" class=\"wp-image-26732\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/cuadro-de-campos-personalizados.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/cuadro-de-campos-personalizados-300x86.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/cuadro-de-campos-personalizados-150x43.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/cuadro-de-campos-personalizados-768x221.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/cuadro-de-campos-personalizados-1536x442.png 1536w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/cuadro-de-campos-personalizados-2048x590.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Puedes introducir los datos del campo personalizado utilizando pares de clave\/valor. La <strong>clave<\/strong> se refiere al nombre de tu campo personalizado, mientras que el <strong>valor<\/strong> es la informaci&oacute;n que quieres mostrar.<\/p><p>Por ejemplo, queremos a&ntilde;adir un descargo de responsabilidad a una publicaci&oacute;n patrocinada. Por tanto, establecemos <strong>Sponsored o Patrocinado<\/strong> como nombre y rellenamos <strong>S&iacute;<\/strong> o <strong>No<\/strong> en la casilla de valor para mostrar si la publicaci&oacute;n estaba patrocinada o no.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"301\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/sponsored--1024x301.png\" alt=\"\" class=\"wp-image-26770\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/sponsored-.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/sponsored--300x88.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/sponsored--150x44.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/sponsored--768x226.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/sponsored--1536x452.png 1536w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/sponsored--2048x602.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Presiona el bot&oacute;n <strong>A&ntilde;adir campo personalizado<\/strong> en la parte inferior del cuadro para guardarlo.<\/p><p>Si utilizas&nbsp;<strong>el editor cl&aacute;sico<\/strong>, localiza el bot&oacute;n <strong>Opciones de pantalla<\/strong> en la esquina derecha de tu pantalla y marca la casilla <strong>Campos personalizados<\/strong> y sigues los pasos explicados anteriormente.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"198\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2019\/01\/opciones-de-pantalla-1024x198.png\" alt=\"Opciones de pantalla del editor de WordPress.\" class=\"wp-image-7918\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2019\/01\/opciones-de-pantalla-1024x198.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2019\/01\/opciones-de-pantalla-150x29.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2019\/01\/opciones-de-pantalla-300x58.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2019\/01\/opciones-de-pantalla-768x148.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2019\/01\/opciones-de-pantalla-990x191.png 990w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2019\/01\/opciones-de-pantalla.png 1103w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Sin embargo, el proceso de crear campos personalizados no termina ah&iacute;. WordPress solo guarda los valores de los campos personalizados en el back-end. Para mostrar la informaci&oacute;n en el front-end del sitio, necesitas <a href=\"\/mx\/tutoriales\/editar-plantillas-wordpress\">editar los archivos del tema o plantilla<\/a>.<\/p><p>Hay varias opciones para editar los archivos de tu tema: a trav&eacute;s de tu panel de administraci&oacute;n, conect&aacute;ndote a un FTP o utilizando el <strong>Administrador de Archivos de Hostinger<\/strong>.<\/p><p>Independientemente del m&eacute;todo que elijas, te recomendamos <a href=\"\/mx\/tutoriales\/utilizar-child-theme\">utilizar un tema hijo<\/a> para experimentar libremente sin da&ntilde;ar el tema durante el proceso.<\/p><p>En este tutorial, te mostraremos c&oacute;mo acceder a los archivos directamente desde el panel de control de WordPress. Ve a <strong>Apariencia &rarr; Editor de archivos de temas<\/strong> y localiza el archivo <strong>single.php<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-de-temas-de-archivos-1024x576.png\" alt=\"\" class=\"wp-image-26753\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-de-temas-de-archivos.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-de-temas-de-archivos-300x169.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-de-temas-de-archivos-150x84.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-de-temas-de-archivos-768x432.png 768w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-de-temas-de-archivos-1536x865.png 1536w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/editor-de-temas-de-archivos-2048x1153.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>A continuaci&oacute;n se muestra un ejemplo de c&oacute;digo utilizado habitualmente para mostrar campos personalizados:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php echo get_post_meta($post-&gt;ID, 'key', true); ?&gt;<\/pre><p>Ten en cuenta que el c&oacute;digo exacto que utilizar&aacute;s puede variar en funci&oacute;n de la acci&oacute;n o la informaci&oacute;n que quieras mostrar. Sin embargo, aseg&uacute;rate de cambiar el <strong>marcador de posici&oacute;n &ldquo;key&rdquo;<\/strong> (clave en espa&ntilde;ol) por el nombre de tu campo personalizado.<\/p><p>En este ejemplo, queremos mostrar un mensaje de exenci&oacute;n de responsabilidad para las publicaciones patrocinadas o sponsored posts. Por lo tanto, el c&oacute;digo deber&iacute;a tener este aspecto<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n$meta = get_post_meta( get_the_ID(), 'Sponsored Post' );\nif( $meta[0] == 'Si' ) {\n?&gt;\n&lt;center&gt;This post contains affiliate links. We might earn a commission if you make a purchase using these links.&lt;\/center&gt;&gt;\n&lt;?php } ?&gt;<\/pre><p>Lo que tienes que hacer es a&ntilde;adir tu c&oacute;digo en el bucle de WordPress, que es una funci&oacute;n que indica a WordPress qu&eacute; datos tiene que extraer y mostrar cuando alguien visualiza contenido en tu sitio.<\/p><p>El c&oacute;digo de un bucle puede variar, dependiendo del tema que est&eacute;s utilizando. Sin embargo, este es el aspecto del bucle predeterminado de WordPress:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n&lt;?php endwhile; else: ?&gt;\n&lt;?php endif; ?&gt;<\/pre><p>Al a&ntilde;adir un campo personalizado, puedes controlar su ubicaci&oacute;n en el sitio. Por ejemplo, para colocarlo en la parte superior de una entrada, a&ntilde;ade el c&oacute;digo antes de la siguiente l&iacute;nea:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">while ( have_posts() ) : the_post();<\/pre><p>Cuando hayas a&ntilde;adido correctamente el c&oacute;digo en el editor de temas, haz clic en el bot&oacute;n <strong>Actualizar archivo<\/strong> para guardar los cambios.<\/p><p>El c&oacute;digo que aplicamos indica a WordPress que busque entradas con campos personalizados <strong>Sponsored Post<\/strong> (publicaci&oacute;n patrocinada) y compruebe el valor.<\/p><p>WordPress mostrar&aacute; el mensaje de exenci&oacute;n de responsabilidad si el valor es <strong>S&iacute;<\/strong>, ya que la entrada est&aacute; marcada como patrocinada. De lo contrario, no mostrar&aacute; ninguna informaci&oacute;n adicional ni metadatos.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"478\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-14.png\" alt=\"\" class=\"wp-image-26771\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-14.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-14-300x140.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-14-150x70.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/12\/image-14-768x359.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Ten en cuenta que el ejemplo anterior es una de las funciones b&aacute;sicas de los campos personalizados de WordPress. Para aplicar acciones m&aacute;s complejas, tendr&aacute;s que hacer algo de codificaci&oacute;n adicional.<\/p><p>A continuaci&oacute;n encontrar&aacute;s varias etiquetas de plantilla que puedes utilizar para personalizar la funci&oacute;n de los campos personalizados en tu sitio web:<\/p><p><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_meta\/\" target=\"_blank\" rel=\"noreferrer noopener\">the_meta()<\/a>: tambi&eacute;n conocida como post-meta, esta etiqueta muestra una lista de los campos personalizados de la entrada.<br><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_post_custom\/\" target=\"_blank\" rel=\"noreferrer noopener\">get_post_custom()<\/a> y <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/\" target=\"_blank\" rel=\"noreferrer noopener\">get_post_meta()<\/a> &ndash; recupera uno o varios metadatos de una entrada.<br><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_post_custom_values\/\" target=\"_blank\" rel=\"noreferrer noopener\">get_post_custom_values()<\/a> &ndash; Obtiene los valores de un campo personalizado de la entrada.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>WordPress est&aacute; equipado con funciones avanzadas, como los campos personalizados, que permiten a los usuarios a&ntilde;adir informaci&oacute;n adicional a una entrada o una p&aacute;gina, desde renuncias de responsabilidad hasta im&aacute;genes y casillas de verificaci&oacute;n.<\/p><p>La funcionalidad de campos personalizados integrada en WordPress est&aacute; oculta por defecto, por lo que hemos incluido los pasos para activarla.<\/p><p>Adem&aacute;s, tambi&eacute;n hemos cubierto los pasos para crear y utilizar campos personalizados en WordPress:<\/p><ol class=\"wp-block-list\">\n<li>Instalando el <strong>plugin<\/strong> <strong>Advanced Custom Fields<\/strong> o cualquiera de los otros tres plugins sugeridos en el sitio web.<\/li>\n\n\n\n<li>Editando manualmente el archivo <strong>single.php<\/strong> de tu tema.<\/li>\n<\/ol><p>La funci&oacute;n nativa de campos personalizados de WordPress puede no ser la t&eacute;cnica m&aacute;s f&aacute;cil de usar. Por este motivo, hemos incluido la opci&oacute;n de utilizar plugins de campos personalizados para simplificar el proceso.<\/p><p>Esperamos que esta gu&iacute;a te haya ayudado a comprender c&oacute;mo aplicar y mostrar tus campos personalizados en los sitios web de WordPress. No dudes en dejar tus preguntas en la secci&oacute;n de comentarios m&aacute;s abajo.<\/p><p>\n\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Aprende otras t&eacute;cnicas avanzadas de WordPress<\/h4>\n                    <p> <\/p><p><a href=\"\/mx\/tutoriales\/crear-un-shortcode-en-wordpress\">&iquest;C&oacute;mo crear un Shortcode en WordPress?<\/a><br><a href=\"\/mx\/tutoriales\/mejorar-velocidad-wordpress\">&iquest;C&oacute;mo acelerar WordPress?<\/a><br><a href=\"\/mx\/tutoriales\/eliminar-barra-lateral-wordpress\">&iquest;C&oacute;mo eliminar la barra lateral en WordPress?<\/a><br><a href=\"\/mx\/tutoriales\/iconos-wordpress\">&iquest;C&oacute;mo utilizar las fuentes de iconos de WordPress?<\/a><br><a href=\"\/mx\/tutoriales\/entorno-staging-wordpress\">&iquest;C&oacute;mo crear un entorno de pruebas en WordPress?<\/a> <\/p>\n                <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Como uno de los sistemas de gesti&oacute;n de contenidos (CMS) m&aacute;s populares, WordPress es ampliamente conocido por sus diversas funciones y opciones de personalizaci&oacute;n. Una de esas opciones es ampliar los metadatos, que se refieren a la informaci&oacute;n clave de una p&aacute;gina o entrada, incluidos los nombres de los autores, los t&iacute;tulos y las descripciones. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/mx\/tutoriales\/campos-personalizados-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Agregar campos personalizados en WordPress (2 M\u00e9todos)","rank_math_description":"Los campos personalizados de WordPress te permiten agregar metadatos valiosos a tus publicaciones y p\u00e1ginas. Te ense\u00f1aremos dos formas de crearlos.","rank_math_focus_keyword":"campos personalizados de wordpress","footnotes":""},"categories":[4747],"tags":[13658],"class_list":["post-7898","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-campos-personalizados-de-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-custom-fields","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/campos-personalizados-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/custom-field-wordpress","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wordpress-custom-fields","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/niestandardowe-pola-w-wordpress\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-custom-fields\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-custom-fields","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/campos-personalizados-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-custom-fields","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/7898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/comments?post=7898"}],"version-history":[{"count":15,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/7898\/revisions"}],"predecessor-version":[{"id":36849,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/7898\/revisions\/36849"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/media?parent=7898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/categories?post=7898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/tags?post=7898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}