Créer un excellent thème ou plugin WordPress consiste autant à le rendre facile à utiliser qu’à la fonctionnalité et au code optimisé. Chaque fois que les utilisateurs activent un thème ou un plugin et ont du mal à trouver leur chemin vers et autour de ses paramètres, quelque part dans le monde, un chaton en souffre. Ce serait bien si nous mettions fin à cela, non?

Heureusement, tout ce que vous avez à faire pour rendre vos plugins et thèmes plus utilisables est de profiter de la fonctionnalité intégrée de WordPress. «Réinventer la roue» ne fait pas partie de la liste des compétences requises pour cela. Jetons un coup d’œil à quelques techniques qui aideront les utilisateurs à trouver leur chemin et à éliminer la frustration liée à l’utilisation de vos plugins et thèmes.

  1. Pointeurs d’administration
  2. Avis d’administration
  3. Aide contextuelle
  4. Liens de la barre d’administration
  5. Action du plugin et méta liens

Pointeurs d’administration

Introduits dans WordPress 3.3, les pointeurs d’administration WordPress sont le moyen le plus agressif d’attirer l’attention des utilisateurs, alors ne devenez pas fou. Encore, s’il y a quelque chose que vous devez absolument dire aux gens qui viennent d’installer / mettre à jour votre thème ou votre plugin, les pointeurs d’administration WordPress sont la voie à suivre.

Ils sont très faciles à utiliser mais mal documentés sur le site Web WordPress Codex. Voici un bref aperçu du fonctionnement des pointeurs, suivi d’un exemple qui ajoute un pointeur à côté du menu Paramètres.

  • Un thème ou un plugin peut enregistrer de nouveaux pointeurs, en attribuant un identifiant unique à chacun
  • Les pointeurs sont présentés aux utilisateurs jusqu’à ce qu’ils cliquent sur le lien “Ignorer”
  • Lorsque cela se produit, l’ID du pointeur est ajouté à l’utilisateur dismissed_wp_pointers la touche méta et le pointeur ne sont plus affichés

Et l’exemple, comme promis:

/**
 * Adds a simple WordPress pointer to Settings menu
 */
 
function thsp_enqueue_pointer_script_style( $hook_suffix ) {
    
    // Assume pointer shouldn't be shown
    $enqueue_pointer_script_style = false;

    // Get array list of dismissed pointers for current user and convert it to array
    $dismissed_pointers = explode( ',', get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) );

    // Check if our pointer is not among dismissed ones
    if( !in_array( 'thsp_settings_pointer', $dismissed_pointers ) ) {
        $enqueue_pointer_script_style = true;
        
        // Add footer scripts using callback function
        add_action( 'admin_print_footer_scripts', 'thsp_pointer_print_scripts' );
    }

    // Enqueue pointer CSS and JS files, if needed
    if( $enqueue_pointer_script_style ) {
        wp_enqueue_style( 'wp-pointer' );
        wp_enqueue_script( 'wp-pointer' );
    }
    
}
add_action( 'admin_enqueue_scripts', 'thsp_enqueue_pointer_script_style' );

function thsp_pointer_print_scripts() {

    $pointer_content  = "<h3>Stop looking for it, it is right here!</h3>";
    $pointer_content .= "<p>If you ever activated a plugin, then had no idea where its settings page is, raise your hand.</p>"; ?>
    
    <script type="text/javascript">
    //<![CDATA[
    jQuery(document).ready( function($) {
        $('#menu-settings').pointer({
            content:        '<?php echo $pointer_content; ?>',
            position:       {
                                edge:   'left', // arrow direction
                                align:  'center' // vertical alignment
                            },
            pointerWidth:   350,
            close:          function() {
                                $.post( ajaxurl, {
                                        pointer: 'thsp_settings_pointer', // pointer ID
                                        action: 'dismiss-wp-pointer'
                                });
                            }
        }).pointer('open');
    });
    //]]>
    </script>

<?php
} ?>

Ce qui entraînera quelque chose comme ceci:

