サポート » テーマ » Twentyseventeenのヘッダーメディア

  • 以前こちらのトピックで私と同じ悩みを持たれた方がトピックを立ち上げてすでに解決済みになっているものがあったのですが、私はいまだに解決できずにおります。もしよろしければもう少しだけわかりやすく教えていただけますでしょうか?

    以前のトピックのやり取りは↓です。

    「Twentyseventeenのヘッダーメディアで動画を入れ、音を出した状態にしてPCでもスマホでも表示させたいです。
現在PCでは音が出ず、スマホでは動画が表示されず、登録してあるヘッダー画像が表示されている状態です。
    これを、音を出してPCでもスマホでも動画を表示させる方法がありましたら、ご教授願いますm(_ _)m」

    解決に至ったコメントは↓です。

    「スマホに関しては、下記のトピック(英語)が参考になると思います。
    https://wordpress.org/support/topic/video-settings-twenty-seventeen-theme/

    音に関しては、下記のトピック(英語)が参考になると思います。
    https://wordpress.org/support/topic/two-issues-with-video-header/

    例:

    function my_custom_header_enqueue_scripts() {
    $script = <<< SCRIPT
    jQuery(function($) {
    $(window).on(‘load’, function() {
    $(‘.wp-custom-header video’).prop(‘muted’, false);
    });
    });
    SCRIPT;
    wp_add_inline_script( ‘wp-custom-header’, $script );
    }
    add_action( ‘wp_enqueue_scripts’, ‘my_custom_header_enqueue_scripts’ );

    上記のコードをどのPHPに貼り付ければ良いのでしょうか?
    あと下記に関する記事が英語のためよく理解できませんでした。

    「スマホに関しては、下記のトピック(英語)が参考になると思います。
    https://wordpress.org/support/topic/video-settings-twenty-seventeen-theme/

    音に関しては、下記のトピック(英語)が参考になると思います。
    https://wordpress.org/support/topic/two-issues-with-video-header/

    お分かりになる方がいらっしゃいましたら、どうかよろしくお願いいたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • テーマに関することなので、テーマ内の functions.php になるかと思います。

    ただし、 Twentyseventeen の functions.php をそのまま編集すると、テーマのアップデートが困難になってしまうため、子テーマを作成するのが良いかと思います。

    トピック投稿者 pokerio

    (@pokerio)

    早速のご教授ありがとうございます。
    子テーマは作成しておりましたので、子テーマのfunction.phpにコードをペーストしてみましたが、反映されませんでした。
    前回解決に至った方は最後のコメントで
    「教えてくださった記事とコードを参考にし追記してみた所、無事音ありでスマホでも表示される様になりました。
    ありがとうございました!」

    と言われておりました。
    もしかしたら、
    「スマホに関しては、下記のトピック(英語)が参考になると思います。
    https://wordpress.org/support/topic/video-settings-twenty-seventeen-theme/

    音に関しては、下記のトピック(英語)が参考になると思います。
    https://wordpress.org/support/topic/two-issues-with-video-header/
    の中にヒントが隠されているかもしれませんね…。

    翻訳して読んでみましたが、素人の私にはそのヒントがわかりませんでした。

    Chrome 66 より音声ありの状態では自動再生されなくなったようです。ブラウザの仕様なので WordPress 側で対応するは難しいかと・・・。
    https://hyper-text.org/archives/2018/05/chrome_66_improving_autoplay.shtml

    トピック投稿者 pokerio

    (@pokerio)

    ishitaka様
    お返事大変ありがとうございました。

    クロームの仕様であれば仕方ありませんね。再生音に関しては諦めます。
    あとスマホでの動画表示の方法をご存知であれば教えていただきたいのですが。
    すでにfunction.phpの方にはishitaka様が提示されていたコードは書き込んでおります。
    よろしくお願いいたします。

    トピック投稿者 pokerio

    (@pokerio)

    試したことは、
    スマホに関するトピック(英語)のキャサリンが提示していたCSS
    /*
    Theme Name: Twenty Seventeen Child
    Description: Twenty Seventeen Child Theme
    Author: WordPress
    Author URI: http://ordPress.org
    Template: twentyseventeen
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: twenty-seventeen-child
    */

    /* Make sure play/pause button can be clicked on smaller screens */
    .wp-custom-header-video-button {
    z-index: 10;
    }

    それとfunction.php
    <?php
    /**
    * Twenty Seventeen Child Theme functions
    *
    * @link https://developer.wordpress.org/themes/basics/theme-functions/
    *
    * @package WordPress
    * @subpackage Twenty_Seventeen
    * @since 1.0
    */
    /*
    * Enqueue parent and child theme styles.
    */
    function twentyseventeenchild_enqueue_styles() {
    $parent_style = ‘twentyseventeen-parent-style’;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘twentyseventeenchild_enqueue_styles’ );
    /*
    * Change the minimum screen size to use the video header
    */
    function twentyseventeenchild_video_size( $settings ) {
    $settings[‘minWidth’] = 100;
    $settings[‘minHeight’] = 100;
    return $settings;
    }
    add_filter( ‘header_video_settings’, ‘twentyseventeenchild_video_size’ );
    @kathrynwp
    Owner Author

    これらを各子テーマに書き込んでみましたが、function.phpの方に問題があるようで表示さえされませんでした。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「Twentyseventeenのヘッダーメディア」には新たに返信することはできません。