本記事は広告が含まれる場合があります WordPressエディター操作

WordPressにTikTok動画を埋め込み・表示する方法

利用者が急増しているTikTokのショート動画をWordPressに表示させたいという方も増えてきました。

今回はWordPressにTikTok動画を埋め込む方法を解説します。

一つのTikTok動画を表示する方法と、タイムラインとしてTikTok動画埋め込み・表示する方法の二つをご紹介していきます。

TikTokのプロフィールのところからリンクをコピーをクリックします。
 

 

本記事は、WordPress 6.4.3を利用しています。ご利用の環境によって操作画面が異なる場合がありますので、あらかじめご了承ください。

 

TikTok動画・タイムラインを埋め込む方法(ブロックエディター)

WordPress標準にあるTikTokブロックを使うことで特定の動画やタイムラインを埋め込むことができます。

投稿、あるいは固定ページの編集画面を開き、「+」(ブロックを追加)をクリックします。

「+」(ブロックを追加)をクリック

 

検索窓で「TIkTok」と入力し、出てきたTikTokブロックを追加します。

TikTokブロックを追加する

 

これでTikTokブロックが追加されるので、後述の手順でコピーしたTikTokのURLを入力して「埋め込み」をクリックすればOKです。

埋め込みたい動画・タイムラインのURLを入力して「埋め込み」をクリック

 

一つの動画を埋め込み・表示する場合

一つの動画を埋め込み表示する場合は、下記のように動画をまずクリックします。※Webブラウザ(Chrome)でログインした状態で試している画面です。
TikTokの動画をクリック

 
リンクをコピーをクリックして、URLをコピーします。
リンクをコピーをクリックします。

 

WordPress編集画面で、コピーしたリンクのURLをTikTokブロックに貼り付けて「埋め込み」をクリックすればOKです。
埋め込みたい動画・タイムラインのURLを入力して「埋め込み」をクリック
 

◾️TIkTok動画を埋め込んでいる例
TikTok動画を埋め込んでいる例

※テーマによっては引用箇所を示すblockquoteタグにスタイルが指定されており、埋め込まれたタイムライン・動画の上下に引用符が表示されます。

 

タイムラインを埋め込み・表示する場合

つづけて、TikTokのタイムラインを埋め込み表示する方法をご紹介します。

TikTokのプロフィールのところからリンクをコピーをクリックします。
TikTokのプロフィールのところからリンクをコピーをクリックします。

 

WordPress編集画面で、コピーしたリンクのURLをTikTokブロックに貼り付けて「埋め込み」をクリックすればOKです。
埋め込みたい動画・タイムラインのURLを入力して「埋め込み」をクリック

 

◾️TIkTokタイムラインを埋め込んでいる例
TikTokのタイムラインを埋め込んでいる例

 

TikTok動画・タイムラインを埋め込む方法(クラシックエディター)

クラシックエディター(旧エディター)を利用している場合、TIkTokから直接埋め込みコードを取得してきて動画・タイムラインを埋め込めます。

以下では動画・タイムラインを埋め込む方法をそれぞれ解説します。

 

TikTok動画を埋め込む方法

埋め込みたい動画を開きます。

埋め込みたい動画のページを開く

 

「埋め込む」アイコンをクリックします。

「埋め込む」アイコンをクリック

 

埋め込み用のコードが表示されるので、「コードをコピー」からコードをコピーします。

「コードをコピー」から埋め込みコードをコピーする

 

あとはコピーしたコードをクラシックエディターのテキストエディターに貼り付けてあげればOKです。

テキストエディターに切り替え埋め込みコードを貼り付け

 

表示のされ方はブロックエディターでTikTokブロックを使用する際と同様になります。

TikTok動画を埋め込んでいる例

 

TikTokのタイムラインを埋め込む方法

埋め込みたいユーザーページ(タイムライン)を開きます。

TikTokのユーザーページ

 

矢印アイコンにマウスを当て、出てきた「埋め込む」アイコンをクリックします。

矢印アイコンにマウスを当て「埋め込む」をクリック

 

「コードをコピー」をクリックします。

「コードをコピー」をクリック

 

あとはTikTok動画を埋め込んだときと同様、テキストエディターにコードを貼り付けてあげればOKです。

テキストエディターに切り替え埋め込みコードを貼り付け

 

以上でタイムラインの埋め込みもできました。クラシックエディターを使っているWordPressサイトやHTMLサイトの場合は上記の方法で埋め込むようにしましょう。

TikTokのタイムラインを埋め込んでいる例

 

(補足)おしゃれなフィードが作れプラグイン「B TikTok Feed」

TIkTokフィードをある程度自分でカスタマイズしておしゃれに表示したい場合はプラグインの導入がおすすめです。

以下は「B TikTok Feed」という名前のプラグインを使って埋め込んだタイムラインですが、無料版でも背景色やカラム数などの変更ができます。

B TIkTok Feed

 

また、埋め込まれた画像はインライン再生されるため、Webサイトから離脱させることなく動画を表示させられます。

◾️B TikTok Feedを使って埋め込んだタイムライン

 

本記事では詳しい使い方については割愛しますが、興味がある方はぜひ使い方を調べてみてください。

 

まとめ

まとめです。今回はWordPressにTikTok動画・タイムラインを埋め込む方法を解説しました。

WordPressとTikTokを連携させたい方はぜひ試してみてください。

TikTokのプロフィールのところからリンクをコピーをクリックします。

今回は以上になります。最後までご覧いただきありがとうございました。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-WordPressエディター操作