Cuando se trata de menús desplegables, siempre he sido un gran fanático de SuperFish. El complemento SuperFish jQuery no solo es súper fácil de usar y personalizar, sino que todo se le proporciona para que solo tenga que 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 recién comienzan, 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). Entonces, la siguiente publicación 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 superpez descarga la página y descarga 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 marcar en caso de que necesite ayuda adicional o tenga algún problema con el script js, puede publicarlo allí.
Paso 2: agregue SuperFish CSS & JS a su carpeta de temas
A continuación, querrá extraer el contenido de la carpeta zip y cargarlo en la carpeta del tema en el que está trabajando.
- Copie el contenido de superfish.css a su estilo.css
- Copie el contenido del archivo superfish-navbar.css en el archivo style.css de su tema; esto le dará el estilo que puede editar después
- Arrastre los archivos superfish.js y supersubs.jps a su tema; prefiero ponerlos en una carpeta llamada «js»
Paso 3: Inicie SuperFish Script
Ahora que ha agregado todo el CSS y JS 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. Por último, te daré el código que debe ir en tu header.php para iniciar el script.
Agregue a su archivo Functions.php para poner en cola los 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 vincula a su tema principal. Si está utilizando un tema secundario, asegúrese de cambiar esto a get_stylesheet_directory_uri() en su lugar, que apunta a su tema secundario.
Agregue el siguiente código para iniciar SuperFish Script
Puede agregar el código a continuación al archivo functions.php que iniciará el script de superFish agregando el javascript al pie de página del sitio antes de la etiqueta del cuerpo de cierre. O, por supuesto, puede colocar 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 la clase sf-menu a la función WP_Nav_Menu
Ahora todo lo que tienes que hacer es agregar el «menú sf” clase a su navegación ul. Esta es la clase utilizada para convertir su menú en un menú desplegable SuperFish. Si anteriormente tenía una barra de navegación en su tema, querrá eliminar todo el estilo y simplemente dejar el código php para el menú (ya que ha agregado 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 de los archivos del tema con cualquier editor de texto que esté usando para modificar el código del tema y ubique la función «wp_nav_menu» para el menú que desea modificar. . Una vez ubicado, simplemente edite (o agregue si no existe) el parámetro «menu_class» para que incluya el menú sf clase 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ú ni la ha agregado al sitio y no está seguro de cómo hacerlo, eche un vistazo a las siguientes 2 páginas de documentación útiles en el Codex de WordPress:
