Étape n°1 – Ajout d’une fonction PHP

A l’aide de votre client FTP favori, localisez le fichier functions.php puis insérez la fonction suivante :

function admin_css() {

$admin_handle = 'admin_css';
$admin_stylesheet = get_template_directory_uri() . '/css/admin.css';

wp_enqueue_style( $admin_handle, $admin_stylesheet );
}
add_action('admin_print_styles', 'admin_css', 11 );

La 3^e ligne indique le chemin d’un fichier admin.css. Il nous faut donc créer un tel fichier à l’aide de votre éditeur de texte favori – Notepad++, Coda, etc.

Étape n°2 – Création d’une feuille de styles CSS

Placez donc ce fichier dans un dossier /css du répertoire de votre thème – bien que vous puissiez également le placer à la racine du thème en modifiant le chemin dans le code.

Pour composer votre feuille, il nous faut identifier les règles à insérer pour qu’elles surpassent les styles par défaut.

Le plus commode consiste à utiliser l’extension Firebug pour le navigateur Firefox bien que tous les autres disposent également d’outils de développement – généralement accessibles via la touche F12.

Vous pouvez par exemple modifier la couleur des liens qui donne tout de suite une nouvelle donne visuelle au back office.

N’oubliez pas de sauvegarder votre fichier CSS pour appliquer les changements.

Cette technique est similaire aux tutoriels concernant l’insertion d’un logo personnalisé dans la zone de connexion ou encore l’ajout d’icônes à vos contenus personnalisés. Faites-en bon usage !

Rappelons dans un premier temps qu’un champ personnalisé est composé d’une clé (le nom du champ) et d’une ou plusieurs valeurs.

Un champ personnalisé créé pour chaque nouveau contenu

Pour automatiser leurs créations, il suffit d’ajouter ces lignes de code dans le fichier functions.php situé dans le dossier /wp-content/themes/NOM_DU_THEME/ ou de passer par le back office de WordPress via le menu Apparence puis Éditeur – bien que cette seconde méthode soit plus risquée en cas d’erreurs :

add_action('wp_insert_post', 'wpc_champs_personnalises_defaut');
 function wpc_champs_personnalises_defaut($post_id)
 {
 if ( $_GET['post_type'] != 'page' ) {
 add_post_meta($post_id, 'custom_field_1', '', true);
 add_post_meta($post_id, 'custom_field_2', '', true);
 }
 return true;
 }

Plusieurs informations à savoir concernant ce bout de code :

• if ( $_GET['post_type'] != 'page' ) { : vous pouvez choisir le type de contenu pour lequel les champs personnalisés seront générés. Dans l’exemple, tous sauf les pages – notez la présence du point d’exclamation. Vous pouvez utiliser la valeur post pour les articles ou le slug de n’importe quel custom post type – en utilisant ou non le point d’exclamation pour gérer des exclusions ;
• add_post_meta($post_id, 'custom_field_1', '', true); : voici 2 lignes d’exemple créant les champs personnalisés. Ici, 2 champs intitulés custom_field_1 et custom_field_2 seront générés. Libre à vous donc d’ajouter autant de lignes que souhaité avec les noms de vos choix. Notez aussi qu’un troisième argument peut être défini pour indiquer une valeur prédéfinie comme ceci : add_post_meta($post_id, 'custom_field_1', 'ma_valeur_defaut', true);

De nombreux plugins utilisent cette technique pour insérer des métadonnées qui seront alors affichées sur le site ou garder en mémoire dans la base de données pour une utilisation en back office.

Recalculer quoi !?

Mais si, vous savez les compteurs des utilisateurs, triés par rôles dans la page des utiilsateurs de la partie administration !

Table des utilisateurs de WordPress

Il se peut que vous ayez un compteur indiquant (1) – ou 1 de trop, alors que vous n’avez pas – ou moins, de membre associé à ce rôle. Ici pour mon exemple, vous avez supprimé le compte Momo qui était Moderator.

Pourtant, WordPress continue de le prendre en compte.

Comment est-ce possible ?

Et bien, souvenez-vous !

Il se pourrait que vous soyez allé dans la base de données, avec phpMyAdmin avec un plugin portable par exemple, puis que vous ayez supprimé un utilisateur depuis la table wp_users.

Mais avez-vous supprimé les champs des données de cet utilisateur dans la table wp_usermeta ? Pas sûr…

Et c’est là tout le problème, car WordPress ne fait pas de lien entre le nombres de rôles trouvés dans les données utilisateur. Voici un extrait du core :

 * Count number of users who have each of the user roles.
 * Assumes there are neither duplicated nor orphaned capabilities meta_values.

WordPress ne fait que compter les rôles trouvés dans la table wp_usermeta sans tester si l’utilisateur existe encore. Légitime quelque part car vous ne devez normalement pas intervenir de cette façon dans les tables de WordPress. En tout cas, à vos risques et périls…

La preuve, je suis ici pour vous en parler.

Comment régler ce problème de compteur ?

2 solutions comme souvent : une requête MySQL ou une fonction PHP.

#1 – Exécuter une requête MySQL

Ouvrez votre gestionnaire de base de données phpMyAdmin puis exécutez la requête suivante – en prenant soin de remplacer wp_ par votre préfixe de base données WordPress :

DELETE FROM wp_usermeta
WHERE user_id NOT IN ( SELECT concat( ID ) from wp_users )

Cette requête va effacer tous les champs de la table wp_usermeta dont l’ID du membre associé n’est pas dans la table wp_users.

Autrement dit, les champs qui auraient dû être supprimés le seront ici !

#2 – créer une fonction PHP

Autre solution pour ceux qui sont frileux du phpMyAdmin ou qui n’y ont tout simplement pas d’accès, voici le code à copier dans le fichier functions.php de votre thème :

function delete_bad_fields()
{
    global $wpdb;
    $wpdb->query( "DELETE FROM $wpdb->usermeta WHERE user_id NOT IN ( SELECT concat( ID ) from $wpdb->users )" );
}
add_action( 'admin_init', 'delete_bad_fields' );

Puis raffraichissez le panneau administrateur. Si le requête s’exécute plusieurs fois, rien de grave, les prochaines fois ne servent juste à rien.

Vous pouvez supprimer le code de votre fichier maintenant !

Comment prévenir ce problème à l’avenir ?

Si effacer le membre n’est pas possible pour X raisons depuis l’administration de WordPress, exécutez alors ces 2 requêtes, ici pour l’utilisateur dont l’ID est 123 :

DELETE FROM wp_users WHERE ID = 123

DELETE FROM wp_usermeta WHERE user_id = 123

Ou pour dans votre functions.php :

function delete_bad_fields()
{
    global $wpdb;
    $wpdb->query( "DELETE FROM $wpdb->users WHERE ID = 123" );
    $wpdb->query( "DELETE FROM $wpdb->usermeta WHERE user_id = 123" );
}
add_action( 'admin_init', 'delete_bad_fields' );

Edit: ScreenFeed nous parle de wp_delete_user() qui a l’avantage de réassigner les articles à un autre utilisateur, excellente idée, voici le code :

function delete_bad_fields_2()
{
    $delete_this_user_id = 123;
    $reassign_to_user_id = 1;
    $user_exists = new WP_User( $reassign_to_user_id );
    if ( $user_exists &&
         current_user_can( 'delete_user', $delete_this_user_id ) )
      wp_delete_user( $delete_this_user_id, $reassign_to_user_id );
}
add_action( 'admin_init', 'delete_bad_fields_2' );

 Au terme de ce tutoriel, vous serez en mesure de résoudre ce problème de comptabilité. J’attends vos commentaires avec impatience !

A l’aide de votre client FTP favori (FileZilla, Transmit, CyberDuck, etc.), connectez-vous à la racine de votre installation WordPress puis éditez le fichier wp-config.php.

Ajoutez les lignes de codes ci-dessous après les paramètres de langues ou les clés de sécurité par exemple :

/**
*Thème par défaut de WordPress MU
*
*/
define('WP_DEFAULT_THEME', 'nom_du_theme');

N’oubliez pas de modifier le nom du thème par défaut en saisissant le nom du dossier entre les apostrophes.

Exemple de positionnement des lignes de code

Sauvegardez les modifications puis faites un rapide test : créer un nouveau site sur votre réseau et vérifiez que le thème d’origine est bien celui que vous aurez choisi dans la ligne de code.

Pour en savoir plus sur la création d’un réseau de sites sous WordPress, lisez notre tutoriel consacré au mode multi-site.

N.B : ce tutoriel fait suite à une demande Gilles sur notre forum.

Méthode n°1 – Utilisation du plugin Post Expirator

Bien que je ne sois pas spécialement fan d’utiliser un plugin dans tous les cas, il faut bien avouer que c’est de loin la solution la plus simple pour disposer d’une fonction de date limite pour vos articles.

Rendez-vous dans le menu Extensions puis saisissez post expirator. Une fois la recherchée effectuée, cliquez sur Installer maintenant.

Si vous préfèrez passer par votre client FTP, téléchargez-le à partir du lien suivant :

Une boite d’information sera désormais affichée dans chacun de vos articles, vous permettant de paramétrer une date de péremption.

Aperçu du plugin Post Expirator pour WordPress

N’oubliez pas de mettre à jour les articles concernés.

Méthode n°2 – Utilisation d’un hack PHP

Modification de la boucle de WordPress (loop)

Cette technique est de loin la plus compliquée des 2 – elle est réservée aux utilisateurs avancés.

Il nous faut modifier la boucle de WordPress pour insérer des conditions d’affichage des articles en fonction de la date d’expiration. Étant donné que la boucle est utilisée dans la plupart des fichiers du thème, nous resterons sur le index.php.

A l’intérieur de ce dernier, remplacez la boucle par les lignes de codes suivantes qui ont été testées sur le Twenty Ten :

<?php
if (have_posts()) :
     while (have_posts()) : the_post();

$todays_date = date("d/m/Y");

$today = strtotime($todays_date);

$expirationdate = get_post_custom_values('expiration');

if (is_null($expirationdate)) {

$expiration_date = '2524608000'; // affiche les articles sans date jusqu'en 2050 ;

} else {

$expirestringarray = implode($expirationdate);

$expiration_date = strtotime($expirestringarray);

}

if ($expiration_date > $today) { $valid = "yes"; } else { $valid = "no"; } 

if ( $valid == "yes" ) { 

             // Code de la boucle dont le titre, l'extrait, etc.
            the_title();
            the_excerpt();

         }
     endwhile;
endif;
?>

Ajout d’un champ personnalisé

Le fonctionnement de ce hack est simple. Spécifiez un champ personnalisé avec la clé expiration dans chacun de vos articles puis indiquez une date au format DD/MM/YYYY comme valeur.

Par exemple, 01/01/2012 si vous souhaitez faire un article pour la Saint Sylvestre.

Respectez le format de date européen pour la valeur

Ce bout de code est basé sur ce snippet. Je l’ai adapté car il ne fonctionnait pas correctement avec le format de date français.

Vous pouvez tester son bon fonctionnement en indiquant des dates différentes. L’article devrait disparaître ou s’afficher en fonction de la valeur spécifiée.

Dans les 2 cas évoqués ici, la technique reste la même : la création d’un champ personnalisé ayant pour valeur une date. Si vous aussi vous souhaitez proposer vos idées de tutoriels, rendez-vous sur notre forum (aucune inscription requise) !

Crédits photo : G. Horatiu

2 méthodes existent pour ajouter un icône :

1. La première reste la plus simple bien qu’elle ne permette pas d’appliquer un état de survol. L’image restera identique quel que soit l’état. Le seul préalable est de créer une image de 16 pixels par 16 pixels ;
2. La seconde, légèrement plus complexe, prend en charge l’état survolé mais nécessite l’ajout de lignes de code supplémentaires. Des packs d’icônes sont disponibles au téléchargement de façon gratuite ;

Nous allons voir ensemble les 2 méthodes dans ce tutoriel, accompagné d’un podcast vidéo HD.

Méthode n°1 – Modification du custom post types

La plupart du temps les custom post types sont initialisés dans le fichier functions.php mais peuvent l’être dans un fichier dédié. A vous d’effectuer une recherche de la fonction register_post_type.

Ajoutez ensuite la ligne de code suivante dans les paramètres :

'menu_icon' => get_bloginfo('template_directory') . '/images/podcast-icon.png',  // URL de l'image

Pour vous donner un aperçu complet, voici le code complet pour créer un custom post types intitulé Podcasts :

add_action( 'init', 'register_cpt_podcast' );

function register_cpt_podcast() {

    $labels = array(
        'name' => _x( 'Podcasts', 'podcast' ),
        'singular_name' => _x( 'Podcast', 'podcast' ),
        'add_new' => _x( 'Add New', 'podcast' ),
        'add_new_item' => _x( 'Add New Podcast', 'podcast' ),
        'edit_item' => _x( 'Edit Podcast', 'podcast' ),
        'new_item' => _x( 'New Podcast', 'podcast' ),
        'view_item' => _x( 'View Podcast', 'podcast' ),
        'search_items' => _x( 'Search Podcasts', 'podcast' ),
        'not_found' => _x( 'No podcasts found', 'podcast' ),
        'not_found_in_trash' => _x( 'No podcasts found in Trash', 'podcast' ),
        'parent_item_colon' => _x( 'Parent Podcast:', 'podcast' ),
        'menu_name' => _x( 'Podcasts', 'podcast' ),
    );

    $args = array(
        'labels' => $labels,
        'hierarchical' => true,

        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields', 'comments', 'revisions' ),
        'taxonomies' => array( 'genre' ),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,

        'menu_icon' => get_bloginfo('template_directory') . '/images/podcast-icon.png',
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'
    );

    register_post_type( 'podcast', $args );
}

Il vous suffit de modifier l’URL du fichier image comme dans cet exemple.

Retournez à présent dans le back office de WordPress puis remarquez l’apparition de votre icône pour le custom post type concerné.

Icônes symbolisant les podcasts de 16x16

Méthode n°2 – Ajout d’un style CSS via le functions.php

Cette seconde nous permet d’ajouter un icône via le CSS de l’administration de WordPress. Elle est incompatible avec la première : retirez donc la ligne de code ajoutée si tel est le cas.

Ouvrez donc le fichier functions.php puis ajoutez les lignes suivantes en fin de fichier :

add_action( 'admin_head', 'wpc_cpt_icon' );

function wpc_cpt_icon() {
    ?>
    <style type="text/css" media="screen">
        #menu-posts-podcast .wp-menu-image {
            background: url("<?php bloginfo('template_url') ?>/images/clapperboard.png") no-repeat 6px 6px !important;
        }
       #menu-posts-podcast:hover .wp-menu-image, #menu-posts-podcast.wp-has-current-submenu .wp-menu-image {
            background-position:6px -18px !important;
        }
        #icon-edit.icon32-posts-podcast {background: url(<?php bloginfo('template_url') ?>/images/clapperboard.png) no-repeat;}
    </style>
<?php }

Mon custom post type s’intitule podcast au singulier. Il vous suffit de modifier ce terme dans les lignes ci-dessous. Pour vous aider, utilisez Firebug puis analyser l’icône d’un ou plusieurs éléments.

Modifiez également l’URL de l’icône associé aux différents états. Dans mon cas, le lien est identique car j’utilise cet excellent pack d’icônes prêts-à-l’emploi :

Il ne vous reste plus qu’à piocher dans ce pack de qualité puis de les envoyer dans un dossier images de votre thème – par exemple.

Ce tutoriel vous montre une fois de plus la capacité de personnalisation du back office de WordPress pour une utilisation en marque blanche du CMS.

Cette technique passe par la fonction wp_logout_url qui définit ce vers quoi le visiteur est redirigé une fois la déconnexion opérée. Il nous faut donc localiser où se situe cette fonction dans le thème.

Si le système de connexion est situé dans l’en-tête, cherchez dans le fichier header.php.

Si vous n’êtes pas développeur, le plus simple consiste bien souvent à télécharger le thème sur votre disque dur puis à effectuer une recherche à l’aide de l’explorateur Windows ou du Finder.

Utilisez ensuite la ligne de code suivante pour effectuer une redirection vers la page d’accueil :

<a title="Déconnexion" href="<?php echo wp_logout_url( home_url() ); ?>">Déconnexion</a>

Pour aller plus loin, il suffit d’indiquer le paramètre de redirection entre les parenthèse de la fonction comme ceci – en remplaçant le $redirect par l’URL de votre choix :

<?php echo wp_logout_url( $redirect ); ?>

Cette astuce est très utile pour les espaces membres créés avec WordPress dont je vous rappelle la présence de ce podcast vidéo.

Pour mettre en place cette technique, ouvrez le fichier functions.php présent dans votre thème WordPress. Pour ce faire, 2 techniques :

• Soit vous passez par le menu Apparence puis Éditeur depuis le back office de WordPress ;
• Soit vous modifiez le fichier à l’aide d’un client FTP en localisant ce dernier dans le dossier /wp-content/themes/NOM_DU_THEME ;

En fin de fichier, ajoutez la fonction suivante :

add_action('wp_dashboard_setup', 'wpc_dashboard_widgets');
 function wpc_dashboard_widgets() {
 global $wp_meta_boxes;
 // Widget Aujourd'hui
 unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
 // Derniers commentaires
 unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
 // Liens entrants
 unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
 // Extensions
 unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);

Bien entendu, vous pouvez faire du sur-mesure en n’utilisant que les lignes qui vous intéressent. De même, notez qu’il faudra sans doute fermer celle-ci avec une accolade.

