ThemeLocal - Des conseils de blog qui fonctionnent comme par magie
  • Blogging

    Pourquoi la plupart des conseils de blogs échouent (et comment y remédier)

    7 questions essentielles que chaque blogueur doit se poser

    Comment rédiger du contenu qui donne envie à vos lecteurs d’en savoir plus

    Que faire lorsque votre blog est piraté

    Comment écrire plus vite : 10 astuces simples pour doubler votre sortie d’écriture

    Comment surveiller de manière productive les tendances et rédiger du contenu digne d’intérêt

    Comment planifier le contenu comme Walter Bishop

    Comment rédiger l’article de blog ultime : aide-mémoire d’un blogueur

    6 façons à toute épreuve de créer une communauté (et de transformer les adeptes occasionnels en fans délirants)

  • WordPress
    • Tout
    • Plugins
    • Themes

    9 meilleurs thèmes WordPress de génération de leads 2022

    Comment accepter les paiements ACH dans WordPress

    Comment ajouter une collaboration dans l’éditeur de blocs WordPress (style Google-Doc)

    Comment ajouter des plans de paiement « Achetez maintenant, payez plus tard » à WordPress

    Comment accepter Apple Pay dans WordPress (la manière FACILE)

    Comment précharger des liens dans WordPress pour des vitesses de chargement plus rapides

    Comment ajouter un formulaire de paiement PayPal dans WordPress (étape par étape)

    8 meilleurs thèmes WordPress pour la massothérapie 2022

    Comment désactiver les notifications de nouveaux utilisateurs dans WordPress

  • Email Marketing

    Comment développer votre liste de diffusion avec un quiz en ligne

    Comment utiliser les blogs invités pour créer votre liste de diffusion

    Les métriques de marketing par e-mail sur lesquelles chaque campagne devrait être basée

    E-mails HTML ou texte brut : quelle option est la meilleure pour votre liste de diffusion ?

    Comment envoyer gratuitement une newsletter par e-mail avec SendinBlue

    Comment utiliser un formulaire de contact pour créer votre liste de diffusion

  • SEO

    Comment corriger les erreurs de type de publication personnalisées 404 dans WordPress

    Augmentez le trafic vers votre site WordPress en 6 étapes faciles

    Comment ne pas suivre automatiquement les liens externes dans WordPress

    Comment se classer plus haut dans les moteurs de recherche

    Comment supprimer les liens brisés de votre site WordPress pour toujours

    Guide du débutant en référencement : introduction, préparation et jargon

    Recherche et utilisation de mots clés WordPress pour le référencement

    Améliorez le référencement avec des backlinks, la vitesse du site et plus encore

    10 fonctions les plus importantes de Yoast SEO pour WordPress

  • Réseaux sociaux

    Comment ajouter un rappel à une publication Instagram

    Comment devenir viral sur Instagram : le guide du débutant

    5 excellentes façons de diversifier vos mises à jour sur les réseaux sociaux pour générer plus de trafic et d’engagement

    5 façons de télécharger des vidéos Instagram

    Pouvez-vous utiliser Instagram pour développer votre entreprise ?

    6 façons efficaces de vous démarquer sur les réseaux sociaux

    Les 3 meilleurs outils de marketing Pinterest pour les blogueurs (utilisez-les pour générer des milliers de visiteurs par mois)

    6 astuces marketing intelligentes sur Instagram pour booster votre entreprise

    Comment convertir votre profil Instagram personnel en profil d’entreprise

  • More
    • Tutoriels
    • Shopify
    • Avis
    • Conseils
    • Sécurité
    • Logiciels et services
    • Génération de trafic
    • Guide du débutant
    • Showcase