Ce n’était que simple, si vous voulez en savoir plus sur les pointeurs d’administration WordPress, consultez cet article sur Intégration avec l’interface utilisateur de WordPress: pointeurs d’administration.

Avis de l’administrateur

Si les pointeurs administratifs étaient un type tenant une grande flèche devant un magasin, les avis administratifs seraient le même gars qui distribuait des dépliants à un endroit éloigné. Pas exactement vous entraîner, mais toujours attirer l’attention. Bien sûr, vous ne voulez pas afficher les avis tout le temps, vous devez donc les rendre supprimables ou les placer dans une fonction conditionnelle. Voici un exemple:

Avis d'administration WordPress

/**
 * Add admin notices
 */
function thsp_admin_notices() {
    global $current_user;
    $userid = $current_user->ID;
    global $pagenow;
    
    // This notice will only be shown in General Settings page
    if ( $pagenow == 'options-general.php' ) {
        echo '<div class="updated">
            <p>This is an "updated" notice.</p>
        </div>';
    }
    
    // Only show this notice if user hasn't already dismissed it
    // Take a good look at "Dismiss" link href attribute
    if ( !get_user_meta( $userid, 'ignore_sample_error_notice' ) ) {
        echo '<div class="error">
            <p>This is an "error" notice. <a href="?dismiss_me=yes">Dismiss</a>.</p>
        </div>';
    }
}
add_action( 'admin_notices', 'thsp_admin_notices' );

Le premier avis de cet exemple ne sera affiché que sur la page Paramètres généraux. Le deuxième n’est montré qu’aux utilisateurs qui ne l’ont pas ignoré. Comme vous pouvez le voir, il vérifie le champ méta utilisateur ignore_sample_error_notice de l’utilisateur actuel et ne s’affiche que si ce champ est vide. Alors, comment ajouter un méta-champ utilisateur lorsqu’ils cliquent sur “Ignorer”? Facile:

/**
 * Add user meta value when Dismiss link is clicked
 */

function thsp_dismiss_admin_notice() {
    global $current_user;
    $userid = $current_user->ID;
    
    // If "Dismiss" link has been clicked, user meta field is added
    if ( isset( $_GET['dismiss_me'] ) && 'yes' == $_GET['dismiss_me'] ) {
        add_user_meta( $userid, 'ignore_sample_error_notice', 'yes', true );
    }
}
add_action( 'admin_init', 'thsp_dismiss_admin_notice' );

Nous nous accrochons admin_init action et vérifier si dismiss_me Le paramètre GET a été défini. Étant donné que l’attribut href de notre lien “Ignorer” est ?dismiss_me=yes une fois qu’un utilisateur clique dessus, un champ méta utilisateur est ajouté et il est au revoir.

Aide contextuelle

Aide contextuelle WordPress

Imaginez un monde dans lequel toute la documentation dont vous avez besoin est à portée de main, exactement et uniquement lorsque vous en avez besoin. Maintenant, faisons en sorte que cela se produise.

L’aide contextuelle rend cela non seulement possible, mais aussi très facile. Enregistrons une page de paramètres pour notre plugin afin que nous puissions y ajouter une aide contextuelle.

/**
 * Add settings page, under Settings menu
 */
 
function thsp_add_settings_page() {

    global $thsp_settings_page;

    $thsp_settings_page = add_options_page(
        'Our Settings Page',
        'Our Settings Page',
        'manage_options',
        'thsp_settings_page',
        'thsp_show_settings_page'
    );

    // Check if WP version is 3.3 or higher, add contextual help
    global $wp_version;
    if ( version_compare( $wp_version, '3.3') >= 0 ) {
        add_action( 'load-' . $thsp_settings_page, 'thsp_add_help_tabs' );
    }

}
add_action( 'admin_menu', 'thsp_add_settings_page' );

Nous ne traiterons pas de la fonction de rappel de la page de paramètres – thsp_show_settings_page, car il ne relève pas de cet article de blog. Si vous avez besoin d’en savoir plus sur Pages de paramètres WordPress Tom McFarlin de Wptuts + vous a couvert. Quoi qu’il en soit, le morceau de code que nous voulons vraiment approfondir est le suivant:

