Avisos de WordPress Admin Persistente: Parte 4

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

Hasta ahora en esta serie, hemos cubierto dos caminos separados para despedir persistentes avisos de admin de WordPress. Construiremos en en esta cuarta y última parte de la serie tutorial mirando dos métodos más específicos para despedir permanentemente sus avisos del admin. Nos a redondear cosas mostrando cómo crear tu propio custom admin tipos de aviso y agregar decoraciones tales como los iconos.

Aviso de Admin Pegajoso

Ya sabemos cómo mostrar un aviso de la administración que puede ser despedido. Todo lo que tenemos que hacer es agregar la clase CSS is-dismissible para el elemento div. Sin embargo, esto sólo es temporal y sólo despedirán el aviso de la página actual. Tan pronto como vuelve a cargar la página, vuelve a aparecer otra vez.

Para que sea permanentemente descartable implica más código que hemos visto hasta ahora, pero no es demasiado difícil de implementar. Echemos un vistazo a lo que está implicado, a partir de un resumen.

Usaremos una opción personalizada para almacenar el estado de visualización de nuestro aviso de admin. Activación del plugin, esta opción será creado y actualizado y establezca en true. El admin aviso sólo mostrará si la opción es cierto actualmente.

La clave de este método está utilizando Ajax nos permite marcar la opción false cuando se hace clic en el botón Descartar. Una vez con éxito false, el código condicional que verifica el estado de la opción se producirá un error, y ya no se mostrará el aviso del admin.

Vamos a empezar por añadir el aviso del admin, que será un simple aviso para comenzar. En Gwyer_Dismissible_Admin_Notices::init(), agregue una nueva llamada add_action:

1	add_action( 'admin_notices', array( $this, 'dismiss_admin_notice' ) );

Luego añadir la función de devolución de llamada de dismiss_admin_notice() a la misma clase:

public function dismiss_admin_notice() {
    $whitelist_admin_pages = array( 'settings_page_admin-notices/plugin-options' );
    $admin_page = get_current_screen();
    if( in_array( $admin_page->base, $whitelist_admin_pages ) ) :
    ?>
    <div id="an1" class="updated notice is-dismissible">
        <p>Dismiss me, if you can. Ha ha ha!</p>
    </div>
    <?php
    endif;
}

Esto agrega un aviso del admin que muestra sólo en la página de admin plugin y es muy similar a lo que hemos visto en tutoriales anteriores. La diferencia sólo leve es que también hemos agregado un ID de CSS para el admin aviso div contenedor. Esto se utilizará para apuntar específicamente el aviso del admin que nos interesa.

Standard admin notice with custom CSS ID

Así que tendremos que añadir código JavaScript para hacer la llamada Ajax funciona, agregar una carpeta js en la carpeta de plugin admin-notices de raíz y dentro creamos un archivo llamado admin-notices.js. Agregar código para el nuevo archivo de prueba está cargando adecuadamente por hacer salir un mensaje de consola.

1	jQuery(document).ready(function($) {
2	console.log( 'admin-notices.js loaded!' );
3	});

En Gwyer_Plugin_Options::init(), agregue una nueva llamada add_action para poner nuestro archivo de secuencia de comandos:

1	add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );

Sólo queremos que este archivo de JavaScript para ser cargado en la página de opciones del plugin, así que necesitamos una forma condicional enqueue se. Podemos hacer esto mediante la consulta qué página de admin estamos actualmente encendidos para ver si es nuestra página de opciones del plugin.

Podemos conseguir un mango a nuestra página de opciones del plugin almacenando el valor devuelto de add_options_page() en una propiedad de clase. Nos no tenía necesidad de este valor, así que llamamos a add_options_page() sin almacenar el valor devuelto.

Añadir una propiedad de clase a Gwyer_Plugin_Options:

1	protected $plugin_options_page;

A continuación, en create_admin_menu_page(), utilizar esta nueva propiedad para almacenar el mango a nuestra página de opciones del plugin:

public function create_admin_menu_page() {
    $this->plugin_options_page = add_options_page(
      'Admin Notices',
      'Admin Notices',
      'manage_options',
      __FILE__,
      array( $this, 'render_options_page' )
    );
}

Podemos finalmente poner nuestro archivo JavaScript para que cargue en la página de opciones del plugin:

