Comment personnaliser 215 pour en faire votre propre

J’ai récemment fait l’éloge du nouveau thème WordPress par défaut pour 2015 en raison de son aspect propre et de son souci de partager un contenu magnifique. J’aime son rythme vertical, la disposition de la barre latérale et son comportement réactif. C’est un très beau sujet. Bien que j’aime son apparence, il y a toujours de la place pour la personnalisation. Le 215 offre quelques options de personnalisation, mais vous voudrez peut – être faire plus pour modéliser vos préférences. Dans cet article, je vais vous montrer plusieurs façons de transformer un thème déjà fantastique en un design de site Web qui vous convient. Jetons un coup d’oeil aux options de personnalisation intégrées, à certains plug – ins pour ajouter des améliorations de style supplémentaires et à des solutions d’encodage automatique pour certains problèmes, quoique mineurs.
Au cours de cet article, nous explorerons: l’utilisation du plug – in de menu social pour ajouter des images de fond de couleur personnalisées par défaut pour le contenu principal et les barres latérales ajouter le support pour les polices Google ajouter des flux Twitter aux barres latérales ajouter le support pour les bibliothèques de tuiles, Partager des liens et d’autres solutions d’encodage déplacent la barre latérale vers la droite, en ajoutant des crédits d’image sous le poste supprimer la section auteur sous le poste changer la couleur de la boîte de contenu thème par défaut personnaliser l’endroit principal où aller est l’apparence dans l’administration > personnaliser la section. Cela permet au personnalisateur de thème d’afficher les options suivantes: Section personnalisée disponible pour 215 titres et slogans de site cette section du Programme personnalisé vous permet de configurer les titres et sous – titres de site. C’est une fonctionnalité standard pour presque tous les sujets. De plus, vous pouvez choisir (via la case à cocher) de l’éteindre complètement. Ceci est utile si vous voulez ajouter un titre graphique avec un logo
Thèmes pour enfants. J’ai découvert que dans ce titre et sous – titres, ils peuvent même être utilisés de façon satisfaisante pour une courte biographie. Je préfère ça aux widgets. Différences entre les titres et sous – titres et les widgets. La capture d’écran ci – dessus affiche le titre et le Sous – titre à gauche et le Widget texte normal à droite. Il est aussi grand que le titre du Widget, mais malheureusement, le Widget ne peut pas être placé au – dessus du menu, en haut de la page, comme je l’espère. La section couleurs donne accès aux options personnalisées les plus visibles: changer la couleur. Il y a quatre paramètres: le schéma de couleurs de base: vous permet de sélectionner la couleur par défaut pour le contenu et les barres latérales. Couleur de fond: définit la couleur de fond de la zone de contenu principale. La boîte de contenu conserve sa couleur originale. Couleur du texte du titre et barre latérale: définit la couleur du texte du titre et de la barre latérale. La barre latérale devient un titre sur un écran plus petit. Couleur de fond du titre et de la barre latérale: définit la couleur de fond de la barre latérale \/ zone de titre. Quelques changements de couleur. Les deux parties du titre et de l’image de fond contiennent un réglage pour ajuster l’image de fond de la barre latérale et de la zone de contenu, respectivement. Même si vous utilisez des images ici, assurez – vous de définir une bonne couleur de fond. Si quelque chose tourne mal et que votre image ne peut pas être chargée, vos lecteurs verront encore quelque chose de visuellement agréable. Définit l’image de fond de la barre latérale et du contenu. Si vous voulez savoir, il n’y a aucun moyen d’avoir une image de fond qui s’étend tout le temps et de rendre la barre latérale noire un peu opaque. Les captures d’écran ci – dessus ressemblent à ça, mais ce sont en fait deux images. Navigation, widgets et première partie de la page
\
Typecase vous permet également d’ajouter des sélecteurs personnalisés pour adapter les polices à des éléments spécifiques. C’est une façon très puissante d’ajouter des rôles à un sujet sans changer le sujet lui – même. Êtes – vous intéressé à ajouter le support pour les polices Google? Ajouter un flux Twitter pour plus d’informations Ajouter un flux Twitter à la barre latérale peut être l’une des meilleures façons pour les gens d’interagir avec vous. Récemment, j’a i rencontré un plug – in appelé Easy Twitter Feed, qui est l’un des meilleurs que j’ai utilisés jusqu’à présent. L’installation est aussi simple que le collage d’un ID Widget et vous permet de personnaliser largement l’apparence du flux.
Vous voulez ajouter un flux Twitter? Détails bibliothèque côte à côte, partage de liens, etc. Avec près de 14 millions de téléchargements, jetpack est actuellement l’un des plug – ins les plus populaires. Il a été créé par nos amis d’Automatic et contient un grand nombre de fonctionnalités qui peuvent être activées ou désactivées sélectivement. La galerie de tuiles est l’une de mes fonctionnalités préférées, qui crée automatiquement une galerie de style maçonnerie à partir du Code court de la galerie. La beauté de faire cela est que lorsque vous entrez dans la galerie, vous n’avez pas besoin de faire quoi que ce soit de spécial, il suffit d’activer la fonction.
Un autre ordre de travail
B) la question; Ne pas outrepasser en définissant la marge de droite: 20px dans le Sous – thème. Vous voulez dire que ce projet devrait avoir un bord droit de 20 pixels en plus du bord gauche. Dans ces cas, vous devez écrire: marge gauche: auto; Distance droite: 20px; Marge gauche: automatique; Distance droite: 20px. C’est évident quand vous écrivez toutes les règles, mais parfois je fais cette erreur quand je réécrit les règles et passe du temps à trouver le mauvais endroit! Le dernier défi consiste à s’assurer que le séparateur de fond est aligné sur notre nouvelle disposition. Utilisez le pseudo – sélecteur:: avant pour ajouter un séparateur. Nous avons complété le changement de barre latérale en nous assurant que l’emplacement de l’élément est fixé à droite plutôt qu’à gauche. Assurez – vous d’inclure le code dans votre requête média. Nous voulons juste appliquer ces styles au grand écran. Sur les plus petits écrans, la barre latérale devrait toujours être le titre. Par défaut, cela se produit sur un petit écran sur le Bureau, 955 pixels ou 59.6875 em. Quel est le problème avec l’ajout d’un crédit d’image sous le post? Ce que je veux dire, c’est que si j’utilise des images de l’ensemble du Web, qui est responsable, mais n’a pas choisi d’augmenter le crédit d’image en 2015. Comment le réparer? Utilisez des champs personnalisés avancés et des sous – thèmes pour saisir des informations dans le modèle. Je vais vous montrer comment je fais cela sur mon site Web, mais pour plus d’informations informelles à ce sujet, consultez le processus de création d’un Journal d’exercice en utilisant wordpress pour en savoir plus sur son fonctionnement. Solutions dans les champs personnalisés avancés j’ai créé un champ de texte WYSIWYG qui s’affiche sur chaque page d’édition du billet. J’aurais pu le définir comme un champ URL, mais ça me limiterait à l’avant. Si je l’aime, je peux utiliser le champ texte pour écrire une ou deux phrases librement sur l’image. Champ de crédit d’image que j’ai créé dans ACF. Zone a
À ce stade, vous pouvez ajouter des crédits d’image à tous les messages, mais ils n’apparaissent pas à l’avant. Ouvrez le fichier de fonction. PHP et nous utilisons un crochet pour ajouter cette information après le contenu du message: instructions pour charger 5f47292f15cbc2e2d4ff ce code obtient le contenu original du message et le renvoie après avoir ajouté notre propre chaîne de crédit d’image. Notez que j’a i utilisé un format HTML spécifique: instructions pour charger 5f47292f15cbc2e2d4ff je l’ai fait parce que jetpack utilise la même structure pour la sortie de certains de ses contenus, comme les parties partagées. Je voulais qu’il imite ça, alors j’ai utilisé le même HTML. Avant d’essayer, ayez un style. CSS à votre style. CSS peut légèrement changer d’apparence. Utilisez la commande suivante pour ressembler à un module jetpack: instructions pour charger 5f47292f15cbc2e2d4ff Notez que j’a i finalement utilisé un sélecteur pour changer la taille de police de toutes les parties. Le dernier paragraphe. Contenu du chapitre. Si vous voulez que le texte soit un peu plus grand, vous pouvez le supprimer. Quel est le problème avec le crédit d’image et le partage de jetpack pour supprimer la section auteur? La biographie d’un auteur apparaît au bas de chaque article, ce qui semble bien, mais ce n’est pas tout à fait nécessaire si vous n’avez qu’un seul auteur sur le site, car vos informations peuvent apparaître dans la barre latérale. Comment le réparer? Vous pouvez le faire de deux façons: Vous pouvez le supprimer de la vue en utilisant une feuille de style, ou vous pouvez supprimer toute la fonctionnalité. Pour le supprimer de la vue, allez à votre style de fichier. CSS et ajouter ce qui suit:. Informations sur l’auteur {display: none;}. Informations sur l’auteur {display: none;}. Si vous sélectionnez cette méthode, le texte existe toujours, mais il est caché de la vue. Si vous voulez empêcher le chargement inutile du contenu, vous pouvez le faire via t
Tout, HTML et tout. Pour ce faire, vous devez copier et coller le fichier de contenu. Php va du thème principal au sous – thème. Ouvrez le fichier et trouvez la section qui commence par \/ \/ author bio. Supprime tout du balisage PHP initial au balisage PHP final. Voici le code complet à supprimer: instructions pour charger 5f47292f15cbc2e2d4ff qu’est – ce qui ne va pas avec le changement de couleur de la boîte de contenu? Le personnalisateur de thème ne vous permet pas de changer la couleur de la boîte de contenu. Comment le réparer? Vous pouvez changer la couleur (et le texte) de la zone de contenu pour créer un modèle plus intéressant. Il suffit de changer le style afin que tout puisse être écrit dans la Feuille de style du sous – thème. Une boîte couleur personnalisée. Pour voir l’effet dans la capture d’écran ci – dessus, j’ai dû changer un peu de style. Il ne suffit pas de changer l’arrière – plan et la couleur du texte dans la boîte, car les liens et autres éléments peuvent les écraser. 5f47292f15cbc2e2d4ff pour obtenir le même design que ci – dessus, utilisez # 000000 comme arrière – plan de contenu dans le personnalisateur de thème et # 303030 comme arrière – plan de barre latérale. Soyez prudent, car certains éléments du contenu du message peuvent outrepasser ces styles. Vous pouvez déjà voir un exemple dans la capture d’écran: pré – Tag. Cela peut sembler correct sur le plan de la conception, mais d’autres éléments peuvent être couverts et les résultats ne sont pas très satisfaisants. Dans ce cas, il suffit d’ajouter une nouvelle règle à la Feuille de style pour utiliser la couleur. Quel est le problème avec la création de boîtes sans frontières? Dans certains cas, vous devrez peut – être créer un panneau sans limite, comme un curseur. Regardez la capture d’écran ci – dessous pour mieux comprendre le problème. Courrier sans frontières et courrier normal. Comment le réparer? Nous pouvons définir l’un de ces sous – formats de post sans frontières, mais pref
Je vais les garder comme ils sont, et le design est génial. De plus, je pourrais vouloir afficher une image dans un cadre sans limite ou même dans un cadre sans limite. La solution que j’ai trouvée implique à nouveau des champs personnalisés avancés. J’a i créé une vérification de type vrai \/ faux qui est envoyée pour l’écran d’édition de chaque message. Cela me permet de définir si je veux qu’un message particulier soit illimité. Le contrôle sans limite se trouve juste sous la zone de crédit de l’image discutée ci – dessus. Chaque fois que nous Téléchargeons un billet, nous vérifions l’état de cette case et, dans le cas d’un billet, nous générons une classe spéciale. Ceci peut être fait en documentant la fonction post _ Class: instructions pour charger 5f47292f15cbc2e2d4ff nous utilisons la fonction get Field pour voir si la zone sans limite est sélectionnée. Dans l’affirmative, nous l’ajouterons au tableau des classes qui seront ajoutées au billet. À partir de maintenant, ce que vous voulez faire est principalement subjectif. Vous pouvez supprimer les bordures, mais laisser les méta – zones, supprimer complètement les méta – zones, et ainsi de suite. J’ai choisi de supprimer tout le contenu: instructions pour charger 5f47292f15cbc2e2d4ff au fait, c’est la meilleure façon d’ajouter un curseur permanent en haut de la page d’accueil. Il suffit d’ajouter un curseur pour le contenu du message et de le marquer comme collant. Dans ma démonstration, j’ai utilisé le plug – in Meta – slider pour créer le curseur. Conclusion comme vous pouvez le voir, il existe de nombreuses façons de personnaliser le 215 pour le rendre plus approprié pour vous. La personnalisation intégrée vous permet de contrôler certains paramètres de base, tandis que les plug – ins peuvent faire beaucoup pour étendre des sujets déjà merveilleux. Si vous avez besoin de changements plus fondamentaux, vous pouvez obtenir presque tout à travers un thème pour enfants. Vous pouvez supprimer des éléments, ajouter vos propres éléments et personnaliser le style de tous les éléments de façon modulaire. Si vous voulez voir quelqu’un d’autre
Ou si vous avez édité le sujet vous – même, faites – le – nous savoir dans les commentaires ci – dessous. Étiquettes: sous – thèmes sans thème de code