Bouton supérieur pour WordPress - accédez rapidement au haut de la page. Bouton Retour en haut pour WordPress

Bonjour, chers lecteurs ! Vous êtes-vous déjà demandé comment créer un bouton Retour en haut pour WordPress ? Non? Très en vain. Après tout, ce n'est pas seulement beau, mais aussi très chose utile. Ce bouton apparaît dans le coin inférieur droit lors du défilement de la page. Cliquez dessus et la page revient doucement à son début. Vous pouvez mettre en œuvre une transition aussi spectaculaire vers le sommet dans WordPress à l’aide du plugin Dynamic To Top Options. Je vais vous en parler aujourd'hui.

Vous pouvez définir le nombre d'annonces affichées sur la page principale et dans les sections du blog. Sur de nombreux blogs, même 5 à 7 annonces suffisent à rendre une page assez longue. Et afin de ne pas irriter à nouveau les lecteurs et de ne pas forcer la molette de la souris, une excellente fonction a été inventée - un bouton, après avoir cliqué sur lequel, la page défile automatiquement jusqu'à son début. Simple, efficace et pratique !

Bien sûr, quelqu'un pourrait regarder cela de travers et dire que cela n'est pas nécessaire et ne fait qu'ajouter du code supplémentaire à la page. À bien des égards, cela est vrai, mais n'oubliez pas la convivialité du site, le facteur comportemental et la commodité banale. Cette bagatelle peut accrocher le lecteur et le garder abonné. Mais chacun décidera lui-même de l'installer ou non.

Les options dynamiques vers le haut sont standard. Téléchargez la dernière version, décompressez et téléchargez sur le serveur dans le répertoire /wp-content/plugins. Activez et accédez aux paramètres qui, contrairement à la plupart des autres plugins, se trouvent dans la section « Apparence » - « Vers le haut ».

Tous les paramètres sur Anglais, mais ils ne sont pas difficiles à comprendre. Maintenant, je vais vous aider avec ça.

La première section des paramètres s'appelle Comportement, ce qui signifie propriétés.

Temps de défilement : définit le temps nécessaire pour faire défiler la page vers le haut. Mesuré en millisecondes.

Distance de fondu entrant - la distance à partir du bord supérieur de la page, à partir de laquelle le bouton « haut ! » apparaît.

Easing - définit la fluidité du défilement. Si vous n'y regardez pas attentivement, il est difficile de faire la différence, surtout si le temps de défilement est réglé sur une valeur faible.

Position — position du bouton sur la page. Vous avez le choix entre 4 postes :

• en haut à gauche - coin supérieur gauche
• en haut à droite - en haut à droite
• en bas à gauche - coin inférieur gauche
• en bas à droite - respectivement en bas à droite

Empêcher sur mobile : afficher ou non le bouton haut dans les navigateurs des appareils mobiles.

Il ne reste plus qu'à éditer apparence dans la section Apparence des paramètres du plugin Dynamic To Top Options. Il est très pratique que toutes les modifications apportées puissent être vues directement à l'aide d'un exemple.

Version texte - vous permet d'écrire du texte sur le bouton. Après avoir coché la case, les champs suivants apparaîtront :

• Texte du bouton - texte, utilisez des mots simples et compréhensibles - « Up ! » "En haut de la page", "En haut !", "En haut", "En haut !", "Envolons-nous !" et ainsi de suite;
• Taille de la police - taille de la police
• Couleur du texte – couleur de test. Appuyez sur Sélectionner pour la sélection visuelle des couleurs ;
• Texte en gras - style gras ;
• Ombre du texte - ombre des lettres ;
• Couleur de l'ombre du texte — couleur de l'ombre.

Remplissage supérieur/inférieur : remplissage au-dessus et en dessous du texte ou de l'image à l'intérieur du bouton jusqu'à ses bordures.

Bonjour, chers visiteurs !

Je continue de publier des articles techniques.

Et aujourd'hui, j'aborderai un sujet intéressant dans lequel nous discuterons du bouton de défilement vers le haut de la page du site. Nous parlerons de l'importance de ce bouton, c'est comme ça que j'aime le faire. Je vais également vous montrer les implémentations les plus intéressantes et efficaces de cette fonction.

Je pense que cela ne vaut pas la peine de montrer à quoi cela ressemble sur des sites Web, puisque presque toutes les ressources l'ont. Il s'agit d'un simple bouton avec une flèche vers le haut ou un mot qui, lorsque vous cliquez dessus, vous amène rapidement à la zone la plus haute du site.

Cette fonction est un élément qui, dans certains cas, améliore la convivialité du site. Ce sont les cas dont nous allons maintenant discuter avec vous.

Le premier cas le plus important, et peut-être le seul, où le bouton haut est nécessaire est lorsqu'il y a une énorme quantité de contenu sur la page.

Si la page est longue, il est alors assez difficile de la faire défiler jusqu'en haut.

Soit il faut utiliser la barre de défilement, que peu de gens utilisent. Au moins, je ne l’utilise pas du tout, car c’est un mouvement de souris supplémentaire et pas très pratique. Ou alors il faut faire tourner la vidéo avec la souris, ce qui prend beaucoup de temps et devient ennuyeux avec le temps.

Par conséquent, si votre site contient des articles très volumineux, vous pouvez installer un bouton, mais vous devez le faire de manière à ce qu'il soit facile de cliquer dessus et c'est plus facile à faire que de faire tourner une vidéo ou d'utiliser la barre de défilement dans le navigateur. Sinon, à quoi cela servirait-il si cela équivalait à des actions standards ? Sur cette base, il existe les boutons de défilement vers le haut les plus courants et les plus efficaces qui fonctionnent vraiment efficacement. Une de ces options est le bouton haut, comme dans VKontakte. Nous passons à la mise en œuvre de cette méthode.

Une particularité de ce bouton est sa facilité d’utilisation. Cela ressemble à une barre de défilement sur le côté gauche du site, qui occupe toute la hauteur de la ressource.

Cette option a déjà fait ses preuves, puisqu'il n'y a pratiquement aucun utilisateur qui ne l'utilise pas sur les réseaux sociaux. Réseau VKontakte. Cette implémentation est pratique car vous n’avez pas besoin de pointer le curseur de la souris sur un bouton. Cliquez simplement sur la zone de gauche du site et la page défilera tout en haut. Il n'est même pas nécessaire de regarder le curseur ; vous pouvez simplement déplacer la souris jusqu'au bord de l'écran et cliquer une fois.

Il ne sera pas possible de faire exactement la même implémentation que VKontakte, mais une version approximative est simple.

Pour le mettre en œuvre, il vous suffit de placer le script sur le site.

Pour charger le script, vous pouvez placer le code lui-même entre les balises ou avant la balise de fermeture dans le fichier footer.php. Ou vous pouvez simplement télécharger un fichier avec un script sur votre hébergement, puis simplement télécharger le fichier sur le site.

Si vous souhaitez placer le script et ne pas avoir à vous soucier de son chargement, je vous donnerai le code du script lui-même.

Javascript

$(document).ready(function() ( $("body").append("^ Retour en haut"); $ (window).scroll (function () ( if ($ (this).scrollTop () > 300) ( $ (".button-up").fadeIn(); ) else ( $ (".button-up").fadeOut(); ) )); $(".button-up").click( function( )( $("body,html").animate(( scrollTop: 0 ), 100); return false; )); $(".button-up").hover(function() ( $(this) .animate (( "opacity": "1", )).css(("background-color": "#E1E7ED", "color": "#45688E")), function())( $(this). animer (( "opacité": "0.7" )).css(("background": "aucun", "color": "#45688E"); ));

Dans ce code, vous pouvez modifier certains paramètres en fonction de vos besoins.

• La ligne 4 est chargée d'afficher la zone de défilement de la page elle-même. Il contient les styles de base pour afficher le bouton. en principe, ces paramètres devraient convenir à presque tout le monde. Mais vous devrez peut-être les modifier à votre convenance ;
• À la ligne 7 entre parenthèses se trouve le numéro 300, qui est responsable du moment où le bouton apparaît. Autrement dit, le bouton n'apparaîtra qu'après un défilement de 300 pixels vers le bas. Je recommande de choisir ici une valeur afin que le défilement ne soit possible que lorsque le menu principal du site ou certains autres éléments importants de la navigation disparaissent de la vue ;
• A la ligne 17, la valeur 100 est la vitesse de défilement. Plus la valeur est faible, plus le retour en haut de la page est rapide.

Ce code peut être placé entre les balises en haut du site. Si le site est sur WordPress, alors cette zone se trouve dans le fichier modèle header.php. Vous pouvez également le placer avant la balise de fermeture tout en bas du site (fichier footer.php). Je recommande la dernière option, car elle accélérera le chargement du site. Cela ressemblera à ceci.

Une option encore plus efficace consiste à télécharger ce script depuis fichier séparé. Vous pouvez télécharger le fichier en utilisant le bouton ci-dessous. Il se trouve à l'intérieur des archives.

Téléchargez ensuite ce fichier sur votre hébergement. Vous pouvez le télécharger dans le dossier du thème ou à la racine du site. Selon la tradition, je le fais dans le dossier des modèles. Ensuite, vous devez écrire le code qui chargera ce fichier au même endroit. Pour ce faire, utilisez la ligne suivante.

Javascript

Dans celui-ci, vous devrez remplacer le chemin complet du fichier par le vôtre sur la deuxième ligne. Collez ensuite ce code dans la même zone avant la balise de fermeture comme indiqué ci-dessous.

Après avoir édité le fichier, si nous l'avons fait sur un ordinateur, nous le téléchargeons sur l'hébergement avec remplacement fichier source. Après cela, un simple bouton haut sur votre site fonctionnera.

Pour modifier les paramètres dans ce fichier, vous devrez l'ouvrir à l'aide de l'éditeur Bloc-notes.

Cette option est très intéressante de par sa simplicité, tant en fonctionnement qu'en installation sur le chantier. Une option plus avancée est celle où, en plus de faire défiler vers le haut, vous avez la possibilité de revenir à l'endroit à partir duquel vous avez fait défiler. C'est exactement l'option mise en œuvre dans les médias sociaux. Réseau VKontakte. Comment faire, voir ci-dessous.

Par cette méthode J'ai enregistré un didacticiel vidéo détaillé.

Cette option est maintenant sur mon blog. Je n'ai pas encore pu analyser son utilité. Mais, s'il se trouve sur l'un des géants du Runet, nous pouvons alors supposer avec certitude qu'il est d'une certaine utilité. Bien sûr, à une telle échelle, c’est une évidence. Mais sur une petite ressource, vous pouvez bien réfléchir avant de l'installer. Mais je regarde l’avenir, c’est pourquoi j’ai pris cette décision.

La mise en œuvre de la deuxième méthode est un peu plus compliquée, mais le processus devrait déjà vous être familier si vous avez résolu d'autres problèmes techniques sur votre ressource.

Se compose de 3 étapes :

Tout d'abord, nous devons placer un script qui rendra le défilement fluide et le changement de couleur en douceur lors du survol, à la fois la zone elle-même et la couleur du hibou « Vers le haut », en fonction de la distance à laquelle la page défile vers le bas.

Vous pouvez procéder de 2 manières, comme dans le premier cas. Soit placez le script lui-même dans la zone souhaitée (voir point ci-dessus), soit téléchargez le script via un fichier. Ensuite, nous ferons tout via la deuxième méthode pour qu'elle soit efficace.

Téléchargez le fichier de script en utilisant le bouton ci-dessous.

Placez le fichier sur l'hébergement et téléchargez le fichier via le code tout en bas du site, comme vous l'avez fait auparavant. Le fichier porte exactement le même nom que dans la méthode 1, vous pouvez donc utiliser la même ligne de code pour la sortie.

⇓ Sauvegarder ⇑ Haut

Vous pouvez le placer tout en bas du site, avant la balise de fermeture dans le fichier footer.php.

Ensuite, nous écrivons les styles de conception dans notre fichier de style (style.css) et téléchargeons tous les fichiers modifiés sur l'hébergement. Voici les styles eux-mêmes.

/* description du conteneur */ .leftbar-wrap ( position : fixe ; hauteur : 100% ; haut : 0 ; largeur : 99px !important ; gauche : 0; ) /* description du bouton « Haut » */ .left -controlbar ( hauteur : 100% ; affichage : bloc ; texte-décoration : aucun ; ) /* description du bouton « Retour » */ #scroll-back ( affichage : bloc ; hauteur : 100% ; haut : 0 ; affichage : none; text-align: center; ) /* description de la colonne de couleur d'arrière-plan pour les deux boutons */ .active-area ( width: 100px; height: 100%; display: block; text-align: center; ) /* set la transparence de la couleur d'arrière-plan au survol des pages de la zone active */ .leftbar-wrap:hover .active-area ( background: #E1E7ED !important; opacity:0.7 !important; ) /* rend la surbrillance un peu plus lumineuse au survol sur l'inscription */ .leftbar-wrap .active-area:hover ( ) /* centrer l'étiquette du bouton */ .bar-desc-niz ( top: 26% !important; position: relative; display: inline-block; ) .bar-desc-top ( top : 10 % ! important ; position : relative ; affichage : inline-block )

En fonction de la conception et de la structure de votre ressource, vous devrez modifier légèrement certains paramètres de ces styles. Par exemple, aux lignes 47 et 53, modifiez le paramètre d'indentation pour les mots « Retour » et « Haut » depuis le haut de la page, respectivement.

Après avoir modifié tous les fichiers, nous pouvons les télécharger en toute sécurité sur l'hébergement et cette méthode fonctionnera. Vous pouvez voir sa mise en œuvre sur mon blog. Faites-le pour votre santé.

Nous passons à la méthode suivante. Cette option contiendra déjà un simple bouton dans la zone inférieure droite de l'écran, en cliquant sur lequel vous passerez en haut de la page.

La mise en œuvre du bouton est également très simple et fonctionne à 100% sur un site WordPress. Je ne peux rien dire sur le site HTML ou un autre moteur. Testez-le.

Vous devez copier le code suivant avec le script tout en bas du site avant la balise de fermeture /

Javascript

Le bouton du haut est désormais présent sur de nombreux sites et aide les utilisateurs à revenir rapidement tout en haut de la page. C'est très pratique si le site affiche beaucoup d'informations. Par conséquent, afin de ne pas avoir à faire défiler la page Web jusqu'au début de l'article ou jusqu'au menu à chaque fois, les développeurs conseillent d'ajouter un bouton vers le haut. Il est généralement situé dans le coin inférieur droit et apparaît à mesure que vous approchez de la fin de la page. L'option est assez intéressante et pas si difficile à mettre en œuvre.

Vous pouvez, en principe, créer un bouton vers le haut à l'aide de certains scripts et en modifiant le modèle WordPress, mais il existe une option plus simple : les plugins. Il est idéal pour ceux qui sont trop paresseux pour comprendre le code, ou pour ceux qui connaissent mal les problématiques de développement web. De plus, les modules disposent de paramètres différents pour implémenter certaines fonctionnalités intéressantes. Et cela, voyez-vous, est également très utile. Sur les 10 plugins trouvés pour la fonction Retour en haut, je n'en considérerai que 4 qui disposent d'un nombre de téléchargements suffisant et répondent versions actuelles Systèmes WordPress.

Plugin léger et personnalisable, Smooth Scroll Up vous permet d'ajouter un bouton supérieur à n'importe quelle publication/page dans WordPress. Le module a été téléchargé plus de 40 000 fois ; les versions WP 3.2 à 4.1 sont prises en charge. Dernière mise à jour c'était tout récemment. Traductions disponibles pour différentes langues(Le russe et l'ukrainien ne sont pas encore disponibles).

Principales caractéristiques de Smooth Scroll Up :

• Sélection de différents éléments pour le bouton haut : texte, image, bouton.
• Sélection d'une position pour l'élément Retour en haut : gauche, droite, centre.
• Possibilité de spécifier n'importe quel texte pour le bouton du haut.
• Spécifie la distance à partir du haut de la page après laquelle le bouton apparaît.
• Animation lors du défilement (défilement, gradation).
• Afficher/masquer sur page d'accueil et les appareils mobiles.
• Ajout d'un événement de clic.

Voici les paramètres du bouton de retour en haut (couleur, bordure, arrière-plan, transparence), la définition de l'emplacement de l'élément Retour en haut et l'utilisation d'images ou de texte pour celui-ci, ainsi que les options d'animation lors du défilement, etc. Les versions WordPress prises en charge vont de 3.0 à 3.9.2, le module a été téléchargé plus de 18 000 fois.

Parmi ces quatre plugins pour le bouton retour en haut, je vous conseille de choisir. Leur ordre dans la revue n'est pas une note, c'est-à-dire que cela ne signifie pas que j'ai considéré le meilleur au début ou à la fin de l'article, ils vont au fur et à mesure que je fais connaissance. Tout dépend essentiellement de vos besoins. Si vous êtes loin du développement et de WordPress, le moyen le plus simple est d'installer Smooth Scroll Up et de l'oublier. Pour ceux qui souhaitent bricoler les réglages, les deux derniers plugins conviennent. Le premier est le plus récent sur à l'heure actuelle. En général, il y a beaucoup de choix.

Bonjour, chers lecteurs. Dans cet article, je vais vous expliquer comment configurer le bouton « up » pour Blog WordPress. Il existe deux manières de créer ce bouton. La première méthode consiste à installer un plugin spécial. Et la seconde est de changer le code php dans les fichiers de votre thème actif.

Dans l'ensemble, vous pouvez facilement vous passer de ce bouton. Vous avez déjà ce bouton sur votre clavier, il s’appelle « home ». En cliquant, vous arriverez rapidement en haut de la page.

De nombreux webmasters installent ce bouton sur leur site internet. Certaines personnes l’installent pour faciliter la navigation des utilisateurs sur le site, mais pour d’autres, cela fait partie intégrante de la conception.

1.Installer un bouton à l'aide d'un plugin.

Le moyen le plus simple de créer un bouton d'installation est d'installer et d'activer le plugin. Vous pouvez le télécharger depuis le référentiel officiel de plugins sur wordpress.org. Je recommande de télécharger les plugins uniquement à partir de là, afin que vous ayez moins de chances d'infecter votre site avec un virus.

Il existe de nombreux plugins qui permettent d'ajouter un bouton en haut, mais j'ai décidé de choisir le plugin Scroll Back To Top comme exemple. Téléchargez-le, téléchargez et activez.

Le plugin dispose d'un certain nombre de paramètres. Mais il n’est pas nécessaire de toucher à tout. Tout ce que vous avez à faire est de personnaliser l'emplacement et l'apparence du bouton.

Comme vous pouvez le constater, il n'y a rien de difficile à connecter un bouton en haut à l'aide d'un plugin, à le télécharger, à l'activer et tout fonctionne. Où cela pourrait-il être plus facile ? Mais en réalité, tout n’est pas aussi beau qu’il y paraît à première vue. Le fait est qu'avec tout le monde plugin installé, votre WordPress devient plus épais et plus lent, ce qui n’est pas bon. Par conséquent, de nombreux blogueurs expérimentés, dans la mesure du possible, essaient de ne pas utiliser de plugins, mais de modifier directement le code.

Bonjour, chers lecteurs du site ! Je vous présente un nouveau post dans lequel je parlerai de à quoi sert le bouton « Retour en haut » et comment l'installer sur WordPress. Eh bien, au début, comme toujours, j'expliquerai pourquoi ce bouton est nécessaire et s'il vaut la peine d'être installé. Commençons !

Par exemple, vous avez écrit un long article, l’utilisateur l’a lu jusqu’au bout et souhaite maintenant revenir au début. Je pense que c'est une situation familière. N'est-ce pas vrai ? Mais tourner la molette de la souris et « tirer » le curseur n'est pas très pratique et prend beaucoup de temps.

C'est pourquoi il a été créé cette fonction— élever la page vers le haut. Et aussi, si vous concevez magnifiquement le bouton, alors c'est un plus pour le design ! Et si vous le modifiez, alors lorsque vous appuyez dessus, vous pouvez relâcher la page vers le bas, c'est-à-dire vice versa. Comme ça.

La surélévation de la page peut être effectuée à la fois avec ou sans l'aide d'un plugin. Je vais vous expliquer les deux maintenant. Alors soyez prudent.

La première chose à faire est de l'activer. Après quoi le bouton commencera à fonctionner. Mais l’image du bouton sera standard. Je vous conseille de le changer par le vôtre. Pour ça:

Comme ça. Vous pouvez également le configurer, à savoir :

• Emplacement
• Indentations
• Vitesse
• et plus

Nous allons maintenant voir comment faire bouton de retour en haut pour wordpress sans utiliser de plugins tiers. Pourquoi pas de plugin ? Mais parce que les plugins ralentissent le site. Je l'ai déjà dit plus d'une fois (dans l'article - Ajouter une vidéo à WordPress) et je le répéterai encore et encore.

Pour créer un bouton, suivez les instructions ci-dessous :

1. Ouvrez le fichier footer.php, qui se trouve dans le dossier contenant le modèle, et collez le code devant :

Apportez simplement quelques modifications, à savoir :

• où il est écrit your_site.ru - écrivez l'adresse de votre site

• où se trouve le chemin d'accès à l'image - entrez le chemin d'accès à l'image qui sera le bouton

• où image est le titre de l'image. Si ce n'est pas .jpg, remplacez-le par le format défini dans l'image.

2. Ouvrez le fichier style.css, qui se trouve également dans le dossier des modèles, et à la toute fin, collez le code suivant :

#toTop (largeur : 100 px ; alignement du texte : centre ; remplissage : 5 px ; position : fixe ; bas : 10 px ; droite : 10 px ; curseur : pointeur ; couleur : #666666 ; décoration du texte : aucune ;)

3. Téléchargez-le et extrayez-le. Il contient le fichier verx.js, que vous devez ajouter à la racine de votre site.

4. Ouvrez le fichier function.php situé dans le dossier des modèles et entrez-y le code :

// inclusion intelligente de jquery if (!is_admin()) ( wp_deregister_script("jquery"); wp_register_script("jquery", ("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ), faux); wp_enqueue_script("jquery");

5. Eh bien, c'est tout ! Je peux vous féliciter, votre site dispose désormais d'un bouton de retour en haut pour WordPress.

Vous venez de lire l’article « Bouton Retour en haut pour WordPress » et de l’installer vous-même. Quelles sont vos impressions ? Écrivez dans les commentaires ! C'est tout pour le moment, tout le monde.

Cordialement, Konstantin Belan.