Sélectionner une page


Tutoriel de base sur son utilisation Plugin WordPress « faire défiler la page vers l’ID » sur votre site WordPress.

Pour utiliser le plugin sur votre site WordPress (après l’avoir installé et activé), vous devez procéder comme suit:

  1. Créer des cibles d’identification La page défile jusqu’à ou Recherchez les attributs d’ID existants dans votre sujet à utiliser avec vos liens.
  2. Créer des liens ce point sur ces objectifs ou Activez le plugin pour les liens qui existent déjà sur votre site.

Thème WordPress Divi

Créer des cibles d’identification

Création de cibles d’identification dans l’éditeur de postbloc (Gutenberg)

Vous pouvez créer vos objectifs dans l’éditeur de blocs de plusieurs manières, telles que: B. avec grouper Block, la page de défilement vers le bloc cible ID, le bloc shortcode, l’attribut de classe de bloc, le champ d’ancrage HTML, etc.

Créez des cibles d’identification avec grouper bloquer

Cliquez sur l’icône Ajouter un bloc et choisissez Groupe. Cela insérera un bloc conteneur général qui peut regrouper d’autres blocs ensemble, et nous pouvons ajouter que id sur ce bloc de groupe / conteneur général.

Dans les propriétés du bloc de groupe (champ de droite), vous pouvez insérer l’ID souhaité dans le champ « Ancre HTML ».

Créez des cibles d’identification avec Petit code bloquer

Vous pouvez utiliser les codes courts du plugin dans l’éditeur de blocs. Cliquez sur l’icône Ajouter un bloc et sélectionnez Shortcode.
ajouter le [ps2id id='section-1'/] dans le champ shortcode pour créer une cible avec ID section-1.

Vous pouvez aussi l’utiliser [ps2id_wrap] Shortcode en conséquence.

Créer des cibles d’identification à l’aide de la boîte d’ancrage HTML

Si vous utilisez des titres dans votre contenu, Vous pouvez utiliser l’attribut d’ancrage HTML des blocs pour spécifier un ID cible. Sélectionnez votre bloc, cliquez sur « Avancé » dans le volet de droite et entrez l’ID cible souhaité dans le champ « Ancre HTML ».

Créer des cibles d’identification à l’aide du champ Classe (s) CSS supplémentaire (s)

Vous pouvez générer des cibles d’ID pour chaque élément de bloc en définissant le nom de la classe sur: ps2id-id-yourid, changer yourid Partie de la valeur ID souhaitée.

Cliquez sur un élément de bloc (par exemple un paragraphe), cliquez sur « Avancé » dans la zone de droite et définissez l’ID cible souhaité dans la « Classe CSS supplémentaire » sous la forme de:
ps2id-id- plus l’identifiant que vous voulez.
Par exemple, si vous souhaitez créer l’ID cible « dernière section », attribuez à l’élément la classe CSS:
ps2id-id-last-section.

Créez des cibles d’ID avec le bloc de plug-in « Faire défiler la page jusqu’à la cible d’ID »

Le plugin a son propre bloc pour insérer des cibles: « Faire défiler la page jusqu’à la cible ID »

Créer des cibles d’identification dans l’éditeur de publication visuelle (« ancien » éditeur classique)

tinymce-custom-btn-ps2id-target Dans l’éditeur de publication visuelle, cliquez sur le bouton de la barre d’outils Insérer la page vers la cible d’ID pour créer une cible à l’emplacement du curseur dans l’éditeur.

