はじめに

当サイトもWordPressで構築しています。

記事を書く際に、ホームページへのリンクを埋め込みたいという状況よくあるかと思います。

そんな時にどうすれば、埋め込むことができるかを自分のメモ代わりに記載しておきます。

やり方

1. そのまま埋め込む

標準機能で、「挿入 」 => 「リンクの挿入/編集」で埋め込むか、リンクアイコンを押下して埋め込む。

単純に、URLのリンクを表示したい場合、以下のボックスにURLを入力して完了。

URLだけの場合の表示、以下のような表示になります。

https://example.com/

リンクの文字列等を変えたい場合は、歯車アイコンを押して以下入力して完了。

リンク文字列を変えた場合は、以下のようになります。

例のURL

2. 別サイトで生成したembed用のhtmlタグを埋め込む

以下のサイトでURLを入力するとソースコードが生成されるので、そちらをテキストエディタに貼り付けましょう。

https://embed.ly/code

social buttonsのチェックを外して、Card Alignを左右、真ん中から選択して、Emebed Codeの内容をテキストタブの方のエディタに埋め込みます。

以下のようになります。

HOME – 不動産情報ボット

主に、不動産や不動産テックに関するニュースについてまとめていきます。 ※当サイトの内容に関するいかなる間違い、不掲載についても一切の責任を負わないものとします。

 

3. 装飾した状態で埋め込む

他サイトの記事をアイキャッチ画像付きでリンクを貼って表示したいことありませんか?

この機能、WordPressのバージョン4.4以降で実装されているようです。

状況によっては、1の方法で、アイキャッチ付きの埋め込みができている方がいるかもしれません。

わたしの環境では、1の方法だとそのような展開がされませんでした。

私の環境では、以下のiframe用プラグインを入れることで解決できました。

こちらを入れて、URLをいつものように記載すると、下のように展開されました。(少し時間がかかります。)

iframe

iframe src=”http://www.youtube.com/embed/4qsGTXLnmKs” width=”100%” height=”500″] shortcode should show something like this: WordPress removes iframe html tags because of security reasons. Iframe shortcode is the replacement of the iframe html tag and accepts the same params as iframe html tag does. You may use iframe shortcode to embed content from YouTube, Vimeo, Google Maps or from any external page.

PCだと大丈夫なのですが、SP(スマホ)で見た場合に、iframe展開された後の要素がかぶってしまうので、cssを修正します。

以下をカスタマイズCSSとして追加しておきます。

.embed-container {
	height: 100%;
}

4. 最終的には以下のプラグインが一番

上記のプラグインを入れて、記事内で以下のように書けば表示されます。

blogcard url=”https://popozure.info” (前後に、[]を入れてください)

以下のように表示されます。

この記事をシェアする