Introduction au framework Genesis

Il existe de nombreux frameworks WordPress. La plupart d'entre eux sont payés et certains sont étonnamment gratuits comme hybride ou thématique. La plupart des utilisateurs de WordPress utilisant des frameworks utilisent soit Thesis, soit Genesis. "Pourquoi utiliser un cadre?", Pourrait-on demander. C'est à cause de sa simplicité et de sa franchise. Bien qu'il soit difficile de passer à un framework et qu'il soit difficile de l'apprendre au début, cela s'avérera payant à long terme..

Il peut y avoir beaucoup de raisons pour choisir d’utiliser un framework par rapport à un thème WordPress standard. Certains d'entre eux peuvent être:

  • Code propre et sémantique
  • Plus de contrôle sur l'apparence de votre site Web
  • De meilleures options de référencement
  • Beaucoup de thèmes à choisir
  • Option pour créer vos propres thèmes pour enfants, (Plus d'informations sur le thème pour enfants en une minute!)
  • Widgets personnalisés et mise en page
  • Et oui le service client rapide

J'en ai peut-être manqué quelques-uns, mais ceux-ci sont à peu près ceux qu'il fallait mentionner.


Quels sont les thèmes de l'enfant?

En termes simples, Genesis est le cadre, tout comme un cadre photo suspendu à un mur. Ce cadre est vide et vous aurez besoin d'une image pour que les spectateurs puissent la voir. Cette image est le thème de l'enfant, et les téléspectateurs sont vos visiteurs quotidiens sur le site. De nombreuses organisations vous fournissent des thèmes enfants personnalisés. Les thèmes enfants ont leurs propres feuilles de style en cascade et vous pouvez les modifier facilement. Le thème de l'enfant a aussi un functions.php fichier, dans lequel vous pouvez ajouter votre propre code personnalisé et le faire fonctionner comme vous le souhaitez. Le thème enfant contient en fait trois fichiers et le reste des fichiers sont dans le thème parent..


Pourquoi utiliser un cadre?

La réponse est simple, une fois que vous commencez à utiliser le framework, vous vous y habituerez en un rien de temps. Vous pouvez apporter vos propres modifications à un thème préexistant qui l'accompagne ou créer vous-même le thème de vos rêves que vous avez toujours voulu..


Lequel: thèse ou genèse?

Genesis est conçu pour les concepteurs et Thesis est conçu pour les programmeurs

Il est assez difficile de choisir entre ces deux cadres de premier plan dans la famille WordPress. Lorsque vous choisissez entre eux, vous devrez peut-être examiner vos options. Ils peuvent varier d'une personne à l'autre. Certaines personnes aimeraient un design très simple et minimaliste et d'autres aimeraient tout à fait le contraire. Lors du choix entre ces deux cadres, la conception peut être un facteur important. Genesis offre plus d'options de conception que Thesis, mais les thèmes pour enfants de Genesis sont moins nombreux que ceux de Thesis. Il existe de nombreux thèmes pour enfants disponibles pour Thesis sur Internet, à la fois gratuits et payants. Donc, pour utiliser toutes les fonctionnalités de conception du framework Genesis, il faut être prêt à se salir les mains avec des crochets et des codes courts. Certaines personnes disent aussi que Genesis est conçu pour les concepteurs et Thesis est conçu pour les programmeurs..


Options de conception

Le design joue un rôle essentiel dans notre vie. C'est un élément très important de la nature et si vous regardez autour de vous, cela reflètera un peu votre identité. Si vous regardez la conception de l'ensemble du réseau Envato, vous comprendrez l'idée. L'intégration du design dans les sites Web devient de plus en plus importante de nos jours. Les utilisateurs ont tendance à passer de plus en plus de temps sur des sites Web aux conceptions nouvelles et innovantes. En ce qui concerne la conception de vos sites Web, Genesis offre à ses utilisateurs de nombreuses options. Il existe des thèmes enfants prédéfinis que vous pouvez modifier. De nombreuses options de mise en page sont également incluses. Vous pouvez également modifier la typographie en ajoutant Google Fonts et bien plus encore..


Crochets Genesis

Chaque cadre est livré avec son propre jeu de crochets, ce qui vous permet de contrôler l'aspect et la convivialité du design. Ces crochets fournissent à l'utilisateur une commande complète même sur des détails mineurs. De plus, vous pouvez le changer quand vous le souhaitez et cela aussi, très facilement. Donc, vous payez pour cela au début et cela vous fait gagner du temps et vous permet de travailler à long terme. On dirait une bonne affaire pour moi!

Il vous fournit de bonnes fonctionnalités. vous pouvez ajouter et supprimer de nombreux widgets. Vos widgets personnalisés fonctionneront également de la même manière avec le framework, comme avec tout autre design. Vous pouvez pimenter la barre latérale avec des boutons de partage de médias sociaux, un plugin Twitter et bien plus encore..


Recherche optimisée

Le cadre est bien construit en gardant à l'esprit le référencement. Son code est sémantique et vous n'aurez jamais besoin d'un plugin SEO comme Yoast ou All-in-One. Selon StudioPress, ils auraient collaboré avec Greg Boser, partenaire et vice-président directeur de BlueGlass Interactive..

Toutes les options liées au référencement sont intégrées au framework et vous ne nécessitez absolument aucun plugin. Les options de référencement fournissent également des URL canoniques personnalisées pour les publications et les pages. En outre, il existe une option pour l'URL de redirection personnalisée que vous pouvez utiliser pour rediriger votre message précédent vers l'URL de votre choix. Une des choses qui m'a le plus plu au sujet de ses options de référencement, c'est qu'il propose des mots-clés personnalisés pour chaque article que vous publiez sur votre site Web. Il devient facile pour vous d'ajouter des mots-clés pour votre article sans avoir besoin de plug-ins supplémentaires. Ainsi, les moteurs de recherche auront plus de facilité à trouver l'article en fonction des mots-clés personnalisés.!


Que faire lorsque vous êtes bloqué à un moment donné

Si vous êtes comme moi et fouillez le code, je suis sûr que vous allez rester bloqué à un moment ou à un autre. Il n'y a pas lieu de paniquer, car il existe une multitude d'articles et de tutoriels sur Genesis qui vous aideront. Et si ce problème spécifique persiste, vous pouvez toujours choisir le support fourni par l'équipe de StudioPress. Ils supprimeront sûrement toutes les erreurs que vous auriez pu commettre en fouillant dans le code.

Il existe également des didacticiels de base sur le site Web de StudioPress. Ils fournissent également des didacticiels vidéo, qui sont excellents et faciles à suivre, et ils vous aideront sûrement à utiliser le framework après l'avoir acheté. Vous pouvez également engager de nombreux développeurs si vous avez des pièces supplémentaires dans votre poche.!


Configuration de Genesis sur votre installation WordPress

C'est aussi simple que possible. Extraire le genèse dossier sur votre bureau; maintenant vous avez un nouveau dossier nommé genèse.

Ensuite, connectez-vous à votre compte FTP avec votre logiciel FTP. J'utilise FTP Zilla. Aller vers wp-content / themes et télécharger le genèse dossier que vous avez extrait plus tôt. Une fois le téléchargement terminé, nous allons télécharger un thème enfant pour Genesis Framework. Vous pouvez acheter des thèmes pour enfants sur le site Web de StudioPress ou en créer un vous-même. Le thème de l'enfant fonctionne essentiellement comme un costume pour notre site Web. Nous pouvons changer l'apparence de notre site Web en modifiant notre thème Enfant..

C'est à peu près ça. Vous venez de configurer votre premier thème WordPress en utilisant le framework Genesis.


Styling Your Genesis avec Responsive Childtheme

Au lieu de créer votre propre thème enfant à partir de rien, vous pouvez télécharger un exemple de thème enfant à partir du site Web de StudioPress. Il contient tout le code de base pour ressembler à une page Web. La plupart des changements que vous allez faire concernent le «styles.css" et le "functions.php" des dossiers. La meilleure chose à propos du thème exemple de l’enfant est que sa mise en page est réactive, ce qui est assez agréable étant donné qu’il est gratuit.


Concevez-vous un thème pour enfants

La première étape consiste à concevoir vous-même un thème enfant dans Photoshop ou Gimp. Je vais faire le vieux thème WordPress Kubrick pour ce tutoriel à titre d'exemple. La raison pour laquelle j'utilise le thème Kubrick est qu'il est simple et facile à suivre. Vous pouvez également concevoir votre propre site Web dans Photoshop et le convertir en thème enfant pour Genesis..


Concevoir l'en-tête

Nous allons travailler en modifiant d'abord la couleur de fond du site. Dans le fichier image, vous pouvez voir que l’arrière-plan est d’échelle grisâtre. Nous allons donc ajouter des styles dans le fichier CSS du thème Sample Child. Assurez-vous que vous éditez le fichier du thème enfant exemple et non celui de Genesis Framework. Maintenant, nous allons ajouter le code suivant dans notre styles.css déposer et sauvegarder.

 corps color: # d5d6d7; 

Rappelez-vous que le thème enfant a déjà son propre style. Tout ce que vous avez à faire est de trouver la classe ou la classe appropriée et de lui attribuer un style..

De même styliser l'en-tête de votre site web. Je vais ajouter le code CSS pour le style de l'en-tête et pour centrer le texte avec le code suivant.

 #wrap box-shadow: 0 0 5px # 999999; marge: auto 15px; rembourrage: 0; largeur: 960px;  #header background: aucune répétition faire défiler 0 0 #FFFFFF; border-radius: 5px 5px 0 0; marge: 0 auto; hauteur minimale: 140px; remplissage: 10px 10px 0;  # title-area background: aucune répétition faire défiler 0 0 # 73A0C5; border-radius: 5px 5px 5px 5px; float: gauche; débordement caché; remplissage: 30px 0; text-align: center; 

Typographie

Nous allons maintenant nous concentrer sur la création de la typographie générale du site Web. Pour que le titre soit affiché en blanc, nous allons trouver le div de «title» et le code hexadécimal pour la couleur blanche. De même, nous ajouterons de la couleur blanche au div de «description».

 #title a, #title a: hover color: #FFF; remplissage: 0 0 0 20px; texte-décoration: aucun;  #description color: #FFF; taille de police: 14px; remplissage: 0 0 0 20px; 

J'aime le thème Typographie de l'exemple d'enfant, donc je vais le laisser tel quel. La meilleure chose à propos de Genesis est qu’elle utilise Google Fonts. Il est ainsi plus facile pour vous d’incorporer différents styles dans votre site Web, à votre guise. Les polices Google sont gratuites et vous pouvez utiliser le thème sur votre site Web. Pour en savoir plus sur l'utilisation des polices Google, cliquez ici..


Navigation et barre latérale

Vous pouvez configurer Navigation pour qu'il apparaisse dans les paramètres du thème Genesis. Faites défiler la liste jusqu'à Paramètres de navigation et choisissez celui qui correspond à vos besoins. Avant de pouvoir ajouter une barre de navigation, vous devrez créer un "Nouveau menu" à partir de l'onglet "Apparence". Ajoutez un nouveau menu et créez de nouveaux liens pour vos pages ou catégories dans le menu nouvellement créé. Comme il n'y a pas de menu dans cet exemple, nous allons choisir de ne pas afficher la navigation principale..

Le style de la barre latérale est beaucoup plus facile et ne nécessite aucun code, voire un peu, selon vos besoins. Pour ajouter différents éléments dans la barre latérale, accédez à la zone Widgets de Dashboard et ajoutez une zone de recherche. Vous pouvez également ajouter des publications récentes, des catégories et d'autres widgets selon votre choix..

Bien que le thème Sample Child ait un meilleur style que celui de la conception d'origine, tout dépend de votre opinion personnelle. Pour le style, vous pouvez supprimer les bordures du bas et réduire la taille de la police dans le CSS des widgets, ce qui la fera ressembler au design original..


Touches finales

Pour les dernières retouches, nous allons personnaliser le thème. Pour cela, nous allons éditer l'en-tête du styles.css. Bien que ce soit censé être la première chose à faire lors de la construction d’un thème, mais pour une raison quelconque, je le fais habituellement pour la dernière fois..

Ensuite, nous allons changer le texte de pied de page qui affiche toujours le thème «Exemple d’enfant». Pour le modifier, ouvrez le thème de votre enfant functions.php et ajoutez le code suivant en bas.

 / ** Personnalise les crédits * / add_filter ('genesis_footer_creds_text', 'custom_footer_creds_text'); fonction custom_footer_creds_text () $ creds = '

'; $ creds. = 'Copyright ©'; $ creds. = date ('Y'); $ creds. = ' · Kubrik Genesis · Construit sur le framework Genesis '; $ creds. = '

'; renvoyer $ crédits;

Changer la mywebsite.com à votre désiré. Cliquez sur Enregistrer, chargez-le sur le serveur et actualisez votre site Web. Vos réglages auront lieu tout de suite.


Conclusion

Les options de thème de Genesis sont quelque peu réduites par rapport à celles de Thesis. De plus, si Genesis avait intégré un générateur de plan de site, il aurait été formidable. Mais je suppose que vous n’acquérez jamais quelque chose de complet dans tous ses aspects. Il n'est pas nécessaire d'acheter une licence de développeur supplémentaire pour utiliser Genesis sur plusieurs sites Web. Vous économisez ainsi de l'argent. Autre que cela, la sécurité et le support, les deux sont de qualité supérieure.

Pour concevoir votre site Web, cela semble facile et simple. Les changements sont généralement très faciles à faire. Vous obtenez un thème réactif sur lequel vous pouvez apporter des modifications en fonction de vos goûts. Vous utilisez des milliers de polices Google pour votre site Web. Vous pouvez rendre votre site aussi coloré que vous le souhaitez. Il existe également des thèmes astucieux de StudioPress avec une touche artistique. Vous obtenez de bonnes et puissantes options de référencement pour votre site Web. Pour moi, c'est une offre plutôt complète. Donc dans l’ensemble, c’est un cadre agréable et vous pouvez l’apprendre en très peu de temps. Comment avez-vous trouvé la Genèse? Faites-nous savoir dans les commentaires ci-dessous.