Cómo crear metaboxes personalizados en WordPress y por qué










  • Así que tienes un sitio web de WordPress y has estado publicando artículos durante un tiempo. Sin embargo, está buscando formas de agregar más funcionalidad a sus publicaciones. Tener un cuadro meta personalizado en su sitio web le permitirá realizar funciones personalizadas dentro de sus publicaciones y páginas.

    ¿Qué son las metacajas?

    Dentro del editor de publicaciones y páginas de WordPress, hay varios cuadros predeterminados. Los reconocerá como cajas como:

    • Editor
    • Publicar
    • Categorías
    • Etiquetas

    Estos se llaman metaboxes de WordPress. Cada tema de WordPress tendrá estos, y algunos tendrán otros metaboxes ya agregados de forma predeterminada. Todo depende de tu tema. Incluso hay cajas meta para agregar meta descripciones y palabras clave .

    Puede agregar metaboxes personalizados a su sitio web de WordPress usando complementos, código o una combinación de ambos. Hablaremos más sobre esto a continuación, pero hablemos de por qué debería agregar un cuadro meta cuando sea necesario para su editor.

    ¿Por qué usar metacajas?

    Hay diferentes procesos de pensamiento detrás de esto. Agregar un metabox personalizado y usarlo puede ser esencial, o puede estar relacionado con algo divertido. Tal vez quieras ver cómo está el clima o mostrar un emoji de estado de ánimo. Hay muchos tipos de metacampos y cuadros que puede agregar.

    Dicho esto, los metacuadros y los metacampos también son muy útiles si desea recopilar cierta información relacionada con la publicación que se está editando.

    Cuando crea un cuadro meta personalizado, aparecerá en la misma pantalla que toda la otra información relacionada con la publicación que tenga. Se establece una relación clara y puede ver cómo funcionan todos juntos en función de cómo los construya.

    Los metacuadros no aparecen a los usuarios de su sitio ni a los lectores de artículos. Solo son visibles para usted en la parte trasera de su panel de administración de WordPress . Además, puede organizar sus metaboxes personalizados en el back-end como desee. Los propietarios de sitios web obtienen control total sobre el entorno de edición y pueden mostrarlos como mejor les parezca.

    Echemos un vistazo a cómo puede agregar un metabox personalizado de WordPress a su sitio web y usarlo en el futuro.

    metabox

    Complemento de caja meta

    Meta Box es un complemento muy poderoso, pero liviano, que permite a los desarrolladores o propietarios de sitios web (si sabe cómo) la capacidad de crear metaboxes personalizados ilimitados en su sitio web. También le da la posibilidad de crear campos personalizados.

    Este complemento viene con una tonelada de funcionalidad. Una vez instalado y activado, podrá crear más de 40 tipos diferentes de metaboxes personalizados para su sitio web. Algunos de los más populares incluyen:

    • Texto
    • Imágenes
    • Cargas de archivos
    • Casillas de verificación
    • Botones de radio
    • Selector de fecha y hora
    • Seleccionar Post
    • Taxonomía
    • Usuario

    Nuevamente, estos son solo algunos de los metacuadros personalizados que puede crear una vez que instale el complemento.

    Deberá realizar algunos pasos una vez que se haya instalado el complemento. Esto incluyó copiar y pegar el código del complemento fuente en su archivo functions.php . Sin embargo, lo revisaremos juntos a continuación.

    Repasemos cómo agregar un metabox personalizado a su sitio web de WordPress.

    Instalar y activar Meta Box

    Para agregar un metabox personalizado de WordPress a su sitio web, primero debe instalar y activar el complemento. Puede hacerlo yendo a la página Complementos de su panel de administración de WordPress y buscando el nombre del complemento allí.

    Instale y active el complemento personalizado de meta box

    Una vez que el complemento se haya instalado y activado, estará listo para comenzar a crear metaboxes personalizados para agregar a su sitio web para su uso.

    Nota: el complemento Meta Box en realidad no tiene una página de administración para la configuración o los ajustes. En su lugar, debe usar el generador en línea que proporciona una interfaz de usuario que acelera el proceso y le permite crear fácilmente metacuadros sobre la marcha.

    Una vez que active el complemento, se lo dirigirá automáticamente a una página de inicio donde habrá información para usted.

    Empezando

    Antes que nada, verá una página de inicio para el complemento Meta Box. Esto incluirá una pestaña de inicio, extensión y soporte.

    Página de inicio

    Ahora, eres más que bienvenido a ver las otras pestañas. Puede consultar algunas otras extensiones que recomiendan para otros fines, e incluso hacer clic en la pestaña de soporte para acceder a los desarrolladores y la documentación de ayuda cuando sea necesario.

    Dicho esto, vamos a apegarnos a la configuración de un cuadro meta en este tutorial . Por lo tanto, permanezca en la página en la que se encuentra y avancemos desde aquí.

    Acceso al generador en línea

    Para agregar un metabox personalizado a su sitio web, tendrá que utilizar el «generador en línea» que proporciona el complemento de metabox. Desplácese hacia abajo hasta la parte inferior derecha de la página de inicio y haga clic en el botón «Ir al generador en línea».

    Accede al generador en línea

    Nota: El generador en línea que proporciona Meta Box le permite generar fácilmente metaboxes con campos personalizados. Está directamente vinculado al complemento y proporciona una interfaz de usuario muy potente y fácil de usar que le permite crear un cuadro meta personalizado utilizando un método de arrastrar y soltar.

    Adición de un metabox personalizado

    Cuando llegue a la página del generador en línea para el complemento Meta Box, verá que hay tres pestañas. Éstos incluyen:

    • General
    • metabox
    • Los campos

    Estas son las tres partes principales que debe completar para crear un cuadro meta personalizado para su sitio web. Completará cada pestaña en consecuencia, y cuando genere el código, deberá colocarlo en el archivo functions.php de su sitio web.

    Repasemos las pestañas juntos y hagamos una demostración.

    General

    Primero, haga clic en la pestaña «General». Aquí es donde completará toda la información general necesaria. Esto incluirá el nombre de la función, el nombre de dominio de texto y el prefijo de ID de campo.

    Pestaña general para el complemento meta box personalizado

    metabox

    Ahora continúe y haga clic en la pestaña «Meta Box». Aquí es donde configurará los parámetros que necesita para el cuadro meta que está creando.

    Pestaña metabox

    Para ayudarlo, esto es lo que significan todos los parámetros:

    • ID: ID de caja meta. Este campo no es obligatorio. Si no escribiste nada aquí, la ID del cuadro meta se crearía automáticamente a partir del título usando la función sanitize_title.
    • Título: título del metacuadro. Este es un campo muy importante, y se le pide que complete la información.
    • Prioridad: orden de prioridad al mostrar varios campos. Este campo no es obligatorio. Pero si su cuadro meta es importante y desea que los usuarios lo vean fácilmente, debe configurarlo en un número alto para que el cuadro meta lo muestre en la parte superior.
    • Contexto: la posición en la que desea que se coloque el cuadro meta.
    • Tipo de publicación: ¿A qué tipo de publicación pertenece tu meta box? Seleccione solo los tipos de publicaciones de destino.
    • Autoguardado: ¿Desea guardar automáticamente los valores de los campos personalizados? En caso afirmativo, marque la casilla.

    Los campos

    Aquí es donde tiene la opción de configurar campos personalizados si lo desea. Estos incluyen parámetros, acciones, órdenes y más.

    Piense en esta área como lo haría cuando está armando un formulario de contacto de arrastrar y soltar. Es el mismo principio. Simplemente arrastre, suelte y edite los campos que desee según corresponda.

    Pestaña de campos

    Genere código y péguelo en el archivo functions.php

    Ahora que tiene todo completado y configurado como desea para su nuevo cuadro meta personalizado, es hora de generar el código que necesita.

    Recuerde, puede generar código desde cualquier pestaña cuando esté listo. Simplemente haga clic en el botón «Generar código» para avanzar.

    botón generar código

    Una vez que haga clic en ese botón, obtendrá un montón de código generado automáticamente para usted. Continúe y copie el código del cuadro.

    Copie el código del complemento meta box personalizado

    Una vez que haya copiado el código, debe acceder al archivo functions.php de su sitio web para poder pegar el código.

    Para acceder a este archivo, haga clic en Apariencia > Editor de temas, ubicado en el área de menú de la izquierda de su panel de administración de WordPress.

    Haga clic en apariencia y haga clic en editor de temas

    Esto lo llevará a los archivos de su tema. Desde aquí, haga clic en la pestaña “Funciones del tema (functions.php) para acceder al archivo.

    Haga clic en la pestaña php de funciones de funciones de temaDesplácese hasta la parte inferior del archivo y pegue el código correspondiente allí. Haga clic en el botón «Actualizar archivo» cuando haya terminado.

    Pegar código para meta box personalizado

    ¡Eso es todo! Ha creado con éxito un nuevo metabox personalizado para su sitio web basado en la información que usó para construirlo usando el generador en línea.

    Todos los nuevos cuadros de metadatos personalizados que crea ahora están en su editor de publicaciones. Puede repetir este proceso tantas veces como desee y crear tantos metacuadros personalizados como necesite.

    Pensamientos finales

    La creación de un cuadro meta personalizado para su sitio de WordPress le brinda una funcionalidad ampliada y le permite hacer cosas dentro de las publicaciones que no podía hacer antes. Si bien tiene que copiar y pegar un pequeño código, no tiene que escribirlo usted mismo.

    Simplemente use el editor de cuadro meta de arrastrar y soltar para crear exactamente lo que necesita.

    ¿Ha creado un metabox personalizado con este complemento? ¿Se siente más cómodo usando un método diferente?