jQueryで埋め込みを実装しよう!

jQueryで埋め込みを実装しよう!

jQueryをURLで埋め込み

jQueryをURLで埋め込むには、CDNを使用します。

特に理由がなければ、GoogleのCDNを使用しましょう。

WordPressにjQueryを埋め込み

function includejQuery() {
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
}

add_action('wp_enqueue_scripts', 'includejQuery');

WordPressにCDNのjQueryを埋め込むには、使用しているテーマのfunctions.phpに、サンプルのコードを記述します。

jQueryではなく、$を使用したい場合に便利です。

wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);

wp_deregister_script()に’jquery’を渡し、デフォルトのjQueryの読み込みを削除しています。

wp_enqueue_script()の第1引数にスクリプト名、第2引数にURL、第3引数に依存するスクリプト、第4引数にバージョン、第5引数にフッターに記述するか否かを渡し、CDNのjQueryを埋め込んでいます。

サンプルでは、スクリプト名をjquery、URLをGoogleのCDN、依存スクリプト、バージョンは無し、フッターに記述する設定で埋め込んでいます。

add_action('wp_enqueue_scripts', 'includejQuery');

add_action()の第1引数にアクション名、第2引数に関数名を渡し、作成した関数をフックしています。

サンプルでは、wp_enqueue_scriptsにincludejQuery()をフックし、スクリプトの読み込み時、作成した関数を実行しています。

HTMLファイルを要素に埋め込み

$('div').load('ajax.html');

HTMLファイルを要素に埋め込むには、.load()にファイルのパスを渡します。

動作としては、$.get()でHTMLファイルを取得し、.html()で要素に埋め込んだ場合と同様です。

サンプルでは、ajax.htmlの内容をdiv要素に埋め込んでいます。

// ajax.html
<div id="container">
    <p id="load">.load()で読み込みます</p>
</div>
$('div').load('ajax.html #load');

ページの一部を埋め込む場合、URLの後ろにセレクタを指定します。

サンプルでは、idがloadの要素を埋め込んでいます。

文字列に変数を埋め込み

let string = '変数';
    
console.log(`文字列に${string}を埋め込みます`);
文字列に変数を埋め込みます

文字列に変数を埋め込むには、テンプレートリテラルを使用します。

使い方は、サンプルのように、文字列をバッククォートで囲み、${}で変数名を囲んだものを挿入するだけです。

‘(シングルクォーテーション)ではなく、`(バッククォート)で囲むことに注意しましょう。

バッククォートは、Shift + @で出すことができます。

サンプルでは、${string}で変数を埋め込み、console.log()で文字列を出力しています。

Youtubeの埋め込み動画をスライダーで表示するには?

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
        <style>
            #slick  {
                display: none;
                margin: 0 auto;
            }

            .slick-prev:before, .slick-next:before {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="slick">
            <div><iframe width="560" height="315" src="https://www.youtube.com/embed/hMxGhHNOkCU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            <div><iframe width="560" height="315" src="https://www.youtube.com/embed/KmTK8kub_gw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            <div><iframe width="560" height="315" src="https://www.youtube.com/embed/a59kOE2Ma1Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
        <script>
            $(function () {
                let slick = null;

                $(window).on('load resize', function () {
                    if (slick === null) {
                        slick = $('#slick').slick().show();
                    }

                    let width = $(window).width() - 60;
                    let height;

                    if (width < 560) {
                        height = width / 560 * 315;
                    } else {
                        width = 560;
                        height = 315;
                    }

                    $('#slick, #slick iframe').css({
                        width: width,
                        height: height
                    });
                });
            });
        </script>
    </body>
</html>

Youtubeの埋め込み動画をスライダーで表示するには、slickを使用します。

簡易ですが、レスポンシブデザインに対応するコードも追加しています。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

jsDelivrのCDNを利用し、head要素でslickのCSSを読み込みます。

テーマファイルのslick-theme.cssも読み込みましょう。

#slick  {
    display: none;
    margin: 0 auto;
}

slickの初期化前に動画が表示されるのを避けるため、display:none;で非表示にします。

サンプルでは、margin:0 auto;で要素の中央に表示しています。

.slick-prev:before, .slick-next:before {
    color: red;
}

矢印のデフォルト色は白なので、背景色が白の場合は、同色で見えなくなります。

矢印のCSSは.slick-prev:before, .slick-next:beforeで変更可能です。

サンプルでは、color:red;で矢印を赤色にしましたが、背景色を変更しても構いません。

<div id="slick">
    <div><iframe width="560" height="315" src="https://www.youtube.com/embed/hMxGhHNOkCU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div><iframe width="560" height="315" src="https://www.youtube.com/embed/KmTK8kub_gw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div><iframe width="560" height="315" src="https://www.youtube.com/embed/a59kOE2Ma1Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>

Youtubeの埋め込みコードを<div>で囲み、idがslickのdiv要素に格納します。

動画を変更する場合、https://www.youtube.com/embed/以降のIDを変更します。

1つ目の動画であれば、hMxGhHNOkCUを変更したい動画のIDに変更します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

jQuery, slick.min.jsをCDNで読み込みます。

jQuery, slick.min.js, 後述のスクリプトの順番で読み込むことに注意しましょう。

let slick = null;

$(window).on('load resize', function () {
    ...
});

ウィンドウが読み込み、リサイズされたときに、slickをリサイズするイベントを追加しています。

サンプルでは、slickの初期化はイベントハンドラ内で行うので、slick変数に初期値としてnullを与えています。

if (slick === null) {
    slick = $('#slick').slick().show();
}

slickがnull、つまり初期化されていない場合、slickを初期化し、.show()で表示しています。

返り値のslickオブジェクトをslick変数に代入しているため、以降、初期化は実行されません。

let width = $(window).width() - 60;
let height;

$(window).width()でウィンドウの幅を取得し、矢印の幅として60px引いた値を、slickの幅となるwidth変数に代入します。

高さは幅によって変更するので、height変数に初期値は与えません。

if (width < 560) {
    height = width / 560 * 315;
} else {
    width = 560;
    height = 315;
}

幅が560px未満の場合、埋め込み動画のアスペクト比を維持した高さを計算します。

計算式としては、新しい幅を元の幅で割り、元の高さを掛ければ、新しい高さが計算できます。

サンプルでは、widthを560で割り、315を掛けています。

幅が560px以上の場合、埋め込み動画の元のサイズをwidth, heightに代入します。

$('#slick, #slick iframe').css({
    width: width,
    height: height
});

.css()でslick、slick内のiframeの幅、高さを変更します。

まとめ

  • jQueryをURLで埋め込むには、CDNを使用します。
  • WordPressにjQueryを埋め込むには、wp_enqueue_scriptを使用します。
  • HTMLファイルを要素に埋め込むには、.load()を使用します。
  • 文字列に変数を埋め込むには、テンプレートリテラルを使用します。
  • Youtubeの埋め込み動画をスライダーで表示するには、slickを使用します。

実践カテゴリの最新記事