Pas de résultat
Voir tous les résultats
  • Blogging

    Pourquoi la plupart des conseils de blogs échouent (et comment y remédier)

    7 questions essentielles que chaque blogueur doit se poser

    Comment rédiger du contenu qui donne envie à vos lecteurs d’en savoir plus

    Que faire lorsque votre blog est piraté

    Comment écrire plus vite : 10 astuces simples pour doubler votre sortie d’écriture

    Comment surveiller de manière productive les tendances et rédiger du contenu digne d’intérêt

    Comment planifier le contenu comme Walter Bishop

    Comment rédiger l’article de blog ultime : aide-mémoire d’un blogueur

    6 façons à toute épreuve de créer une communauté (et de transformer les adeptes occasionnels en fans délirants)

  • WordPress
    • Tout
    • Plugins
    • Themes

    9 meilleurs thèmes WordPress de génération de leads 2022

    Comment accepter les paiements ACH dans WordPress

    Comment ajouter une collaboration dans l’éditeur de blocs WordPress (style Google-Doc)

    Comment ajouter des plans de paiement « Achetez maintenant, payez plus tard » à WordPress

    Comment accepter Apple Pay dans WordPress (la manière FACILE)

    Comment précharger des liens dans WordPress pour des vitesses de chargement plus rapides

    Comment ajouter un formulaire de paiement PayPal dans WordPress (étape par étape)

    8 meilleurs thèmes WordPress pour la massothérapie 2022

    Comment désactiver les notifications de nouveaux utilisateurs dans WordPress

  • Email Marketing

    Comment développer votre liste de diffusion avec un quiz en ligne

    Comment utiliser les blogs invités pour créer votre liste de diffusion

    Les métriques de marketing par e-mail sur lesquelles chaque campagne devrait être basée

    E-mails HTML ou texte brut : quelle option est la meilleure pour votre liste de diffusion ?

    Comment envoyer gratuitement une newsletter par e-mail avec SendinBlue

    Comment utiliser un formulaire de contact pour créer votre liste de diffusion

  • SEO

    Comment corriger les erreurs de type de publication personnalisées 404 dans WordPress

    Augmentez le trafic vers votre site WordPress en 6 étapes faciles

    Comment ne pas suivre automatiquement les liens externes dans WordPress

    Comment se classer plus haut dans les moteurs de recherche

    Comment supprimer les liens brisés de votre site WordPress pour toujours

    Guide du débutant en référencement : introduction, préparation et jargon

    Recherche et utilisation de mots clés WordPress pour le référencement

    Améliorez le référencement avec des backlinks, la vitesse du site et plus encore

    10 fonctions les plus importantes de Yoast SEO pour WordPress

  • Réseaux sociaux

    Comment ajouter un rappel à une publication Instagram

    Comment devenir viral sur Instagram : le guide du débutant

    5 excellentes façons de diversifier vos mises à jour sur les réseaux sociaux pour générer plus de trafic et d’engagement

    5 façons de télécharger des vidéos Instagram

    Pouvez-vous utiliser Instagram pour développer votre entreprise ?

    6 façons efficaces de vous démarquer sur les réseaux sociaux

    Les 3 meilleurs outils de marketing Pinterest pour les blogueurs (utilisez-les pour générer des milliers de visiteurs par mois)

    6 astuces marketing intelligentes sur Instagram pour booster votre entreprise

    Comment convertir votre profil Instagram personnel en profil d’entreprise

  • More
    • Tutoriels
    • Shopify
    • Avis
    • Conseils
    • Sécurité
    • Logiciels et services
    • Génération de trafic
    • Guide du débutant
    • Showcase
Pas de résultat
Voir tous les résultats
ThemeLocal - Des conseils de blog qui fonctionnent comme par magie
Pas de résultat
Voir tous les résultats
  • Blogging
  • WordPress
  • Shopify
  • Email Marketing
  • Monétisation
  • SEO
  • Réseaux sociaux
  • Tutoriels
  • Avis
  • Conseils
  • Sécurité
  • Logiciels et services
  • Génération de trafic
  • Guide du débutant
  • Showcase
Accueil Conseils

Une introduction à l’anatomie d’un thème WordPress

Depuis 5 mois
dans Conseils
Temps de lecture:8 minutes de lecture
A A
0
Partager sur FacebookPartager sur Twitter

Il y a quelques temps, nous vous avions présenté le concept de création d’un thème WordPress à partir de HTML. Nous avons divisé le didacticiel en deux parties et aujourd’hui, nous nous efforçons d’étoffer les deux didacticiels, alors n’hésitez pas à considérer cet article comme la troisième portion de la série d’articles. Mon objectif est de démonter le thème WordPress pour vous donner une image claire de son fonctionnement (le thème).

Cet article suppose que vous avez une connaissance pratique de HTML et CSS. Je vais aller de l’avant et déclarer qu’avoir des compétences en HTML et CSS est une condition préalable à la conception de thèmes WordPress. Encore une chose, cet article évitera les gros mots et les concepts difficiles – il sera facile à comprendre, alors soyez prêt à vous amuser et à apprendre.

Un peu d’amorçage HTML

Chaque page Web HTML est divisée en différentes parties à l’aide de la balise

. Par exemple, vous pouvez diviser le corps () de votre site Web en plusieurs sections telles que la navigation, l’en-tête, le contenu principal, la barre latérale et le pied de page, entre autres.

Une fois que vous avez votre page Web en sections, vous pouvez commander (ou organiser) les sections comme vous le souhaitez en utilisant CSS. Ce processus est connu sous le nom de style et implique l’ajout d’autres éléments de style tels que la couleur, la taille, les bordures, les effets spéciaux, etc. Lorsque vous assemblez vos fichiers HTML et CSS et ajoutez quelques images, vous obtenez un site Web complet.

