menu-functions.php 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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. * Add a button to top-level menu items that has sub-menus.
  16. * An icon is added using CSS depending on the value of aria-expanded.
  17. *
  18. * @since Twenty Twenty-One 1.0
  19. *
  20. * @param string $output Nav menu item start element.
  21. * @param object $item Nav menu item.
  22. * @param int $depth Depth.
  23. * @param object $args Nav menu args.
  24. * @return string Nav menu item start element.
  25. */
  26. function twenty_twenty_one_add_sub_menu_toggle( $output, $item, $depth, $args ) {
  27. if ( 0 === $depth && in_array( 'menu-item-has-children', $item->classes, true ) ) {
  28. // Add toggle button.
  29. $output .= '<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)">';
  30. $output .= '<span class="icon-plus">' . twenty_twenty_one_get_icon_svg( 'ui', 'plus', 18 ) . '</span>';
  31. $output .= '<span class="icon-minus">' . twenty_twenty_one_get_icon_svg( 'ui', 'minus', 18 ) . '</span>';
  32. $output .= '<span class="screen-reader-text">' . esc_html__( 'Open menu', 'twentytwentyone' ) . '</span>';
  33. $output .= '</button>';
  34. }
  35. return $output;
  36. }
  37. add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_add_sub_menu_toggle', 10, 4 );
  38. /**
  39. * Detects the social network from a URL and returns the SVG code for its icon.
  40. *
  41. * @since Twenty Twenty-One 1.0
  42. *
  43. * @param string $uri Social link.
  44. * @param int $size The icon size in pixels.
  45. * @return string
  46. */
  47. function twenty_twenty_one_get_social_link_svg( $uri, $size = 24 ) {
  48. return Twenty_Twenty_One_SVG_Icons::get_social_link_svg( $uri, $size );
  49. }
  50. /**
  51. * Displays SVG icons in the footer navigation.
  52. *
  53. * @since Twenty Twenty-One 1.0
  54. *
  55. * @param string $item_output The menu item's starting HTML output.
  56. * @param WP_Post $item Menu item data object.
  57. * @param int $depth Depth of the menu. Used for padding.
  58. * @param stdClass $args An object of wp_nav_menu() arguments.
  59. * @return string The menu item output with social icon.
  60. */
  61. function twenty_twenty_one_nav_menu_social_icons( $item_output, $item, $depth, $args ) {
  62. // Change SVG icon inside social links menu if there is supported URL.
  63. if ( 'footer' === $args->theme_location ) {
  64. $svg = twenty_twenty_one_get_social_link_svg( $item->url, 24 );
  65. if ( ! empty( $svg ) ) {
  66. $item_output = str_replace( $args->link_before, $svg, $item_output );
  67. }
  68. }
  69. return $item_output;
  70. }
  71. add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_nav_menu_social_icons', 10, 4 );
  72. /**
  73. * Filters the arguments for a single nav menu item.
  74. *
  75. * @since Twenty Twenty-One 1.0
  76. *
  77. * @param stdClass $args An object of wp_nav_menu() arguments.
  78. * @param WP_Post $item Menu item data object.
  79. * @param int $depth Depth of menu item. Used for padding.
  80. * @return stdClass
  81. */
  82. function twenty_twenty_one_add_menu_description_args( $args, $item, $depth ) {
  83. if ( '</span>' !== $args->link_after ) {
  84. $args->link_after = '';
  85. }
  86. if ( 0 === $depth && isset( $item->description ) && $item->description ) {
  87. // The extra <span> element is here for styling purposes: Allows the description to not be underlined on hover.
  88. $args->link_after = '<p class="menu-item-description"><span>' . $item->description . '</span></p>';
  89. }
  90. return $args;
  91. }
  92. add_filter( 'nav_menu_item_args', 'twenty_twenty_one_add_menu_description_args', 10, 3 );