Crear un Escritorio Personalizado en WordPress usando Bricks Builder

WordPress es conocido por su flexibilidad y capacidad de personalización, permitiendo a los usuarios adaptar sus sitios web de acuerdo a sus necesidades específicas. Uno de los aspectos más destacados de WordPress es su panel de administración, comúnmente conocido como el «Escritorio». Sin embargo, ¿qué pasa si deseas reemplazar este escritorio estándar con uno personalizado? Este artículo te guiará a través de un código personalizado que te permite hacer exactamente eso.

Beneficios de Personalizar tu Escritorio en WordPress

Mejora la Experiencia del Usuario

Personalizar el escritorio de WordPress ofrece numerosos beneficios para el usuario final que utiliza el sitio web. Al adaptar el panel de administración a las necesidades específicas del cliente, se crea una experiencia más intuitiva y eficiente. Los usuarios pueden acceder rápidamente a las funciones que utilizan con mayor frecuencia, lo que facilita la gestión y actualización del sitio web.

Además, al eliminar elementos innecesarios y agregar accesos directos a las áreas más importantes del sitio, como las entradas, las páginas o la biblioteca de medios, se reduce la confusión y se agiliza el flujo de trabajo del usuario. Esto resulta en una experiencia más satisfactoria y productiva para el cliente final. La personalización del escritorio de WordPress no solo mejora la usabilidad del sitio, sino que también contribuye a la satisfacción y fidelidad del usuario final.

Código para Crear un Escritorio Personalizado

/* Escritorio personalizado */
// Definir una variable global para almacenar el ID de la página
global $pagin_escritorio_id;
$pagin_escritorio_id = 0; // ID de tu página que hará la función de Escritorio


// Reemplazar el panel de administración con tu página personalizada
function custom_admin_page() {
    global $menu, $submenu;

    // Encuentra la posición de la opción del panel de administración llamada "Escritorio"
    $dashboard_position = 0;
    foreach ($menu as $key => $item) {
        if ($item[2] == 'index.php') {
            $dashboard_position = $key;
            break;
        }
    }

    // Eliminar la opción del Dashboard
    unset($submenu['index.php'][0]);
    unset($menu[$dashboard_position]);

    // Añadir tu propia página en la misma posición que la opción del Dashboard original
    add_menu_page(
        'Escritorio',
        'Escritorio',
        'manage_options',
        'admin-page',
        'admin_page_content',
        'dashicons-dashboard', // Icono a usar, puedes cambiarlo
        $dashboard_position // Mismo índice que la opción original del Dashboard
    );
}
add_action('admin_menu', 'custom_admin_page');

// Contenido de tu propia página

function admin_page_content() {
	global $pagin_escritorio_id;
    // Obtener la página por su ID
    $custom_admin_page_id = $pagin_escritorio_id; //
    $custom_admin_page = get_post($custom_admin_page_id);

    // Verificar si la página existe y es una página
    if ($custom_admin_page && $custom_admin_page->post_type === 'page') {
        // Obtener el slug de la página
        $custom_admin_page_slug = $custom_admin_page->post_name;

        // Obtener la URL del dominio del sitio web
        $domain_url = home_url();

        // Si estás usando una página externa en un iframe
        echo '<iframe src="' . esc_url($domain_url) . '/' . $custom_admin_page_slug . '/" style="width: 100%; height: 1400px; border: none;"></iframe>';
    }
}

/* Ocultar la página del escritorio en el listado */
add_action('pre_get_posts', 'custom_exclude_page');

function custom_exclude_page($query) {
	global $pagin_escritorio_id;
    // Verificar si se encuentra en el backend y en la consulta de páginas
    if (is_admin() && $query->is_main_query() && $query->query['post_type'] === 'page') {
        // Verificar el correo electrónico del usuario actual
        $current_user = wp_get_current_user();
        $user_email = $current_user->user_email;

        // Si el usuario no es administrador o su correo no es el especificado, ocultar la página
        if (!current_user_can('administrator') || $user_email !== 'micorreo@midominio.com') {
            // Excluir la página por su ID
            $query->set('post__not_in', array($pagin_escritorio_id));
        }
    }
}

/* Redirigir a la página de escritorio cuando se inicia sesión */
add_action('admin_init', 'custom_redirect_dashboard');

function custom_redirect_dashboard() {
	global $pagin_escritorio_id;
    // Verificar si el usuario está en el área administrativa y no está en la página de edición de perfil
    if (is_admin() && !defined('DOING_AJAX') && !isset($_GET['page']) && !isset($_GET['action']) && !isset($_GET['user_id'])) {
        // Obtener la URL del dominio del sitio web
        $domain_url = home_url();

        // Verificar si la URL es la página de administración principal o index.php
        $admin_url = parse_url(admin_url(), PHP_URL_PATH);
        if ($_SERVER['REQUEST_URI'] === $admin_url || strpos($_SERVER['REQUEST_URI'], 'index.php') !== false) {
            // Redirigir a tu página de escritorio personalizada
            wp_redirect(admin_url('index.php?page=admin-page'));
            exit();
        }
    }
}

/* Poner la página en modo Privada para que no se pueda visualizar desde el Front-end */
$page_id = $pagin_escritorio_id;; // ID de la página que deseas hacer privada

// Obtener los datos de la página actual
$page = get_post($page_id);