public function enqueue_scripts($hook) {
  if( $hook != $this->plugin_options_page ) {
    return;
  }
  wp_enqueue_script(
    'gwyer-admin-notice-js',
    plugin_dir_url( __FILE__ ) . 'js/admin-notices.js'
  );
}

Si todo ha ido bien, a ver un admin-notices.js cargado! mensaje genera en la consola del explorador.

Actualizar el código JavaScript en admin-notices.php a lo siguiente:

jQuery(document).ready(function($) {
    $(document).on('click', '#an1 .notice-dismiss', function( event ) {
        data = {
            action : 'display_dismissible_admin_notice',
        };

    $.post(ajaxurl, data, function (response) {
            console.log(response, 'DONE!');
        });
    });
});

Aquí, lo que escuchamos para un evento de clic en el ID de CSS an1 hemos añadido a nuestro aviso de la administración anterior. Tan pronto como se hace clic, se desencadena una petición Ajax. Vamos a manejar esa solicitud a continuación.

En Gwyer_Dismissible_Admin_Notices::init(), agregue una nueva llamada add_action:

1	add_action( 'wp_ajax_display_dismissible_admin_notice', array( &$this, 'display_dismissible_admin_notice' ) );

Esto ejecutará la función de devolución de llamada una vez que el display_dismissible_admin_notice Ajax solicitar incendios. Recuerde que esto fue definido originalmente como la propiedad data.action en nuestra petición de Ajax.

Ahora añadir la función de devolución de llamada de display_dismissible_admin_notice a Gwyer_Dismissible_Admin_Notices:

1	public function display_dismissible_admin_notice() {
2	echo "Processing Ajax request...";
3	wp_die();
4	}

Guardar los cambios, volver a cargar la página de opciones del plugin y haga clic en el administrador aviso despedir botón para ver la petición de Ajax en acción!

Si la solicitud fue exitosa a ver una Petición Ajax de Procesamiento... ¡HECHO! mensaje en la consola del explorador.

La pieza final del rompecabezas es crear una opción personalizada inicialmente establecida en true, pero que luego se establece en false cuando se hace clic en el botón Descartar. Entonces, cuando se carga la página de opciones del plugin, el aviso del admin sólo se muestra si es true el valor de la opción personalizada.

En Gwyer_Dismissible_Admin_Notices::init(), agregue una segunda llamada a register_activation_hook():

1	register_activation_hook( plugin_dir_path( __FILE__ ) . 'admin-notices.php', array( $this, 'create_custom_option' ) );

Y agregue la función de devolución de llamada de create_custom_option a la clase:

1	public function create_custom_option() {
2	update_option( 'gwyer-dismiss', true );
3	}

Ahora, cuando está activado el plugin, una opción personalizada llamada gwyer-dismiss se crea y se establece en true.

Actualización de display_dismissible_admin_notice() para actualizar nuestra opción personalizado cuando el Ajax solicitar fuegos:

1	public function display_dismissible_admin_notice() {
2	update_option( 'gwyer-dismiss', false );
3	wp_die();
4	}

Ahora lo único que queda por hacer es actualización dismiss_admin_notice() para comprobar el valor de la opción personalizada y sólo hacer el admin aviso si se establece en true.

public function dismiss_admin_notice() {
    $whitelist_admin_pages = array( 'settings_page_admin-notices/plugin-options' );
    $admin_page = get_current_screen();
    $display_status = get_option( 'gwyer-dismiss' );
    if( in_array( $admin_page->base, $whitelist_admin_pages ) && $display_status  ) :
        ?>
        <div id="an1" class="updated notice is-dismissible">
            <p>Dismiss me, if you can. Ha ha ha!</p>
        </div>
        <?php
    endif;
}

Desactivar y activar el plugin para probar el código que hemos añadido. Visitar la página de opciones del plugin, descartar el aviso del admin y actualice la página. El aviso no debe ser visible. ¡Yay!

Porque la opción personalizada se establece en true cada vez que el plugin está activado, puede repetir los pasos anteriores para probar el administrador del lugar notan tantas veces como quieras.

Para mantener las cosas simples, esto es un ejemplo de escueto de utilizando una petición Ajax para establecer la opción de aviso de administración personalizado. En la práctica, va a utilizar un valor nonce (número usado una vez) valor para validar la solicitud Ajax como una medida de seguridad mínima.

