Accueil » WordPress » Personnaliser WordPress – DIV, Plugins & CSS

Personnaliser WordPress – DIV, Plugins & CSS

Personnaliser son blog WordPress, c'est le rendre unique... Les thèmes WordPress sont en général plutôt soignés et bien finis (dans l'ensemble;), cependant il arrive que l'on ait besoin d'effectuer quelques retouches, améliorations ou modifications pour l'adapter à nos besoins/envies.

C'est là qu'intervient la personnalisation, qu'elle soit faite à partir de Plugins, Shortcodes, CSS ou bien encore à l'aide de DIV, c'est assurément un moyen de personnaliser votre WordPress.

 Personnaliser WordPress   DIV, Plugins & CSS comment personnaliser wordpress1

N'oubliez pas les balises DIV

Les balises DIV sont utilisées pour appliquer un style à un contenu, si les balises SPAN permettent également d'appliquer un style CSS , les DIV sont plutôt utilisées pour la mise en page.

On a souvent tendance à les oublier pourtant elles permettent de mettre en avant du texte ou des éléments, d'ajouter une vraie touche de personnalisation.

Utilisation d'une balise Div simple : Voyons tout d'abord l'ajout d'une DIV simple de largeur 80%, centrée avec une couleur de fond et une bordure :

Voilà ma DIV

Je peux donc soit écrire directement cette dernière et ses attributs dans une page ou un article :

<div style="border: 1px #949494 solid; background-color: #d5d5d5; padding: 5px; width: 80%; margin-left: auto; margin-right: auto;">Voilà ma DIV</div>

soit déclarer ces derniers dans un fichier CSS et y faire appel en cas de besoin :

#ma_div {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: 1px ##949494 solid;
    background-color: #d5d5d5;
    padding: 5px;
}

et y faire appel comme suit :

<div id="ma_div">
Voilà ma DIV
</div>

Pour des DIV plus complexes : Une utilisation plus poussée des balises DIV permet de personnaliser vos contenus. On peut bien sûr en utiliser plusieurs et les faire se superposer, les aligner à droite, à gauche, etc...

Dans l'exemple ci-dessous, 3 DIV sont utilisées, une principale contenant les 2 autres, celle de gauche contient mon formulaire de Newsletter Wysija et l'autre du texte et une image cliquable.

Pour ne plus rien manquer... Abonnez-vous à nos Newsletters !

Le meilleur de WP Formation directement dans votre boîte email...

Vous cherchez une formation pour créer votre site web, blog ou Ecommerce?

Toutes nos Formations WordPress sont éligibles au CIF, DIF, AIF, OPCA...

 Personnaliser WordPress   DIV, Plugins & CSS formation WordPress 3 jours 134

Si vous souhaitez aller plus loin avec les DIV, je vous conseille la lecture de :

 

Modifier/Personnaliser des plugins

Cela arrive très souvent, le plugin dont on a besoin est en anglais, n'affiche pas des éléments que l'on juge indispensables... Pas grave! Il suffit juste de le modifier, un petit tour dans l'éditeur Extensions>Editeur à la recherche de l'extension et de son fichier PHP ou CSS et le tour est joué!

Prenons l'exemple de JetPack, plugin utilisé sur ce site notamment pour son système de commentaires. Je trouvais qu'il manquait la possibilité de prévenir le commentateur que le site utilisait KeywordLuv, j'ai donc modifié le fichier /jetpack/modules/comments/comments.php et inséré le texte ci-dessous.

 Personnaliser WordPress   DIV, Plugins & CSS modification jetpack

 

Utiliser le Widget Texte de WordPress

On l'oublie trop souvent mais WordPress met à votre disposition un widget extrêmement utile, le Widget Texte! Petit mais costaud, il est capable de prendre du texte, des images, des vidéos mais aussi du code HTML arbitraire.

 Personnaliser WordPress   DIV, Plugins & CSS widget texte WordPress

Astuce : Si vous souhaitez faire des mises en forme complexes avec votre Widget Texte, utilisez l'éditeur WordPress. Pour ce faire, ouvrez un nouvel article, créez votre contenu en mode "visuel" puis passez en mode "texte" et copiez/collez-le dans le widget;)

 

Modifier le CSS de son thème WordPress

C'est tout à fait normal de vouloir modifier certains éléments CSS de son thème, à noter que certains premiums proposent des options de modifications via un Custom CSS.

Pour modifier un élément de votre thème favori, je vous conseille tout d'abord d'utiliser un navigateur performant (Chrome, Firefox), en effet ces derniers permettent "d'inspecter les éléments d'une page" et de facto, vous aident à trouver ce qui doit être modifié.

 Personnaliser WordPress   DIV, Plugins & CSS modifier css theme wordpress 300x153

 

Vous pouvez ensuite créer un thème enfant ou utiliser Jetpack qui propose une surcouche CSS, pour des modifications non destructives en cas de mises à jour ultérieures de votre thème. Je vous conseille la lecture de l'article ci-après pour d'autres modification CSS pour WordPress.

 

Personnaliser WordPress à l'aide de plugins

Que serait WordPress sans les plugins? Un vulgaire Joomla! Non je plaisante ;)

Un autre moyen de personnaliser votre WordPress c'est l'utilisation de plugins qui permettent la mise en page ou bien encore l'amélioration de l'éditeur, en voici quelques-uns:

  • Shortcodes Pro : Permet la création rapide de shortcodes dans WordPress et fournit des boutons intégrés à l’éditeur TinyMCE.
  • TinyMCE Advanced : Ce plugin ajoute des boutons dans votre éditeur visuel comme par exemple boutons, tableaux, Div, etc.
  • Content Builder - PremiumUn plugin payant pour une mise en page facilitée en utilisant le Drag & Drop et un éditeur amélioré.
  • Visual Composer - Premium :  A l'instar de Content Builder, très simple à utiliser tout en offrant de très nombreuses fonctionnalités. Un must have !
  • Ether Content Builder - Premium :  Un autre composer puissant pour des mises en forme complexes, dans la lignée des 2 plugins ci-dessus.
 Personnaliser WordPress   DIV, Plugins & CSS composer wordpress

 

