Wordpress4.4にアップデートして、追加機能のひとつであるコンテンツの埋め込み(Embed)機能を使ってみましたが、Internet Explorer11で表示が切れたり、埋め込みのリンクが機能していないのに気付いて、プラグインのEmbedlyを使ってみたら、全然こっちの方が使えるということを知ったという内容です。
(2017.12.14追記）現在では、この記事で触れている画像をサムネイル表示にして左側に回り込ませたり、抜粋文を出すかどうか選択できる機能は無料カードではできなくなってしまいました。
当サイトもEmbedlyカードから、プラグインPZ-LinkCardに切り替えています。
このページの目次
Embed（埋め込み機能）とは
ブログ記事本文に、自分の過去記事や、ほかのブログ記事のリンクや、画像、動画などを簡単に埋め込むことがEmbed機能ということです。いままでのWordPressでもYoutubeなどの埋め込みは出来ていたはずですが、WP4.4になってさらに埋め込める対象が増えたようです。
私は、そんな機能があるとも知らずに、いままでアドレスを入れて、 リンクの追加でやっていました。これは古典的手法だったのでしょうか。詳しくは、WordPressCodex日本語のoEmbedを参照してください。
WP4.4の標準埋め込み機能だと
WP4.4にアップデートして、そんな埋め込み機能があったのかと、さっそく何記事か得意げに リンクを埋め込んで投稿してみたのですが、FirefoxやChromeブラウザーでは普通に埋め込めていたつもりが、IE11では埋め込みの下側が切れ て表示されていたり、埋め込みをクリックしてもリンクに飛ばなかったりしているのに気づきました。（どうやら私のサイトだけ、もしくはテーマかプラグイン競合の問題のようです。）
下記のリンクは、WP標準の埋め込み機能を使ったものですが、Internet Explorer11ではリンクに飛べないのが確認できるサンプルです。IE以外では普通に機能しています。
埋め込めないサイトも多い
IEとは関係なしに、他にも不満点がありまして、私がよくリンクを貼るWordPress.orgのプラグインページや、PCメーカーなどのサイトは、埋め込みが出来ないというのも残念でした。相手のサイトによって埋め込みだったり、リンクだったりすると統一感がなくなってしまいます。
埋め込みが不安定
新機能につき、埋め込みが不安定なところがあるようです。ビジュアルモードではちゃんと埋め込まれているのに、プレビューで表示したり、公開して見てみると埋め込まれていなかったり、ただの引用になっていたりしました。pタグの自動整形が上手くいかないとダメなようです。さらに前回記事にした、pタグの自動除去機能停止をTinyMCE Advancedプラグインで有効にしていると、埋め込み機能がまったく上手く行かないようです。
WordPress4.3でPS Disable Auto Formattingを停止した理由
プラグインインEmbedlyを試す
そういうわけで、埋め込み機能は使うのはやめようかと思っていたところ、「embed」でプラグインを検索して出てきたEmbedlyプラグインです。インストールして有効化したら、メールアドレスとパスワードでアカウント作成が必要です。
詳しくは、下記埋め込みのwordpress.orgのプラグインページをご覧ください。
なんでも埋め込めた
このプラグインを使えば、WP標準の埋め込み機能では対応していなかったサイトも埋め込むことが出来ます。上の埋め込みのように、wordpress.orgのプラグインページをよく紹介するので、私にはありがたいです。
やはり自動整形と相性悪し
プラグインを有効にしていれば、リンク無しのアドレスを貼り付けるだけで埋め込まれるのは、WP標準の埋め込みと同じです。ビジュアルモードでは埋め込みがキッチリ表示されていても、プレビューにしたり公開したら埋め込まれない事があるのも、WP標準機能と同じでした。
私は、pタグの自動除去停止機能は外したくないのです。それでもこのプラグインを利用すれば、確実に埋め込みできる方法がありました。
コードをテキストモードでコピペ
Embedlyのサイトに行き、Embed Code Generatorのページで、埋め込みたいページのアドレスを入れると埋め込みコードを生成してくれます。それをコピペしてテキストモードで貼り付けるだけで、確実に埋め込みを表示させることが出来ました。
注意点としては、下のEmbed Code Generatorで生成されたコードを直接コピペするとコードが2行になっているので、WPの自動整形機能との兼ね合いで上手く表示できなくなります。コードの下に出ている「CLICK TO COPY EMBED CODE」を押してコードをコピーすると１行のコードになります。
Embed Code Generator | Embedly
記事抜粋、画像の非表示可
この記事でも、いくつか埋め込んでみましたが、なぜか記事抜粋の文字数がまちまちなのです。中には記事全文に近いダラダラと長い埋め込みになってしまうのもありました。そんなときには、Embed Code Generatorのプレビュー画面で、抜粋文の右上に出ている を押して抜粋文を表示しないコードを生成することができました。
同様に、アイキャッチ画像もやけに大きく表示されることがあり、その時もプレビュー画面で画像の右上の で非表示、画像左下の ボタンを押せばサムネイルサイズに小さく表示されたコードを生成することができました。
ソーシャルリンク非表示
Embed Code Generatorで作成したコードを貼り付けると、埋め込みの右側にソーシャルリンクボタンが付きます。これを非表示に設定するのは、管理画面のEmbedlyを開き、ADVANCED EMBED SETTINGS の中に、 SHARING BUTTONSのチェックを外すと、非表示にできました。
枠線をつける、幅を設定
デフォルトでは埋め込み部分に枠線がないので、記事本文との境目がわかりづらいです。また、埋め込みの幅が記事本文と同じというのも気になります。
埋め込み部分に枠線を付けて、PC画面では本文よりも幅を狭くするのは、CSSで設定しました。コードのclass名にembedly-cardが付いているので、それを利用してstyle.cssに追記した内容です。
/*埋め込みに枠線を入れる */
.embedly-card {
border: solid 1px #a9a9a9;
padding: 2% ;
max-width: 500px ;
}最後に
以上で、この記事で使っている埋め込みは一つを除き、プラグインEmbedlyを使っています。WP標準の埋め込み新機能のおかげで、すばらしいプラグインに巡り合えました。これからは積極的に埋め込み機能を使っていきたいと思っています。