Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding

Personalización del administrador de WordPress: Texto de ayuda

by
Read Time:7 minsLanguages:
This post is part of a series called Customizing the WordPress Admin.
Customizing the WordPress Admin: Custom Admin Menus
Customizing the WordPress Admin - Listings Screens

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En la Parte 2 de este tutorial, te mostré cómo añadir metaboxes personalizados al escritorio de WordPress, algo que puedes usar para proporcionar texto de ayuda a tus clientes o usuarios.

Pero, ¿qué pasa si deseas proporcionar texto de ayuda en pantallas de edición individuales? En este tutorial, te mostraré cómo hacer precisamente eso.

En este tutorial aprenderás lo siguiente:

  1. Añadir un metabox a la pantalla de edición para el texto de ayuda
  2. Añadir metaboxes adicionales en diferentes ubicaciones
  3. Crear un metabox ficticio para mostrar el texto de ayuda en la parte superior de la pantalla de edición

Para hacer esto voy a crear un plugin, si ya has creado un plugin después de seguir las Partes 1 a 3 de esta serie es posible que prefieras añadir el código de este tutorial a dicho plugin, lo que te proporcionará un plugin con todas tus personalizaciones para el administrador.


Lo que necesitarás para completar este tutorial

Para completar este tutorial necesitarás lo siguiente:

  • Una instalación de WordPress
  • Acceso a la carpeta de plugins de tu sitio para añadir tu plugin
  • Un editor de texto para crear tu plugin

Configuración del plugin

Al principio de mi plugin, estoy añadiendo las siguientes líneas:


1. Añadir un Metabox de Ayuda a la pantalla de edición de las entradas

Para añadir un metabox que contenga texto de ayuda, utiliza la función add_meta_box(), que también usarías si estuvieras creando un metabox para los metadatos de la entrada o en una pantalla de ajustes. Esta función toma algunos parámetros:

Los parámetros son:

  • $id - el identificador único del metabox.
  • $title - el título del metabox que se mostrará a los usuarios.
  • $callback - la función de devolución de llamada que define el contenido del metabox.
  • $post_type - el tipo de entrada en cuya pantalla de edición aparecerá el metabox. Deja este espacio en blanco para añadir los metaboxes a las pantallas de edición de todos los tipos de entradas o especifica el tipo de entrada al que deseas dirigirte.
  • $context - el lugar de la pantalla de edición en la que deseas que aparezca el metabox, 'normal', 'avanzado' o 'lateral'. El valor predeterminado es 'avanzado' que coloca el metabox en el área principal de la pantalla.
  • $priority - dentro del contexto que has definido, la prioridad para este metabox ('high''core''default' o 'low'). Esto es útil si vas a añadir varios metaboxes.
  • $callback_args - argumentos para pasar a la función de devolución de llamada (opcional)

Por lo tanto, para añadir un metabox al área principal de la pantalla de edición solo para las entradas, añado lo siguiente a mi plugin:

Esto añade un metabox vacío, que aún no funcionará porque no he añadido la función de devolución de llamada. Esto es lo siguiente:

Esto añade ahora un metabox a la pantalla de edición de mis entradas, como se muestra en la captura de pantalla:

customizing-the-wordpress-admin-part4-metabox-below-editorcustomizing-the-wordpress-admin-part4-metabox-below-editorcustomizing-the-wordpress-admin-part4-metabox-below-editor

Como puedes ver, he eliminado algunos de los otros metaboxes que normalmente se ven en la pantalla de edición de las entradas (como extracto y comentarios), pero mi nuevo metabox está debajo del panel de edición y por lo tanto no es muy visible. Es imposible utilizar la función add_meta_box() para añadir un metabox por encima del panel de edición principal sin recurrir a una solución jQuery que mueva el panel de edición principal hacia abajo, y que creo que sería exagerado para este problema. ¿Qué alternativas tengo?

  1. En primer lugar, puedo añadir un metabox por encima del metabox 'Publicar', así será más obvio para los usuarios.
  2. Alternativamente, puedo hacer trampa y usar el gancho de acción edit_form_after_title para añadir un metabox falso por encima del panel de edición.