page-scroll-to-id-target-modal Saisissez la valeur ID souhaitée dans le modal « Faire défiler la page jusqu’à la cible ID » (par ex some-id) et cliquez sur « OK ». Le shortcode de destination (par ex. [ps2id id='some-id' target=''/]) apparaît dans l’éditeur. Mettez à jour / enregistrez le message / la page. Vous pouvez maintenant utiliser cette valeur d’identifiant dans l’url de votre lien (ex #some-id).

Création de cibles d’identification dans l’éditeur de publication à l’aide de codes courts

Entrez dans le post visuel ou l’éditeur de texte [ps2id id='some-id'/] où vous souhaitez créer et définir la destination id Attribut à la valeur souhaitée. Cela créera une cible de point d’ancrage simple. Si vous souhaitez inclure votre contenu (ou une partie de votre contenu) dans un ID cible (comme l’ajout d’un attribut ID à un élément de contenu), utilisez l’option [ps2id_wrap] Petit code:

[ps2id_wrap id='some-id']
your content...
[/ps2id_wrap]

Mettez à jour / enregistrez l’article / la page afin de pouvoir utiliser cette valeur cible dans l’url de votre lien (ex #some-id).

Pour plus d’informations sur les shortcodes de destination, cliquez ici

Création de cibles d’identification en HTML

Enveloppez votre contenu dans un div avec un attribut ID (recommandé pour une meilleure accentuation des liens) ou ajoutez des points d’ancrage simples (avec des attributs ID) avant chaque section de contenu. Exemples:

<div id="section-1">
  <p>Section 1 content...</p>
</div>

<div id="section-2">
  <p>Section 2 content...</p>
</div>

<div id="section-3">
  <p>Section 3 content...</p>
</div>
<a id="section-1"></a>
<p>Section 1 content...</p>

<a id="section-2"></a>
<p>Section 2 content...</p>

<a id="section-3"></a>
<p>Section 3 content...</p>

Création de cibles d’identification dans les zones de widgets WordPress

Créez des cibles dans vos zones de widgets (Apparence → Widgets) en utilisant le widget « Faire défiler la page vers la cible ID » du plugin.
Notez que tous les widgets WordPress ont des valeurs d’identifiant existantes que vous pouvez utiliser avec vos liens. Vous pouvez trouver ces valeurs d’ID dans chaque widget actif sous l’étiquette «Faire défiler la page vers la cible d’ID». L’option pour afficher ces valeurs est « Afficher l’attribut d’ID de widget » C’est activé par défault.

FAQ

Créer des liens

Défilement de la page jusqu'au menu de destination ID Le plugin est Activé par défaut pour les liens de menu WordPress (Apparence → Menus) afin que vous puissiez ajouter des liens personnalisés et définir leur URL sur l’ID / la destination vers laquelle vous souhaitez faire défiler.

Modifiez votre menu et ajoutez des « Liens personnalisés » car ces types de liens nous permettent de saisir une URL personnalisée avec l’identifiant que vous souhaitez. Votre URL de lien doit être au format #some-id, http://my-site.com/page/#some-id, /page/#some-id etc.

Veuillez noter que si vous souhaitez que vos liens fonctionnent à partir d’autres / d’autres sites, vous devez inclure l’adresse complète avec l’ID cible dans leur URL (ex. http://my-site.com/page/#some-id) ou l’URL racine relative (par exemple /page/#some-id).

Vous pouvez utiliser les shortcodes du plugin dans l’éditeur de blocs. Ajoutez le shortcode: [ps2id url='#some-id']link text[/ps2id] dans n’importe quel élément de bloc pour créer un lien pointant vers la cible « some-id ».

Veuillez noter que depuis la version 1.6.3 de « Scroll Page to ID » le plugin est activé par défaut pour tous les liens avec une valeur de hachage non vide (par ex. #some-id) dans leur URL. Cela signifie que vous n’avez pas besoin d’utiliser le shortcode du plugin pour créer des liens car tout lien que vous créez via l’éditeur WordPress fonctionnera.

lien tinymce-personnalisé-btn-ps2id Dans l’éditeur de publication visuelle, cliquez sur le bouton de la barre d’outils Insérer / Modifier la page pour faire défiler le lien ID pour créer un lien à la position du curseur dans l’éditeur ou à partir du texte déjà sélectionné.

page-scroll-to-id-link-modal Dans le modal « Faire défiler la page vers le lien d’identification », saisissez l’URL et le texte du lien. L’URL doit être au format #some-id, http://my-site.com/page/#some-id, /page/#some-id etc. Lorsque vous avez terminé, cliquez sur OK et le lien apparaîtra dans l’éditeur. Vous pouvez éditer le lien en utilisant les boutons «Insérer / modifier un lien», ainsi que «Insérer / éditer une page, faire défiler jusqu’au lien ID» et en ligne.

Le modal « Faire défiler la page vers le lien ID » fournit des options supplémentaires telles que « Décalage » et « Classe (s) personnalisée (s) » qui peuvent être utilisées pour modifier le décalage du lien, sa durée / vitesse de défilement, etc.

Entrez dans le post visuel ou l’éditeur de texte [ps2id url='#some-id']link text[/ps2id] où vous souhaitez créer et définir le lien url Texte d’attribut et de lien pour les valeurs souhaitées. Le shortcode offre les mêmes options que les plugins Bouton de la barre d’outils Insérer / Modifier la page pour faire défiler le lien ID au dessus Les attributs.

Tout lien avec ps2id super, n’est-ce pas m_PageScroll2id La valeur de l’attribut rel est traitée par le plugin. Par exemple:

<a href="#some-id" class="ps2id">link text</a>
<a href="#another-id" rel="m_PageScroll2id">link text</a>

Vous pouvez demander à Scroll Page To ID de traiter tous les liens de vos pages en faisant glisser le Champ « Sélecteur (s) » dans les paramètres du plugin.
Si vous devez activer « Faire défiler la page vers l’ID » pour tous les liens avec une URL contenant un hachage (#), saisissez la valeur suivante dans le champ Sélecteur (s):
a[href*=#]:not([href=#])

Pour plus d’informations sur le (s) sélecteur (s), cliquez ici.

FAQ

Mettre en évidence les liens

Chaque fois qu’un élément cible est visible à l’écran (c’est-à-dire dans la fenêtre), le plugin ajoute que mPS2id-highlight Classez les liens ou les liens associés (c’est-à-dire les liens qui défilent vers cette destination). Vous pouvez utiliser cette classe dans la feuille de style de votre sujet ou dans le CSS personnalisé pour mettre en forme les liens actuels / actifs, par exemple
a.mPS2id-highlight{ background: #ff0; }

Scénario général et exemple

Disons que vous avez un menu collant de liens qui mènent à différentes destinations / sections sur la page. La couleur du texte de vos liens est noire (cela peut être déterminé par votre thème ou une autre feuille de style):

.memu-item a{ 
    color: black; 
}

Lorsque vous faites défiler des sections de pages (c’est-à-dire des destinations), nous voulons que le lien de la destination visible / actuelle devienne rouge. Vous pouvez le faire en ajoutant le CSS suivant:

.memu-item a.mPS2id-highlight{ 
    color: red; 
}

Notes et plus d’informations

Les classes de surbrillance standard pour les liens sont: mPS2id-highlight, mPS2id-highlight-first et mPS2id-highlight-last (Vous pouvez modifier ces noms de classe dans les paramètres du plugin si vous le souhaitez).

Pour plus d’informations sur les classes et options de surbrillance, voir « Cours et options de mise en évidence », « Marquer la (les) sélection (s) » et FAQ ci-dessous.

FAQ

Si votre page a un menu principal avec des positions collantes / bloquées, vous devrez probablement utiliser des plugins Option « Offset » pour éviter que le menu ne chevauche votre contenu. Cette option nous permet de reporter (c’est-à-dire de décaler) le défilement. Dans le cas d’un menu collant supérieur, nous devons généralement «arrêter» le défilement quelques pixels avant que la cible n’atteigne le haut de la page (pour tenir compte de l’espace occupé par le menu collant).

Allez dans Paramètres → Page, faites défiler jusqu’à ID → Décalage et insérez un décalage correspondant à la hauteur de votre menu collant (en pixels). Vous pouvez insérer la valeur de hauteur sous forme de nombre (par ex. 100) ou vous pouvez insérer vos choix de menu (ex #my-sticky-menu) afin que le plugin calcule sa hauteur automatiquement.

Le plugin propose expressions de sélection spéciales pour définir des décalages avancés et travailler avec des menus réactifs. Pour plus d’informations Voir l’option « Offset ».

Faire défiler vers / à partir de différentes pages

Le plugin a le Option pour faire défiler vers / à partir de différentes pages activé par défaut. Cela signifie que si vous cliquez sur un lien qui pointe vers un ID cible sur une autre page, vous obtiendrez toujours l’effet de défilement fluide qui se produit immédiatement après le chargement complet de cette page.

La seule chose que vous devez faire est de vous assurer que vos liens contiennent ces adresse complète avec l’ID cible dans leur URL (par exemple http://my-site.com/page/#some-id).

Didacticiel vidéo



Source link

Recent Posts