if ($page) {
    // Actualizar la visibilidad de la página a "Privado"
    $updated_page = array(
        'ID' => $page_id,
        'post_status' => 'private' // Establecer la visibilidad como privada
    );

    // Actualizar la página
    wp_update_post($updated_page);
}

Entendiendo el Código

Este código está diseñado para ser insertado en el archivo functions.php de tu tema hijo de WordPress. A continuación, se explican las funciones clave que realiza:

1. Reemplazar el Panel de Administración

La función custom_admin_page() reemplaza el panel de administración predeterminado de WordPress con una página personalizada. Elimina la opción del panel de administración «Escritorio» y agrega una nueva página personalizada en su lugar.

2. Contenido de la Página Personalizada

La función admin_page_content() muestra el contenido de la página personalizada dentro del panel de administración. Utiliza un iframe para mostrar el contenido de la página con el ID especificado.

3. Ocultar la Página del Escritorio en el Listado

La función custom_exclude_page() oculta la página personalizada del listado de páginas en el backend de WordPress para todos los usuarios excepto los administradores específicos.

4. Redirigir a la Página de Escritorio al Iniciar Sesión

La función custom_redirect_dashboard() redirige a los usuarios al panel de administración personalizado al iniciar sesión en WordPress en lugar del panel de administración estándar.

5. Poner la Página en Modo Privado

Finalmente, el código pone la página personalizada en modo privado para que no sea visible desde el frontend del sitio web.

6. Modificar el ID de la Página del Escritorio Personalizado

Para personalizar el código y adaptarlo a tu sitio web, solo necesitas modificar el ID de la página que actuará como el escritorio personalizado. Este ID se establece únicamente en la línea 4 del código.

$pagin_escritorio_id = 0; // ID de tu página que hará la función de Escritorio del código proporcionado. 

Simplemente cambia el número 0 por el ID de la página que deseas utilizar como escritorio personalizado en tu sitio de WordPress.

Si no sabes cuál es el ID de la página que quieres mostrar como escritorio personalizado, al final del artículo te muestro cómo saberlo.

7. Especificar el Correo Electrónico del Administrador

Para definir qué administrador podrá visualizar la página del escritorio personalizado, necesitas especificar su correo electrónico en el código. Esto se realiza dentro de la función custom_exclude_page(). Reemplaza 'micorreo@midominio.com' con el correo electrónico del administrador que deseas otorgar acceso exclusivo al escritorio personalizado.

Enlaces y Botones Personalizados para Nuestro Escritorio en Bricks Builder

Al diseñar la página de nuestro escritorio personalizado en Bricks Builder, es importante tener en cuenta la manera en que enlazamos ciertas partes de WordPress, como las entradas, las páginas o la biblioteca de medios. Para garantizar que estos enlaces sean reutilizables y funcionen correctamente en diferentes dominios web, es fundamental seguir una estructura parametrizada.

Parametrización de Enlaces en Bricks Builder

Para agregar un enlace que nos lleve a todas las entradas en nuestro escritorio personalizado, debemos utilizar el siguiente modelo de URL e incluir el atributo target=»_top» dentro del href del enlace.

<a href="../wp-admin/edit.php" target="_top">Ver Entradas</a>

Esto asegurará que el enlace se abra en la misma ventana del navegador.

Ejemplo de Botón para Acceder a las Entradas

Si deseamos incluir un botón que nos dirija a todas las entradas, para la configuración del enlace utilizaremos el valor https://www.solucionindividual.com/wp-admin/edit.php en el campo «Tipo de Enlace dinámico». Además, crearemos un estilo atributo con el nombre ‘target’ y el valor ‘_top’. Este botón proporcionará un acceso rápido y fácil a las entradas de nuestro sitio web.

Vídeo donde se explica el proceso.

En resumen, al diseñar nuestro escritorio personalizado en Bricks Builder, es esencial comprender cómo parametrizar los enlaces y botones para garantizar su funcionalidad y reutilización en diferentes dominios web. Siguiendo estas pautas, podemos crear un escritorio eficiente y fácil de usar que mejore nuestra experiencia de administración en WordPress.

Cómo Identificar el ID de una Página en WordPress

En WordPress, cada página, entrada, categoría o cualquier otro elemento tiene un ID único asignado por el sistema. Este ID se utiliza internamente en la base de datos de WordPress para identificar de manera única cada elemento. Para conocer el ID de una página en WordPress, puedes seguir estos pasos:

1. Navegar a la Página Deseada: Dirígete a la página cuyo ID deseas conocer. Puedes hacerlo navegando a «Páginas» en el menú lateral y luego haciendo clic en la página específica de la lista de páginas.
2. Editar la Página: Una vez en la página deseada, haz clic en el enlace «Editar» que se encuentra cerca del título de la página. Esto te llevará al editor de la página.
3. Observar la Barra de Direcciones (URL): Una vez en el editor de la página, observa la barra de direcciones (URL) en la parte superior de tu navegador web. Verás algo similar a https://tusitio.com/wp-admin/post.php?post=123&action=edit.
4. Identificar el ID en la URL: En la URL, el número después de post= es el ID de la página. En el ejemplo anterior, 123 sería el ID de la página que estás editando.

Al seguir estos pasos, podrás identificar fácilmente el ID de cualquier página en tu sitio de WordPress. Esto es útil para personalizar funcionalidades o realizar ajustes específicos utilizando código personalizado, como se muestra en el artículo.