{"id":228212,"date":"2022-10-13T20:33:00","date_gmt":"2022-10-13T17:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228212"},"modified":"2022-11-09T01:18:45","modified_gmt":"2022-11-08T22:18:45","slug":"creacion-de-un-control-de-seleccion-de-enlaces-cmb2-personalizado-para-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/creacion-de-un-control-de-seleccion-de-enlaces-cmb2-personalizado-para-wordpress\/","title":{"rendered":"Creaci\u00f3n de un control de selecci\u00f3n de enlaces CMB2 personalizado para WordPress"},"content":{"rendered":"\n

En este tutorial, ver\u00e9 c\u00f3mo puede crear un control personalizado para ampliar la funcionalidad de CMB2<\/a> (Custom Meta Boxes 2) de WebDevStudios<\/a>.<\/p>\n

Desarrollo sitios web (y aplicaciones web) con WordPress<\/a> CMS (Sistema de gesti\u00f3n de contenido), y cuando llega un nuevo proyecto, puede garantizar que habr\u00e1 un requisito para m\u00ed para desarrollar ‘Meta Boxes personalizados’ para permitir que el usuario tenga un control preciso sobre el contenido y el dise\u00f1o de los sitios.<\/p>\n

Detallar\u00e9 c\u00f3mo constru\u00ed el Selector de enlaces de control CMB2 para CMB2<\/a> (disponible en todos los buenos repositorios de complementos de WordPress). Una captura de pantalla de la cual se puede ver a continuaci\u00f3n.<\/p>\n

El control CMB2 ‘Link Picker’ en acci\u00f3n<\/p>\n

El Selector de enlaces activa el cuadro de di\u00e1logo integrado de WordPress ‘Insertar\/editar enlace’ cuando hace clic en el bot\u00f3n ‘Elegir’. Esto se puede ver en la siguiente captura de pantalla:<\/p>\n

\"Creaci\u00f3nPresionar el bot\u00f3n le permite elegir entre un enlace (o agregar uno propio)<\/p>\n

Estoy seguro de que estar\u00e1 de acuerdo en que tener un control como este es incre\u00edblemente \u00fatil si desea que los editores de su sitio puedan agregar un enlace y tambi\u00e9n buscar en WordPress sus enlaces internos, en lugar de tener que cortar y pegar los enlaces en un enlace. campo.<\/p>\n

Introducci\u00f3n \/ Historia<\/h2>\n

Para aquellos que no lo saben, un meta cuadro vive en la pantalla del editor de una publicaci\u00f3n de WordPress, y probablemente contendr\u00e1 varios controles de formulario (cuadros de texto, listas desplegables, casillas de verificaci\u00f3n, etc.). Estos controles permiten a los usuarios de su sitio web cambiar f\u00e1cilmente un texto personalizado o una funcionalidad en el sitio.<\/p>\n

\"Creaci\u00f3n\"Creaci\u00f3nUn ejemplo de un cuadro meta con varios controles de formulario<\/p>\n

WordPress le permite crear metacuadros usando funciones (como [add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)<\/code>), pero crear metacuadros de esta manera puede ser un proceso largo, con mucha repetici\u00f3n de c\u00f3digo (especialmente si desea usar los mismos controles de formulario en varios proyectos).<\/p>\n

\u00bfPor qu\u00e9 CMB2?<\/h2>\n

Algunos de ustedes pueden haber o\u00eddo hablar de Advanced Custom Fields<\/a> (ACF) que proporciona una GUI (interfaz gr\u00e1fica de usuario) que le permite crear metaboxes directamente con WordPress.<\/p>\n

En mi opini\u00f3n, ACF no es una gran herramienta<\/strong> para ninguna soluci\u00f3n web escalable. El complemento depende demasiado de los datos almacenados en la base de datos. Esto causa dolor al implementar cambios en un sitio, ya que no puede simplemente subir su c\u00f3digo y ver los cambios al instante. En su lugar, debe volver a hacer el trabajo en los diversos entornos de implementaci\u00f3n (escenario, en vivo, etc.). As\u00ed que necesit\u00e1bamos una soluci\u00f3n que nos permitiera crear metaboxes program\u00e1ticamente. Introduzca CMB2.<\/p>\n

Antes de adoptar CMB2, anteriormente us\u00e1bamos HM Custom Meta Boxes<\/a> de esos encantadores humanos en Human Made<\/a> (que comenz\u00f3 como una bifurcaci\u00f3n del precursor de WebDevStudio para CMB2, ‘Custom Meta Boxes’).<\/p>\n

Nos encantaban los metaboxes personalizados de HM, y con los fragmentos de c\u00f3digo m\u00e1s simples, \u00a1pod\u00edamos crear r\u00e1pidamente metaboxes personalizados para hacer casi cualquier cosa!<\/p>\n

\"Creaci\u00f3nEjemplo de marcado de metaboxes personalizados de HM (este es el marcado para el metabox de Instagram en la primera captura de pantalla)<\/p>\n

Entonces, \u00bfpor qu\u00e9 cambiar a CMB2? Bueno, HM Custom Meta Boxes lamentablemente no estaba recibiendo mucho cari\u00f1o (habl\u00e9 con su desarrollador principal y \u00e9l es un hombre muy, muy ocupado), mientras que CMB2 avanzaba con nuevas caracter\u00edsticas, nuevos controles y hab\u00eda ganado terreno. en la comunidad de WordPress con muchas personas que lo adoptan y lanzan complementos para ampliarlo (incluidas varias de nuestras agencias asociadas).<\/p>\n

Finalmente, como se habr\u00e1 dado cuenta, trabajar con CMB2 es tan incre\u00edblemente simple como nos hab\u00edamos acostumbrado, ya que ambas plataformas comparten un ancestro com\u00fan.<\/p>\n

Tutorial<\/h2>\n

Antes de comenzar, todos tienen su propio conjunto de ideales sobre c\u00f3mo crear un complemento de WordPress, y he probado algunos, sin embargo, el tutorial sobre ‘ Composici\u00f3n ra\u00edz en WordPress<\/a> ‘ de Tom J Nowell, cambi\u00f3 por completo mi forma de trabajar. Encuentro su enfoque limpio, simple, y hace que el mantenimiento futuro de cualquier complemento sea pan comido. Si toma la fuente del complemento Link Picker for CMB2<\/a>, puede ver los m\u00e9todos que ense\u00f1a en la pr\u00e1ctica.<\/p>\n

Construyendo el formulario<\/h3>\n

Para crear el formulario que muestra el Selector de enlaces, lo primero que debemos hacer es engancharnos a la cmb2_render_[control_name]<\/code>acci\u00f3n. Como he llamado a este control ‘link_picker’, podemos completar el gancho as\u00ed:<\/p>\n

<?php\nadd_action( 'cmb2_render_link_picker', array( $this, 'cmb2_render_link_picker' ), 10, 5 );\n`\n<\/code><\/pre>\n
Para aquellos de ustedes que realmente no entienden el add_action<\/code>gancho, funciona de la siguiente manera:<\/p>\n
    \n
  1. El primer argumento cmb2_render_link_picker<\/code>es el nombre del gancho al que queremos engancharnos.<\/li>\n
  2. El segundo argumento array( $this, 'cmb2_render_link_picker' )<\/code>es la funci\u00f3n que queremos llamar cuando se ejecuta este gancho. Tenga en cuenta que estoy envolviendo esto en una matriz, $this<\/code>como el primer par\u00e1metro, porque estoy llamando a la funci\u00f3n dentro de una clase. Si no est\u00e1 trabajando con clases, puede usar simplemente el nombre de la funci\u00f3n cmb2_render_link_picker<\/code>.<\/li>\n
  3. El 10<\/code>, es el orden en que queremos que se active la funci\u00f3n (cuanto menor sea el n\u00famero, antes se activar\u00e1 cuando se llame a la acci\u00f3n).<\/li>\n
  4. El 5<\/code>es la cantidad de par\u00e1metros que se pasar\u00e1n a la funci\u00f3n que estoy llamando (esto quedar\u00e1 claro en breve).<\/li>\n<\/ol>\n
    A continuaci\u00f3n, creamos la funci\u00f3n que representar\u00e1 el formulario:<\/p>\n
    <?php\n\npublic function cmb2_render_link_picker( $field, $value, $object_id, $object_type, $field_type_object) {\n\u2026\n}\n`\n<\/code><\/pre>\n
    He dejado el ‘DocBlock’ en el c\u00f3digo anterior que describe lo que cmb2_render_link_picker()<\/code>hace cada uno de los par\u00e1metros pasados \u200b\u200ba la funci\u00f3n.<\/p>\n
    Tenga en cuenta que mi funci\u00f3n comienza con la public<\/code>declaraci\u00f3n. Esto nuevamente se debe a que estoy trabajando dentro de una clase. Si no est\u00e1 trabajando con clases, puede omitir esto.<\/p>\n
    El valor de este campo se pasa a la funci\u00f3n a trav\u00e9s del $value<\/code>par\u00e1metro. En el caso de este campo, pasaremos a trav\u00e9s de una matriz, ya que nuestro control tiene tres elementos separados:<\/p>\n