arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[WordPress]記事埋め込み機能・oEmbed。簡単に埋め込めますが…

今回はWordpressの記事埋め込み機能についてです。

検索すればたくさん出てきますが、
Wordpressのバージョンによって仕様が変わってきているため、
これからも変わる可能性を考え、備忘録として書いていきます。

簡単ではありますが、どうぞよろしくお願いします。

記事埋め込みについて

ブログを書いたことのある方は、思い当たるかもしれません。

今でも簡単なので、上記のように外部サイトのリンクを貼って、誘導できます。

さらに、このようなTipsもあります。

はてなの「ブログカード拡張機能」を使って、
ブログカードを記事内に埋め込む方法です。

しかし、Wordpressにも同じような機能があるのですね。

WordPressのoEmbed機能

早い話が以下です。

WindowsとMac間でリモートデスクトップを使う- Chromeリモートデスクトップ編


こんな風に表示させるには、タグで囲まずにそのままURLを載せるだけです。
とても簡単ですね。

Embedは「埋め込む」や「配置する」という意味ですから、そのままです。

参考:oEmbed – WordPress Codex 日本語版

注意点

便利なoEmbed機能ですが、
いくつか注意しなくてはいけないことがあるようです。

自サイトのみしか好みのレイアウトにできない

これはiframeに埋め込まれているHTMLとCSSは、
相手のサーバから呼び出されるので、
その相手サイトのスタイルが当たっているせいですね。

レスポンシブではない

実は、私のブログカードはレスポンシブです(^_^;)
最初はびっくりしましたが、
Google Mapをこのブログに埋め込む予定でした。

しかし、大体はレスポンシブではなく、
別途スタイルを当てることになります。
参考:[WordPress]oEmbedの記事埋め込みをレスポンシブ(?)にする
(上手くできなかったので、従来の方法でご紹介…)

なんとなく安定しない

初めてやってみたのですが、
あまり上手くいってないです。
プラグインが悪さをしているかも。
時間があれば検証したいのですが…

また、iframeをたくさん使うとサイトは重くなりますし、
却って読みづらさを生んでしまいそうなので、
使いどころが肝要です。


半年以上ぶりの記事でした。
プロフィールにはまだ書いていないのですが、昨年夏に転職をしまして…
ブログ記事を書くどころか、勉強すらもほとんどできない状態でした。

こうやってアウトプットできるのは楽しいですし、
できれば続けたいですね。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP