Cómo integrar Hover.css en WordPress

Este artículo le ofrece agregar fácilmente la biblioteca Hover.css creado por Ian Lunn dentro de su tema de WordPress.

Unos pocos pasos serán suficientes para que su sitio sea interactivo !

https://www.youtube.com/watch?v = gvHs7ruPnQc

Que Hover.css ?

Un “flotador” es un tipo de efecto que anima el contenido cuando el mouse vuela sobre el elemento. Generalmente se aplica a un enlace, texto, botón o imagen. Esto le permite al visitante comprender que algo sucederá si hace clic en este elemento, haciendo que su sitio sea más “amigable”.

Hay muchas opciones de efectos ofrecidos por CSS3 y el desarrollador Ian Lunn los ha enumerado (más de 4,300 líneas de código) en un archivo que les permite usarse muy fácilmente sin tener que perder el tiempo integrándolos. Ofrece casi 100 efectos diferentes !

Agregue la biblioteca Hover.css a WordPress

Muchos temas de WordPress ya tienen “animaciones flotantes”, sin embargo, puede decidir agregar más. Estos son los pocos pasos para llegar allí:

Paso 1: Obtenga la Biblioteca Hover.css

Hover.css CSS para copiar

Para hacer esto, tendrás que ir al perfil de Ian Lunn en Github y copie todo el contenido del archivo hover.css.

Paso 2: crea un archivo hover.css

Crea la hoja de estilo Hover.css

Luego, usando un editor de texto como Texto sublim, tendrá que crear un nuevo archivo llamado “Hover.css” pegar las 4350 líneas de código (previamente copiadas en el paso 1). Luego guarde este archivo en el escritorio de su computadora.

Paso 3: envíe el archivo hover.css al tema de sus hijos

Al igual que cualquier modificación que se haga en un tema, se recomienda utilizar un tema para niños. Por lo tanto, será necesario pasar por esta etapa antes de continuar. Si aún no tiene un tema para niños, lea este artículo que lo ayudará a crear uno. Entonces solo envía el archivo hover.css, a través de una interfaz FTP (como FileZilla, por ejemplo), dentro de su carpeta de temas ubicada en su host. El camino a seguir debería verse como: www> wp-content> tema> ton-child-theme> coloque “hover.css” aquí

Paso 4: indique al tema infantil la presencia del nuevo CSS

Código para agregar al archivo functions.php

De hecho, una vez el archivo hover.css agregado, el tema tendrá que tenerlo en cuenta gracias a la función wp_enqueue_style propuesto por el WordPress CodexPara hacer esto, edite su archivo… functions.php (siempre con un editor de texto o directamente desde la administración de WordPress en la pestaña Apariencia> Editor) agregando esta línea simple:

 wp_enqueue_style( 'hover-style-css', get_stylesheet_directory_uri() . '/hover.css' );

justo debajo de esta línea ya presente en el tema de sus hijos:…

 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

La representación final debería verse así:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'hover-style-css', get_stylesheet_directory_uri() . '/hover.css' );
}

Paso 5: usa Hover.css

Ahora todo está listo ! Solo tiene que aplicar animaciones de estilo flotante a su contenido … Para eso, solo tendrá que agregar “clases” a sus etiquetas HTML

Primero, tendrás que elegir tu efecto favorito y para eso Nos vemos en la galeríaUna vez que haya encontrado su “felicidad”, tendrá que transformar el nombre del efecto en la clase de la siguiente manera: si el efecto elige se llama. “Rebotar a la izquierda”, la clase a aplicar será “Hvr-bounce-to-left”, así como si se llama a su efecto “Flotar”, la clase a aplicar será “Hvr-float”.

¿Cuáles son los diferentes tipos de uso? ?

=> en una imagen :

Inserte una imagen en el editor visual de su artículo y luego vaya a la versión de “texto” para agregar, a la etiqueta , la clase deseada como en el siguiente ejemplo:

<img class="https://wpformation.com/comment-integrer-hover-css-dans-wordpress/hvr-float aligncenter size-full" src="https://wpformation.com/comment-integrer-hover-css-dans-wordpress/https://url-de-votre-image.png" alt="https://wpformation.com/comment-integrer-hover-css-dans-wordpress/texte-alternatif" width="https://wpformation.com/comment-integrer-hover-css-dans-wordpress/largeur" height="https://wpformation.com/comment-integrer-hover-css-dans-wordpress/hauteur" />

=> en un título :

Para esto, puede proceder de la misma manera pero agregando la clase en la baliza

,

,

etc …:

<h4 class="hvr-underline-from-left">Mon titre avec hover</h4>

=> en una navegación (menú):

Puede aplicar castores a toda su navegación, para eso, vaya a la pestaña Apariencia> MenúLuego abra la ventana de opciones de pantalla (arriba a la derecha) y marque. “Clases CSS”.

Agregue la opción de clase CSS al menú

Finalmente, aparece un nuevo campo en cada elemento de su menú, lo es “Clases CSS (opcional)” En esta ubicación precisa, puede insertar su clase Hover.css . Recuerde guardar su menú!

Hover.css

=> con la adición de un icono :

Linker FontAwesome

La biblioteca Hover.css usa los iconos propuestos por FontAwesomePara beneficiarse, solo tendrá que agregar esta línea de código entre las etiquetas. y que encontrarás en tu archivo header.php :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

También en este caso, deberá duplicar el archivo header.php y agréguelo a la carpeta de temas de sus hijos. Luego, puede agregar fácilmente iconos a sus elementos utilizando clases como .hvr-icon-forward, .hvr-icon-forward o .hvr-icon-up. Puede cambiar fácilmente el icono eligiéndolo La lista completa de iconos de FontAwesome luego declarándolo en el archivo style.css del tema de sus hijos, como a continuación:

.hvr-icon-forward:before {
    content: "f024";
}

Para más información, no dude en consultar las instrucciones.

¿Cuáles son las alternativas? ?

  • No tiene que crear un archivo hover.css, simplemente puede usar una o dos clases ofrecidas en esta biblioteca y agregarlo a su propio archivo style.css
  • Hover.css usa CSS3, lo que significa que no necesita eso para crear sus propios efectos
  • Puede modificar fácilmente los efectos: colores, tamaño, etc … modificando el código propuesto por Ian Lunn y contenido en el archivo
  • Puede usar complementos como Hover Effects Pack ($ 21), Hover Effects Builder ($ 23) o el complemento gratuito para Visual Composer (Imagen Hover Effect para VC).

En conclusión…

Comprenderá que no es ciencia espacial agregar algunos efectos CSS gracias a la biblioteca Hover.css y esto hará que su sitio de WordPress sea mucho más interactivo ! No es necesario ponerlo en todas partes ! Unos pocos enlaces o algunos botones son suficientes !

NB: Para más explicaciones, los invito a seguir El tutorial ofrecido por el creador de Hover.css.

cerrado

Te puede interesar:  WordPress, 13 errores que no debe cometer

Deja una respuesta

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

Share This