Empezaré con la primera opción: añadir un metabox a la derecha encima del metabox 'Publicar'.


2. Añadir un metabox a la derecha de la pantalla de edición

Para añadir un metabox en la parte superior derecha de la pantalla utilizo la función add_meta_box() de la misma manera que antes, con algunos de los parámetros cambiados. También usaré una función de devolución de llamada diferente para rellenar el metabox con contenido diferente.

En tu plugin, añade lo siguiente:

Esto añade un pequeño metabox con instrucciones breves, si añado mucho más texto, desplazaría los metaboxes que hay bajo él demasiado lejos en la pantalla. Puedes ver el resultado en la captura de pantalla:

customizing-the-wordpress-admin-part4-help-text-on-rightcustomizing-the-wordpress-admin-part4-help-text-on-rightcustomizing-the-wordpress-admin-part4-help-text-on-right

Nota: He comentado la función para el metabox del área principal de la pantalla antes de añadir este nuevo metabox, por lo que no se puede ver en la captura de pantalla.


3. Añadir un metabox 'falso' por encima del panel de edición

De manera que añadir un pequeño metabox en la parte superior derecha de la pantalla es bastante simple, pero ¿qué pasa si quiero un metabox en la parte superior izquierda, por encima del panel de edición?

Para hacer esto, no se utiliza la función add_meta_box(), sino que se utiliza el gancho edit_form_after_title, que inserta el contenido después del título de la entrada y antes del panel de edición. Adjuntaré una función a ese gancho para definir el marcado que se añadirá a la pantalla, y usaré clases en mi marcado para replicar el aspecto del metabox.

En tu plugin, añade lo siguiente:

Esto añade algo de marcado a la pantalla de edición que se parece mucho a un metabox, porque incluí las clases .postbox e .inside:

customizing-the-wordpress-admin-part4-metabox-above-editorcustomizing-the-wordpress-admin-part4-metabox-above-editorcustomizing-the-wordpress-admin-part4-metabox-above-editor

Sin embargo, existe un problema con este marcado, aparecerá en la pantalla de edición para todos y cada uno de los tipos de entrada. Como no estoy usando la función add_meta_box(), no tengo el lujo del parámetro $post_type. Así que en lugar de usar esto, realizaré una comprobación de la página de edición en la que estamos antes de generar el marcado.

Como estoy en el backend de WordPress, no puedo usar las etiquetas condicionales estándar que usaría en un archivo de plantilla para comprobar mi ubicación, pero puedo usar la función get_current_screen() para identificar en qué pantalla de edición estoy.

La función get_current_screen() devuelve una matriz, que incluirá el tipo de entrada de la pantalla actual, entre otras cosas. Puedo usar esto para comprobar si el tipo de entrada que se está editando es 'post'.

Dentro de la función, encima del otro contenido, añade lo siguiente:

Ahora la función completa tendrá este aspecto:

Esto garantizará que el metabox 'falso' solo se mostrará en la pantalla de edición de las entradas, pero no en la pantalla de edición de otros tipos de entradas. A continuación, puedes repetir esta función para diferentes tipos de entradas (como 'page' y 'attachment', así como tus propios tipos de entradas personalizadas), para mostrar texto de ayuda distinto en ellos.


Resumen

Añadir texto de ayuda a pantallas de edición individuales puede ser muy útil para los usuarios que no quieran volver contínuamente al panel para obtener ayuda.

En este tutorial, has aprendido a crear metaboxes para añadir texto de ayuda en las pantallas de edición, así como a usar el enlace de edit_form_after_title para añadir texto de ayuda inmediatamente encima del panel de edición.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.