Les choses ne sont pas très différentes avec les thèmes WordPress. Comme nous l’avons vu dans la partie 1 de Comment créer un thème WordPress à partir de HTML, les thèmes WordPress sont divisés en différents fichiers. Si vous ne pouvez pas repérer une similitude à ce stade, permettez-moi de vous expliquer.

Les pages Web HTML statiques sont divisées en divisions (ce que nous avons appelé des sections plus tôt) à l’aide de balises

(ou de tableaux si vous êtes vraiment à l’ancienne). D’autre part, les thèmes WordPress sont divisés en différents fichiers php, qui sont ensuite reconstitués à l’aide de balises de modèle.

Par conséquent, au lieu d’avoir tous les éléments du corps (en-tête, contenu principal, barre latérale, pied de page, etc.) dans un seul fichier (comme c’est le cas avec le HTML statique), chacun des éléments du corps (dans les thèmes WordPress) réside dans des fichiers séparés.

Ainsi, l’en-tête vivra dans header.php, la barre latérale trouvera home dans sidebar.php, le contenu principal vivra dans index.php, ou single.php (si c’est un article) ou page.php (si c’est une page ). La section pied de page vivra dans footer.php et ainsi de suite.

Suivez-vous ? Découvrez l’illustration ci-dessous :

html-wordpress=structure

D’après notre illustration ci-dessus, , et sont appelés balises de modèle. Leur travail consiste à récupérer header.php, sidebar.php et footer.php dans cet ordre à partir de votre répertoire de thème, et à afficher le contenu dans votre index.php, complétant ainsi la page Web.

Ne laissez pas le .php l’extension vous fait peur, le contenu des fichiers php n’est que du code HTML que vous connaissez bien. Par exemple, votre header.php peut contenir une navigation de liste HTML typique. De même, vous pouvez mettre du code HTML typique dans footer.php, sidebar.php et index.php.

Vous pouvez également placer le boucle.php fonction dans votre index.php (ou n’importe où vous voulez) pour afficher vos articles de blog, mais je devrais ralentir et revenir à l’anatomie des thèmes WordPress. J’ai mentionné une ou deux choses à propos de la boucle dans la partie 2 de la création d’un thème WordPress à partir de HTML. et nous en parlerons (la boucle) et d’autres fonctions à l’avenir.

En route…

Un thème WordPress de base est composé d’au moins quatre fichiers modèles, à savoir :

  1. index.php
  2. en-tête.php
  3. barre latérale.php
  4. pied de page.php

Voyons ce qui se passe dans chacun de ces magique des dossiers:

Fichier de modèle Index.php

C’est le fichier principal sans lequel vous n’avez pas de thème WordPress fonctionnel. C’est le premier (ou par défaut) fichier qui se charge lorsque vous visitez un site Web WordPress. Considérez-le comme l’équivalent de index.html.

Un index.php typique dans les thèmes WordPress ressemblera à ceci :

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Vous pouvez ajouter la boucle entre et pour afficher les articles de blog sur la page d’accueil (index.php) comme indiqué ci-dessous :

<?php get_header(); ?>
<div class="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="post-header">
	<div class="date"><?php the_time( 'M j y' ); ?></div>
	<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	<div class="author"><?php the_author(); ?></div>
	</div><!--end post header-->
	<div class="entry clear">
	<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
	<?php the_content(); ?>
	<?php edit_post_link(); ?>
	<?php wp_link_pages(); ?>
	</div><!--end entry-->
	<div class="post-footer">
	<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
	</div><!--end post footer-->
	</div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
	<div class="navigation index">
	<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
	<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
	</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Fichier de modèle Header.php

Ce fichier de modèle contient votre code d’en-tête, votre navigation et votre code d’en-tête HTML. Fondamentalement, header.php stocke tout ce que vous voulez afficher en haut de votre site Web. Vous savez, des choses comme le titre de votre site Web et des trucs comme ça.

Vous créez également un lien vers votre feuille de style CSS dans le header.php. Voici un exemple basique de header.php :

<html>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>
<body>
<div class="header">
<p>This is header section. Put your logo and other details here.</p>
</div>

Fichier modèle Sidebar.php

Sidebar.php contient tout ce dont vous avez besoin pour apparaître sur votre (vos) barre(s) latérale(s). La barre latérale contient des menus supplémentaires, des widgets, des catégories, des icônes de réseaux sociaux, du contenu personnalisé, du code HTML tel que des publicités, etc.

Sidebar.php peut contenir un balisage HTML pur ou des appels de fonction php selon vos besoins. En tant que tel, un sidebar.php de base pourrait ressembler à :

<div class="sidebar">

Put your custom content or HTML code here.

</div>

Fichier de modèle Footer.php

