9 WordPress Codes pour pimenter votre blog et améliorer UX

Article écrit par:
  • WordPress
  • Mise à jour: mai 08, 2019

WordPress est facile à configurer et à installer, prêt à fonctionner dès que vous publiez votre blog.

Mais s’appuyer sur les options par défaut de WordPress peut entraîner une perte de votre part:

  • Moins de fonctionnalité
  • Utilisateurs ennuyés (qui voient les mêmes choses sur tous les sites WP qu'ils rencontrent)
  • Gouttes dans les classements des moteurs de recherche.

Vous avez entre les mains un outil flexible que vous pouvez modifier pour en faire un outil agréable à utiliser et efficace. Pourquoi ne pas pimenter les choses pour vos utilisateurs (et vous-même)?

Cet article veut vous aider à rendre votre site Web basé sur WordPress amusant et utile pour vos utilisateurs en ajoutant des extraits de code cela améliorera également votre référencement.

Besoin d'aide pour pimenter votre blog WordPress?
WHSR est désormais partenaire de Codeable.io pour aider les utilisateurs ayant besoin de services professionnels de développement / personnalisation de WP.

Pour obtenir un devis gratuit, veuillez remplir ce formulaire de demande.

Donnez-leur un essai et laissez-moi savoir comment ils ont travaillé pour vous! ;)

Codes 9 pour améliorer votre blog WordPress

Je vais vous proposer deux types d'extraits de code dans cet article:

  1. Codes du codex
  2. Extraits de code et widgets

Les codes Codex sont des extraits PHP que j’ai moi-même écrits (avec l’aide de mon fiancé Simone) en utilisant strictement les WordPress.org Codex pour référence.

Les extraits de code et les widgets sont des éléments de code PHP prêts à l'emploi (ou des plugins WordPress) disponibles gratuitement sur d'autres sites Web et sur WordPress.org, mais j'ai également inclus des extraits de code que mon fiancé et moi-même avons écrits à partir de références ouvertes et Codex.

Les deux types de codes sont faciles à implémenter et à installer, mais vous pouvez commencer par des widgets et des plugins si vous ne savez pas comment manipuler le code.

Je comprends que les extraits de code 9 pourraient ne pas suffire à ceux qui aiment expérimenter des tas de codes différents. Je suis donc sûr que notre Robert Ludrosky Extraits de code pratiques 25 pour les développeurs WordPress va assouvir votre faim (au moins pendant un moment). ;)

Codes Codex

1. Différencier Post Post

Pour que WordPress vérifie si votre publication actuelle est une publication permanente (et l'affiche en conséquence), vous pouvez utiliser la fonction booléenne du Codex:

<? php is_sticky (); ?>

La fonction seule ne renverra que des valeurs VRAI ou FAUX, donc ce que vous pouvez faire ici si vous écrivez une construction conditionnelle (if / else) pour gérer vos posts persistants. Un exemple:

<? php if is_sticky () {the_title (); the_time ('M, d, Y'); the_excerpt (); } else {include 'post-template.php'; }

Dans cet exemple d'utilisation, j'ai affiché le post-it sous forme de boîte contenant uniquement le titre, la date et l'extrait (pas l'intégralité du post), tandis que le modèle standard pour les autres posts est contenu dans post-template.php.

Chaque type de publication aura sa propre feuille de style CSS, mais nous ne définissons pas les styles ici; seulement des modèles.

Single.php est votre modèle par défaut pour les publications uniques (vous le trouverez inclus avec chaque thème WP par défaut).

Si vous avez développé votre propre thème WP mais que vous n'avez configuré aucun modèle pour les publications uniques, vous pouvez suivre le guide du Codex. ici .

2. Affichage de l'URL du message

Celui-ci pourrait être amusant à ajouter à votre modèle. Si vous voulez que vos lecteurs obtiennent l'URI de chacune de vos pages (ou publications), utilisez simplement la balise suivante dans votre modèle single.php, page.php ou même index.php:

<a href="<?php echo get_page_link();?> "> <? php echo get_page_link (); ?> </a>

