{"id":233935,"date":"2023-02-27T16:08:00","date_gmt":"2023-02-27T13:08:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233935"},"modified":"2022-11-11T13:17:01","modified_gmt":"2022-11-11T10:17:01","slug":"codificacion-para-campos-personalizados-avanzados-una-introduccion","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/codificacion-para-campos-personalizados-avanzados-una-introduccion\/","title":{"rendered":"Codificaci\u00f3n para campos personalizados avanzados: una introducci\u00f3n"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Advanced Custom Fields<\/a> (ACF) es un complemento de WordPress que es una gran herramienta para configurar metadatos de publicaciones personalizadas. Le permite crear y configurar f\u00e1cilmente metaboxes complejos y f\u00e1ciles de usar con todo tipo de campos y configuraciones para tipos de publicaciones, taxonom\u00eda, pantallas de usuario y p\u00e1ginas de opciones. Y es muy amigable para los desarrolladores.<\/p>\n<p>Ahora, puede configurar sus propios metaboxes o configuraciones manualmente, pero para configuraciones m\u00e1s complejas requiere que codifique bastante, incluido el estilo, Javascript, validaci\u00f3n y manejo de guardado. Imagine, por ejemplo, escribir manualmente un repetidor con un grupo de configuraciones, una selecci\u00f3n m\u00faltiple de publicaciones por una determinada consulta. O manejar la configuraci\u00f3n de visualizaci\u00f3n que depende de ciertas variables, como qu\u00e9 t\u00e9rmino o plantilla de p\u00e1gina se asigna (que requiere Javascript). Advanced Custom Fields maneja todo esto, y lo hace maravillosamente.<\/p>\n<p>Tenga en cuenta que los campos personalizados avanzados en realidad no generar\u00e1n ninguno de sus metadatos personalizados en sus plantillas. Generar o hacer algo en funci\u00f3n de los campos y la configuraci\u00f3n establecidos con ACF depende de usted como desarrollador. Pero esto se hace f\u00e1cilmente usando cualquiera de los m\u00e9todos de ACF. Tambi\u00e9n es bueno saber que ACF est\u00e1 utilizando la meta funcionalidad del n\u00facleo de WordPress (publicaci\u00f3n, t\u00e9rmino, usuario). Lo que significa que en realidad guarda, por ejemplo, la configuraci\u00f3n de las publicaciones como publicaci\u00f3n meta, que puede obtener utilizando funciones b\u00e1sicas como <code>get_post_meta()<\/code>.<\/p>\n<p>Los campos personalizados avanzados vienen en una <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">versi\u00f3n gratuita<\/a> y una versi\u00f3n <a href=\"https:\/\/www.advancedcustomfields.com\/pro\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Pro de pago<\/a>. La versi\u00f3n gratuita es m\u00e1s que suficiente para la mayor\u00eda de los casos, pero en la versi\u00f3n Pro obtienes algunas funciones adicionales, como un campo repetidor, un campo de galer\u00eda, bloques de Gutenberg (ver m\u00e1s adelante) y la posibilidad de usar ACF para configurar tu propio administrador personalizado. p\u00e1ginas de opciones. ACF tambi\u00e9n es tan popular que puede encontrar f\u00e1cilmente <a href=\"https:\/\/www.awesomeacf.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">extensiones<\/a> de alta calidad para cualquier cosa que el n\u00facleo ACF no cubra.<\/p>\n<h2>Campos personalizados avanzados: la parte de administraci\u00f3n<\/h2>\n<p>Cuando instale el complemento Campos personalizados avanzados, obtendr\u00e1 un nuevo men\u00fa de administraci\u00f3n para &quot;Campos personalizados&quot;. Aqu\u00ed es donde puede configurar y configurar sus &quot;cuadros meta&quot; o grupos de configuraciones.<\/p>\n<p>Dentro de un grupo puedes configurar tantos campos como quieras de diferentes tipos. Los m\u00e1s comunes son entrada de texto, \u00e1rea de texto, editor de texto enriquecido, archivo, imagen, verdadero\/falso (conmutador), casillas de verificaci\u00f3n, botones de radio y cuadro de selecci\u00f3n. Otros comunes son m\u00faltiples formas de elegir publicaciones, elegir taxonom\u00eda, seleccionar usuarios, selector de fechas, selector de colores, Google Maps y muchos, muchos m\u00e1s. Seg\u00fan el tipo de campo que elija, obtendr\u00e1 una variedad de opciones adicionales para personalizar el campo. Tambi\u00e9n puede agregar l\u00f3gica condicional a cualquier campo. La l\u00f3gica condicional es para ocultar o mostrar campos dependiendo de otras opciones dentro del grupo.<\/p>\n<p>Para cada grupo de configuraciones, puede definir en qu\u00e9 casos deben aparecer estas configuraciones. Los ejemplos son cuando se editan publicaciones, un t\u00e9rmino de taxonom\u00eda o se edita un usuario. Puede personalizar a\u00fan m\u00e1s la visibilidad de su configuraci\u00f3n en, por ejemplo, el tipo de publicaci\u00f3n. O si una publicaci\u00f3n tiene asignado un determinado t\u00e9rmino o plantilla de p\u00e1gina, si una publicaci\u00f3n es de un determinado autor, si la funci\u00f3n del usuario es tal o cual, la funci\u00f3n del usuario que ha iniciado sesi\u00f3n actualmente, o si la p\u00e1gina es una p\u00e1gina principal O no. Tambi\u00e9n puede personalizar d\u00f3nde debe aparecer el cuadro meta. Sin embargo, esta funcionalidad se reduce un poco ahora con el nuevo editor de Gutenberg.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4a07952.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4a07952.png\" alt=\"Codificaci\u00f3n para campos personalizados avanzados: una introducci\u00f3n\" ><\/a><\/p>\n<p>Configurando un grupo<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4c9fa22.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4c9fa22.png\" alt=\"Codificaci\u00f3n para campos personalizados avanzados: una introducci\u00f3n\" ><\/a><\/p>\n<p>Configuraciones para un solo campo<\/p>\n<h2>Campos personalizados avanzados: la parte del c\u00f3digo<\/h2>\n<p>Echemos un vistazo a la parte m\u00e1s interesante: c\u00f3mo puede utilizar los campos personalizados avanzados por c\u00f3digo. Como se mencion\u00f3 anteriormente, ACF es s\u00faper amigable para los desarrolladores y ofrece una amplia gama de personalizaci\u00f3n.<\/p>\n<p>Obtener valores y generarlos en sus plantillas es f\u00e1cil de hacer usando los m\u00e9todos de ACF. Por ejemplo <code>the_field('your_meta_key')<\/code>, para repetirlo directamente o <code>get_field('your_meta_key')<\/code>para almacenarlo en una variable de PHP. Proporcione el ID de la publicaci\u00f3n como segundo argumento si necesita obtener datos fuera del bucle. Pan comido. Podr\u00eda usar <code>get_post_meta()<\/code>, pero se recomienda usar los m\u00e9todos de ACF, ya que ACF puede transformar el valor en algo m\u00e1s significativo antes de devolv\u00e9rselo.<\/p>\n<p>Otra cosa que debe tener en cuenta es la herramienta de exportaci\u00f3n dentro de ACF. Puede exportar los grupos creados en dos formatos; ya sea un archivo JSON descargable o c\u00f3digo PHP puro. El archivo JSON es \u00fatil si necesita exportar configuraciones entre servidores de prueba y en vivo, u otro WordPress. Exportar en PHP puro le brinda la posibilidad de pegarlo directamente en su tema o complemento de archivos PHP.<\/p>\n<p>Como puede concluir de esto; puede usar el c\u00f3digo PHP, ya sea escribi\u00e9ndolo manualmente o export\u00e1ndolo despu\u00e9s de configurarlos en el administrador, para agregar sus grupos y campos. Esto permite m\u00e1s control y formas de generar opciones personalizadas.<\/p>\n<p>\u00a1Pero espera hay mas! ACF tambi\u00e9n ofrece una amplia gama de acciones y filtros para personalizar a\u00fan m\u00e1s los campos o sus valores. Hay ganchos para guardar o renderizar un campo, as\u00ed como ganchos para registrar grupos por c\u00f3digo (mencionados anteriormente) y filtros para personalizar los valores, la configuraci\u00f3n o las opciones del campo antes de guardar o renderizar. Puede especificar a\u00fan m\u00e1s si el filtro debe afectar a todos los campos, campos por un tipo determinado o campos por una clave meta determinada. Todos los ganchos y filtros tienen el prefijo <code>acf\/<\/code>.<\/p>\n<p>Eche un vistazo a la p\u00e1gina <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">de documentaci\u00f3n de ACF<\/a> ; haga clic en &#8216;Funciones&#8217;, &#8216;Acciones&#8217; o &#8216;Filtros&#8217; para obtener una descripci\u00f3n general. Tambi\u00e9n encontrar\u00e1 excelentes tutoriales y gu\u00edas en este sitio.<\/p>\n<h2>Una nota sobre campos personalizados avanzados y Gutenberg<\/h2>\n<p>Crear bloques personalizados de Gutenberg es bastante desalentador en este momento. La documentaci\u00f3n no est\u00e1 del todo en su lugar, los cambios ocurren a menudo y requiere un poco de conocimiento de Javascript para codificar. Preferiblemente necesita conocimiento de React y c\u00f3mo configurar el compilador de JSX\/ES6 con webpack y Babel.<\/p>\n<p>Sin embargo, en <a href=\"https:\/\/www.advancedcustomfields.com\/blog\/acf-5-8-introducing-acf-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la versi\u00f3n 5.8, ACF Pro introdujo<\/a> una funci\u00f3n para configurar un grupo de campos como un bloque de Gutenberg, lo que le permite agregar bloques personalizados \u00fanicamente con c\u00f3digo ACF y PHP. \u00a1No es necesario tener conocimientos de Javascript!<\/p>\n<p>Todo lo que necesita hacer es configurar los grupos en admin o por c\u00f3digo como de costumbre. Pero luego definiendo su ubicaci\u00f3n como bloque Gutenberg. Todo lo que queda es agregar algo de c\u00f3digo PHP para registrarlos como un bloque de Gutenberg personalizado con <code>acf_register_block()<\/code>. Para esa funci\u00f3n, define una devoluci\u00f3n de llamada a una funci\u00f3n de PHP o un archivo de plantilla que es responsable de representar la salida del bloque. Usted escribe esta funci\u00f3n o parte de la plantilla completamente en PHP y usa m\u00e9todos familiares, como <code>get_field()<\/code>para obtener los valores de configuraci\u00f3n.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4fc3c57.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151429-61e4cb4fc3c57.png\" alt=\"Codificaci\u00f3n para campos personalizados avanzados: una introducci\u00f3n\" ><\/a><\/p>\n<p>C\u00f3mo se ve un bloque ACF en el editor de Gutenberg<\/p>\n<p>\u00a1 Est\u00e9n atentos en la <a href=\"https:\/\/awhitepixel.com\/blog\/category\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">categor\u00eda Campos personalizados avanzados<\/a> para obtener tutoriales sobre c\u00f3mo usar este complemento!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Esta gu\u00eda para principiantes analiza los campos personalizados avanzados (ACF) del complemento de WordPress y c\u00f3mo usted, como desarrollador, puede utilizarlo.<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,892,810,716,716,914,1110,914,810,840,840,861,861],"tags":[1172],"class_list":["post-233935","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-complementos","category-desarrollador","category-otro","category-n-a","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233935"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233935\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}