// Check if WP version is 3.3 or higher, add contextual help
global $wp_version;
if ( version_compare( $wp_version, '3.3') >= 0 ) {
    add_action( 'load-' . $thsp_settings_page, 'thsp_add_help_tabs' );
}

WordPress 3.3 ou supérieur est requis, car nous utiliserons fonction add_help_tab pour ajouter des onglets d’aide contextuelle. Remarquez comment le hook utilisé dans add_action contient une variable – 'load-' . $thsp_settings_page? Cela garantit thsp_add_help_tabs La fonction n’est accrochée que dans la page des paramètres que nous venons de nous inscrire. Brillant.
Maintenant, voici la fonction qui ajoute des onglets d’aide:

/**
 * Callback function for contextual help, requires WP 3.3
 */
 
function thsp_add_help_tabs () {

    global $wp_version;
    if ( version_compare( $wp_version, '3.3') >= 0 ) {
    
        global $thsp_settings_page;

        $screen = get_current_screen();

        
        // Check if current screen is settings page we registered
        // Don't add help tab if it's not
        if ( $screen->id != $thsp_settings_page )
            return;

        // Add help tabs
        $screen->add_help_tab( array(
            'id'    => 'thsp_first_tab',
            'title' => __( 'First tab', 'thsp_contextual_help' ),
            'content'   => __( '
                <p>Yeah, you can even embed videos, nice!</p>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/RBA-lH2a6E8" frameborder="0" allowfullscreen></iframe>
                ', 'thsp_contextual_help'
            ),
        ) );

        $screen->add_help_tab( array(
            'id'    => 'thsp_second_tab',
            'title' => __( 'Second tab', 'thsp_contextual_help' ),
            'content'   => __( '
                <p>I'm just a second tab that no one will ever click.</p>
                ', 'thsp_contextual_help'
            ),
        ) );

        // Set help sidebar
        $screen->set_help_sidebar(
            '
            <ul>
                <li><a href="http://thematosoup.com">' . __( 'Our website', 'ts-fab' ) . '</a></li>
                <li><a href="http://twitter.com/#!/thematosoup">Twitter</a></li>
                <li><a href="http://www.facebook.com/ThematoSoup">Facebook</a></li>
                <li><a href="http://plus.google.com/104360438826479763912">Google+</a></li>
                <li><a href="http://www.linkedin.com/company/thematosoup">LinkedIn</a></li>
            </ul>
            '
        );

    }

}

Nous avons juste besoin de vérifier si la version de WordPress est 3.3 ou supérieure, assurez-vous que nous sommes sur la bonne page et ajoutez un onglet d’aide en utilisant la fonction add_help_tab et la barre latérale d’aide en utilisant set_help_sidebar. Tout le reste est du HTML pur.

S’il y a des inconvénients à l’aide contextuelle, c’est que la majorité des utilisateurs de WordPress n’en sont même pas conscients (options d’écran également). Alors, peut-être un pointeur, pour s’assurer qu’ils ne le manquent pas?

Liens de la barre d'administration WordPress

Ceux-ci sont très pratiques, en particulier pour les utilisateurs connectés qui naviguent sur le front-end de leurs sites. Ils fournissent un accès en un clic aux fonctions les plus importantes du tableau de bord et si vous sentez que votre thème ou plugin mérite une place dans la barre d’administration WordPress, voici comment il est facile de le faire:

/**
 * Admin bar customization
 */

