WordPress에 Naver TV動画挿入する

Last Updated:2023年07月16日| | 3のコメント

Naver TV動画を WordPress サイトに挿入したい場合があります。 この場合、 Naver TV動画のiframe形式の共有コードを WordPressに挿入します。

まず、共有する Naver TV動画ページで共有アイコンをクリックしてiframeコードをコピーするようにします。 テストで 「近衛兵」の第3ラウンドステージ - 触れないでください 動画を共有しましょう。

[この記事は、2018年4月に公開されたが、最新の NaverTV共有コードの種類に基づいて2019年9月8日に更新されました。 ]

Naver TV動画を共有する

このような画面で共有アイコンをタップすると、さまざまな共有方法が表示されます。 一番下のコード部分(

<iframe src='https://tv.naver.com/embed/3084724?autoPlay=true' frameborder='no' scrolling='no' marginwidth='0' marginheight='0' WIDTH='544' HEIGHT='306' allow='autoplay' allowfullscreen></iframe>

このコードを挿入しようとするページや記事の編集画面で、 テキストモードに切り替えた後、目的の場所にコードを挿入します。

WordPress テキストモード

Gutenberg エディタを使用している場合は、カスタムHTML'ブロックを追加してコードを挿入します。

Gutenberg - カスタムHTMLブロック

既存の NaverTV動画を共有するときは、http://形式でコードが共有されてSSL証明書が適用されたサイトで問題が発生しました。 新しい NaverTVビデオ共有コードはこの問題を解決しました。 昨年7月から、SSLセキュアサーバーが適用されていないHTTPサイトについては「注意が必要」という警告が表示されています(」Google Chromeは、HTTPサイトについて「注意要する」警告フレーズを表示"参照)。

上記のコードを挿入してみると次のように動画がうまく表示されます。

ショートコードで Naver 動画の挿入

Naver 動画を頻繁に挿入する場合は、テキストモードでコードを挿入することが面倒な場合があります。 この場合、ショートコードを作成し、ビジュアルモードで直接好きなところのコードを追加することができます。

次のコードを使用している WordPress テーマの関数ファイルに追加するようにします。 (Naver TV動画共有コードが変わり、新しい共有コードに基づいてショートコードを変更しました。 新たに変更しながら正常に動作していることをはチェックしなかった。)

// Naver 동영상 표시 숏코드
function vid_sc($atts, $content=null) {
extract(
shortcode_atts(array(
'vid' => ''
), $atts)
);
return '<iframe src="https://tv.naver.com/embed/' . $vid . '?autoPlay=true" frameborder="no" scrolling="no" marginwidth="0" marginheight="0" WIDTH="544" HEIGHT="306" allow="autoplay" allowfullscreen></iframe>';

}
add_shortcode('navertv', 'vid_sc');

この作業をする前に、子テーマを作成するようにします。 子テーマを作成せずにコードを挿入すると、後日にテーマが更新される場合、コードが消えます。 子テーマを作成する作業が面倒なら、プラグインをXNUMXつ取り付けて簡単に作成することができます(参照).

ここで、次のような形式でコードを挿入することができます。

[navertv vid="3084724"]

vidに入るコードは vid = 次から &controlBarMovable = 以前までのコードです。

メモ:


追加 - Gutenberg エディタ(ブロックエディタ)で Naver 動画を追加テスト

最近(2019年9月) Naverテレビに登場したポール・キム×テヨン「あなたに会う」ビデオ WordPress 5.0以降のバージョンで提供されて Gutenberg エディタで挿入してみました。 方法は、上述したものとほぼ同じである。 ブロックエディタでは、「カスタムHTMLブロック」を使用できます。 ただし、共有コード形式が変更されたようです。



3のコメント

コメント

    • 今テストで「ポルキム×テヨン「お会い」」映像を追加してみました。
      共有が可能な Naver TV映像は、この記事で説明する方法でも共有が可能です。

      応答