Au lieu d'utiliser the_permalink, c'est le choix le plus évident et qui fonctionne dans tous les cas, WP vous permet d'utiliser deux formes alternatives pour les publications et les pages:

<? php echo get_post_permalink (); ?>
 <? php echo get_page_link(); ?> 

Par exemple, votre modèle de page peut inclure:

<p> Lien: <a href="<?php echo get_page_link();?> "> <? php echo get_page_link (); ?> </a> </ p>

3. Récupérer et afficher le numéro d'identification de la publication

Même lorsque vous configurez votre structure permalink pour qu'elle soit conviviale pour l'utilisateur et pour le référencement, vous pouvez toujours montrer à vos visiteurs l'ID de l'article en ajoutant cette fonction simple à votre méta-ligne:

<?php the_ID(); ?>

Exemple d'utilisation:

<p class = "meta"> Publié par Nom de l'auteur. L'identifiant de publication est <? Php the_ID (); ?> </ p>

4. Liste Catégories Par ID

La fonction standard de WordPress est:

<? php get_all_category_ids ()?>

Voici un exemple que j’ai utilisé sur l’un de mes blogs, écrit en utilisant le code du Manuscrit un sujet sur StackOverflow:

<? php $ category_ids = get_all_category_ids (); foreach ($ category_ids en tant que $ cat_id) {$ cat_name = get_cat_name ($ cat_id); $ category_link = get_category_link ($ cat_id); // nous avons besoin du lien chat pour que l'URL fonctionne! echo "<a href=\"{$category_link renew\"> {$ id_cat}}: {$ nom_cat}} <br/>"; }?>

… Et comment il est affiché:

code de catégorie WP

Remarque: get_all_category_ids () est maintenant une fonction obsolète, mais vous pouvez toujours l'utiliser sans problèmes, comme je le fais sur mon blog (capture d'écran ci-dessus). Toutefois, si vous souhaitez utiliser la nouvelle fonction pour cet extrait, visitez le site get_terms () page du Codex.

Que fait ce code?

Le code obtient tous les ID de catégorie et le nom de catégorie pour chaque ID, puis lie l’ID au lien de catégorie, tout en affichant le nom de catégorie après le «:» - d’où le écho() expression <a href=\"{$category_linkName\"> {$ id_cat} </a>: {$ nom_cat} <br/>.

5. Une page détaillée Utilisateurs / Auteurs pour votre blog

Avez-vous déjà voulu créer une page personnalisée affichant tous les auteurs ou utilisateurs de votre blog sans avoir à compter sur un plugin?

Bien toi peuvent créez votre propre page Auteurs / Utilisateurs personnalisée avec uniquement un éditeur de texte, un programme de téléchargement FTP et votre tableau de bord WordPress bien-aimé.

Tout d’abord, vous devez créer une copie de votre fichier page.php. Renommez votre copie en n’importe quel nom - j’ai nommé mine users.php.

Ajoutez la balise template en haut de ce modèle pour que WordPress le reconnaisse comme modèle, puis accédez à votre tableau de bord -> Pages -> Ajouter un nouveau et créez une page pour votre liste d'utilisateurs / auteurs. Retournez à la liste des pages, cliquez sur Edition rapide sous le titre de votre nouvelle page et sélectionnez votre nouveau modèle dans le menu déroulant Modèle. Enregistrez vos modifications.

Ouvrez maintenant votre fichier users.php (ou le nom de votre choix) et appliquez le code suivant:

 <? php $ result = count_users (); echo 'Il y a', $ résultat ['total_users'], 'utilisateurs totaux'; foreach ($ result ['avail_roles'] comme $ role => $ count) echo ',', $ count, 'are', $ role, 's'; écho '.'; ?> 

Ce code utilise le count_users Cette fonction est répertoriée comme “utilisation par défaut” dans le Codex. Vous pouvez voir un exemple en direct de ce code à l'adresse http://robocity.in/users/.

Après ce code, ajoutons quelque chose à propos de l’administrateur du blog:

<? php printf (__ ('Nombre de publications publiées par l'utilisateur "Leaders":% d', "text-dom-here"), count_user_posts (1)); ?>

J'ai utilisé l' count_user_posts fonctionner ici, en suivant le format d’utilisation suggéré par le Codex.

La fonction get_userdata C'est bien de montrer la corrélation entre un certain nom d'utilisateur et le vrai nom de la personne qui l'utilise. Voir ci-dessous:

<? php $ user_info = get_userdata (1); $ username = $ user_info-> user_login; $ first_name = $ user_info-> first_name; $ last_name = $ user_info-> last_name; echo "$ first_name $ last_name se connecte à leur site WordPress avec le nom d'utilisateur $ username."; ?>

Maintenant, c’est la fonction la plus intéressante que vous pouvez utiliser sur votre page Auteurs / Utilisateurs - le get_users fonction:

<? php $ blogusers = get_users ('blog_id = 1 & orderby = nicename & role = administrator'); // Tableau d'objets WP_User. foreach ($ blogusers as $ user) {echo '<span>'. esc_html ($ user-> user_login). '-' esc_html ($ user-> user_email). '</ span> <br/>'; }?>

Cette fonction récupérera une liste d'utilisateurs en fonction de certains paramètres que vous pouvez configurer dans le code. Dans l'exemple ci-dessus (tiré de la page Codex et modifié pour correspondre à la page Utilisateurs de Robocity.in), je souhaite obtenir la liste des administrateurs de l'ID de blog 1 (blog actuel), classés par 'nicename', et pour chaque utilisateur. Je souhaite afficher le nom d'utilisateur et l'adresse e-mail dans une phrase du type "Nom d'utilisateur - [EMAIL PROTECTED]".

Si vous souhaitez montrer aux utilisateurs connectés quelque chose sur eux-mêmes, vous pouvez utiliser le get_currentuserinfo fonction pour récupérer, par exemple, le nom et l'adresse de l'utilisateur. Je n'ai pas utilisé cette fonction dans mon exemple, mais la créativité ne connaît pas de limites, n'est-ce pas? ;)

Extraits de code et widgets

6. Alternative… Archives!

plus belles archives de blogsImaginez si vous pouviez remplacer votre ancienne liste d'archives de la barre latérale, qui ne cesse de s'allonger à mesure que votre blog grandit et oblige les utilisateurs à faire défiler l'écran, avec un extrait de code comme celui que vous pouvez voir à droite.

Cela ne faciliterait-il pas la tâche de vos lecteurs de saisir l’âge et la profondeur des archives de votre blog? :)

Mon fiancé et moi avons écrit ce fragment de code simple à l'aide de get_post du Codex et d'un simple menu déroulant pour la liste des archives. Nous avons créé nos propres fonctions pour que l’idée fonctionne bien.

<? php function formatPostDate ($ postId, $ format = '% F') {$ post = get_post ($ postId); $ output = strftime ($ format, strtotime ($ post-> post_date)); return $ output; } function getLastPostID () {list ($ post) = get_posts (array ('posts_per_page' => 1)); return $ post-> ID; }?> <p> Ce blog est publié depuis <? php echo formatPostDate (1, '% B% e,% Y'); ?>. <br/> Le dernier message a été publié sur <? php echo formatPostDate (getLastPostID (), '% B% e,% Y'); ?>. </ p> <p> Souhaitez-vous visiter une archive spécifique? </ p> <select name = "archive-déroulante" onchange = "document.location.href = this.options [this.selectedIndex]. valeur; "> <option value =" "> <? php echo esc_attr (__ ('Sélectionner une archive')); ?> </ option> <? php wp_get_archives (array ('type' => 'mensuel', 'format' => 'option', 'show_post_count' => 1)); ?> </ select>

Que fait ce code?

La fonction formatPostDate prend l'identifiant et le format de date de la publication et renvoie une date dans le format de votre choix. La deuxième fonction, getLastPostID, prend un tableau de publications contenant une seule publication et renvoie son identifiant.

Pour obtenir le premier article du blog - généralement avec ID = 1, nous écrivons echo formatPostDate (1, '% B% e,% Y') dans le premier paragraphe: ce code utilise la fonction formatPostDate et prend comme paramètres l'identifiant de l'article. #1 et un format anglais standard pour la date et renvoie la date.