Esto fue mucho trabajo para despedir a permanentemente un aviso del admin, pero el efecto final funciona bien y es algo que puede utilizar con buenos resultados en tus propios plugins.

Acción Personalizada Admin Aviso Despido

Es hora de mirar un método ligeramente diferente para despedir a avisos del admin ahora. Este es un tipo de queja de admin aviso que muestra en todas las pantallas de administración y no puede ser despedido hasta que se ha realizado alguna acción.

Nota: Utilice este método con precaución o a riesgo de alienar a sus usuarios plugin muy rápidamente!

La acción concreta que nos centraremos en nuestro ejemplo será mostrar un aviso de administración hasta un plugin requerido o una lista de plugins han sido instalados y activados.

A diferencia del método anterior donde tuvimos que saltar a través de aros para un aviso del admin que permanentemente descartable, la solución para este método es refrescantemente simple!

En primer lugar, comentar la función llama a en Gwyer_Dismissible_Admin_Notices::init(). A continuación, agregue una nueva función de add_action():

1	add_action( 'admin_notices', array( $this, 'install_plugin_to_dismiss_admin_notice' ) );

Y definir la devolución de llamada como sigue:

public function install_plugin_to_dismiss_admin_notice() {
    if ( ! is_plugin_active( 'hello-dolly/hello.php' ) ) :
    ?>
    <div class="notice notice-error">
        <p>Please install and activate the <strong>Hello Dolly</strong> plugin.</p>
    </div>
    <?php
    endif;
}

Eso es todo allí está a él! ¿Le dije que era simple, no?

Lo único que hicimos diferente esta vez era utilizar la is_plugin_active() función de WordPress para probar si el Hello Dolly plugin instalado y activado. Si no, is_plugin_active() devolverá false, y se mostrará nuestro aviso del admin.

Trate de activar el plugin de Hello Dolly para verificar que el admin aviso desaparece.

Esto funciona bien para solo plugins, pero ¿qué pasa si desea recordar a los usuarios para activar múltiples plugins? En lugar de código en la información del plugin de Hello Dolly, podríamos crear una matriz a la lista blanca los plugins necesarios.

Reemplace install_plugin_to_dismiss_admin_notice() con:

public function install_plugin_to_dismiss_admin_notice() {
    $required_plugins = array(
        'Hello Dolly' => 'hello-dolly/hello.php',
        'Akismet' => 'akismet/akismet.php'
    );
    $requires_activating = array();
    foreach( $required_plugins as $required_plugin_name => $required_plugin_path  ) {
        if( ! is_plugin_active( $required_plugin_path ) ) {
            array_push( $requires_activating, $required_plugin_name );
        }
    }
    if ( ! empty( $requires_activating ) ) :
    ?>
    <div class="notice notice-error">
        <p>Please install and activate the following plugins: <strong><?php echo join( ", ", $requires_activating );?></strong>.</p>
    </div>
    <?php
    endif;
}

Los plugins necesarios se almacenan en una matriz que se coloca encima para comprobar si se ha activado cada plugin. Para cualquier plugin no activo, el nombre se agrega a una matriz de $requires_activating que se genera a través de la notificación de la administración como una lista separada por comas de nombres de plugin requerido.

Avisos de Administración Personalizado

Antes de terminar, vamos a divertirnos un poco por crear nuestra propia administración personalizada tipo de aviso. Vamos a ver cómo añadir algunos tipos de aviso personalizado admin de nuestro propio. Ahora usted estará familiarizado con los cuatro avisos de admin Built-in que WordPress proporciona por defecto, pero no es difícil llegar a algunos de los nuestros.

En primer lugar, comente, todas las llamadas de función en Gwyer_Dismissible_Admin_Notices::init() por lo que partimos de una pizarra limpia.

Necesitaremos añadir CSS para nuestros tipos de aviso personalizado admin, pues en la carpeta de plugin de raíz agregar una carpeta de css y dentro creamos un archivo llamado admin-notices.css. A poner en todas las páginas de admin, añadir una nueva llamada add_action en Gwyer_Plugin_Options::init().

1	add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_styles' ) );

Entonces, para la devolución de llamada de enqueue_styles(), añadir este método a la misma clase:

public function enqueue_styles() {
  wp_enqueue_style(
    'gwyer-admin-notice-css',
    plugin_dir_url( __FILE__ ) . 'css/admin-notices.css'
  );
}

