Tutoriel WordPress

Autoriser l’envoi de .mp4 ou de n’importe quel type de fichier dans les médias

WordPress ne vous autorise pas de base à envoyer de nombreux fichiers pour des raisons de sécurité dans votre bibliothèque de médias. Pas d’inquiétude, ceci est modifiable.

En pratique, vous pouvez envoyer les fichiers suivants :

Fichiers images : .jpg, .png, .gif et .ico ;
Fichiers audio : .mp3, .m4a, .ogg, .wav ;
Fichiers vidéo : .mp4, .m4v, .mov, .wmv, .avi, .mpg, .ogv, .3gp, .3g2 ;
Documents : .pdf, .doc, .docx, .ppt, .pptx, .pps, .ppsx, .odt, .xls, .xlsx, .psd ;

Pour autoriser l’envoi d’autres types de fichiers, copiez-collez le code suivant dans le fichier functions.php de votre thème enfant :

/* Autoriser l'envoi de tous types de format dans les médias */

add_filter('upload_mimes', 'wpm_myme_types', 1, 1);

function wpm_myme_types($mime_types){
    $mime_types['mp4'] = 'video/mp4'; //On autorise les .mp4
    $mime_types['une autre extension'] = 'mon autre Mime Type'; 
    return $mime_types;

On ajoute un Mime Type qui est le type de média suivant l’extension.

La liste des Mime Type se trouve à cette adresse (ils sont très nombreux). Pour trouver facilement le votre, vous pouvez utiliser la fonction de recherche de votre navigateur (Ctrl + F).

Restreindre l’accès à votre contenu aux utilisateurs connectés avec un shortcode

Tutoriel WordPress

Il vous arrive parfois de vouloir restreindre l’accès à un certain contenu de vos pages et/ou de vos articles uniquement aux utilisateurs connectés.

Cela peut se faire très simplement grâce à un shortcode, je vais donc vous présenter dans ce tutoriel une manière de forcer vos utilisateurs à se connecter pour consulter vos contenus. Il suffit de l’insérer dans votre fichier functions.php ou dans un plugin maison

[pastacode lang= »php » manual= »function%20membre_connect_shortcode(%24atts%2C%20%24content%20%3D%20null)%20%7B%0A%20%20%20if%20(is_user_logged_in()%20%26%26%20!is_null(%24content)%20%26%26%20!is_feed())%20%7B%0A%20%20%20return%20do_shortcode(%24content)%3B%0A%20%20%20%7D%0A%20%20%20return%20’%3Cp%3EVeuillez%20vous%20connecter%20pour%20consulter%20ce%20contenu.%3C%2Fp%3E’%3B%0A%7D%0Aadd_shortcode(‘membre’%2C%20’membre_connect_shortcode’)%3B » message= » » highlight= » » provider= »manual »/]

Il ne vous reste plus qu’à ajouter votre contenu entre ces deux balises et le tour est joué !

[membre]Votre contenu réservé aux utilisateurs connectés seulement.[/membre]

Ce shortcode est utilisé ici pour du simple texte réservé aux personnes connectées. Mais rien ne vous empêche de vouloir cacher tout un bloc de contenu généré par un autre shortcode d’un plugin présent sur votre site.

Ajouter une balise « hreflang » à son site WordPress sans plug-in ?

Tutoriel WordPress

Afin de toujours optimiser notre référencement, vous pouvez ajouter une balise « hreflang » à votre site WordPress.

Pourquoi ajouter une balise « hreflang » ?

Cette dernière est très utile dans le cadre d’un site multilingue, dans le cadre d’un site disposant d’une seule langue, il permet à Google d’être satisfait et de respecter toujours un peu plus leur demande dans Google Webmaster Tools.

Ajouter la balise « hreflang » à son site WordPress

Allez dans votre fichier header.php et entre les balise <head> et </head> ajouter ceci (en adaptant l’URL à votre site) :

[pastacode lang= »php » manual= »%3Clink%20rel%3D%22alternate%22%20href%3D%22http%3A%2F%2Fwww.creazo.fr%20%3C%3Fphp%20echo%20parse_url(%24_SERVER%5B%E2%80%98REQUEST_URI%E2%80%99%5D%2CPHP_URL_PATH)%3B%20%3F%3E%22%20hreflang%3D%22fr%22%20%2F%3E%0A » message= » » highlight= » » provider= »manual »/]

Ajouter une zone de recherche via un shortcode

Tutoriel WordPress

Dans certains pages ou articles, vous seriez peut-être tentés de mettre un champ de recherche pour envoyer vos visiteurs sur d’autres sujets. vous pouvez le faire grâce à un simple shortcode :

Comment ajouter une zone de recherche dans un article grâce à un shortcode ?

Ajoutez le shortcode suivant dans votre fichier functions.php ou encore via une extension maison contenant tout vos shortcodes :

[pastacode lang= »php » manual= »%2F%2F%20ajoutez%20un%20champ%20de%20recherche%20dans%20un%20article%0Afunction%20shortcode_recherche(%20)%20%7B%0A%20%20%20%20get_search_form(%20)%3B%0A%7D%0Aadd_shortcode(%20’recherche’%2C%20’shortcode_recherche’%20)%3B » message= » » highlight= » » provider= »manual »/]

Se déconnecter d’une page ou d’un article protégé par mot de passe

Thèmes & Plugins WordPress, Tutoriel WordPress

Quand vous sécurisez une page ou un article avec un mot de passe, il peut-être intéressant d’ajouter un bouton « se déconnecter », pour cela il existe deux extensions qui vous permettrons d’ajouter ce bouton très rapidement :

La première est très simple d’usage, après avoir activé l’extension, le bouton apparaîtra automatiquement sur toutes les pages et tous les articles protégé par mot de passe. La seconde vous demandera d’ajouter la fonction suivante dans un template ou modèle de page vous permettant ainsi de répondre à une demande plus fine pour son apparition :

[pastacode lang= »php » manual= »%3C%3Fphp%20do_action(%20’posts_logout_link’%2C%20’%3Cdiv%20id%3D%22logout%22%3ED%C3%A9connexion%3C%2Fdiv%3E’%20)%3B%20%3F%3E » message= » » highlight= » » provider= »manual »/]

Vous pourrez aussi ajouter un peu de style à vos boutons de déconnexion afin de les adapter au design de votre thème :

[pastacode lang= »css » manual= »%23logout%20%7B%0A%20%20float%3A%20right%3B%0A%20%20text-align%3A%20center%3B%0A%20%20text-transform%3A%20none%3B%0A%20%20padding%3A6px%200%206px%200%3B%0A%20%20font%3Abold%2013px%20Arial%3B%0A%20%20background%3A%23f5f5f5%3B%0A%20%20color%3A%23555%3B%0A%20%20border-radius%3A2px%3B%0A%20%20width%3A100px%3B%0A%20%20border%3A1px%20solid%20%23ccc%3B%0A%20%20box-shadow%3A1px%201px%203px%20%23999%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

Concernant les pages ou articles protégés par mot de passe vous pourrez aussi trouver d’autres d’astuces :

Supprimer toutes références aux mots-clefs / étiquettes / tags

Tutoriel WordPress

Dans WordPress, le fonctionnement des mots-clefs / étiquettes / tags est semblable à celui des catégories, pourtant il est trés mal utilisé par la plupart des gens et fait même doublons avec les catégories.

Techniquement WordPress va créer, lors de l’utilisation des mots-clefs, une page listant tous les articles auxquels vous avez attribué le mots-clef en question. Un grand nombre d’utilisateurs, et ce même parmi les professionnels, vont choisir des étiquettes de manière intuitive et sans y avoir réfléchis ou du moins développer une stratégie autour de ceci. En faisant ainsi, un grand nombre de mots-clefs sont créés et le plus souvent certains sont juste des déclinaisons d’autres (pluriel par exemple). WordPress va alors générer un grand nombre de pages dont certains ne listeront qu’un article. La page sera alors indexée, mais jugée par Google comme non pertinente et à juste titre puisqu’elle ne contient aucune information et pénalisant votre référencement.

Afin de pallier à ceci, voici quelques astuces vous permettant d’en retirer l’accès à tous (via un fichier functions.php ou un plugin).

Suppression de la metabox des tags et des formats sur la page d’ajout/édition de posts

[pastacode lang= »php » manual= »%2F*%20suppression%20de%20la%20metabox%20des%20tags%20et%20des%20formats%20sur%20la%20page%20d’ajout%2Fedition%20de%20posts%20*%2F%0Afunction%20dfr_remove_tags_metabox()%20%7B%0A%20%20%20%20remove_meta_box(‘tagsdiv-post_tag’%2C%20’post’%2C%20’side’)%3B%0A%7D%0Aadd_action(‘admin_menu’%2C%20’dfr_remove_tags_metabox’)%3B » message= » » highlight= » » provider= »manual »/]

Suppression de la colonne « Mots-clefs » sur la liste des articles

[pastacode lang= »php » manual= »%2F*%20suppression%20de%20la%20colonne%20%22Mots-clefs%22%20sur%20la%20liste%20des%20articles%20*%2F%0Afunction%20dfr_remove_tags_column(%24defaults)%20%7B%0A%20%20%20%20unset(%24defaults%5B’tags’%5D)%3B%0A%20%20%20%20return%20%24defaults%3B%0A%7D%0Aadd_filter(%20’manage_posts_columns’%2C%20’dfr_remove_tags_column’)%3B » message= » » highlight= » » provider= »manual »/]

Suppression du sous-menu « Mot-clefs » sur la gauche de votre tableau d’administration

[pastacode lang= »php » manual= »add_action(%20’admin_menu’%2C%20’adjust_the_wp_menu’%2C%20999%20)%3B%0Afunction%20adjust_the_wp_menu()%20%7B%0A%20%20%20%20%20%20%20%20%24page%20%3D%20remove_submenu_page(%20’edit.php’%2C%20’edit-tags.php%3Ftaxonomy%3Dpost_tag’%20)%3B%20%2F%2FMenu%20Mots-clefs%0A%20%20%20%20%7D » message= » » highlight= » » provider= »manual »/]

Définir un gravatar par défaut sur votre site

Tutoriel WordPress

Gravatar est un système automatisé et très pratique pour générer un avatar sur de nombreux sites web et services en ligne. Celui-ci vous permet donc de générer votre avatar une seule fois pour tous vos services associés aux besoin d’un avatar (plusieurs CMS l’utilise nativement dont WordPress)

Gravatar (abréviation de globally recognized avatar) est un service de centralisation d’avatar créé par Tom Preston-Werner.

Sur Gravatar, les utilisateurs peuvent se créer un compte basé sur leur adresse e-mail, et envoyer un avatar qui sera associé à ce compte. Un plug-in Gravatar est disponible sur la plupart des moteurs de blog connus ; quand un visiteur souhaite poster un commentaire sur un blog qui demande une adresse e-mail, le serveur va interroger Gravatar sur l’existence d’un avatar associée à cette adresse. Si c’est le cas, il sera placé à côté du commentaire posté. Gravatar est supporté nativement dans WordPress et dans l’application web de gestion de projet Redmine. Gravatar peut aussi être utilisé avec les CMS Drupal et SPIP grâce à une extension.

Pour utiliser un avatar par défaut et choisi par vous même, vous pouvez utiliser le code suivant à insérer dans votre fichier functions.php ou dans un plugin maison.

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

 //Définir un gravatar par défaut sur votre site
function nouveau_gravatar ($avatar_defaults) {
$monavatar = get_stylesheet_directory_uri() . '/images/gravatar.png';
$avatar_defaults[$monavatar] = 'Avatar by CreaZo';
return $avatar_defaults;
}
add_filter( 'avatar_defaults', 'nouveau_gravatar' );

[/pastacode]

Dans un second temps il va falloir créer le dossier « images » dans le thème de votre site avec une image gravatar.png pour que la manipulation fonctionne.

Pour finir, allez spécifié l’avatar par défaut pour les gens n’utilisant pas Gravatar dans Réglages > Discussions.

Le changement est immédiat rendant votre site toujours un petit peu plus professionnel ! Vous pouvez essayer en commentant l’article !

Image : Quel poids, taille, et résolution sur un site web ?

Ressources web, Tutoriel WordPress

Une image destinée à être publiée sur une page web, devra avoir un poids peu important afin d’optimiser le poids de la page en elle-même. Pour faciliter ceci, il suffit de suivre les conseils suivants :

Le poids :

La taille de votre image ne doit absolument pas dépasser les 200Ko en général. Cela concernera toute image de votre site.

Pour réduire le poids de votre image, il est conseillé d’enregistrer votre image en .jpeg 80%. Cela permet d’alléger le poids de votre image sans perdre en qualité.

Si vous enregistrez vos images en .PNG, préférez le PNG 8 au PNG 24. Le PNG 24 est principalement utile si vous avez besoin d’une image avec de la transparence.

Sa résolution :

Sa résolution : un écran d’ordinateur a une résolution d’affichage de 72 dpi en général. Il est donc parfaitement inutile d’envoyer une image ayant une résolution supérieure : elle ne s’affichera pas mieux ! Par contre, elle sera plus lourde et donc plus longue à afficher.

La taille :

A l’écran, les dimensions (HxL) s’expriment en pixels (px). Pour avoir un ordre de grandeur, une image de 500 px de haut est suffisante pour être géré par la suite lors des miniatures ou des agrandissements.

Son format de fichier :

Il existe une multitude de formats de fichier, qui ne sont pas compatibles avec toutes les configurations d’ordinateurs. Si vous voulez être certain/e que votre image soit bien reçue et visible, convertissez-la en .jpg, .png ou .gif car ces trois formats sont reconnus par la majorité des logiciels de navigation.

Son nom :

De préférence en minuscules, sans accent ni ponctuation, sans espace (utilisez les caractères – ou _ pour combler les espaces).
Cela doit ressembler à : nom_image.jpg

Optimiser celle-ci à l’envoi sur votre site:

Il existe de nombreuses façon d’optimiser vos images en lignes afin de leur faire gagner encore quelques ko, toutefois une des extensions parmi les plus performantes sera « Imagify Image Optimizer« , qui optimisera encore plus le poids de l’image sans perdre en qualité. Vous pourrez retrouver cette extension dans le répertoire des extensions WordPress.

Sticky Posts ou comment mettre ses articles en avant

Tutoriel WordPress

Une fonctionnalité intéressante de WordPress est ce que l’on appelle en anglais les « Sticky Posts » ou la possibilité de mettre en avant ses articles.

Lors d’un fil d’actualité classique, les articles respecte un ordre antéchronologique (Qui va du plus récent au plus ancien) ou chronologique mais dans des cas particulier, vous pouvez avoir l’envie qu’un article spécifique apparaissent avant tout les autres sans respecter l’ordre imposé, cette fonctionnalité s’appelle « Sticky Posts » et se règle via une simple case à cocher lors de l’édition de votre article :

Vous pouvez aussi le faire à la chaîne lors de l’ édition de votre liste d’articles :

Un article ayant cette particularité aura donc sa place toujours avant les autres. Cela fonctionne très bien avec les flux d’articles automatisés de votre site (la page blog ou actualités).

Pour récupérer ces articles, vous pouvez insérer le code suivant dans votre modèle de page ou fichier php :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

$sticky = get_option('sticky_posts');
$args = array( 'post__in' => $sticky );
query_posts( $args );

[/pastacode]

Exclure des pages et/ou articles de la recherche

Tutoriel WordPress

Lors de la réalisation de votre site, vous pouvez avoir le besoin de supprimer des articles, catégories et/ou des pages de la recherche, pour cela vous devez ajouter un petit bout de code dans votre fichier functions.php ou dans votre plugin maison.

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

// Supprimer des pages et/ou articles de la recherche
function my_search_filter( $query )
{
    if ( $query->is_search )
    {
        $query->set( 'post_not_in',array( 102829 ) );
    }
    return $query;
}
add_filter('pre_get_posts','my_search_filter');

[/pastacode]

‘post__not_in’ concernera les pages et articles, si vous souhaitez supprimer une catégorie de la recherche il faudra utiliser ‘category__not_in’.

Restreindre la recherche

Au contraire pour limiter la recherche à une liste de catégorie ou de post, supprimez not_ de la requête, ce qui vous donnera ceci :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

// Supprimer des pages et/ou articles de la recherche
function my_search_filter( $query )
{
    if ( $query->is_search )
    {
        $query->set( 'post_in',array( 102829 ) );
    }
    return $query;
}
add_filter('pre_get_posts','my_search_filter');

[/pastacode]

Optimiser les ajouts dans functions.php sans passer par celui-ci

Astuces CSS, HTML et PHP, Tutoriel WordPress

Au fil de votre veille ou des astuces trouvées sur le blog de CreaZo, vous pouvez ajouter des modifications dans votre fichier functions.php. Toutefois si vous souhaitez optimiser ceci par quelque chose de plus performant et surtout de plus pratique, il existe une solution qui me semble plus adaptée.

Pour cela nous allons devoir créer des extensions dans lesquelles nous ajoutons en fonction de vos besoins les astuces désirées, ainsi vous pourrez différencier celles-ci par catégories, un exemple en image :

Creations-extensions — Extensions > Extensions Installées

On peut ainsi distinguer 4 genres d’extensions différentes :

CreaZo : liée à ma sauce interne (logos personnalisées, liens vers le support…)
CreaZo – Dashboard : liée à toutes les modifications du tableau de bord
CreaZo – Optimisation : liée à toutes les optimisations propre à WordPress (numéro de version, couleurs dans l’administration …)
CreaZo – Thème : liée à tous les changements apportés au thème courant (format des dates, shortcode spécifique…)

En cloisonnant mes fonctions que j’aurais du ajouter dans functions.php cela me permet de limiter mon taux d’erreur (fichier moins long et donc plus clair), désactiver facilement des fonctionnalités sans passer par le FTP et offrir plus de transparence au client.

Pour passer par ce système, vous devez créer une extension (ou plusieurs selon vos besoins), pour cela il faut ajouter un nouveau dossier du nom de votre extension dans /wp-content/plugins, puis dans ce dossier un fichier.php avec les éléments suivants :

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

ajouts des fonctions CMS.
Version: Novembre 2015
Plugin URI: https://www.creazo.fr/
License: GPLv2 or later
Author: CreaZo - ANDRE Jonathan
*/

// ajouter toutes vos astuces !!!

 // Ajouter une page "Tous les réglages"
function custom_admin_menu() {
  add_options_page(__('All Settings'), __('All Settings'), 'administrator', 'options.php');
}
add_action('admin_menu', 'custom_admin_menu')

[/pastacode]

Il ne vous reste plus qu’à ajouter vos fonctions en tenant compte de vos thématiques et selon les besoins les désactiver facilement via Extensions > Extensions Installées.

Automatiser tous ses liens externes en « nofollow »

Tutoriel WordPress

Le fameux « nofollow » est une valeur non standard de l’attribut rel (relation) de la balise <a> (c’est à dire vos url), qui sert en HTML à produire un lien hypertexte. L’attribut nofollow (de l’anglais no follow, ne pas suivre) sert à spécifier que le lien en question ne doit pas être pris en compte par un programme (comme les robots des moteurs de recherches) lisant la page, ceci afin de ne pas augmenter le rang dans les moteurs de recherche du site internet vers lequel pointe le lien.

Pour pouvoir l’ajouter automatiquement à votre site wordpress, vous allez devoir modifier votre fichier functions.php en ajoutant ceci :

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

add_filter('the_content', 'my_nofollow');
add_filter('the_excerpt', 'my_nofollow');
function my_nofollow($content) {
return preg_replace_callback('/]+/', 'my_nofollow_callback', $content);
}
function my_nofollow_callback($matches) {
$link = $matches[0];
$site_link = get_bloginfo('url');
if (strpos($link, 'rel') === false) {
$link = preg_replace("%(href=S(?!$site_link))%i", 'rel="nofollow" $1', $link);
} elseif (preg_match("%href=S(?!$site_link)%i", $link)) {
$link = preg_replace('/rel=S(?!nofollow)S*/i', 'rel="nofollow"', $link);
}
return $link;
}

[/pastacode]