Share
Les curseurs peuvent être controversés - nous avons tous eu des clients qui les ont insistés, qu'ils améliorent le site ou non. Mais ils ont leur place. Ils peuvent aider à mettre en valeur le contenu clé, afficher des images sur un site où les éléments visuels sont importants et donner vie à un site..
Dans la plupart des cas, vous aurez probablement utilisé des curseurs pour afficher des images, associées ou non au contenu de votre site. Mais vous pouvez également utiliser un curseur pour afficher du texte sur votre site..
Dans cet ensemble de deux tutoriels, je vais vous montrer comment créer un curseur de texte avec un effet intéressant: il utilisera un type de publication personnalisé pour extraire un texte après l'autre en deux blocs, créant ainsi l'effet d'une conversation à le haut de la page. Ce sera superposé sur une photo de deux personnes, de sorte que le résultat est que les deux se parlent.
Pour suivre, vous aurez besoin de:
L'exemple que je vais développer est un site du monde réel que je développe pour un client, qui exécute un thème enfant du thème Responsive. Je vais créer un enfant du thème Responsive et y ajouter un style personnalisé ainsi que des fonctions dans le thème. functions.php fichier. Vous pouvez l'ajouter à votre propre thème ou créer un thème enfant de Responsive comme moi..
Dans ce didacticiel, le curseur est opérationnel à l'aide d'un type de publication personnalisé. Plus précisément, nous allons:
Dans la partie suivante, nous ajouterons du CSS à notre thème pour positionner correctement le texte, créer l’effet de conversation et le styler..
Alors, commençons!
Commençons par créer le thème enfant du thème Responsive. Je le fais parce que je ne veux pas éditer le thème Responsive lui-même: si vous le faisiez, vous perdriez votre travail lors de la prochaine mise à jour du thème. Alternativement, vous pouvez créer un plugin pour le faire.
Dans ton wp-content / themes répertoire, créez un nouveau dossier vide. J'appelle le mien tutsplus-conversation-banner.
Dans ce dossier, créez un fichier appelé style.css et ajoutez ceci:
Accentsconagua
/ * Nom du thème: Tutsplus Conversation banner Thème URI du thème: http: //.tutsplus.com/tutorials/create-a-conversation-banner-with-revolving-text-using-a-custom-post-type--cms- 25938 Description: thème pour tuts + tutoriel sur la création d’un effet de bannière de conversation. Thème enfant pour le thème sensible. Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co.uk/ Modèle: responsive Version: 1.0 * / @import url ("… /responsive/style.css");Modifiez le code ci-dessus pour en faire l'auteur et ajoutez votre propre URI.
Maintenant, sauvegardez ce fichier et activez votre nouveau thème.
Comme il s’agit d’un site réel, j’y ai ajouté un style personnalisé, qui se trouve dans la feuille de style du thème enfant. Je ne détaillerai pas cela en détail car cela sort du cadre du didacticiel, mais vous pouvez voir le style dans la classe de code avec ce didacticiel..
Voici à quoi ressemble mon site avant d'ajouter le curseur:
L'image dans l'en-tête comporte un espace de part et d'autre des deux personnes, et je vais styler mon curseur afin qu'il affiche le texte de chaque côté des personnes, ce qui donne l'impression qu'elles pointent vers leurs mots..
L’étape de nidification consiste à enregistrer un type de message appelé citation. Dans votre dossier de thème enfant, créez un nouveau fichier appelé functions.php.
Remarque: Il est recommandé d'utiliser un plugin pour enregistrer un type de publication plutôt que de les ajouter à votre fichier de fonctions de thème. J'utilise le fichier de fonctions ici pour tout garder au même endroit, de sorte que vous ayez un paquet de codes à télécharger.
Ouvrez votre fichier de fonctions et ajoutez-y ce code:
fonction tutsplus_create_post_type () $ labels = array ('nom' => __ ('Citations'), 'nom_s singulier' => __ ('devis'), 'add_new' => __ ('nouveau devis'), 'add_new_item' => __ ('Ajouter un nouveau devis'), 'edit_item' => __ ('Modifier le devis'), 'new_item' => __ ('Nouveau devis'), 'view_item' => __ ('Voir le devis'), 'search_items' => __ ('Recherche de citations'), 'not_found' => __ ('Aucune citation trouvée'), 'not_found_in_trash' => __ ('Aucune citation trouvée dans la corbeille'),); $ args = array ('labels' => $ labels, 'has_archive' => false, 'public' => true, 'hierarchical' => false, 'supports' => array ('titre', 'éditeur', ' extrait ',' custom-fields ',' thumbnail ',' attribut de page ',' author '),); register_post_type ('quote', $ args); add_action ('init', 'tutsplus_create_post_type');Ceci enregistre un nouveau type de message appelé citation.
Vous pouvez voir le nouveau type de message sur mon site, avec quelques citations que j'ai ajoutées:
Notez que ce ne sont que des citations factices. Le fait que j'ai utilisé un type de publication personnalisé permet à mon client d'ajouter facilement leurs propres citations une fois le site lancé. Chacun d'entre eux a juste un titre de publication et aucun contenu, car s'il y avait un contenu de publication, le plugin afficherait les deux.
L'étape suivante consiste à installer et configurer le plug-in du curseur. J'utilise le plug-in Smooth Slider, qui vous permet de choisir les messages à ajouter au curseur et de réorganiser manuellement vos messages dans l'écran des paramètres du curseur..
Aller à Lisse Curseur> Paramètres et le configurer comme suit:
J'ajoute du style à ma feuille de style parce que je veux utiliser les polices Google. Je ne m'inquiète donc pas trop des paramètres de ces polices, mais vous préférerez peut-être les modifier dans l'écran des paramètres..
L'étape suivante consiste à ajouter les curseurs et à les peupler de messages..
Nous devons ajouter deux curseurs: un pour chacune des deux personnes. Aller à Smooth Slider> Curseurs et cliquez sur Créer un nouveau curseur. J'ai appelé mes deux curseurs "Heide" et "Iain" parce que ce sont les noms des personnes.
Vous ajoutez des publications à un curseur de la page de modification de publication. Ouvrez l’un de vos messages et faites défiler la liste pour voir la possibilité de l’ajouter à un curseur:
Sélectionnez le curseur auquel vous souhaitez ajouter le message et enregistrez-le. Répétez cette opération pour chaque message en l'ajoutant au curseur correspondant..
Vous pouvez modifier manuellement l'ordre dans lequel les messages seront affichés par le curseur. Aller à Smooth Slider> Curseurs et sélectionnez le curseur avec lequel vous voulez travailler. Voici mon curseur 'Heide':
Faites défiler vers le bas pour faire glisser les messages dans le bon ordre:
Une fois que vous avez fait cela, enregistrez le curseur.
À l'heure actuelle, nous avons deux curseurs, mais ils n'apparaissent pas sur le site. Le plugin vous donne des codes courts que vous pouvez utiliser pour ajouter des curseurs à votre site: comme nous les ajouterons dans les fichiers de thème, nous utiliserons le do_shortcode () une fonction.
Le thème Responsive nous fournit un crochet appelé responsive_in_header qui vous permet d'ajouter du code à l'en-tête de la page. Cela sera affiché au-dessus de l'image mais dans l'en-tête: nous ajouterons CSS pour positionner correctement les curseurs dans la suite de ce didacticiel en deux parties.
Ouvrez votre thème functions.php déposer et ajouter cette fonction:
fonction tutsplus_slider () ?>Cela crée un
divavec letutsplus-slidersclasse, que nous ciblerons pour le positionnement ultérieur, et utilise les codes abrégés pour afficher les deux curseurs.Enregistrez votre fichier de fonctions.
Le site ressemble maintenant à ceci:
Donc, les curseurs sont là, et ils travaillent. Mais ils occupent énormément d'espace blanc en haut de la page, au-dessus de l'image. Nous avons besoin qu’ils soient affichés sur l’image, à côté des deux personnes.
Dans la prochaine partie, nous allons résoudre ce problème. Nous ajouterons du code CSS pour positionner les deux curseurs, ainsi que pour le style. Nous enregistrerons une police Google qui sera utilisée pour les citations..
Résumé
Les curseurs ne sont pas uniquement destinés aux images: vous pouvez également les utiliser pour afficher du texte. Dans ce tutoriel, vous avez appris à configurer deux curseurs à l'aide d'un type de publication personnalisé. Ensuite, nous ajouterons le style pour que notre texte ressemble à ce qu'il devrait être..
