なんでも日記

WordPressに外部サイトを埋め込む方法:「iframely」でコード生成→カスタムHTMLで貼り付け

こんにちは、にゃんすです。

今回は、Wordpressに外部サイトを埋め込む方法を紹介します。

回りくどい説明は後回しにして、答えから紹介します。ぜひ保存用にブックマークお願いします。

1:Wordpressへの外部サイト埋め込みイメージ

今回紹介するWordpressへの外部サイト埋め込みの成果物は以下のとおりです。

2:作り方

(1):iframelyのサイトでコードを生成する

まずは、外部サイトを埋め込むためのコードを生成します。

自分でコードを書くのはとても難しいです。しかし、「iframely」というサイトを使えば、埋め込み用のコードを自動生成することができます。

以下の埋め込みから、iframelyに飛ぶことができます。

遷移先の入力欄に、埋め込みたい外部サイトのURLを入力し、「CHECK IT」のボタンを押せば、コードが自動生成されます。

生成されたコードは、「COPY CODE」のボタンを押して、コピーすることができます。

(2):自分のWordpress記事にカスタムHTMLで貼付する

WordPress記事の記事編集画面を開き、ブロックエディタでカスタムHTMLを選択します。

カスタムHTMLを選択すると、コードを入力する欄が開きます。そこに(1)で生成したコードを貼り付けます。

コード貼り付けの際には、iframelyのサイト上で、コードをコピーできるので、そのままコピペしましょう。