YouTubeフィードプラグインにカスタムJavaScriptスニペットを追加する

テーマファイルを編集するのではなく、WPCode を使用して YouTube フィードの横にカスタム JavaScript を追加する方法。

YouTubeのフィードに独自のJavaScriptを追加してみませんか？

このガイドでは、その方法を2つご紹介します。1つ目は、YouTube Feedプラグインに組み込まれている「カスタムJavaScript」ボックスを使用する方法です。2つ目は、WPFormsやAll in One SEOの開発元が提供する無料プラグイン「WPCode」を使用する方法です。どちらの方法でも、フィードの最後に短いメモを追加することができます。

作業を始める前に、お使いのサイトに「YouTube Feed」プラグインがインストールされ、有効化されていることを確認してください。

• 「カスタム JavaScript ボックス」の使用方法
• WPCodeの使用方法
• さらに動画が読み込まれたときにコードを実行する
• よくある質問

「カスタム JavaScript ボックス」の使用方法

まずは、「カスタム JavaScript」ボックスを開きましょう。これはプラグインの一部であるため、JavaScript を追加する最も手っ取り早い方法です。

WordPressのダッシュボードで、「YouTube Feed」»「設定」に移動します。次に、「フィード」タブをクリックします。

[フィード] タブで、画面を下にスクロールして [カスタム JavaScript] ボックスまで移動します。次に、そのボックスにコードを貼り付けます。この例では、フィードの最後に短いメモを追加するコードを貼り付けます。

$( '.sb_youtube' ).not( ':has(.my-feed-note)' ).append( '<p class="my-feed-note">Thanks for stopping by!</p>' );

スクリプトタグを追加する必要はありません。プラグインが自動的にページにコードを追加してくれます。その $ 「sign」はjQueryのショートカットとして機能します。

ページの下部にある「変更を保存」をクリックしてください。

それでは、フィードが表示されているページを開いてください。そのメモはフィードの最後に表示されます。

このプラグインは、動画の読み込みが完了するとコードを実行します。訪問者が「もっと表示」ボタンをクリックするなどして動画が追加されるたびに、コードが再度実行されます。そのため、この例ではまず注記の有無を確認しています。この確認を行わないと、毎回注記が追加されてしまうからです。

Boxがコードをどのように保護するか

このボックスは、一度だけ保存する短いコードスニペットに最適です。後で「フィード」タブに戻ると、ボックス内のコードの引用符のすべてにバックスラッシュが付加されています。タブを保存するたびにさらにバックスラッシュが追加されるため、ボックス内のコードは入力した内容と一致しなくなってしまいます。

後でコードを編集する予定があるなら、WPCodeの方が適しています。WPCodeなら、コードを記述した通りの状態で保持してくれます。

WPCodeの使用方法

WPCodeを使えば、JavaScriptを追加することもできます。これは、すべてのカスタムコードスニペットを一か所にまとめて管理できる無料のプラグインです。

まず、WPCodeプラグインをインストールして有効化してください。その後、「Code Snippets」→「Add Snippet」に進んでください。

「スニペットの追加」ページで、「カスタムコードを追加（新しいスニペット）」というボックスにカーソルを合わせます。次に、「+ カスタムスニペットを追加」をクリックします。

開いたウィンドウで、「JavaScript スニペット」を選択します。

まず、スニペットのタイトルを入力してください。次に、コードをコードボックスに貼り付けてください。

この例では、フィードの最後に同じ短いメモを追加するコードを使用します。最初の例とは異なり、jQueryは使用していません。そのため、jQueryが読み込まれていないページでも問題なく動作します。

document.addEventListener( 'DOMContentLoaded', function() {
	document.querySelectorAll( '.sb_youtube' ).forEach( function( feed ) {
		var note = document.createElement( 'p' );
		note.className = 'my-feed-note';
		note.textContent = 'Thanks for stopping by!';
		feed.appendChild( note );
	} );
} );

スクリプトタグを追加する必要はありません。WPCodeが自動的に追加してくれます。コードボックスは、編集できないスクリプト行から始まります。

次に、「Location」フィールドを見つけてクリックします。その後、「Site Wide Footer」を選択します。これにより、ページの最下部にコードが追加されます。

ページの上部にあるトグルをクリックして、スニペットの状態を「非アクティブ」から「アクティブ」に切り替えてください。

次に、「スニペットを保存」をクリックします。

スニペットが有効になると、最初の例と同じように、フィードが表示されるページの末尾にそのメモが表示されます。

特定のページでのみコードを実行したい場合は、WPCode を使ってスニペットの実行範囲を制限できます。その方法については、WPCode のドキュメントをご覧ください。

さらに動画が読み込まれたときにコードを実行する

WPCodeのスニペットは、ページの読み込みが完了した時点で1回実行されます。「カスタムJavaScript」ボックスも、「さらに読み込む」をクリックした後など、動画が追加された際に再度実行されます。

WPCodeで同じ結果を得るには、次のような名前の関数を定義します。 window.sbyCustomJS スニペット内です。このプラグインは、最初の動画が読み込まれた後にこの関数を呼び出し、その後も動画が追加されるたびに呼び出します。これは「カスタムJavaScript」ボックスで作成される関数と同じものですので、どちらか一方のみを使用し、両方とも使用しないでください。

window.sbyCustomJS = function() {
	document.querySelectorAll( '.sb_youtube' ).forEach( function( feed ) {
		if ( feed.querySelector( '.my-feed-note' ) ) {
			return;
		}
		var note = document.createElement( 'p' );
		note.className = 'my-feed-note';
		note.textContent = 'Thanks for stopping by!';
		feed.appendChild( note );
	} );
};

以前の WPCode の例に代わってこのコードを使用し、手順は同じままにしてください。すでに保存済みのスニペットを変更する場合は、「スニペットを保存」ボタンの表示が「更新」に変わります。上部のチェックボックスをオンにしておくと、関数が実行されるたびに同じメモが追加されるのを防ぐことができます。

これで完了です！「カスタム JavaScript」ボックスや WPCode スニペットを使って、YouTube フィードに独自の JavaScript を追加できるようになりました。次は、YouTube Feed Pro プラグインの設定方法を確認してみましょう。

よくある質問

以下では、フィードにカスタムJavaScriptを追加することに関して、よく寄せられる質問のいくつかにお答えします。