Importante. Este tutorial se centra en la configuración de un sitio de dashboard global para WordPress Multisitio. Sin embargo, puedes configurar un hermoso dashboard en un sitio normal también.
Te enseñaremos cómo crear un dashboard frontend personalizado con OceanWP, configurando las plantillas del dashboard que ofrecemos con los planes Estándar y Plataforma.
Además de instalar WP Frontend Admin, necesitas:
- Descargar, instalar y activar el tema OceanWP en el sitio del dashboard.
- Descargar, instalar y activar el plugin Ocean Extra en el sitio del dashb0ard.
- Descargar, instalar y activar el plugin WP Menu Icons en el sitio del tablero.
- Descargar, instalar y activar el plugin Shortcode in Menus en el sitio del dashboard.
1- Cómo importar la plantilla del dashboard
Para importar las plantillas del dashboard de OceanWP, debes seguir estos sencillos pasos:
- Descarga el archivo de la plantilla y descomprímelo en tu computadora.
- Abre el sitio de tu dashboard en el frontend.
- Ve a Theme Panel > Importar/Exportar.
- Haz clic en Seleccionar archivo.
- Selecciona el archivo .dat desde tu computadora.
- Haz clic en Ajustes de la importación o Importar.
Una vez importados los ajustes, verás un mensaje que te dirá algo así como: “Ajustes importados con éxito”.
2- Cómo seleccionar el logo del dashboard
IMPORTANTE: Puedes configurar el dashboard como quieras, usando tus propios colores, logo, tipografía, etc. Tienes que hacerlo usando el personalizador del tema OceanWP.
Después de importar tu plantilla preferida, tienes que seleccionar el logo del dashboard. Solo tienes que seguir estos sencillos pasos:
- Ir a Apariencia > Personalizar.
- Una vez que se abra el personalizador, ve a Cabecera > Logotipo.
- Selecciona el logotipo desde tu computadora o desde tu biblioteca de medios.
- Haz clic en Publicar en el personalizador para aplicar los cambios.
3- Cómo crear el menú del dashboard
Después de seleccionar el logotipo, tienes que crear el menú del dashboard, donde añadirás las páginas más adelante.
- Ve a Apariencia > Menús
- Ingresa el nombre del menú.
- Haz clic en Crear menú.
El menú estará vacío en este momento porque más adelante añadiremos las páginas.
4- Cómo crear páginas del dashboard en el frontend
Después de seleccionar el logotipo y el menú, puedes proceder a crear las páginas del dashboard con WP Frontend Admin. Es realmente sencillo, y tienes al menos dos opciones para mostrar el contenido de wp-admin en el frontend:
De forma automática
Ve a la página de wp-admin que deseas mostrar en el frontend y haz clic en Ver en el frontend en la barra de herramientas superior.
De forma manual
Crea una nueva página e ingresa el siguiente shortcode como contenido de la página:
[vg_display_admin_page page_url="wp-admin URL"]
Solo tienes que sustituir “wp-admin URL” por la URL de la página que quieres mostrar en el frontend. Por ejemplo:
[vg_display_admin_page page_url="wp-admin/edit.php"]
Después de eso, haz clic en Vista previa para mostrar el contenido de wp-admin en el frontend.
Una vez que hagas clic en Vista Previa, verás el contenido de wp-admin mostrado en el frontend.
Sin embargo, es posible que no veas el panel de configuración rápida de WP Frontend Admin porque el menú del dashboard (cuando es menú lateral), cubrirá el panel.
Por lo tanto, usaremos una solución rápida; moveremos el menú lateral al lado derecho.
- Ve a Apariencia > Personalizar.
- Ahora ve a los ajustes de la Cabecera.
- Abre General de la cabecera.
- Ve a Posición y selecciona Derecha.
- Por último, haz clic en Publicar.
Ahora vuelve a la página en el frontend que estabas creando y recarga la página. Así es como se verá con el menú lateral en el lado derecho.
Ahora estás listo para seguir configurando tu página en el frontend. Puedes seleccionar la información general de la página usando los siguientes campos:
- Título de página: Ingresa aquí el título de la página. Se puede heredar si se muestra el contenido de wp-admin usando la forma manual.
- URL Slug: Ingresa una URL slug usando solo palabras clave.
- Plantilla: Por defecto
- Añadir a menú: Selecciona el menú que has creado en el paso 3 de este tutorial.
Ahora puedes ocultar cualquier elemento innecesario para simplificar la página y darle un aspecto limpio y elegante.
- Clic en Ocultar elemento.
- Haz clic en los elementos que quieras ocultar uno por uno.
- Opcional. Puedes revertir todos los cambios haciendo clic en Mostrar todos al lado derecho del botón Ocultar elemento.
Además, puedes Ocultar las notificaciones añadidas por otros plugins o temas para evitar futuros elementos automáticos innecesarios en las páginas de tu dashboard en el frontend.
Después, puedes editar los textos para personalizar aún más tu página.
- Clic en Editar textos.
- Cambia todos los textos que quieras.
- Haz clic en Edición terminada.
Si el contenido de wp-admin que estás mostrando en esta página en el frontend es una lista de publicaciones de cualquier tipo de entrada, puedes desactivar las columnas innecesarias marcando las columnas que quieras ocultar.
Además, puedes decidir si quieres que los usuarios vean solo sus posts, o si pueden ver los posts de otros usuarios del mismo sitio. Si eliges mostrar solo los posts del propio usuario, marca la casilla Los usuarios deberían ver solo los posts creados por ellos.
Una vez que hayas realizado estos cambios, puedes publicar la página haciendo clic en Guardar.
Ahora verás que la página se han añadido al menú del dashboard.
Importante:
- El botón Ocultar elemento te permite simplificar cualquier página. Por ejemplo, si estás mostrando la página de Entradas en el frontend, puedes abrir el formulario Añadir nueva entrada y eliminar todos los campos y metaboxes no esenciales.
- También puedes Editar textos en otras páginas. Por ejemplo, puedes editar textos en el formulario de Añadir nueva entrada.
- Debes repetir los mismos pasos para crear las otras páginas de wp-admin en el frontend.
- Después de crear todas las páginas del dashboard, es necesario revertir el cambio temporal aplicado al menú del dashboard. Ve al personalizador y cambia la posición del menú de la derecha a la izquierda.
5- Cómo añadir iconos al menú del dashboard
Una vez que hayas añadido todas las páginas del dashboard, puedes añadir bonitos iconos a los elementos del menú.
Primero, ve a Apariencia > Menús.
Ahora, selecciona un elemento del menú y abre los ajustes del menú.
Ahora tienes que seleccionar el icono del menú y haz clic en Guardar.
Importante:
- Hay algunas plantillas de dashboard que no requieren iconos de menú.
- Hay algunas plantillas de dashboard que necesitan tener las etiquetas de los elementos de menú ocultas. En este caso, puedes seleccionar el logotipo del elemento de menú y seleccionar Hide Label = Sí.
- También puedes editar el tamaño de los iconos del menú usando el campo Tamaño en los ajustes de los iconos del menú.
6- Cómo añadir los botones “Ver sitio” y “Cerrar sesión” al menú del dashboard
WP Frontend Admin te permite añadir fácilmente los botones Ver sitio y Cerrar sesión al menú de tu dashboard.
- Ve a Apariencia > Menús.
- Añadir un Enlace personalizado.
- Ingresa el shortcode en el campo URL.
- Ingresa la etiqueta del elemento en Texto del enlace.
- Clic en Añadir al menú.
- Haz clic lo mismo con el botón de ver sitio como con el de Cerrar sesión.
Aquí están los dos shortcodes que necesitas usar:
- Ver sitio: [wp_frontend_admin_my_site_url]
- Cerrar sesión: [vg_display_logout_url]
Este es el aspecto de nuestro dashboard una vez configurado:
