Created
May 30, 2018 10:03
-
-
Save artikus11/305e4a9696a0ddae0a18502c79816346 to your computer and use it in GitHub Desktop.
Вывод профилей на соцсети, с svg-иконками
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * SVG icons related functions and filters | |
| * | |
| * @since 1.1.0 | |
| */ | |
| if ( ! defined( 'ABSPATH' ) ) { | |
| exit; // Exit if accessed directly | |
| } | |
| /** | |
| * Return SVG markup. | |
| * | |
| * @param array $args { | |
| * Parameters needed to display an SVG. | |
| * | |
| * @type string $icon Required SVG icon filename. | |
| * @type string $title Optional SVG title. | |
| * @type string $desc Optional SVG description. | |
| * } | |
| * @return string SVG markup. | |
| */ | |
| function wpruse_get_svg( $args = array() ) { | |
| // Make sure $args are an array. | |
| if ( empty( $args ) ) { | |
| return esc_html__( 'Please define default parameters in the form of an array.', 'some' ); | |
| } | |
| // Define an icon. | |
| if ( false === array_key_exists( 'icon', $args ) ) { | |
| return esc_html__( 'Please define an SVG icon filename.', 'some' ); | |
| } | |
| // Set defaults. | |
| $defaults = array( | |
| 'icon' => '', | |
| 'title' => '', | |
| 'desc' => '', | |
| 'fallback' => false, | |
| ); | |
| // Parse args. | |
| $args = wp_parse_args( $args, $defaults ); | |
| // Set aria hidden. | |
| $aria_hidden = ' aria-hidden="true"'; | |
| // Set ARIA. | |
| $aria_labelledby = ''; | |
| /* | |
| * Some theme doesn't use the SVG title or description attributes; non-decorative icons are described with .screen-reader-text. | |
| * | |
| * However, child themes can use the title and description to add information to non-decorative SVG icons to improve accessibility. | |
| * | |
| * Example 1 with title: <?php echo wpruse_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is the title', 'textdomain' ) ) ); ?> | |
| * | |
| * Example 2 with title and description: <?php echo wpruse_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is the title', 'textdomain' ), 'desc' => __( 'This is the description', 'textdomain' ) ) ); ?> | |
| * | |
| * See https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/. | |
| */ | |
| if ( $args['title'] ) { | |
| $aria_hidden = ''; | |
| $unique_id = uniqid(); | |
| $aria_labelledby = ' aria-labelledby="title-' . $unique_id . '"'; | |
| if ( $args['desc'] ) { | |
| $aria_labelledby = ' aria-labelledby="title-' . $unique_id . ' desc-' . $unique_id . '"'; | |
| } | |
| } | |
| // Begin SVG markup. | |
| $svg = '<svg class="icon icon-' . esc_attr( $args['icon'] ) . '"' . $aria_hidden . $aria_labelledby . ' role="img">'; | |
| // Display the title. | |
| if ( $args['title'] ) { | |
| $svg .= '<title id="title-' . $unique_id . '">' . esc_html( $args['title'] ) . '</title>'; | |
| // Display the desc only if the title is already set. | |
| if ( $args['desc'] ) { | |
| $svg .= '<desc id="desc-' . $unique_id . '">' . esc_html( $args['desc'] ) . '</desc>'; | |
| } | |
| } | |
| /* | |
| * Display the icon. | |
| * | |
| * The whitespace around `<use>` is intentional - it is a work around to a keyboard navigation bug in Safari 10. | |
| * | |
| * See https://core.trac.wordpress.org/ticket/38387. | |
| */ | |
| $svg .= ' <use href="' . get_template_directory_uri() . '/assets/images/symbol-defs.svg' . '#icon-' . esc_html( $args['icon'] ) . '" xlink:href="' . get_template_directory_uri() . '/assets/images/symbol-defs.svg' . '#icon-' . esc_html( $args['icon'] ) . '"></use> '; | |
| // Add some markup to use as a fallback for browsers that do not support SVGs. | |
| if ( $args['fallback'] ) { | |
| $svg .= '<span class="svg-fallback icon-' . esc_attr( $args['icon'] ) . '"></span>'; | |
| } | |
| $svg .= '</svg>'; | |
| return $svg; | |
| } | |
| /** | |
| * Display an SVG. | |
| * | |
| * @param array $args Parameters needed to display an SVG. | |
| */ | |
| function wpruse_do_svg( $args = array() ) { | |
| echo wpruse_get_svg( $args ); | |
| } | |
| /** | |
| * Display SVG icons in social links menu. | |
| * | |
| * @param string $item_output The menu item output. | |
| * @param WP_Post $item Menu item object. | |
| * @param int $depth Depth of the menu. | |
| * @param array $args wp_nav_menu() arguments. | |
| * @return string $item_output The menu item output with social icon. | |
| */ | |
| add_filter( 'walker_nav_menu_start_el', 'wpruse_nav_menu_social_icons', 10, 4 ); | |
| function wpruse_nav_menu_social_icons( $item_output, $item, $depth, $args ) { | |
| // Get supported social icons. | |
| $social_icons = wpruse_social_links_icons(); | |
| // Change SVG icon inside social links menu if there is supported URL. | |
| if ( 'social-menu' === $args->theme_location ) { | |
| foreach ( $social_icons as $attr => $value ) { | |
| if ( false !== strpos( $item_output, $attr ) ) { | |
| $item_output = str_replace( $args->link_after, '</span>' . wpruse_get_svg( array( 'icon' => esc_attr( $value ) ) ), $item_output ); | |
| } | |
| } | |
| } | |
| return $item_output; | |
| } | |
| /** | |
| * Returns an array of supported social links (URL and icon name). | |
| * | |
| * @return array $social_links_icons | |
| */ | |
| function wpruse_social_links_icons() { | |
| // Supported social links icons. | |
| $social_links_icons = array( | |
| 'codepen.io' => 'codepen', | |
| 'digg.com' => 'digg', | |
| 'dribbble.com' => 'dribbble', | |
| 'dropbox.com' => 'dropbox', | |
| 'facebook.com' => 'facebook', | |
| 'flickr.com' => 'flickr', | |
| 'foursquare.com' => 'foursquare', | |
| 'plus.google.com' => 'googleplus', | |
| 'github.com' => 'github', | |
| 'instagram.com' => 'instagram', | |
| 'linkedin.com' => 'linkedin', | |
| 't.me' => 'telegram', | |
| 'pinterest.com' => 'pinterest', | |
| 'getpocket.com' => 'pocket', | |
| 'reddit.com' => 'reddit', | |
| 'skype.com' => 'skype', | |
| 'skype:' => 'skype', | |
| 'soundcloud.com' => 'soundcloud', | |
| 'spotify.com' => 'spotify', | |
| 'stumbleupon.com' => 'stumbleupon', | |
| 'tumblr.com' => 'tumblr', | |
| 'twitch.tv' => 'twitch', | |
| 'twitter.com' => 'twitter', | |
| 'vimeo.com' => 'vimeo', | |
| 'vk.com' => 'vk', | |
| 'wordpress.org' => 'wordpress', | |
| 'wordpress.com' => 'wordpress', | |
| 'youtube.com' => 'youtubecube', | |
| 'viber.com' => 'viber', | |
| 'whatsapp.com' => 'whatsapp', | |
| 'ok.ru' => 'ok', | |
| 'my.mail.ru' => 'mymail', | |
| ); | |
| /** | |
| * Filter Some theme social links icons. | |
| * | |
| * @param array $social_links_icons | |
| */ | |
| return apply_filters( 'wpruse_nav_social_icons', $social_links_icons ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment