Cómo agregar menús desplegables de SuperFish en WordPress

Cómo agregar menús desplegables de SuperFish en WordPress

Cuando se trata de menús desplegables, siempre he sido un gran admirador de SuperFish. El complemento SuperFish jQuery no solo es súper fácil de usar y personalizar, sino que se le proporciona todo, por lo que solo necesita copiar y pegar el código en su diseño.

Agregar SuperFish a WordPress es en realidad una tarea muy simple, pero para aquellos que son nuevos en él puede ser un poco más difícil o puede terminar haciéndolo de manera incorrecta (como llamar al script en su archivo header.php). Por lo tanto, el siguiente artículo lo guiará a través de todos los pasos para agregar el menú desplegable a su tema.

Paso 1: descargue el complemento SuperFish

El primer paso es simplemente visitar el Superpescado descarga la página y sube tu código. Sugiero simplemente descargar el archivo .ZIP que incluye todo lo que necesita. También hay una página de Github que le recomiendo que marque en caso de que necesite más ayuda o tenga problemas con el script js, puede publicarlos allí.

Paso 2: agregue CSS y JS SuperFish a su carpeta de temas

A continuación, querrá extraer el contenido de la carpeta zip y cargarlo en la carpeta de temas en la que está trabajando.

  • Copie el contenido de superfish.css en su style.css
  • Copie el contenido del archivo superfish-navbar.css en el archivo style.css de su tema; esto le dará el estilo que puede cambiar después
  • Arrastra los archivos superfish.js y supersubs.jps a tu tema; prefiero ponerlos en una carpeta llamada “js”

Paso 3: Inicie el script de SuperFish

Ahora que tiene todo el CSS y JS agregado a su tema, querrá llamar al JS e iniciar el script. Primero le mostraré cómo llamar a sus scripts de la manera correcta en su archivo functions.php. Finalmente, te daré el código que debería ir en tu header.php para iniciar el script.

Agregue a su archivo Functions.php para poner en cola scripts

// Load superfish scripts
function myprefix_load_superfish_scripts() {

	// load jquery if it isn't
	wp_enqueue_script( 'jquery' );


	// SuperFish Scripts
	wp_enqueue_script( 'superfish', get_template_directory_uri() . '/js/superfish.js' );
	wp_enqueue_script( 'supersubs', get_template_directory_uri() . '/js/supersubs.js' );

}
add_action( 'wp_enqueue_scripts', 'myprefix_load_superfish_scripts' );

Tenga en cuenta que estamos usando get_template_directory_uri () que se refiere a su tema principal. Si está utilizando un tema hijo, asegúrese de reemplazarlo con get_stylesheet_directory_uri () que apunta a su tema hijo.

Agregue el siguiente código para iniciar el script SuperFish

Puede agregar el código a continuación al archivo functions.php que lanzará el script superFish agregando el javascript al pie de página del sitio antes de la etiqueta de cierre del cuerpo. O, por supuesto, puede poner su javascript en su propio archivo y cargarlo a través de la función anterior.

function myprefix_start_superfish() { ?>
	
	<script type="text/javascript">
		jQuery( function( $ ) {
			$( document ).ready( function() {
				$('ul.sf-menu').supersubs( {
					minWidth   : 16, // minimum width of sub-menus in em units
					maxWidth   : 40, // maximum width of sub-menus in em units
					extraWidth : 1   // extra width can ensure lines don't sometimes turn over
				} ).superfish();
			} );
		} );
	</script>

<?php }
add_action( 'wp_footer', 'myprefix_start_superfish' );

Paso 4: agregue una clase de menú sf a la función WP_Nav_Menu

Todo lo que tiene que hacer es agregar el “menú sf”Clase a su navegación ul. Esta es la clase que se usa para convertir su menú en un menú desplegable de Superpescado. Si anteriormente tenía una barra de navegación en su tema, querrá eliminar todo su estilo y simplemente dejar el código php para el menú (ya que agregó todo el estilo necesario para el menú desplegable en el paso 2).

En algún lugar del encabezado de su tema o si no puede encontrarlo en el encabezado, haga una búsqueda rápida a través de los archivos del tema con el editor de texto que usa para editar el código del tema y busque la función “wp_nav_menu” para el menú que desea cambiar. . Una vez ubicado, simplemente edite (o agregue si no existe) el parámetro “menu_class” para incluir el menú sf class como en el siguiente ejemplo:

wp_nav_menu( array(
	'theme_location' => 'primary',
	'sort_column'    => 'menu_order',
	'menu_class'     => 'sf-menu',
	'fallback_cb'    => 'default_menu'
) );

Ahora, si está creando un tema desde cero y aún no ha definido ninguna región de menú y las ha agregado al sitio y no sabe cómo, eche un vistazo a las siguientes 2 páginas de documentación útil en el Codex de WordPress:

Deja un comentario

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

Ir arriba