WordPress에 Naver TV動画挿入する

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

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

ネイバーTV動画を共有する

このような画面で共有アイコンをクリックすると、さまざまな共有方式が表示されます。 下部のコード部分(<iframe scr ...)の「コピー」をクリックして、コードをコピーします。 コピーしたコードは、次のような形式になります。

<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>

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

ワードプレステキストモード

グーテンベルクエディタを使用している場合には、「カスタムHTML「ブロックを追加して、コードを挿入するようにします。

グーテンベルク - カスタムHTMLブロック

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

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

ショートコードでネイバー動画を挿入する

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

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

// 네이버 동영상 표시 숏코드
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');

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

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

[navertv vid="3084724"]

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

注:


追加 - グーテンベルクエディタ(ブロックエディタ)でネイバー動画を追加テスト

最近(2019年9月)ネイバーTVに上がってきたポルキムx平気」君に会っ」の動画をワードプレス5.0以降で提供されているグーテンベルクエディタで挿入してみました。 方法は、上記のものとほぼ同じです。 ブロックエディタでは、「カスタムHTMLブロック "を使用します。 ただし、共有コードの種類が変更されたようです。




3のコメント

    • 先ほどのテストに「ポルキムx平気」君に会っ」「映像を追加しました。
      共有が可能な Naver TV映像は、この記事で説明する方法でも共有が可能です。

      応答
    • 上記の文は、昨年4月に発行された文です。 最新 NaverTV共有コードの種類に応じて、文を修正しました。

      応答