wordpressのembed機能のカスタマイズで気をつけたいこと。

この記事は約320秒で読めます。

どうも!こうすけです。

先日、記事内に同じブログ内の記事を画像付きのリンクで表示させたいなと思い、調べていたところembed機能というものがあったので、それを使って記事の画像付きリンクを表示させました。

やり方は簡単で、記事編集画面で画像付きリンクで貼りたい記事のURLを記述するだけ。
wordpressの機能なので、wordpress以外のサイトのURLを記述してもリンクは表示されません。

しかし、表示はされたもののデザインが思った内容ではなかったので、カスタマイズすることにしました。

以下の記事を参考にさせていただきました。

embedカスタマイズ参考サイト

結果、うまく適切なカスタマイズをすることができました。

ただカスタマイズをする際に、僕が気をつけた方がいいなと思ったことがあったので、それをまとめました。

1. embedクラスをpost-itemクラスに変更する

embedカスタマイズ参考サイトでは、embed.phpないから変更するスタイルをそのままコピペして、function.php内に変更したい内容で記述し直すとありますが、そのembed.phpからコピペしてきたスタイルの中で使われているembedクラスは実際の表示では使われていないことがわかりました。実際、embedクラスに該当する部分はpost-itemクラスになっています。


なので、embed.phpからコピぺするスタイルは、embedと記述されているところは、post-itemと記述し直さなくてはなりません。

enbedを

post-itemに変更する

これをしないと、wordpressのデフォルトのデザインすら適用されていない状態になりますからね。

最初表示されたとき、デフォルトスタイルがあまりにもおかしくて、これがデフォルト?他の記事に表示されているのと全然違うと思いましたから。

2. レスポンシブデザインを適用する際に気をつけること

embedカスタマイズ参考サイトでレスポンシブできると記載があるのですが、僕はこの記述場所を勘違いしてしまいました。

embedカスタマイズ参考サイトでは、function.php内で主にスタイルを変更する内容を記述するのですが、iframeタグについては、function.phpファイルで変更しているスタイルは適用外です。

function.phpのスタイルを変更しても、iframeのスタイルは変更できません。


僕はfunction.php内にiframeタグのスタイルを変更する内容を記述するとレスポンシブになると思っていました。

ではどこにスタイルを変更する内容を記述すればいいのかというと、現在ブログに適用しているwordpressテーマのスタイルシート(cssファイル)にiframeのデザインを変更したい記述を追加する必要があります。


これでリンクがレスポンシブデザインになりました。

3. 最後に

以上ですがどうでしょうか。

embedで表示させたいリンクをカスタマイズする際の参考になればと思います。

一応僕は別ブログですが、こんな感じで表示できました。

この記事がいい!!と思ったらいいねツイートよろしく!!

 

作成者: kosuke

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です