Un moyen de plus pour personnaliser WordPress à votre guise pour des usages professionnels.

Masquer les menus parents de l’administration de WordPress

Ajoutez ensuite les lignes de code suivante pour désactiver les menus de votre choix contenus dans la variable $restricted :

function remove_menu_items() {
 global $menu;
 $restricted = array(__('Links'), __('Comments'), __('Media'),
 __('Plugins'), __('Tools'), __('Users'));
 end ($menu);
 while (prev($menu)){
 $value = explode(' ',$menu[key($menu)][0]);
 if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){
 unset($menu[key($menu)]);}
 }
 }

add_action('admin_menu', 'remove_menu_items');

L’exemple peut donc facilement être personnalisé en ajoutant des valeurs ou en supprimant certaines. Un exemple pour masquer les articles et les pages – utile si vous n’utilisez que des custom post types :

function remove_menu_items() {
  global $menu;
  $restricted = array(__('Posts'), __('Pages'));
  end ($menu);
  while (prev($menu)){
    $value = explode(' ',$menu[key($menu)][0]);
    if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){
      unset($menu[key($menu)]);}
    }
  }

add_action('admin_menu', 'remove_menu_items');

Masquer les sous-menus de l’administration de WordPress

add_action('admin_menu', 'remove_menu_items');
function remove_submenus() {
 global $submenu;
 unset($submenu['index.php'][10]); // Supprimer 'Mises à jour'.
 unset($submenu['themes.php'][5]); // Supprimer 'Thèmes'.
 unset($submenu['options-general.php'][15]); // Supprimer 'Ecriture'.
 unset($submenu['options-general.php'][25]); // Supprimer 'Commentaires'.
 unset($submenu['edit.php'][16]); // Supprimer 'Tags'.
 }
add_action('admin_menu', 'remove_submenus');

Comme vous pouvez le remarquer des numéros figurent entre les crochets. Ces numéros sont déterminés par des fichiers issus du cœur de WordPress. Il s’agit du fichier menu.php dans le dossier /wp-admin. Il suffit d’identifier le fichier PHP et son numéro associé pour masquer les éléments de sous-menus de votre choix.

WordPress démontre une fois sa flexibilité pour créer des projets Web 100% sur-mesure.

Crédits photo : Dogra

Rendez-vous dans le module Apparence puis Menus.

C’est ici que vous pouvez créer vos menus de navigation introduits sous WordPress 3.0 à condition de disposer de tels emplacement dans votre thème.

Déroulez à présent le menu Options de l’écran situé en haut à droite de la fenêtre. Il contient différentes options qu’il suffit de cocher pour en disposer.

Cochez les options cachées à réveler pour vos menus WordPress

Cochez donc les cases relatives aux propriétés avancées des menus dont :

• La cible du lien : même fenêtre ou onglet, autre fenêtre ou onglet ;
• Les classes CSS : idéal pour appliquer une classe spécifique à chacun des éléments pour changer de couleurs ou masquer un séparateur ;
• Les relations de type XFN : très utile pour le référencement (SEO), ce champ est utilisé pour la balise rel utilisée par Google pour établir les relations entre les liens. Pour en savoir plus, utilisez le créateur XFN ;
• La description : affichée uniquement si le thème l’accepte ;

Les nouvelles propriétés apparaissent pour chaque élément de menu

Faites donc bon usage des ces options de menus avancées en remplissant tous les champs disponibles – à l’exception du champ de description qui n’est pas forcément très utile. On appréciera notamment le champ XFN pour le SEO et l’application de classe CSS à la demande. Une fois de plus, WordPress nous démontre sa flexibilité et sa facilité de personnalisation.

Crédits photo : Matti Mattila