Création de la boucle WordPress et personnalisation du CSS

En supposant que vous ayez terminé la partie 1, dans cette section, nous allons créer la boucle WordPress et personnaliser le CSS. La boucle WordPress est un code PHP utilisé par WordPress pour afficher du contenu sur votre site Web. Pour éditer la boucle, vous devez être familiarisé avec PHP. Si ce n'est pas le cas, de nombreuses ressources sont disponibles en ligne pour vous aider à apprendre les bases. Lorsque vous avez une compréhension de base de PHP, ouvrez votre éditeur de texte et créez un nouveau fichier appelé loop.php. Dans ce fichier, nous allons créer la boucle WordPress. La première chose que vous devez faire est de dire à WordPress de charger le fichier header.php que nous avons créé dans la partie 1. Ajoutez le code suivant à loop.php : Ensuite, nous devons créer la boucle WordPress. La boucle est responsable de l'affichage de tout le contenu de votre site Web. Pour ce faire, il parcourt tous les articles de votre base de données WordPress et les affiche sur la page. Pour créer la boucle, ajoutez le code suivant à loop.php : Ce code vérifie s'il y a des publications dans la base de données WordPress. S'il y a des messages, il parcourra chacun d'eux et l'affichera sur la page. Maintenant que la boucle est configurée, nous devons ajouter du contenu à l'intérieur. Pour cet exemple, nous afficherons simplement le titre et le contenu de chaque publication. Ajoutez le code suivant dans la boucle : ce code affiche le titre et le contenu de chaque message. Maintenant que la boucle est configurée, nous devons ajouter du CSS pour la styliser. Dans votre éditeur de texte, créez un nouveau fichier appelé style.css. Ajoutez le code suivant à style.css : .post { margin-bottom : 40px ; } Ce code ajoute une marge au bas de chaque message. Cela aidera à espacer les messages sur la page. Maintenant que nous avons configuré la boucle et le CSS, nous devons ajouter quelques fichiers supplémentaires à notre thème. Dans votre éditeur de texte, créez un nouveau fichier appelé footer.php. Ajoutez le code suivant à foote

(Partie 2) Ce que fait Bootstrap pour un thème WordPress et pourquoi il est si populaire. Ce didacticiel est la deuxième partie d'une série de didacticiels qui vous guideront tout au long du processus de création d'un thème WordPress à partir de zéro avec le framework CSS Bootstrap. Il s'agit de la troisième et dernière section de notre discussion sur la création de la zone d'en-tête , de la navigation, de la barre latérale et du pied de page. Pour marquer le blog comme actif, le slogan et le nom du blog seront désormais affichés en haut de la page. Dans la zone de pied de page, il y aura un widget appelé Footer - Copyright Text. Voici quelques options pour incorporer cette section dans WordPress. Un thème WordPress est widgetisé en y ajoutant des widgets supplémentaires et des zones de widgets.

Pour démarrer la fonction bootstrapstarter_widgets_init(), ajoutez les lignes suivantes au fichier footer.php : footer-copyright-text et sidebar-module-inset. Il y a deux barres latérales ici : une avec un fond gris et l'autre avec un fond noir. Lorsque vous regardez le modèle de démarrage pour la première fois, un arrière-plan orange apparaît pour le widget supérieur du widget (À propos), et si vous entrez un titre, il sera automatiquement entouré de balises h4. En utilisant dynamic_sidebar(), nous pouvons afficher les widgets affectés à la zone appelée Footer - Copyright Text. Créez une barre latérale de blog complète en utilisant les instructions étape par étape de ce didacticiel étape par étape. Le fichier final index.php contient les résultats : la fonction Résultats, qui se trouve juste après la zone blog . Il s'agit de la version finale du document qui peut être téléchargée ici.

Il est également fourni avec des correctifs CSS et des ajustements pour la barre de navigation et les barres latérales. Sur cette page, vous pouvez rencontrer des liens d'affiliation externes qui peuvent entraîner le versement d'une commission à LyraThemes.com si vous les utilisez. Nous ne faisons aucune déclaration ou réclamation concernant nos opinions écrites ou critiques sur cette page.

Pouvons-nous utiliser le thème Bootstrap dans WordPress ?

La façon la plus simple d'utiliser Bootstrap dans WordPress est d'activer un thème réactif qui le prend déjà en charge. Avec Bootstrap, vous pouvez l'utiliser sans avoir à le télécharger ou à l'installer depuis le développeur du thème, car le framework est inclus dans bon nombre de leurs thèmes.

L'installation d'un thème ou d'un plugin n'est pas aussi simple que de créer un site Web Bootstrap avec WordPress. Pour créer un thème WordPress, vous devez avoir un compte d'hébergement WordPress. En utilisant Bootstrap comme base, WordPress et Bootstrap peuvent fonctionner ensemble. De nombreux détails techniques sont cachés sous l'interface conviviale des deux systèmes. Vous ne pourrez pas créer un thème WordPress à partir de zéro très souvent. Pour avoir une idée d'un thème WordPress basé sur Bootstrap, copiez quelques-uns des fichiers nécessaires d'une version précédente. Le thème s'appellera WPBootstrap et le répertoire portera le même nom (en minuscule).

Comment puis-je ajouter Bootstrap à un thème WordPress ? Il existe plusieurs options. Voici les bibliothèques Bootstrap CSS et JavaScript que vous pouvez incorporer dans les fichiers header.php et footer.php. Une image d'aperçu peut être ajoutée au thème en la téléchargeant dans le répertoire du thème, puis en utilisant le fichier screenshot.png. La création d'un thème WordPress demande beaucoup de travail, je recommande donc de copier les fichiers d'un autre thème. Parce que Bootstrap a son propre ensemble de règles et de pratiques, la procédure pour les apprendre doit également être suivie. En fait, WordPress et Bootstrap ont des communautés passionnées, vous ne savez donc jamais ce qui va suivre.

Bootstrap est-il meilleur que WordPress ?

Si vous débutez et que vous ne connaissez pas grand-chose à la conception Web, utiliser Bootstrap est une bonne idée car il est simple à apprendre et à utiliser. Si vous souhaitez améliorer vos compétences en conception de sites Web , WordPress peut être la meilleure option.

Lors du développement d'un site web, il est difficile de trancher entre Bootstrap et WordPress. Ici, nous allons passer en revue une comparaison rapide de Bootstrap et WordPress, ainsi qu'une ventilation complète de chacun. En utilisant cette méthode, vous pouvez décider de la plate-forme la plus appropriée pour votre site Web. Les sites Bootstrap sont moins chers à charger que les sites WordPress. Les sites Web créés avec Bootstrap sont accessibles depuis n'importe quel appareil. Les meilleurs sites Web WordPress fonctionnent mieux sur de grands écrans, que ce soit sur des PC, des tablettes ou des ordinateurs portables. Vous devez être un programmeur pour pouvoir faire du référencement sur page pour votre site Web ou vos pages dans Bootstrap.

React-Bootstrap est une bibliothèque qui combine la puissance de React et la flexibilité de Bootstrap. Bootstrap 4 est une plate-forme robuste avec une conception réactive , une conception cohérente et toutes les fonctionnalités qui lui manquent. Vous n'aurez aucun mal à démarrer car il est très simple à utiliser et simple à apprendre. React-Bootstrap est une bibliothèque fantastique pour créer des applications Web réactives de haute qualité.