Pour obtenir le dernier message du blog, nous utilisons formatPostDate (getLastPostID (), '% B% e,% Y') pour obtenir l'ID du dernier message et un format de date (encore une fois, en anglais) et imprimer la date le écran.

7. Vérifier si le visiteur utilise un appareil mobile

Muneeb de WP-Snippets.com a partagé un extrait de code intéressant (une fonction) pour vérifier si un visiteur de votre site utilise un appareil mobile.

Le code est disponible ici .

Cette fonction facilite l’optimisation mobile, car elle est utile si vous souhaitez afficher certaines fonctions uniquement aux utilisateurs mobiles ou les exclure de certaines fonctionnalités du site Web.

8. Utilisez la construction if / else pour manipuler le contenu de la barre latérale de votre page

Cet extrait de code est basé sur le codex WordPress, mais je l’ai placé dans cette section, car il permet une grande créativité et vous permettra peut-être de rechercher des extraits sur le Web.

Supposons que vous souhaitiez utiliser plusieurs barres latérales sur votre site. Vous pouvez remplir votre barre latérale avec des divs et des sections, mais plus ce fichier grossit (même si vous utilisez des widgets), plus il devient lourd.

Le Codex vient à votre secours avec le get_sidebar ($ name) une fonction. L'utilisation est simple:

  1. Créez (par exemple) une barre latérale pour vos extraits de citations. Nommez-le sidebar-quotes.php
  2. Dans le fichier sidebar.php principal (ou dans l'en-tête ou le fichier d'index, selon la structure de votre thème WP), écrivez get_sidebar («quotes»); inclure le fichier “sidebar-quotes.php”.

Vous obtiendrez une barre latérale plus fine avec des appels vers d'autres barres secondaires, que vous pourrez optimiser avec les constructions if / else si vous connaissez un peu de code PHP pour WordPress.

Vous ne le savez peut-être pas, mais lorsque vous utilisez le code générique get_sidebar (), cela inclut «sidebar.php» car vous n'avez pas ajouté d'argument $ name. Ceci est l'utilisation par défaut. Lorsque vous ajoutez un “-name” après “sidebar * .php”, vous pouvez appeler cet addon de nom avec l'argument $ name.

Si vous souhaitez afficher des annonces, des offres spéciales ou des fonctions de la barre latérale sur certaines pages de votre blog ou du code susceptibles de surcharger votre barre latérale standard, cet extrait de code constituera un épargnant pour la vie pour UX.

9. Un outil pour intégrer des extraits de code dans votre site WordPress

capture d&#39;écran de codesnippets

Extraits de code est un plugin WordPress gratuit créé par Shea Bange qui vous permet d’ajouter facilement des extraits de code à votre blog.

La bonne chose à propos de ce plugin est que vous n’avez plus besoin de modifier votre functions.php fichier, mais vous pouvez ajouter du code personnalisé directement à partir de votre tableau de bord WordPress. Fondamentalement, vous pouvez ajouter des extraits de code comme vous ajouteriez un nouvel article ou une nouvelle page.

Tom Ewer à WPMUDev.org a écrit une introduction intéressante à ce plugin, mais la ressource la plus utile que j'ai trouvée jusqu'à présent pour les extraits de code est le forum de support du plugin sur WordPress.org.

À vous!

Partagez vos expériences de codage WordPress dans les commentaires ci-dessous! Et n'hésitez pas à poser des questions sur les extraits présentés dans ce post.

A propos de Luana Spinetti

Luana Spinetti est une écrivaine et artiste indépendante basée en Italie, et une étudiante passionnée en informatique. Elle possède un diplôme d'études secondaires en psychologie et en éducation et a suivi un cours d'une année 3 en dessin de bandes dessinées, duquel elle a obtenu son diplôme sur 2008. Si polyvalente qu’elle soit, elle a développé un grand intérêt pour le SEO / SEM et le marketing Web, avec une prédilection pour les médias sociaux. Elle travaille actuellement sur trois romans dans sa langue maternelle (italien), qu’elle espère publication indépendante bientôt.