Como crear un boton “Ir arriba” en WordPress

Algunos artículos de blog de WordPress a veces pueden ser muy largos, eso es todo un desplazamiento innecesario para su visitante …

También podría facilitar la navegación del visitante ofreciéndole un enlace simple “De vuelta a lo alto“En la parte inferior de cada una de sus páginas.

Volver arriba - Volver arriba

Por qué un enlace Volver arriba?

Un ejemplo típico: el artículo es interesante, el visitante continúa leyendo y se encuentra desplazándose más y más y más … Y si el deseo de volver a la cima lo llevó? Perdería una increíble cantidad de tiempo !

Aquí hay formas muy simples de remediar esto:

1). Edite algunos archivos

En primer lugar, no olvide guardar los archivos que va a modificar.

Agregue un ancla al archivo “header.php” de su tema activoA través de Apparence> Editor, edite el archivo “header.php” que encontrará en / wp-content / themes / your-theme /.

Entonces busca cerrando la baliza y abriendo la baliza, después de encontrarlos, copie el código a continuación inmediatamente después de abrir la baliza. A veces, este último contiene parámetros y controles adicionales, si este fuera el caso, asegúrese de agregar el ancla justo después de la etiqueta final.

<a name="top"></a>

Lo que debería darte :

</head>
<body><a name="top"></a>

Ahora puedes ahorrar su archivo “encabezado” y decida dónde colocará el enlace “Volver a subir”. Muy a menudo será al final de cada página / artículo, por lo que deberá modificar su archivo “footer.php”, pero puede agregarlo a cualquier lugar (single.php o page.php, por ejemplo).

El enlace debe pegarse de la siguiente manera:

< a href = "https://wpformation.com/facilitez-la-navigation-avec-un-retour-en-haut/#top" >Retour en haut</ a >

Bueno, ya terminó ! Una vez que se guarda el archivo, verá aparecer este enlace: “Al revés” al final de todas sus páginas.

Te puede interesar:  Lista de tareas después de la instalación de WordPress

Podría, por supuesto, personalizar aún más este “Regreso” usando una imagen / icono al enlace de un enlace “texto”, usando un href + una clase de imagen (ejemplo:  Retour en Haut imagen como Volver arriba - Volver arriba

Con un poco de CSS, incluso podríamos personalizar más :

 #Nom-de-votre-classe{
 z-index: 2;
 background: #FF8500 url(images/votre-image.png) no-repeat center;
 width: 30px;
 height: 30px;
 text-indent: -99999px;
 border-radius: 50px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 position: fixed;
 bottom: 10px;
 right: 10px;
 cursor: pointer;
 }

2). Use un complemento que sepa cómo hacerlo …

El complemento Dinámico a superior sabe cómo hacerlo y lo hace muy bienAgrega un icono dinámico y automático “arriba” para facilitar el retorno al alza en sus páginas más largas. Dinámico a superior tiene un panel de estilo intuitivo para adaptarse a las necesidades específicas de cada sitio.

Nota: El botón aparece solo para navegadores cuyo javascript está activado y posiblemente se puede deshabilitar para visitantes a través de móviles.

Finalmente y para concluir, es gratis y en francés.

arriba

arriba

Plugin dinámico a superior3

cerrado

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Share This