function thsp_admin_bar_links() {

    global $wp_admin_bar;
    
    // Adds a new submenu to an existing to level admin bar link
    $wp_admin_bar->add_menu( array(
        'parent'    => 'new-content',
        'id'        => 'install_plugin',
        'title'     => __( 'Plugin', 'thsp_admin_bar' ),
        'href'      => admin_url( 'plugin-install.php' )
    ) );

    // Adds a new top level admin bar link and a submenu to it
    $wp_admin_bar->add_menu( array(
        'parent'    => false,
        'id'        => 'custom_top_level',
        'title'     => __( 'Top Level', 'thsp_admin_bar' ),
        'href'      => '#'
    ) );
    $wp_admin_bar->add_menu( array(
        'parent'    => 'custom_top_level',
        'id'        => 'custom_sub_menu',
        'title'     => __( 'Sub Menu', 'thsp_admin_bar' ),
        'href'      => '#'
    ) );

    // Removes an existing top level admin bar link
    $wp_admin_bar->remove_menu( 'comments' );
    
}
add_action( 'wp_before_admin_bar_render', 'thsp_admin_bar_links' );

Nous utilisons wp_before_admin_bar_render crochet d’action pour modifier l’objet $ wp_admin_bar avant qu’il ne soit rendu. L’exemple ci-dessus ajoute un sous-menu à un lien de niveau supérieur existant (Nouveau), un nouveau lien de niveau supérieur avec un autre lien imbriqué à l’intérieur (Niveau supérieur, Sous-menu) et supprime un lien de niveau supérieur existant (Commentaires).

Action du plugin WordPress et méta liens

L’écran Plugins du tableau de bord affiche une liste de tous les plugins installés. Vous pouvez voir le nom, la description, la version, les liens vers l’auteur et le site Web du plugin et les liens d’action de chaque plugin – une combinaison d’activer, de désactiver, de modifier, de supprimer, selon que le plugin est activé ou non.

Pour certains plugins, c’est assez bon. Mais si votre plugin a une page de paramètres, j’aimerais entendre une bonne raison de ne pas y ajouter de lien d’action, surtout si c’est aussi simple que ça:

/**
 * Add action links in Plugins table
 */
 
add_filter( 'plugin_action_links_' . plugin_basename( __FILE__ ), 'thsp_plugin_action_links' );
function thsp_plugin_action_links( $links ) {

    return array_merge(
        array(
            'settings' => '<a href="' . admin_url( 'tools.php?page=our-settings-page.php' ) . '">' . __( 'Settings', 'ts-fab' ) . '</a>'
        ),
        $links
    );

}

Vous devez ajouter ce code au fichier principal de votre plugin (plugin-name.php) afin que le hook approprié puisse être utilisé. Par exemple, si le fichier principal de votre plugin est vraiment plugin-name.php, le hook de filtre ‘plugin_action_links_plugin-name’ sera utilisé, en s’assurant que les liens d’action sont ajoutés uniquement pour votre plugin. Un autre de ces moments magiques WordPress.

Les méta-liens des lignes de plugins sont légèrement différents. Le nom du hook n’est pas dynamique, vous devez donc passer deux arguments à votre fonction personnalisée, un tableau de liens existants et les liens de plug-in actuels sont en cours de traitement pour:

/**
 * Add meta links in Plugins table
 */
 
add_filter( 'plugin_row_meta', 'thsp_plugin_meta_links', 10, 2 );
function thsp_plugin_meta_links( $links, $file ) {

    $plugin = plugin_basename(__FILE__);
    
    // create link
    if ( $file == $plugin ) {
        return array_merge(
            $links,
            array( '<a href="http://twitter.com/thematosoup">Follow us on Twitter</a>' )
        );
    }
    return $links;
}

C’est à vous de sélectionner les liens pour montrer où, donc si vous n’avez jamais traité d’action de plugin et de méta-liens auparavant, vérifiez la liste de vos plugins installés pour voir comment les autres développeurs le font.

Conclusion

Une planification intelligente, du bon sens et des fonctionnalités intégrées de WordPress peuvent vous aider, mais comme pour tout le reste de la vie, la modération est la clé. Trop de pointeurs d’administration ou de liens de barre d’administration inutiles peuvent être frustrants.

Vous n’avez pas besoin d’être un expert en ergonomie pour créer des produits WordPress utilisables.

Vous avez d’autres techniques que vous aimeriez partager?

Share: