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

Là, ajoutez les lignes de code suivantes :

add_action( 'admin_menu', 'remove_links_menu' );
function remove_links_menu() {
     remove_menu_page('link-manager.php');
}

Cliquez donc sur Mettre à jour le fichier puis vérifiez que le module Liens a bel et bien disparu du back office de WordPress.

Une astuce rapide qui allégera votre interface de modules inutiles !

Mettre à jour les URLs de WordPress

A l’aide de votre client FTP favori, connectez-vous à la racine de votre serveur. Éditez ensuite le fichier wp-login.php.

Localisez la ligne de code suivante :

require( dirname(__FILE__) . '/wp-load.php' );

Il ne vous reste plus qu’à ajouter ces 2 lignes de code supplémentaires qui indiquent où se trouve votre installation de WordPress. Corrigez donc les URLs en fonction de votre situation :

update_option('siteurl', 'http://monsite.com/' );
update_option('home', 'http://monsite.com/' );

Ajoutez les 2 lignes de code dans wp-login.php

Sauvegardez le fichier puis tentez de vous connecter sur votre site. En théorie, si tout se passe bien, vous devriez à nouveau être en mesure de vous identifier sans soucis.

N’oubliez pas de supprimer les 2 lignes de code précédemment ajoutées.

Prévenir un nouvel accident

Pour éviter qu’une telle erreur se reproduise, vous pouvez faire en sorte de griser et donc de bloquer les 2 champs permettant le changement d’URL de votre WordPress. Pour ce faire, modifiez votre fichier wp-config.php puis ajoutez ces 2 lignes de code en tout début de fichier après l’ouverture de la balise PHP :

define('WP_HOME', 'http://monsite.com');
define('WP_SITEURL', 'http://monsite.com');

Evitez un changement d'URL malencontreux avec un blocage par wp-config.php

Si vous retournez dans le module Réglages puis Général, les 2 champs d’adresses sont à présent non modifiables.

Crédits photo : Malthe

N.B : il se peut que d’autres restrictions existent au niveau de votre hébergeur. Par exemple, il est probable que la limite ait augmentée mais pas à la valeur désirée. Dans ce cas, contactez votre hébergeur.

Dans un premier temps, il nous faut éditer le fichier .htaccess dans lequel nous allons indiquer le chemin du fichier php.ini. Sans cela, aucune configuration nouvelle ne sera opérationnelle.

Ouvrez donc le fichier .htaccess en prenant d’afficher les fichiers cachés au préalable. Ajoutez ensuite la ligne de code suivante :

suPHP_ConfigPath /home/protutsn/public_html/php.ini

Prenez soin d’adapter le chemin en fonction de votre hébergeur.Dans cet exemple, le fichier php.ini est situé à la racine.

Sauvegardez ce dernier puis créez donc un nouveau fichier que vous nommerez logiquement php.ini.

Ajoutez la ligne de code suivante :

upload_max_filesize = 20M

La taille limite d’envoi de fichiers sera augmentée à 20 Mo. Videz le cache de votre navigateur puis essayez d’envoyer un fichier depuis votre administration WordPress.

Le texte d’aide indique à présent un limite supérieure à celle par défaut.

D’autres lignes de code peuvent être ajoutées dans votre fichier php.ini mais celles-ci feront l’objet de prochains tutoriels.

Crédits photo : Drewm

A l’aide de votre client FTP favori, connectez-vous à la racine de votre hébergeur. Faites afficher les fichiers cachés puis modifiez le fichier .htaccess.

Le point rappelle qu’il s’agit d’un fichier caché sous un système à base UNIX comme Linux ou MacOS X. Si un tel fichier est absent, créez-le à l’aide d’un éditeur de texte – bien qu’il devrait être présent dans la plupart des cas, celui-ci apparaissant dès lors que les permaliens de WordPress sont modifiés.

Une fois le fichier .htaccess ouvert dans votre éditeur de texte favori, rajoutez la ligne suivante :

RewriteRule ^login$ http://NOM_DU_SITE.com/wp-login.php [NC,L]

Il suffit de remplacer le mot-clé login par celui qui convient ainsi que l’URL de votre site.

Le fichier .htaccess pour WordPress gère notamment la réécriture d'URLs

Dans mon cas, j’obtiendrais un accès au back office de WordPress en ouvrant l’URL : http://wpchannel.com/login

N’oubliez pas de sauvegarder le fichier modifié puis de le renvoyer sur votre serveur – si vous n’éditez pas ce dernier en accès direct via FTP.

Une astuce simple à mettre en œuvre et pratique pour vos utilisateurs qui ne sont pas sensés retenir les usages de WordPress. Un pas de plus vers un CMS en marque blanche !

Crédits photo : jonjk