17 commentaires

  1. Vraiment intéressant cet article, c'est vrai que donner une touche personnelle à son thème wordpress peut apporter un petit plus sympa ;) Pas bête l'idée pour le widget texte de wp (utiliser l'éditeur WordPress) Je trouve ce widget assez utile, on peut y insérer beaucoup de choses et il a une bonne visibilité ! Merci pour l'article, je partage !

  2. Article vraiment très intéressant et bien détaillé.

    Après, il n'est pas toujours simple de se retrouver dans un fichier CSS, heureusement des plugins existent pour nous aider à nous repérer.

    Merci pour le partage :)

  3. Je craque ! Cela fait quelques semaines que je vous suis au fil des articles toujours intéressants pour un débutant comme moi. Mon blog à 4 semaines, je ne connaissais pas wordpress il y a 3 mois ! mais là, je craque, c'est décidé, je reviens aux fondamentaux, l'auto-formation, c'est bien, mais cela a des limites.. Je m'en vais de ce pas commander 3 heures de "coaching wordpress à la carte" ! A très vite

  4. Excellent article, synthétique, pour nous rappeler les bases essentielles et les petits plus !
    Perso, je n'avais jamais compris à quoi pouvaient servir les balises "div". Plus exactement, je les croyais réservées pour "cadrer" un code un peu complexe comme l'insertion d'une animation en flash ou d'un player audio ou video ! Simple petite question :dans l'exemple donné (div centrée avec couleur de fond et bordure), on obtiendrait le même effet si cela s'appliquait à la balise span, non ?

  5. @Flobogo, oui on pourrait obtenir le même effet avec un SPAN mais les DIV sont à privilégier pour la mise en page.

  6. J'aime bien aller au fond des choses et comprendre le pourquoi du comment (du moins tant que j'arrive à suivra ^^) alors : pourquoi faut-il privilégier les DIV si on obtient le même résultat avec span (dans le cas bien sûr d'un simple formatage de texte, par exemple) ?

  7. Ces deux balises sont des conteneurs qui sont destinés à structurer le contenu, mais elles ont un rôle complémentaire et des règles de rendu différentes. SPAN sert surtout à associer un style à une partie d'un texte tandis que DIV sert à agencer le contenu de la page. Pour aller + loin un très bon didacticiel -> http://www.xul.fr/html5/div-span.php

  8. Article très instructif. Je me sers beaucoup des DIV pour mes mises en page.
    Quelle différence faites-vous entre les déclarations CSS:
    1/ " .maPerso ", appel par "class", et
    2/ " #maPerso", appel par "id" ?
    Merci.

  9. @Alain Ce sont des sélecteurs de la norme CSS, ils ont donc globalement la même utilité : déclarer un style. La grande différence réside dans la façon de les utiliser.

    #ID est un sélecteur unique, un identifiant. Il ne peut pas être présent plus d'une fois dans une page HTML. En clair, tu ne peux pas donner le même #ID à plus d'un élément. C'est donc un sélecteur utile pour styler la structure d'une interface.

    .maclasse est un sélecteur qui peut-être utilisé sur plusieurs éléments dans une même page. Très pratique, par exemple, pour styler des liens, des images...

    Tu peux également définir pour un élément, un sélecteur #ID unique, suivi de plusieurs sélecteurs .class différents. Ce qui ouvre le champs des possibilités.

  10. OK, merci de ta réponse.

  11. Bonjour et merci pour cet article très intéressant.
    Je suis donc parti sur un petit encart "A propos de l'auteur" qui se place à la fin de tous mes articles.
    Dans cet encart, je veux mettre les boutons suivez moi sur Fb/Google + côte à côte et le bouton Twitter juste en dessous.
    http://wp.me/p1YhyM-Zg
    J'ai créé 3 div dans mon css .gauche pour FB, .droite pour G+ et .saut pour Twitter
    Qu'est ce que j'ai oublié ?
    Merci !

  12. Bonjour @Photograpix,
    le problème vient du fait que votre DIV principale à une largeur déclarée de 526px et que vos DIV intérieures font 260px + 277px soit 11px de trop ;) C'est pour cela qu'elles sont décalées...

  13. Merci pour votre réponse et réactivité. ça marche nickel !!

  14. Avec retard : merci pour la réponse du 18 mai et les précisions apportées :)

  15. Ca va faire presque 4 ans que j'utilise WordPress et pourtant je n'avais jamais fait gaffe au Widget "Texte" qui permet d'entrer du code HTML directement sans passer par le code source des pages ou l'interface "Editeur", si j'avais vu ça plus tôt j'aurais gagné un temps fou dans mes modifications WP..

  16. Un article vraiment très intéressant, J’ai cependant un souci avec le fichier header.php, parfois ne fonctionne pas quand je fait les modifications ne sont pas prises en compte. Avez vous une idée?? Merci beaucoup pour ces informations des plus pratiques!

  17. Bonjour,
    Voilà une belle piste qui m'a permis de régler certains problèmes. Merci.
    J'ai utilisé le code pour l'attribut d'une page "Voilà ma DIV"
    Je voudrais savoir dans le cas d'un formulaire, comment préciser le css des champs (textarea) et menu déroulant, svp

Et si vous laissiez votre commentaire ?



Recherches liées : " ajouter une position div wordpress, images modifiees theme wordpress non prises en compte, lecteur audio vidual composer"