Comment créer un site Web ou un blog en 2020 - Guide gratuit et facile pour créer un site Web

Comment ajouter du code personnalisé à votre site WordPress (c’est plus facile que …

Écrire du PHP, du CSS et du HTML5 pour modifier un site WordPress peut être assez frustrant, mais un bon guide peut le rendre plus facile. Ce n’est pas ce guide. Il s’agit simplement de savoir comment ajouter le code à votre site une fois que c’est fait. Ne vous inquiétez pas cependant, c’est tout aussi important. Comme il existe plusieurs façons de le faire, il est utile de connaître les différences entre les différentes options. Mais d’abord, deux mises en garde :

  1. Avant de modifier quoi que ce soit, veuillez faire une copie de sauvegarde. En fait, continuez à soutenir leur travail tout au long du processus. Il est également utile d’avoir un fichier séparé dans lequel coller des extraits de code supprimés ou bientôt utilisés.
  2. Si vous avez installé le thème de quelqu’un d’autre, n’ajoutez jamais de code aux fichiers functions.php ou style.css de votre thème. Si vous le faites, lorsque le thème est mis à jour, tout votre travail acharné aura disparu.

Tout au long de la suite de cet article, j’explorerai quelques alternatives, classées de la plus simple à la plus complexe.

Plugins WordPress

Plugins WordPress pour ajouter du code

Tout comme il existe plusieurs types de modification de code, il existe plusieurs types de plug-ins de code personnalisés. Les 2 types les plus courants sont PHP et CSS. Comme vous le savez peut-être, PHP régit l’architecture et le fonctionnement de WordPress. Donc, si vous essayez de modifier les principales fonctions de votre site Web, d’ajouter ou de modifier une fonction, il existe de nombreux plugins PHP disponibles en téléchargement qui vous aideront avec cela.

De même, vous savez probablement aussi ce que fait CSS – il embellit les choses. Et si c’est tout ce que vous voulez modifier, un plugin CSS personnalisé vous permettra de le faire avec un minimum de tracas. JavaScript, qui a une relation complexe avec les plugins, se cache en arrière-plan. Pour clarifier, c’est un peu différent car cela fonctionne parfaitement si vous l’ajoutez à l’en-tête, au pied de page ou à un sujet enfant, mais pour l’utiliser dans un article, vous devez utiliser un plugin spécial. Quelque chose comme CSS et Javascript Toolbox devrait fonctionner. En passant, pour des raisons de vitesse de votre page, il est préférable de le mettre dans le pied de page.

Écrivez vos propres plugins

Il existe des tonnes d’extraits de code WordPress disponibles sur Internet pour changer, désactiver ou modifier certaines fonctions. Cependant, savoir où les placer est essentiel à la fonctionnalité. Par exemple, si vous avez un extrait qui modifie la fonction d’un plugin, vous voulez qu’il fonctionne quel que soit le thème que vous avez activé. Il en va de même pour les extraits de code qui traitent des modifications à l’échelle du site. Donc, dans tous les cas, ce pourrait être une bonne idée de créer un nouveau plugin pour eux. Ne vous inquiétez pas, ce n’est pas aussi intimidant qu’il y paraît.

L’un des principaux avantages de la création d’un plugin est qu’il vous permettra d’activer ou de désactiver le plugin à la demande. Il vous permet également d’afficher des informations contextuelles sur le plugin sur les pages du plugin. Le seul inconvénient majeur est que toute autre personne ayant la permission de modifier le site peut le désactiver accidentellement, mais un avertissement sévère devrait pouvoir l’empêcher.

En remarque, vous pouvez également créer un dossier appelé mu-plugins dans votre dossier wp-content. Tout fichier PHP inséré à cet endroit s’exécutera toujours et ne pourra pas être activé ou désactivé. Cela maintient le code personnalisé hors des dossiers de thème et de plug-in. Mais ne le faites qu’avec des plugins que vous vous sentez toujours à l’aise d’exécuter en arrière-plan.

Fichiers CSS personnalisés

Si les modifications que vous envisagez sont mineures, vous pouvez créer un fichier custom-style.css. Si vous souhaitez prévisualiser vos modifications avant de les apporter, vous pouvez toujours utiliser DevTools si vous utilisez Chrome ou une application similaire. Une autre possibilité consiste à ajouter du CSS personnalisé via votre thème WordPress. Certains thèmes premium, comme notre framework Total, incluent une option de panneau de thème pour ajouter un CSS personnalisé où vous pouvez facilement le trouver et le modifier. De plus, lorsque vous mettez à jour votre thème, les paramètres du tableau de bord de votre thème ne doivent pas être modifiés, de sorte que votre CSS personnalisé reste intact.

N’oubliez pas que CSS est rétroactif, ce qui signifie que les règles qui apparaissent plus tard ont toujours la priorité sur les règles qui apparaissent plus tôt. Ainsi, tout CSS appliqué à une feuille distincte remplacera le code par défaut de la page. Cela s’applique également au CSS intégré dans …

Thèmes WordPress pour enfants

Créer un thème enfant WordPress

Pour les non-initiés, un thème enfant hérite des fonctionnalités d’un autre thème, vous permettant de modifier sa mise en page à volonté (vous pouvez apprendre tout ce que vous voulez savoir dans notre guide des thèmes enfants WordPress). Ils ont été inventés dans le but précis de vous permettre de modifier un thème sans perdre les modifications lors de la mise à jour. Les thèmes enfants reflètent toutes les modifications que vous apportez au thème externe ou “principal”. Par conséquent, comme pour l’application d’un effet de calque Photoshop, vous ne modifiez pas réellement le contenu ; vous pouvez le supprimer à tout moment pour que les choses redeviennent comme avant.

Créer un thème enfant lorsque vous souhaitez modifier votre code vous évitera bien des maux de tête et est assez simple (au fur et à mesure que les modifications de WordPress progressent). Accédez simplement à votre site via FTP et créez un dossier, puis créez un fichier style.css qui correspond à ce dossier. Il est de pratique courante de le nommer sujet-nom-enfant. Après cela, tout ce dont vous avez besoin est une ligne dans l’en-tête de votre nouveau style.css pour définir le modèle. Mais il y a aussi des choses utiles à avoir, qui peuvent être trouvées sur la page WordPress Codex.

Apportez ensuite les modifications nécessaires au sujet actuel sous la ligne @import. Le seul inconvénient des thèmes enfants est la quantité de recherches que vous devez effectuer sur le thème principal avant de pouvoir le modifier, sans provoquer d’effets secondaires ou de conflits étranges. Et rappelez-vous qu’avec les thèmes enfants, il vous suffit de spécifier ce qui sera différent du thème d’origine. Pour appliquer les modifications, il suffit de ZIP, de le télécharger via la page Apparences> Thèmes de votre tableau de bord WordPress et de l’activer via WordPress. Cela suppose que votre thème principal est également chargé, bien sûr.

Affichage du code

Affichage du code ajouté

Il existe un autre type de code d’ajout que nous n’avons pas abordé : l’afficher. Si vous êtes un concepteur de sites Web et que vous souhaitez montrer comment quelque chose est fait, présenté d’une manière que les téléspectateurs peuvent copier et coller, il est important de l’écrire de la bonne manière. La façon dont WordPress interprétera votre code dépend de l’utilisation ou non de la section HTML de Visual Post Editor. Le saisir directement dans l’éditeur visuel fonctionnera pour le neutraliser, mais il n’y a aucun moyen de le mettre dans le bon format ou dans une boîte de code. L’éditeur visuel le formatera simplement de la même manière que du texte normal. D’un autre côté, l’éditeur HTML le convertira en code et ruinera votre site Web. Ne vous inquiétez pas, vous pouvez annuler cela.

Cependant, il existe un compromis. Vous pouvez surligner et mettre votre code dans un bloc à l’aide des balises et , mais cela n’empêchera pas le code de se déclencher. Il ne vous restera plus qu’à le mettre dans la police montoype, dans une case, pour montrer qu’il s’agit officiellement de code. Pour l’empêcher de s’activer, vous devez remplacer les symboles actifs par ce que l’on appelle des entités de personnages amusants. Les versions les plus courantes de celles-ci, et celles qui suffisent à neutraliser la plupart du code, changent respectivement (vous pouvez en savoir plus sur l’affichage du code dans notre article sur la façon d’écrire du code personnalisé dans vos articles WordPress).

Comme vous pouvez le voir, il existe de nombreuses façons d’ajouter du code personnalisé à WordPress, et je vous encourage à expérimenter, à jouer avec eux et à voir lesquels vous conviennent. Y a-t-il d’autres façons d’ajouter du code personnalisé que j’ai manquées ? Faites-moi savoir dans les commentaires.