WordPress.org

Make WordPress Core


Ignore:
Timestamp:
10/27/2016 09:50:56 PM (5 years ago)
Author:
joemcgill
Message:

Themes: Enable video in custom headers.

This adds the ability for themes to add support for videos in custom headers
by passing 'video' => true as an argument when adding theme support for
custom headers.

Custom video headers are managed through the “Header Visuals” (i.e. “Header Image”)
panel in the Customizer where you can select a video from the media library or set a
URL to an external video (YouTube for now) for use in custom headers.

This introduces several new functions:

has_header_video() – Check whether a header video is set or not.
get_header_video_url() – Retrieve header video URL for custom header.
the_header_video_url() – Display header video URL.
get_header_video_settings() – Retrieve header video settings.
has_custom_header() – Check whether a custom header is set or not.
get_custom_header_markup() – Retrieve the markup for a custom header.
the_custom_header_markup() – Print the markup for a custom header.

And a new file, wp-includes/js/wp-custom-header.js that handles loading videos
in custom headers.

This also enables video headers in the Twenty Seventeen and Twenty Fourteen themes.

Props davidakennedy, celloexpressions, bradyvercher, laurelfulford, joemcgill.
Fixes #38172.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/theme.php

    r38948 r38985  
    12651265        'width'         => get_theme_support( 'custom-header', 'width' ),
    12661266        'height'        => get_theme_support( 'custom-header', 'height' ),
     1267        'video'         => get_theme_support( 'custom-header', 'video' ),
    12671268    );
    12681269    return (object) wp_parse_args( $data, $default );
     
    13081309    } else {
    13091310        return false;
     1311    }
     1312}
     1313
     1314/**
     1315 * Check whether a header video is set or not.
     1316 *
     1317 * @since 4.7.0
     1318 *
     1319 * @see get_header_video_url()
     1320 *
     1321 * @return bool Whether a header video is set or not.
     1322 */
     1323function has_header_video() {
     1324    return (bool) get_header_video_url();
     1325}
     1326
     1327/* Retrieve header video URL for custom header.
     1328 *
     1329 * Uses a local video if present, or falls back to an external video. Returns false if there is no video.
     1330 *
     1331 * @since 4.7.0
     1332 *
     1333 * @return string|false
     1334 */
     1335function get_header_video_url() {
     1336    $id = absint( get_theme_mod( 'header_video' ) );
     1337    $url = esc_url( get_theme_mod( 'external_header_video' ) );
     1338
     1339    if ( ! $id && ! $url ) {
     1340        return false;
     1341    }
     1342
     1343    if ( $id ) {
     1344        // Get the file URL from the attachment ID.
     1345        $url = wp_get_attachment_url( $id );
     1346    }
     1347
     1348    return esc_url_raw( set_url_scheme( $url ) );
     1349}
     1350
     1351/**
     1352 * Display header video URL.
     1353 *
     1354 * @since 4.7.0
     1355 */
     1356function the_header_video_url() {
     1357    $video = get_header_video_url();
     1358    if ( $video ) {
     1359        echo esc_url( $video );
     1360    }
     1361}
     1362
     1363/**
     1364 * Retrieve header video settings.
     1365 *
     1366 * @since 4.7.0
     1367 *
     1368 * @return array
     1369 */
     1370function get_header_video_settings() {
     1371    $header     = get_custom_header();
     1372    $video_url  = get_header_video_url();
     1373    $video_type = wp_check_filetype( $video_url, wp_get_mime_types() );
     1374
     1375    $settings = array(
     1376        'mimeType'  => '',
     1377        'posterUrl' => get_header_image(),
     1378        'videoUrl'  => $video_url,
     1379        'width'     => absint( $header->width ),
     1380        'height'    => absint( $header->height ),
     1381        'minWidth'  => 900,
     1382        'minHeight' => 500,
     1383    );
     1384
     1385    if ( preg_match( '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#', $video_url ) ) {
     1386        $settings['mimeType'] = 'video/x-youtube';
     1387    } elseif ( preg_match( '#^https?://(.+\.)?vimeo\.com/.*#', $video_url ) ) {
     1388        $settings['mimeType'] = 'video/x-vimeo';
     1389    } elseif ( ! empty( $video_type['type'] ) ) {
     1390        $settings['mimeType'] = $video_type['type'];
     1391    }
     1392
     1393    return apply_filters( 'header_video_settings', $settings );
     1394}
     1395
     1396/**
     1397 * Check whether a custom header is set or not.
     1398 *
     1399 * @since 4.7.0
     1400 *
     1401 * @return bool True if a custom header is set. False if not.
     1402 */
     1403function has_custom_header() {
     1404    if ( has_header_image() || ( is_front_page() && has_header_video() ) ) {
     1405        return true;
     1406    }
     1407
     1408    return false;
     1409}
     1410
     1411/**
     1412 * Retrieve the markup for a custom header.
     1413 *
     1414 * @since 4.7.0
     1415 *
     1416 * @return string|false The markup for a custom header on success. False if not.
     1417 */
     1418function get_custom_header_markup() {
     1419    if ( ! has_custom_header() ) {
     1420        return false;
     1421    }
     1422
     1423    return sprintf(
     1424        '<div id="wp-custom-header" class="wp-custom-header">%s</div>',
     1425        get_header_image_tag()
     1426    );
     1427}
     1428
     1429/**
     1430 * Print the markup for a custom header.
     1431 *
     1432 * @since 4.7.0
     1433 */
     1434function the_custom_header_markup() {
     1435    if ( ! $custom_header = get_custom_header_markup() ) {
     1436        return;
     1437    }
     1438    echo $custom_header;
     1439
     1440    if ( has_header_video() && is_front_page() ) {
     1441        wp_enqueue_script( 'wp-custom-header' );
     1442        wp_localize_script( 'wp-custom-header', '_wpCustomHeaderSettings', get_header_video_settings() );
    13101443    }
    13111444}
     
    17331866                'admin-head-callback' => '',
    17341867                'admin-preview-callback' => '',
     1868                'video' => false,
    17351869            );
    17361870
Note: See TracChangeset for help on using the changeset viewer.