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

この記事は約5分で読めます。
スポンサーリンク

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

今日はWordPressで過去記事への参照を表示する方法について書いていきます。

自分の記事中で過去記事を参照するときとか他の人のブログ記事を参照する時に、ただリンクを張るだけじゃなくて、はてなブログのブログカードっぽい参照をしたいと思っていたんですよね。実際にみなさん結構使っていますし。

実はコレ、「プラグインとかいれたりphpファイルいじったりしてそうだし、面倒くさそうだな。」と思っていた過去の自分をひっぱたいてやりたいぐらい簡単にできます。というわけで、そのやり方について書いていきます。

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

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

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

ぐだおのホームページつくりました
はじめまして、ぐだおです。 ブログらしきものを再開してみることにしました。 ぐだおブログはじめます もう10年ほど前でしょうか、学生時代にブログがブームになった時に、私も流れにのってか(?)、駄文を垂れ流していたりしました...

ほら、ブログカードできてますよね?!
(*現在はCocoonというテーマを使っているので、Cocoonが設定したオシャレなブログカードが表示されていますが、デフォルトでも同等のものが表示されます。)

以下はデフォルトのWordPressの基本テーマでのお話です。

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

唯一の注意事項は、前後に空白行を空けて、他の文字と分離しなければならない、という一点だけです。

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

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

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

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

というわけでブログカードを簡単に表示できたわけですが、このカードのデフォルトのデザインやレイアウトがちょっと気に入らないと私は思ったわけです。
(ちなみにCocoonだと最初から満足が行くぐらいの出来のものが表示されます)

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

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

【簡単!】ブログカードを見やすくコンパクトにカスタマイズ【プラグイン不要】
前回ご紹介したembed(埋め込み)機能これを使用すれば、設定不要で、ブログカードを使用することができるので、便利な機能ですが、デフォルトの状態ですと、大きすぎるような気がします。あるとないとでは全然見栄えが違う、ブログカードの昨日ですが、
WordPress 4.4 から 他サイトの記事を引用埋め込みできるようになった「Embed」
WordPress4.4 からは、他のブログ (oEmbed対応) の記事を埋め込み表示できるようになりました。もちろん WordPress4.4どうしでしたら 記事のURLを貼るだけで簡単に引用表示できます。という事で WordPress4.4のoEmbed機能を調べてみました。EmbedEmbedを使うのは簡単です...

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

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

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

URLを記入するだけ!WordPressに内部ブログカードを実装するカスタマイズ方法
自分のブログ内のURLを、Wordpressのブログエディターに貼り付けるだけで、簡単にブログカード表示できるカスタマイズ方法です。

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

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

関連記事(内部リンク)のブログカードをプラグイン無しで実装する方法[コピペ]|こまろくNOTE
せっかく訪れてくれたユーザーに別の記事もおすすめしたい ブログを運営している人なら、できるだけ1人あたりのPV数をアップさせたいですよね。WordPressでブログを運営している場合、サイドバーの「人気記事

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

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

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

まとめ

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

コメント

タイトルとURLをコピーしました