Que pensez-vous va dans footer.php? Vous pouvez mettre vos informations de copyright ici, des menus supplémentaires, des liens, des icônes de réseaux sociaux – tout ce que vous voulez ! Souhaitez-vous voir à quoi ressemble un footer.php de base ? Ici:

<footer class="footer">

Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.

</footer>

</body>

</html>

Remarquez les balises de fermeture et dans le footer.php ? Pouvez-vous deviner pourquoi ils doivent être inclus dans le footer.php ? De même, pouvez-vous deviner pourquoi les balises d’ouverture et sont incluses dans le header.php ? Faites-nous part de vos suppositions dans la section commentaires à la fin de cet article 😉

Les quatre fichiers de modèle que nous venons de couvrir ci-dessus constituent un thème WordPress très basique. Il existe de nombreux autres fichiers modèles ; il existe un fichier modèle pour chaque élément que vous voyez sur un thème WordPress, qu’il s’agisse de commentaires, de résultats de recherche et de pages d’erreur 404, pour n’en citer que quelques-uns.

Pour bien comprendre l’anatomie d’un thème WordPress, vous devez vous familiariser avec les différents fichiers modèles. Vous pouvez parcourir tout tuiles de modèles utilisables sur WordPress.

Ensuite, nous avons des balises de modèle, que WordPress utilise pour récupérer les fichiers de modèle à partir du répertoire du thème. Vous pouvez en savoir plus sur balises de modèle et le rôle qu’elles jouent sur WordPress.

Résumé

Un thème WordPress se compose des éléments anatomiques suivants :

  • Fichiers modèles tels que index.php, header.php, search.php, category.php, etc.
  • Balises de modèle telles que , etc.
  • CSS
  • Images et autres fichiers multimédias
  • fichiers JavaScript

Et voici une illustration qui résume l’anatomie d’un thème WordPress :

Envie de continuer à apprendre ? Consultez le détail guide d’anatomie thématique dans le codex WordPress.

Conclusion

Chaque thème WordPress que vous voyez sur le Web utilise la même structure anatomique (même notre populaire Thème WordPress total), que vous pouvez personnaliser pour répondre à vos besoins. Une fois que vous avez compris les bases du développement de thèmes WordPress, il n’y a aucune limite à ce que vous pouvez faire avec/aux thèmes WordPress.

Partager26Tweeter16Envoyer
Article précédent

Comment devenir un influenceur à base de plantes sur Instagram

Article suivant

Une machine à karaoké était mon cadeau de Noël préféré – voici pourquoi vous ne devriez pas en avoir une

Similaire Postes

Tutoriels

Nouvelle fonctionnalité : les couches de chronologie étendues dans Maker offrent aux utilisateurs une plus grande flexibilité créative

Depuis 1 jour
Comment

Comment publier une publication en gras sur Facebook

Depuis 2 jours
Technologie

Sonos Ray est une barre de son économique conçue pour améliorer le son de votre téléviseur

Depuis 2 jours
Charger plus
Article suivant

Une machine à karaoké était mon cadeau de Noël préféré - voici pourquoi vous ne devriez pas en avoir une

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

RECOMMANDÉ

Comment changer le fond d’écran sur Mac : 2 façons simples !

Depuis 2 mois

Test Karcher EWM 2

Depuis 6 mois

BT Sports fusionne avec Warner Bros pour affronter Sky Sports

Depuis 3 jours

Comment rendre votre liste d’amis privée sur Facebook

Depuis 3 semaines

Comment supprimer votre historique de recherche sur Facebook

Depuis 3 semaines
ThemeLocal – Des conseils de blog qui fonctionnent comme par magie

Nous aidons les entrepreneurs intelligents à transformer leurs blogs en entreprises rentables. Nous sommes un blog primé qui aide les blogueurs et les entrepreneurs depuis 2020.

Suivez-nous

Nouvelles récentes

Comment regarder la dernière journée de la Premier League : où diffuser les matchs au Royaume-Uni

mai 22, 2022

Sound and Vision: l’événement Sky’s Up Next montre qu’il se concentre sur le contenu original

mai 22, 2022
  • Conditions d’utilisation
  • Politique de confidentialité
  • Politique de cookies
  • Contactez nous

© 2022 ThemeLocal. Tous droits réservés.

Pas de résultat
Voir tous les résultats
  • Blogging
  • WordPress
    • Plugins
    • Themes
  • Shopify
  • Email Marketing
  • Monétisation
  • SEO
  • Réseaux sociaux
  • Tutoriels
  • Avis
  • Conseils
  • Sécurité
  • Logiciels et services
  • Génération de trafic
  • Guide du débutant
  • Showcase

© 2022 ThemeLocal. Tous droits réservés.