Bonjour les amis! Il y avait un besoin installez un magnifique curseur d'image sur le site? Si tel est le cas, cette leçon est pour vous. Dans ce document, je vais vous dire à quelle vitesse (en 5 minutes maximum!) Et à quel point il est facile de construire un curseur fonctionnel.
WordPress ne dispose pas des outils standard que nous pourrions utiliser pour faire avancer les choses. Par conséquent, pour créer un curseur, nous utiliserons les capacités du plugin Curseur Meta... Il s'agit d'une extension WordPress gratuite et très populaire - elle a été téléchargée par plus de 800000 utilisateurs.
Un excellent bonus pour les webmasters russophones - le plugin est complet localisation russe... Commençons!
Algorithme pour installer un curseur d'image dans WordPress
- Installez le plugin Curseur Meta... Activez-le.
- Aller à la section Curseur Meta dans le menu du panneau d'administration (à gauche).
- Cliquez sur le signe "+".
- Cliquez sur Ajouter une diapositive.Télécharger depuis l'ordinateur ou sélectionner Galerie des médias images pour le curseur.
- Ajoutez le lien et la description de la diapositive souhaités.
- Personnalisez le curseurà l'aide des outils situés dans la barre latérale (à droite). Je ne décrirai pas les options - elles sont russifiées, intuitives et simples. Je noterai seulement qu'en plus de l'ensemble standard de paramètres (effets, design, taille du curseur), il existe un choix de quatre curseurs (R. Slides, Flex Slider, Coin Slider et Nivo Slider). Une fois les réglages terminés, appuyez sur sauvegarder.
- Copie située en bas de page shortcode du curseur et collez-le sur la page souhaitée.
- Vous pouvez ajouter un curseur à un site (article ou page) à l'aide du bouton Ajouter un curseur (affiché dans l'éditeur de publication (page)).
- Si vous devez insérer le curseur dans le modèle, utilisez le code situé dans le bloc En utilisant dans l'onglet Insérer dans le modèle.
Pourquoi il est utile de savoir comment ajouter des bots VK à un groupe si vous recherchez une promotion sur les réseaux sociaux - le portail pricemm.com en parle. Comment liquider les bots Vkontakte beaucoup et rapidement - analyse de différentes manières. Pourquoi une mauvaise promotion est dangereuse pour le groupe, comment trouver un artiste fiable.
À la suite des actions effectuées dans ce didacticiel, j'ai obtenu un curseur comme celui-ci: 
Il m'a fallu moins de cinq minutes pour le configurer - installer un curseur dans WordPress opération simple, n'êtes-vous pas d'accord? Si votre "construction de curseur" n'a pas fonctionné, parlez-nous des difficultés dans les commentaires. Ensemble, nous surmonterons tous les problèmes!
Très souvent sur le site, vous devez créer un bel en-tête sur lequel les images changeront, ou ajouter des bannières qui changeront d'elles-mêmes, ou vous voulez simplement diluer le statique de la page. comment faire un curseur dans WordPress.
Installer un slider sur un site WordPress - plugin M-vSlider
Le choix s'est porté sur le plugin M-vSlider, il est très pratique, il permet de personnaliser glissière à votre goût. En savoir plus:
Vous devez d'abord télécharger la dernière version du plugin sur le site officiel de WordPress.
Un tableau apparaît à l'écran, qui affichera tous les curseurs créés pour le site, le code à intégrer dans le site, ainsi que leurs caractéristiques. Un curseur est créé par défaut.
Pour modifier un curseur existant, cliquez simplement sur le crayon et accédez aux paramètres. Ou vous pouvez en créer un nouveau en cliquant sur le bouton "Ajouter un nouveau curseur".
Dans les paramètres, vous pouvez modifier:
- largeur, hauteur du curseur;
- effets de transition utilisés
- intervalles de temps
- vous pouvez ajouter des propriétés CSS tout de suite.
- le nombre d'images à utiliser
Après toutes les modifications nécessaires, nous enregistrons le curseur et nous pouvons l'ajouter en toute sécurité à notre site. À travers petit code, Il ressemblera à ceci:
Vous pouvez ajouter un curseur à n'importe quel article et à n'importe quelle page.
Et si vous souhaitez ajouter directement au modèle lui-même dans l'en-tête ou ailleurs, utilisez Code PHP.Cela ressemblera à quelque chose comme ça
si (fonction_existe ("rslider")) (
En outre, le plugin slider peut être affiché à l'aide d'un widget, dans lequel vous pouvez afficher un diaporama ou un diaporama.
En général, tout, maintenant vous pouvez facilement créer un curseur pour un site WordPress.
Merci pour votre attention, j'espère que l'article vous a été utile.
2 votesChers visiteurs, je vous souhaite la bienvenue sur les pages de mon blog start-luck. Aujourd'hui, je vais vous dire à quel point il est facile, et surtout, de mettre gratuitement un beau curseur sur votre site. Ce sera un élément de design attrayant pour tout article, ou une excellente alternative à un bloc d'annonces dont vous pourrez profiter.
Depuis 2013, diverses études ont prédit une sortie rapide d'Internet pour les sliders, mais leur popularité ne s'est pas estompée. Quoi que vous disiez, ils "relancent" le portail, attirent l'attention sur l'information. Je veux juste cliquer dessus. Bien sûr, si le curseur est beau et bien conçu, mais nous y reviendrons plus tard.
Je vais parler du curseur WordPress. Comment apporter quelque chose d'attrayant et d'intéressant sur votre site rapidement, gratuitement et sans même avoir de connaissances particulières. Nous discuterons de l'opportunité de le faire vous-même. Et vous recevrez également quelques conseils utiles pour le remplissage.
Eh bien, commençons?
Curseur Meta
Tout d'abord, je voudrais vous parler du meilleur plugin pour un site WordPress. C'est un cas rare lorsque vous parvenez à trouver quelque chose de précieux et gratuit en même temps.
Si vous lisez mon article à ce sujet, rappelez-vous à quel point j'ai été indigné par certaines des propositions. L'utilité de cette publication coûte également de l'argent.
Eh bien, laissez-moi vous montrer comment travailler avec le programme.
Installation
Ainsi, vous pouvez lire un article détaillé sur WordPress sur mon blog. Répétons brièvement ce qu'il faut faire dans une situation spécifique. Accédez à la section plugins et sélectionnez l'option "Ajouter un nouveau" dans la liste dans la ligne de recherche dans le coin supérieur droit, entrez: "Meta Slider" et Entrée. Dès que la page avec l'application souhaitée s'ouvre, cliquez sur «Installer».
N'oubliez pas d'activer Meta Slider via l'onglet "Installé" ou dans la fenêtre qui s'ouvre après l'installation.
En conséquence, une nouvelle catégorie devrait apparaître dans le panneau de configuration à droite. Vous pouvez acheter la version Pro pour 19 $ ou utiliser la version gratuite, à mon avis ses fonctions sont tout à fait suffisantes, donc l'achat n'est pas du tout nécessaire.
Capacités
Voyons maintenant comment créer et insérer un carrousel, parfois le curseur est également appelé ainsi. Nous entrons dans l'application par le lien à droite (dans le panneau d'administration de WordPress) et cliquons sur le plus à côté de la phrase «Ajouter nouveau».
Vous pouvez télécharger autant de photos que vous le souhaitez, mais je ne recommande pas d'en faire trop. Personne ne regardera trop. Le nombre optimal varie de trois à huit.
À droite des images téléchargées, il y a un champ dans lequel vous pouvez entrer l'adresse de la page à laquelle la personne se rendra en cliquant sur la photo. Vous pouvez également ajouter une description, une image de recadrage et une alt aux images.
Vous avez également 4 options de conception. Dans la vidéo ci-dessous, je vais vous montrer à quoi ressemble chacun d'eux.
La version Pro suppose toutes les options d'effets, c'est-à-dire comment une diapositive en remplacera une autre, pour chaque méthode d'affichage. La version gratuite a des options limitées. Mais il y en a encore beaucoup. Vous trouverez une bonne option.
En plus des 4 principales variantes de conception, vous pouvez choisir parmi quatre autres combinaisons de couleurs.
En plus de tout cela, il existe également un paramètre supplémentaire. Si vous souhaitez donner au lecteur la possibilité de contrôler le rembobinage, vous devez cocher la case à côté du mot "Flèches". La navigation est également possible via des points. Assurez-vous de laisser le lecteur se contrôler, surtout s'il s'agit d'un bloc d'annonces.
Quant aux tailles, vous pouvez les fournir. Cependant, le plugin n'est pas idiot, il voit les limites maximales et s'intègre automatiquement dans le design. Si vous l'installez dans les barres latérales de la page principale, un peu plus tard, je vous montrerai comment faire cela, les proportions changeront automatiquement.
Vient ensuite les "Paramètres avancés". Ici, vous pouvez augmenter ou diminuer la durée de l'image et la vitesse de l'animation. Ils ne devraient pas bouger très vite, sinon ils quitteront votre site. S'il y a beaucoup de photos, il vaut mieux permettre l'affichage des images au hasard.
Lors du changement d'image, l'image peut être divisée en plusieurs parties. Je ne recommande pas de spécifier une petite quantité. Sinon, cela ondulera dans les yeux. Eh bien, au lieu de flèches pour le rembobinage, je vous recommande d'ajouter votre propre texte.
Dans la capture d'écran ci-dessous, vous pouvez voir le curseur que j'ai créé. Pour vous faciliter la tâche, je recommande d'utiliser l'option d'aperçu. Le menu de création a deux boutons utiles en haut à droite: "Afficher" pour voir les modifications et enregistrer.
Tout en bas du volet droit, il y a un shortcode pour l'insertion de message et pour. Les développeurs avancés en ont besoin, mais pour les débutants, je vais vous montrer comment obtenir un effet élégant avec des méthodes simples. Mais plus là-dessus plus tard.
Tout d'abord, voyez à quoi ressemble le curseur en action. Bien sûr, tout doit être testé sur votre propre site web, j'ai raté beaucoup de choses et ne l'ai pas montré dans cette vidéo, mais vous pouvez déjà vous faire une idée approximative du programme.
Intégration du blog
Il n'est pas difficile d'insérer le carrousel créé. Vous n'avez pas besoin de copier quoi que ce soit de spécial pour cela. La seule chose que j'ai oublié de mentionner dans le paragraphe précédent, nommez correctement vos curseurs pour ne pas être confus.
Ouvrez le message auquel vous souhaitez ajouter un nouveau curseur ou créez-en un nouveau. Ensuite, placez le curseur à l'emplacement du carrousel. Cliquez maintenant sur "Ajouter un curseur", le bouton se trouve en haut de l'espace de travail.
Sélectionnez le nom souhaité dans la liste et cliquez sur "Insérer un diaporama".
Terminé. Dans mon cas sur le site, cela ressemblera à ceci.
Pour mettre un bloc sur la page principale, allez dans la catégorie "Apparence" - "Widgets". En haut, vous verrez "Meta Slider".
Déplacez cette plaque à l'endroit souhaité où le curseur doit être. Si vous voulez le mettre juste après la recherche, alors dans cette liste, il devrait également être ici. Sélectionnez le curseur dans la liste des curseurs créés et enregistrez les modifications.
Sur mon site de test, le bloc de droite ressemble à ceci.
La conception de ce site suppose le placement dans la zone de contenu et le pied de page, en bas du site. Si je veux ajouter un bloc ici, je vais simplement déplacer la plaque au bon endroit.
L'affichage sur le site changera immédiatement.
En conclusion, je voudrais vous faire quelques recommandations. Si vous souhaitez gagner beaucoup d'argent grâce à la publicité, je vous conseille vivement de ne pas lésiner sur le design des images elles-mêmes. Il faut beaucoup de temps à une personne pour comprendre toutes les subtilités du marketing, lire des tonnes de livres sur la publicité visuelle et perfectionner ses compétences en conception.
En attendant que vous puissiez vous développer dans ce domaine, je vous conseille de recourir à l'aide d'indépendants. Vous pouvez le faire sur les sites WebLancer.net et FL.ru ... Le premier est un peu plus facile, mais sur le second, vous pouvez rencontrer de vrais professionnels.
Le prix dépend de votre budget, mais je pense que l'image vous coûtera un maximum de 500 roubles. Pour ce montant, vous pouvez en acheter trois, mais dans ce cas, il y aura moins de personnes disposées à exécuter la commande, ce qui signifie que vous obtiendrez de moins bons résultats.
Je vous souhaite beaucoup de succès et si vous avez aimé cet article, inscrivez-vous à la newsletter. Jusqu'à la prochaine fois.
Convenez que le fait d'avoir un curseur d'image sur un site Web est plutôt agréable. Le curseur sur la page principale du site n'est pas seulement une apparence élégante, mais aussi un bon contenu informatif sur le sujet de votre site pour les visiteurs.
Nous allons créer le curseur à l'aide du populaire plugin Meta Slider et tester son travail sur le thème Twenty Sixteen.
Créer un curseur
Ainsi, après l'installation et l'activation du plugin, un nouvel élément de menu apparaîtra dans le panneau d'administration Curseur Meta, lorsque vous naviguez, vous serez redirigé vers la fenêtre principale du curseur.
Puisqu'aucune diapositive n'a été créée, il n'y a qu'un seul bouton avec l'inscription " Créez votre premier diaporama». Après avoir cliqué dessus, votre première fenêtre de curseur s'ouvrira.
Donc, vous avez créé un curseur vide, qui par défaut porte le nom Nouveau curseur... Si vous devez le renommer, vous pouvez le faire en cliquant sur l'onglet en haut à gauche et en saisissant un nouveau nom.
Ainsi, le curseur est créé, vous devez maintenant y ajouter des diapositives, ce qui peut être fait en cliquant sur le bouton à droite Ajouter une diapositive... Après avoir ajouté toutes les photos, la fenêtre ressemblera à ceci:
Avant de publier le slider sur le site, vous pouvez vous familiariser avec les paramètres proposés par le plugin.
La première chose à dire est de supprimer une diapositive. Pour ce faire, vous devez déplacer le curseur sur l'image de la diapositive, où l'icône de la corbeille rouge apparaîtra, et cliquez dessus.
Sur la page de l'éditeur de curseur, vous pouvez également spécifier sa taille, son effet de changement, son apparence.
De plus, des paramètres supplémentaires vous sont proposés: étirement du curseur en pleine largeur, alignement central, lecture automatique des diapositives, recadrage «intelligent» des photos, diaporama dans l'ordre inverse, temps de commutation des diapositives, temps d'affichage, etc.
Ainsi, après avoir ajouté toutes les diapositives et paramètres nécessaires, vous devez cliquer sur le bouton sauvegarder... Ainsi, vous avez créé un curseur photo.
Sortie du curseur sur le site
Maintenant, il doit être affiché sur le site. Pour ce faire, le plugin propose deux options: afficher le curseur sur une page séparée, ou insérer un code spécial dans le modèle de thème.
Pour afficher sur une page séparée, la première étape consiste à créer une page ( Pages -\u003e Ajouter nouveau), dans lequel insérer un shortcode spécial que le plugin vous propose. Il peut être vu dans la fenêtre d'édition du curseur (dans notre cas, c'est ).
Une fois la page publiée, vous pouvez voir votre curseur dessus.
Pour insérer un curseur dans le thème de votre site (rappelez-vous que nous utilisons le thème Vingt seize), vous devez apporter des modifications aux fichiers de thème. Pour ce faire, allez Apparence -\u003e Editeur, choisir un sujet Vingt seize et dans la liste des fichiers de thème disponibles, trouvez En-tête php.
Trouvez maintenant la ligne dans le code
