WordPressを使い倒す

WordPressではてなブログっぽい過去記事への参照を簡単に表示する方法

投稿日:2018年7月12日 更新日:

こんにちは、ぐだおです。

今日はWordPressで過去記事への参照を表示する方法について書いていきます。自分の記事中で過去記事を参照するときとか他の人のブログ記事を参照する時に、ただリンクを張るだけじゃなくて、はてなブログのブログカードっぽい参照をしたいと思っていたんですよね。実際にみなさん結構使っていますし。実はコレ、「プラグインとかいれたりphpファイルいじったりしてそうだし、面倒くさそうだな。」と思っていた過去の自分をひっぱたいてやりたいぐらい簡単にできます。というわけで、そのやり方について書いていきます。

WordPressに内部ブログカードを実装する方法

実際にさくっとブログカードで参照してみる

最初に書いちゃいますが、この方法は「URLを直接記入するだけ」です。私も信じられませんでした。だけど実際にやってみたら、確かにうまくいくんですよね。試しに以下に”https://gudao-lazy.com/1st-article/”という私の最初の記事のURLを書いてみます。

ぐだおのホームページつくりました

ほら、ブログカードできてますよね?!
これはWordPress4.4から対応したoEmbedという埋め込み用コード取得機能によるようで、内部リンク、もしくは他ブログの外部リンク(oEmbedに対応しているものなら)を埋め込み表示することができます。
デフォルトだと最初にタイトルが出て、その下の左側にアイキャッチ画像、右側に記事の書き出しが入ります。ありがたいことにリンクも自動で貼ってくれます。
左下にはサイトアイコンが表示されるのですが、現時点では設定していないので、WordPressのアイコンが表示されています。そして右下にコメント数と共有ボタンが表示されます。
ちなみに、この辺のレイアウトはアイキャッチ画像の縦横比に応じて自動に切り替わるようになっているようで、実際に別サイトのを引用表示すると上部に横幅一杯にアイキャッチ画像がきてその下に記事の書き出しがくる形になっていました(*上記のブログカードの表示形式は下記に書いてあるようにデフォルトから少し設定をいじったものです。
というわけで楽チンにできましたね。

SNSの投稿もブログカード風に参照してみる

このoEmbed機能はブロク記事だけでなく、YouTubeやTwitter、Instagramにも対応しているので、投稿URLを貼り付ければブログ記事内に表示させることが出来るらしいです。ということで、私のtwitterのつぶやきのURLを実際に直接貼り付けてみました。

おお、できているぞ。SNSでいちいち「埋め込みコード」を取得する必要はないんや。(当然、埋め込みコードを取得してもらっても良いですが、その辺は個人の自由で。)

ブログカードのデザインやレイアウトを変更する方法

というわけでブログカードを簡単に表示できたわけですが、このカードのデフォルトのデザインやレイアウトがちょっと気に入らないと私は思ったわけです。

まずデフォルトだとカードの幅が固定でスマホとかだと表示が崩れてしまうことがあります。
これを防ぐためには埋め込みプレビュー表示のwidthを100%にします。
ご利用のテーマのスタイルシートファイル(style.cssなど)を開いて、
iframe.wp-embedded-content {width:100%;}
を追加します。これでブログカードが無事にウィンドウの幅になったはずです。

個人的にはもっとアイキャッチ画像を小さくして表示をスッキリさせたいと思ったわけです。
この辺のブログを読んでやってみました。



が、多少スッキリしたものの私の満足のいく見た目にはなかなかなりませんでした。
この辺は私のphpとcssに対する理解不足でしょう。まだまだ修行が必要なようです。

プラグインや自力で実装してもブログカードを作れるよ

ちなみに、当初の私の予想通りに自力で実装することもできるようで、以下の記事でされています。


こちらだと、「あくまで自サイトURLのみで他サイトのURLではカード化されない」ようですが、埋め込みではなく画像を作ってリンクを貼っている形になっています。simplicityだとデフォルトで対応してあるようです。iframeを多用したくないという方はこちらの方が良いのかもしれません。

あとブログカード用のプラグインもあります。


こちらでも自力で実装されていますね。時間に余裕があったら再チャレンジしたいところです。

上記で色々とレイアウト調整に時間をかけましたが、プラグインを使った方がレイアウトの調整が簡単でしたので、結局このPz-LinkCardというプラグインを使うことにしました。例として私の最初の記事へのブログカードを貼っておきます。

Pz-LinkCardの使い方についてはこのプラグインを作った方のページに詳しいです。

まとめ

WordPressを使ってブログカードで過去記事を参照するのは、ただURLをそのまま打ち込めば良いので非常に簡単です。ですが、レイアウトを自分の希望のものにまで最適化するのはEmbed自体を理解する必要があり中々に大変なようです。いっそ、自力で実装したり、プラグインを使った方が楽そうでした。では。。。

-WordPressを使い倒す

執筆者:


comment

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

CAPTCHA


関連記事

関連記事はありませんでした