|
<?php |
|
|
|
/** |
|
* Icon functions for Genesis Child theme. |
|
* Adapted from the TwentySeventeen theme. |
|
* |
|
* @since 1.1.0 |
|
* @package Genesis Sample |
|
* @author WordPress |
|
* @license GPL-2.0+ |
|
*/ |
|
|
|
/** |
|
* Adds custom SVG icon sprite to theme footer. |
|
* |
|
* @author Jackie D'Elia |
|
* @package Genesis Theme code |
|
* @since 1.0.0 |
|
* @license GPL-2.0+ |
|
* @link https://jackiedelia.com/ |
|
*/ |
|
|
|
add_action( 'wp_footer', 'pb_include_svg_icons', 9999 ); |
|
function pb_include_svg_icons() { |
|
// Define SVG sprite file. |
|
$svg_icons = get_stylesheet_directory() . '/images/svg-sprite-sheet.svg'; |
|
// If it exists, include it. |
|
if ( file_exists( $svg_icons ) ) { |
|
require_once( $svg_icons ); |
|
} |
|
} |
|
|
|
/** |
|
* 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 pb_get_svg( $args = array() ) { |
|
// Make sure $args are an array. |
|
if ( empty( $args ) ) { |
|
return __( 'Please define default parameters in the form of an array.', 'genesis-sample' ); |
|
} |
|
|
|
// Define an icon. |
|
if ( false === array_key_exists( 'icon', $args ) ) { |
|
return __( 'Please define an SVG icon filename.', 'genesis-sample' ); |
|
} |
|
|
|
// Set defaults. |
|
$defaults = array( |
|
'icon' => '', |
|
'title' => '', |
|
'desc' => '', |
|
'fallback' => false, |
|
'class' => '', |
|
'width' => '20px', |
|
'height' => '20px' |
|
); |
|
|
|
// Parse args. |
|
$args = wp_parse_args( $args, $defaults ); |
|
|
|
// Set default width and height. |
|
$svg_width = 'width="'.esc_attr( $args['width'] ).'"'; |
|
$svg_height = 'height="'.esc_attr( $args['height'] ).'"'; |
|
|
|
// Set aria hidden. |
|
$aria_hidden = ' aria-hidden="true"'; |
|
|
|
// Set ARIA. |
|
$aria_labelledby = ''; |
|
|
|
/* |
|
* 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 pb_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is the title', 'textdomain' ) ) ); ?> |
|
* |
|
* Example 2 with title and description: <?php echo pb_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'] ) . ' ' . esc_attr( $args['class'] ) .'"' . $svg_width . $svg_height . $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="#icon-' . esc_html( $args['icon'] ) . '" xlink:href="#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; |
|
} |