icon-functions.php 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <?php
  2. /**
  3. * SVG icons related functions and filters
  4. */
  5. if ( ! function_exists( 'jetpack_social_menu_include_svg_icons' ) ) :
  6. /**
  7. * Add SVG definitions to the footer.
  8. */
  9. function jetpack_social_menu_include_svg_icons() {
  10. // Define SVG sprite file.
  11. $svg_icons = dirname( __FILE__ ) . '/social-menu.svg';
  12. // If it exists, include it.
  13. if ( file_exists( $svg_icons ) ) {
  14. require_once( $svg_icons );
  15. }
  16. }
  17. add_action( 'wp_footer', 'jetpack_social_menu_include_svg_icons', 9999 );
  18. endif;
  19. if ( ! function_exists( 'jetpack_social_menu_get_svg' ) ) :
  20. /**
  21. * Return SVG markup.
  22. *
  23. * @param array $args {
  24. * Parameters needed to display an SVG.
  25. *
  26. * @type string $icon Required SVG icon filename.
  27. * }
  28. * @return string SVG markup.
  29. */
  30. function jetpack_social_menu_get_svg( $args = array() ) {
  31. // Make sure $args are an array.
  32. if ( empty( $args ) ) {
  33. return esc_html__( 'Please define default parameters in the form of an array.', 'jetpack' );
  34. }
  35. // Define an icon.
  36. if ( false === array_key_exists( 'icon', $args ) ) {
  37. return esc_html__( 'Please define an SVG icon filename.', 'jetpack' );
  38. }
  39. // Set defaults.
  40. $defaults = array(
  41. 'icon' => '',
  42. 'fallback' => false,
  43. );
  44. // Parse args.
  45. $args = wp_parse_args( $args, $defaults );
  46. // Set aria hidden.
  47. $aria_hidden = ' aria-hidden="true"';
  48. // Begin SVG markup.
  49. $svg = '<svg class="icon icon-' . esc_attr( $args['icon'] ) . '"' . $aria_hidden . ' role="img">';
  50. /*
  51. * Display the icon.
  52. *
  53. * The whitespace around `<use>` is intentional - it is a work around to a keyboard navigation bug in Safari 10.
  54. *
  55. * See https://core.trac.wordpress.org/ticket/38387.
  56. */
  57. $svg .= ' <use href="#icon-' . esc_html( $args['icon'] ) . '" xlink:href="#icon-' . esc_html( $args['icon'] ) . '"></use> ';
  58. // Add some markup to use as a fallback for browsers that do not support SVGs.
  59. if ( $args['fallback'] ) {
  60. $svg .= '<span class="svg-fallback icon-' . esc_attr( $args['icon'] ) . '"></span>';
  61. }
  62. $svg .= '</svg>';
  63. return $svg;
  64. }
  65. endif;
  66. if ( ! function_exists( 'jetpack_social_menu_nav_menu_social_icons' ) ) :
  67. /**
  68. * Display SVG icons in social links menu.
  69. *
  70. * @param string $item_output The menu item output.
  71. * @param WP_Post $item Menu item object.
  72. * @param int $depth Depth of the menu.
  73. * @param array $args wp_nav_menu() arguments.
  74. * @return string $item_output The menu item output with social icon.
  75. */
  76. function jetpack_social_menu_nav_menu_social_icons( $item_output, $item, $depth, $args ) {
  77. // Get supported social icons.
  78. $social_icons = jetpack_social_menu_social_links_icons();
  79. // Change SVG icon inside social links menu if there is supported URL.
  80. if ( 'jetpack-social-menu' === $args->theme_location ) {
  81. foreach ( $social_icons as $attr => $value ) {
  82. if ( false !== strpos( $item_output, $attr ) ) {
  83. $item_output = str_replace( $args->link_after, '</span>' . jetpack_social_menu_get_svg( array( 'icon' => esc_attr( $value ) ) ), $item_output );
  84. }
  85. }
  86. }
  87. return $item_output;
  88. }
  89. add_filter( 'walker_nav_menu_start_el', 'jetpack_social_menu_nav_menu_social_icons', 10, 4 );
  90. endif;
  91. if ( ! function_exists( 'jetpack_social_menu_social_links_icons' ) ) :
  92. /**
  93. * Returns an array of supported social links (URL and icon name).
  94. *
  95. * @return array $social_links_icons
  96. */
  97. function jetpack_social_menu_social_links_icons() {
  98. // Supported social links icons.
  99. $social_links_icons = array(
  100. '500px.com' => '500px',
  101. 'amazon.cn' => 'amazon',
  102. 'amazon.in' => 'amazon',
  103. 'amazon.fr' => 'amazon',
  104. 'amazon.de' => 'amazon',
  105. 'amazon.it' => 'amazon',
  106. 'amazon.nl' => 'amazon',
  107. 'amazon.es' => 'amazon',
  108. 'amazon.co' => 'amazon',
  109. 'amazon.ca' => 'amazon',
  110. 'amazon.com' => 'amazon',
  111. 'apple.com' => 'apple',
  112. 'itunes.com' => 'apple',
  113. 'bandcamp.com' => 'bandcamp',
  114. 'behance.net' => 'behance',
  115. 'codepen.io' => 'codepen',
  116. 'deviantart.com' => 'deviantart',
  117. 'digg.com' => 'digg',
  118. 'dribbble.com' => 'dribbble',
  119. 'dropbox.com' => 'dropbox',
  120. 'etsy.com' => 'etsy',
  121. 'facebook.com' => 'facebook',
  122. '/feed/' => 'feed',
  123. 'flickr.com' => 'flickr',
  124. 'foursquare.com' => 'foursquare',
  125. 'goodreads.com' => 'goodreads',
  126. 'plus.google.com' => 'google-plus',
  127. 'google.com' => 'google',
  128. 'github.com' => 'github',
  129. 'instagram.com' => 'instagram',
  130. 'linkedin.com' => 'linkedin',
  131. 'mailto:' => 'mail',
  132. 'meetup.com' => 'meetup',
  133. 'medium.com' => 'medium',
  134. 'pinterest.com' => 'pinterest',
  135. 'getpocket.com' => 'pocket',
  136. 'reddit.com' => 'reddit',
  137. 'skype.com' => 'skype',
  138. 'skype:' => 'skype',
  139. 'slideshare.net' => 'slideshare',
  140. 'snapchat.com' => 'snapchat',
  141. 'soundcloud.com' => 'soundcloud',
  142. 'spotify.com' => 'spotify',
  143. 'stumbleupon.com' => 'stumbleupon',
  144. 'tumblr.com' => 'tumblr',
  145. 'twitch.tv' => 'twitch',
  146. 'twitter.com' => 'twitter',
  147. 'vimeo.com' => 'vimeo',
  148. 'vk.com' => 'vk',
  149. 'wordpress.org' => 'wordpress',
  150. 'wordpress.com' => 'wordpress',
  151. 'yelp.com' => 'yelp',
  152. 'youtube.com' => 'youtube',
  153. );
  154. return $social_links_icons;
  155. }
  156. endif;