En esta guía, te mostraremos cómo crear un dashboard personalizado para tus autores de WordPress usando Elementor.
Este escritorio personalizado es la mejor solución para permitir que tus autores de WordPress entreguen entradas fácilmente desde el front-end en WordPress, sin tener que usar el dashboard norma de wp-admin.
Importante
Aunque en este tutorial crearemos un dashboard para autores, puedes usar los mismos pasos para crear:
- Una aplicación web basada en cualquier plugin de WordPress
- Un dashboard personalizado para vendedores de WooCommerce, Easy Digital Downloads, WordPress Download Manager, etc.
- Personalizar el escritorio de WordPress para tus clientes
- Etc.
WP Frontend Admin es todo un mundo de posibilidades para desarrolladores.
¿Qué es un dashboard personalizado para autores en WordPress?
Un escritorio frontend para autores es una interfaz de usuario personalizada que tus autores o escritores usarán para agregar y administrar artículos, publicaciones del blog, ensayos y otros tipos de publicaciones en tu sitio de WordPress.
En lugar de usar el panel normal de wp-admin, usarán un hermoso frontend dashboard como este:
Un dashboard personalizado para los autores puede ser útil si estás trabajando en cualquiera de estos proyectos:
- Un blog de WordPress con múltiples autores
- Un sitio web de noticias donde varios periodistas o usuarios pueden agregar publicaciones
- Un sitio como Medium, donde todos los usuarios obtienen una cuenta y pueden publicar contenido
- Una revista online con cientos de escritores
Además, esta guía es para ti si eres un desarrollador que está desarrollando blogs para escritores independientes que desean publicar contenido sin tener que saber cómo usar WordPress.
El principal interés de los escritores y bloggers es no saber cómo usar WordPress. Todo lo que necesitan es enviar y publicar su contenido a tu sitio.
Es por eso que crear un dashboard personalizado para los autores puede ser la mejor opción. Y para eso hemos creado esta guía completa. 🙂
Páginas para el frontend dashboard personalizado de autores
Crearemos un hermoso dashboard frontend para autores que incluye las siguientes páginas:
1- La página “Escribir entradas”
Mostraremos la página de entradas de WordPress en el frontend. Los usuarios podrán ver solo sus propias entradas, editar publicaciones existentes y agregar nuevas publicaciones.
Esto es lo que se verá en el formulario Añadir una nueva entrada en el escritorio personalizado.
Los usuarios podrán escribir sus entradas, seleccionar categorías, subir imágenes destacadas, obtener una vista previa y publicar las entradas o guardarlas como borradores.
2- La página de “Categorías”
Esta página permitirá a los autores administrar las categorías de WordPress en el frontend. Podrán crear nuevas categorías, editar categorías existentes y eliminar categorías.
Nota. Aunque WordPress no permite a los usuarios con el rol de “autor” administrar categorías, te mostraremos cómo otorgar el permiso “manage_categories” al rol de usuario “autor” en el Paso 8 de esta guía.
3- La página “Imágenes”
Nuestros usuarios podrán subir imágenes a la Biblioteca Multimedia desde el frontend. De esta manera, podrán gestionar las imágenes subidas a sus entradas.
4- La página “Perfil”
En esta página, nuestros autores podrán ver y modificar su perfil de usuario de WordPress desde el frontend. Cambiarán sus nombres, actualizarán correos electrónicos, cambiarán contraseñas, cargarán información personal, etc.
Pasos para crear el dashboard front-end personalizado para autores
Debes seguir estos pasos para crear el escritorio personalizado para autores de WordPress.
Paso 1. Instalar y activar los plugins necesarios
La siguiente lista de complementos de WordPress te permitirá crear un frontend dashboard personalizado para tus autores.
1- Elementor
La versión gratuita de Elementor te permitirá diseñar un escritorio personalizado limpio y hermoso.
Haz clic aquí para descargarlo.
Nota. Puedes usar cualquier otro constructor de páginas, pero nosotros en este ejemplo usaremos Elementor, ya que tenemos algunos diseños hermosos para escritorios personalizados, que puedes descargar y usar también.
2- Elementor Header & Footer Builder
Este plugin gratuito agrega algunos elementos como menús de navegación, título de la página, logotipo del sitio, etc., los cuales puedes usar en la versión gratuita de Elementor.
Haz clic aquí para descargarlo.
3- WP Frontend Admin
Con este plugin, puedes mostrar cualquier página de wp-admin en el frontend, utilizando cualquier constructor de páginas o tema de WordPress.
Puedes crear escritorios personalizados y aplicaciones web basadas en cualquier plugin de WordPress.
Tú puedes probar el plugin premium en tu sitio web gratis por 7 días.
4- WP Menu Icons
Este plugin nos permitirá añadir iconos al menú de navegación de nuestro dashboard frontend.
Haz clic aquí para descargarlo.
5- User Menus
Este plugin puede ser útil para añadir un enlace de “Iniciar sesión” a nuestro menú principal.
También será útil agregar un enlace llamado “Administrar entradas” o “Escritorio de autores” al menú principal de tu sitio, el cual será visible solo para los autores que hayan iniciado sesión en tu sitio web.
Además, lo usaremos para agregar un botón llamado “Cerrar sesión” al menú del frontend dashboard.
Haz clic aquí para descargarlo.
6- User Role Editor (Opcional)
Este plugin nos permitirá añadir el permiso “manage_categories” al rol de usuario “autor”, ya que los autores no tienen ese permiso de forma predeterminada.
Haz clic aquí para descargarlo.
Nota. Esto es opcional. Si decides no dejar que tus autores administren las categorías, no necesitas este plugin.
7- JetSticky for Elementor
Este plugin te permite crear secciones y columnas de Elementor fijas. Será útil, especialmente si utilizas una de nuestras plantillas de escritorio personalizado.
Haz clic aquí para descargarlo.
8- Plantillas de escritorio personalizado (Opcional)
Hemos preparado una galería de plantillas de escritorios frontend que puedes usar en Elementor.
Haz clic aquí para ver y descargar los diseños.
Nota. En esta guía, usaremos la “Plantilla 1” de la galería.
Paso 2. Importar o diseñar la plantilla de Elementor
Si lo prefieres, puedes diseñar la plantilla para tu escritorio personalizado desde cero.
Sin embargo, te recomendamos que utilices una de nuestras plantillas para ahorrar algo de tiempo.
Debes comenzar creando un nuevo menú de navegación para el dashboard.
- Ve a Apariencia > menús.
- Ingresa el nombre del menú de navegación y haz clic en Crear menú.
Ahora puedes importar la plantilla de Elementor que usarás para crear tu dashboard personalizado:
- Ve a Plantillas > Plantillas guardadas en tu panel de control de wp-admin.
- Haz clic en Importar plantillas.
- Haz clic en Elegir archivo (Choose File) y busca la plantilla en tu computadora.
- Haz clic en Importar ahora.
- Haz clic en Editar con Elementor
- Personaliza la plantilla como quieras:
- Sube tu propio logotipo
- Selecciona el menú de navegación que acabas de crear
- Selecciona tus propios colores
- Selecciona tus propias tipografías
- Etc.
Una vez que hayas terminado, haz clic en Actualizar para guardar los cambios en esta plantilla de Elementor.
Paso 3. Mostrar la página de entradas en el escritorio frontend
Ahora estamos listos para comenzar a crear el dashboard frontend para los autores de tu sitio web.
Comenzaremos mostrando la página entradas de WordPress en el frontend.
- Ve a Páginas > Añadir nueva en wp-admin.
- Ingresa el título de la página. En este caso, la llamaremos “Escribir entradas”.
- Haz clic en Editar con Elementor.
Una vez en Elementor, debes importar la plantilla a esta nueva página.
- Ve a Configuración de página y selecciona Elementor Canvas en Estructura de página.
- Haz clic en Agregar plantilla.
Ahora debes ir a Mis plantillas, encontrar la plantilla que importarás en esta nueva página, y hacer clic en Insertar.
Después de importar la plantilla, debes agregar el siguiente código abreviado en la sección de contenido de la página.
[vg_display_admin_page page_url="edit.php"]
Este shortcode te permitirá mostrar la página de entradas de WordPress en el frontend, donde tus autores podrán escribir y editar publicaciones de WordPress.
Ahora haz clic en Vista previa.
Después de mostrar la página de entradas en el frontend, debes usar el panel de Configuración rápida del plugin WP Frontend Admin para configurar tu página.
Debes comenzar seleccionando la siguiente información:
- Título: Llamaremos a esta página “Escribir entradas”
- URL Slug: Ingresaremos “escribir-entradas”
- Plantilla: Selecciona Elementor Canvas
- Menú: Aquí debes seleccionar el menú de navegación que creaste anteriormente.
Puedes personalizar el escritorio frontend para autores, ocultando cualquier elemento innecesario de esta página. Por ejemplo, eliminaremos el título de la página original porque hemos agregado un título de página encima del contenido.
Simplemente haz clic en Ocultar elemento y luego haz clic en el elemento que deseas ocultar. Puedes ocultar cualquier otro elemento que no desees incluir en esta página.
Además de ocultar elementos innecesarios, puedes personalizar los textos en la página. Por ejemplo, queremos cambiar el nombre del botón Añadir nueva con Escribir nueva entrada.
Para esto, debemos hacer clic en Editar textos.
Ahora cambiemos el texto del botón.
Finalmente, hagamos clic en Edición terminada.
Este botón es útil para cambiar cualquier otro texto de la página.
Puedes marcar la casilla de verificación Ocultar notificaciones añadidas por otros plugins o temas.
También puedes deshabilitar u ocultar columnas específicas de la página de entradas.
Por ejemplo, ocultaremos estas columnas:
- Autor
- Etiquetas
- Comentarios
Dado que queremos que nuestros usuarios vean y administren solo sus propias entradas, debemos marcar la casilla de verificación Los usuarios deberían ver solo los posts creados por ellos.
Finalmente, hagamos clic en Guardar para aplicar los cambios en esta página.
Después de aplicar estos cambios, puedes continuar creando el escritorio frontend para autores, editando el formulario Añadir nueva entrada.
Haz clic en el botón Añadir nueva (ahora llamado “Escribir nueva entrada”).
Una vez allí, puedes comenzar a ocultar elementos innecesarios y editar textos.
Aquí hay una lista de elementos que debes ocultar:
- El botón “Editar con Elementor”
- El cambiador “Visual/HTML”
- Opciones de visibilidad
- Botón Publicar si deseas que los usuarios solo envíen entradas para revisión. Esto es opcional.
- Sección de etiquetas
- Atributos de publicación
- Campos personalizados
- Cualquier otro botón, campo o metabox innecesario
Recuerda que tú decides qué elementos conservar y qué elementos eliminar de la página.
Una vez que hayas terminado de editar el formulario Añadir nueva entrada, puedes hacer clic en Guardar para aplicar los cambios.
Finalmente, puedes volver a Elementor y Publicar la página.
Paso 4. Crear las otras páginas del dashboard personalizado
Siguiendo los mismos pasos del Paso 3, debes agregar las páginas que faltan dashboard frontend para autores.
Estos son los códigos cortos que debes usar en cada página:
Categorías:
[vg_display_admin_page page_url="edit-tags.php?taxonomy=category"]
Biblioteca de Medios:
[vg_display_admin_page page_url="upload.php"]
Perfil:
[vg_display_admin_page page_url="profile.php"]
Nota. En cada página, debes decidir qué campos y metaboxes eliminarás y cuáles mantendrás. También debes decidir qué textos vas a editar.
Paso 5. Configurar el menú de navegación del frontend dashboard personalizado
Después de agregar las páginas necesarias al dashboard personalizado para autores y escritores, debes configurar el menú de navegación.
Aquí, agregaremos los iconos y los enlaces de “Ver el sitio” y “Cerrar sesión” al menú de navegación.
Primero, agregamos iconos al menú de navegación.
- Ve a Apariencia > Menús.
- Edita el menú que creaste para el dashboard frontend.
- Haz clic en el botón + en cada elemento del menú y selecciona el icono que desees.
- Haz clic en Guardar y edita otro elemento de menú.
En segundo lugar, agrega un enlace “Ver sitio” al menú de navegación del frontend dashboard.
Este enlace permitirá a nuestros autores visitar nuestro sitio, al igual que el enlace “Visitar sitio” en el panel de control de wp-admin. 🙂
- Agrega un Enlace personalizado al menú.
- En el campo URL, ingresa la URL de tu sitio, o puedes ingresar este shortcode automático:
[wp_frontend_admin_my_site_url]
- En el campo Texto del enlace, ingresa algo como “Ver el sitio” o “Visitar el sitio”
- También puedes agregar un icono a este nuevo elemento de menú.
En tercer lugar, agregaremos un enlace de “Cerrar sesión” al menú de navegación.
El plugin User Menus te permite agregar un botón Cerrar sesión a tu menú de navegación.
- Ve a la sección Enlaces de usuario.
- Marca la casilla de verificación Cerrar sesión.
- Haz clic en Añadir al menú.
- También puedes agregar un icono a este nuevo elemento del menú.
Finalmente, haz clic en Guardar menú para aplicar los cambios.
Paso 6. Crear una página de inicio de sesión personalizada para WordPress
Algo bueno de WP Frontend Admin es que te permite personalizar la página de inicio de sesión en WordPress.
Esto le dará un aspecto más profesional a tu escritorio frontend.
Diseñaremos esta página de inicio de sesión personalizada con Elementor, e incluirá los siguientes elementos:
- El logotipo de tu sitio
- El formulario de inicio de sesión
- Un enlace para volver a la página de inicio de tu sitio
Comencemos agregando una nueva página y haciendo clic en Editar con Elementor.
Una vez en Elementor:
- Selecciona Elementor canvas en Diseño de página
- Agrega una sección con un ancho de 500px, alineada verticalmente al medio, y con una altura ajustada a la pantalla.
A continuación, agrega un elemento de imagen, un elemento de shortcode y un elemento de editor de texto.
- En el elemento Imagen, sube el logotipo de tu sitio.
- En el elemento Shortcode, agrega el siguiente shortcode:
[wp_frontend_admin_login_form]
- En el elemento Editor de texto, agrega algo como “Ir a la página de inicio” e inserta un enlace a la página de inicio de tu sitio.
- Una vez que hayas terminado, publica la página.
Después de crear y publicar la página de inicio de sesión personalizada para tu sitio de WordPress, debemos seleccionarla como la página de inicio de sesión predeterminada en la configuración de WP Frontend Admin.
Ve a los ajustes de WP Frontend Admin > Iniciar sesión.
Ahora ingresa la URL de la página de inicio de sesión que acabas de crear en el campo URL de la página de inicio de sesión (opcional).
También puedes seleccionar “Página de inicio de sesión” en el campo de redirección de Cerrar sesión. De esta manera, tus usuarios siempre serán llevados a la página de inicio de sesión después de cerrar sesión.
Una vez que hayas terminado, haz clic en Guardar para aplicar los cambios.
Paso 7. Configurar el menú principal de tu sitio web
Vamos a configurar algunos ajustes importantes en el menú principal del sitio web.
Por ejemplo, agregaremos un enlace a la página de inicio de sesión y un enlace al escritorio para autores.
- Ve a Apariencia > Menús.
- Selecciona tu menú principal. No el menú del escritorio frontend.
- Agrega la página Escribir entradas al menú.
- Cambia el nombre de este nuevo elemento de menú a algo como “Escritorio de autores”. Ingresa el nuevo nombre en el campo Etiqueta de navegación.
- Selecciona Usuarios conectados en el campo Quién puede ver este enlace.
- Selecciona la opción Elige qué perfiles pueden ver este enlace.
- Marca el rol de usuario Author.
También te recomendamos:
- Agregar la página de Inicio de sesión al menú de navegación.
- Selecciona Usuarios desconectados en Quién puede ver este vínculo.
Finalmente, haz clic en Guardar Menú para aplicar los cambios.
Paso 8. Conceder el permiso “manage_categories” a los autores (Opcional)
Usando el plugin User Role Editor, habilitaremos el permiso “manage_categories” a los autores, para que puedan agregar, editar y eliminar categorías del blog.
Esto es opcional, por lo que puedes omitir este paso si no deseas hacerlo. Sin embargo, si no lo haces, tus usuarios no podrán administrar las categorías en el frontend, por lo que la página Categorías será inútil.
Ve a Usuarios > User role editor y selecciona los siguientes valores:
- Seleccionar Rol y cambiar sus capacidades: Autor
- Marca el permiso manage_categories.
- Haz clic en Actualizar para aplicar los cambios.
Paso 9. Bloquea el acceso a wp-admin para los autores
Configuremos algunos ajustes para bloquear el acceso a wp-admin para todos los autores.
Esto es realmente útil porque, si un autor intenta abrir cualquier página de wp-admin, será redirigido a la página del escritorio frontend.
Ve a WP Frontend Admin > Ajustes.
Una vez allí, selecciona los siguientes valores en la sección Restricciones de acceso:
- Marca la casilla de verificación Habilitar las restricciones de acceso wp-admin
- Pega las siguientes URLs en el campo Restricciones de Acceso: Qué páginas de wp-admin se pueden ver en el frontend:
edit.php edit.php?post_type=page upload.php profile.php edit-tags.php?taxonomy=category post-new.php?post_type=page post.php?action=edit post.php?action=trash post.php post.php?get-post-lock=1 term.php?taxonomy=category
Cuando cualquier autor intente abrir cualquier otra página wp-admin, será redirigido a la página del escritorio frontend.
- Restricción de acceso: ¿Quién puede acceder al panel de wp-admin: manage_options
- Restricción de acceso: URL del panel de frontend: Pega aquí la URL de la página “Escribir entradas”.
Desplázate hacia abajo y selecciona esta configuración:
- Estos roles de usuario usarán el panel frontend: author
Finalmente, haz clic en Guardar para aplicar los cambios.
Así es como puedes crear un panel personalizado para tus autores de WordPress usando Elementor y WP Frontend Admin.
Tú puedes probar el plugin premium en tu sitio web gratis por 7 días.