Ahora vamos a configurar un nuevo método para generar nuestros avisos de administración personalizado. En Gwyer_Admin_Notices::init(), agregue:

1	add_action( 'admin_notices', array( $this, 'custom_admin_notices' ) );

Luego agregue una devolución de llamada para mostrar una serie de avisos de administración personalizado:

  /**
* Output custom admin notices.
*/
public function custom_admin_notices() {
?>
  <div class="notice notice-big-error"><p>Houston, I definitely think we have a problem!</p></div>
  <div class="notice notice-admin-user-award"><p>Congratulations, you've won the Admin user of the year award!</p></div>
  <div class="notice notice-light-bulb"><p>Now this is a great idea.</p></div>
  <div class="notice notice-social-media"><p>Let's connect!</p></div>
  <div class="notice notice-neo"><p>Join Neo and follow the white rabbit. If you see him give him this carrot. The rabbit that is, not Neo!</p></div>
<?php
}

Por último, añadir CSS a admin-notices.css estilo de nuestros avisos de administración personalizado:

.notice-big-error {
    border: 3px solid red;
    -webkit-transform: rotateZ(-1deg);
    -ms-transform: rotateZ(-1deg);
    transform: rotateZ(-1deg);
}

.notice-admin-user-award {
    border-left: 5px solid purple;
}

.notice-admin-user-award p:before {
    font: normal 24px/1 'dashicons';
    content: "\f313";
    color: purple;
}

.notice-light-bulb {
    border-right: 5px solid #e2e224;
}

.notice-light-bulb p:before {
    font: normal 22px/1 'dashicons';
    content: "\f339";
    color: #e6e610;
}

.notice-social-media {
    border-left: 5px solid #1da25f;
    padding-bottom: 5px;
}

.notice-social-media p {
    padding-bottom: 0;
    margin-bottom: 4px;
}

.notice-social-media:after {
    font: normal 22px/1 'dashicons';
    content: "\f301 \f304 \f462";
    color: #888;
}

.notice-neo {
    border-right: 10px solid orangered;
    border-left: 10px solid orangered;
}

.notice-neo p:before {
    font: normal 22px/1 'dashicons';
    content: "\f511";
    color: orangered;
}

Después de guardar los cambios, carga cualquier página de admin para ver nuestros avisos de administración personalizado.

A juzgar por los resultados, es probablemente una buena idea utilizar avisos de administración personalizado con moderación, si no te corres el riesgo de ellos buscando chillones.

No entraré en detalles sobre el CSS personalizado utilizado. Es sólo para divertirse un poco, y la mayor parte del estilo es bastante explica por sí mismo.

Utilizamos los iconos de fuente de dashicons para nuestros avisos de administración personalizada para comodidad como estén disponibles en el administrador de WordPress por defecto. Pero podría importar y utilizar cualquier iconos que te gusta para la decoración adicional.

Probar el Código Por Sí Mismo

Todo el código de esta serie de tutoriales ha sido envuelto en un plugin de WordPress para descargar. Echa un vistazo al código, extenderlo e implementar nuevas maneras de mostrar (y despedir) avisos de admin. ¡Asegúrese de que me avisen en los comentarios si crear algo fresco! Me encantaría ver lo que te ocurrió.

Conclusión

Gracias por acompañarme en esta serie de cuatro tutoriales. Esperemos que ahora vas a tener mucha más confianza en cómo implementar administración de avisos en sus propios proyectos.

Hemos cubierto muchos aspectos diferentes de WordPress admin notificaciones, incluyendo las múltiples formas de despedirlos permanentemente, que no es posible sin código personalizado.

Crear sus propios avisos de admin personalizado es muy fácil también, pero en la práctica que se desea usarlos con moderación en sus propios proyectos. Mayoría de las veces es mejor mantener los estilos de WordPress por defecto para una experiencia de usuario coherente.

WordPress tiene una economía muy activa. Hay temas, plugins, librerías y muchos otros productos que le ayudan a construcción su sitio web y proyecto. La naturaleza de código abierto de la plataforma también resulta una gran opción de que puede mejorar sus habilidades de programación. En cualquier caso, usted puede ver lo que tenemos disponible en Envato Market.

Y no olvide descargar el plugin y jugar con el código. Es una gran manera de familiarizarse más con la forma de todas las piezas encajan. Y por favor quiero saber sus pensamientos en el tutorial a través de los comentarios más abajo.