こんにちは、ぐだおです。
今日はWordPressで過去記事への参照を表示する方法について書いていきます。
自分の記事中で過去記事を参照するときとか他の人のブログ記事を参照する時に、ただリンクを張るだけじゃなくて、はてなブログのブログカードっぽい参照をしたいと思っていたんですよね。実際にみなさん結構使っていますし。
実はコレ、「プラグインとかいれたりphpファイルいじったりしてそうだし、面倒くさそうだな。」と思っていた過去の自分をひっぱたいてやりたいぐらい簡単にできます。というわけで、そのやり方について書いていきます。
WordPressに内部ブログカードを実装する方法
実際にさくっとブログカードで参照してみる
最初に書いちゃいますが、この方法は「URLを直接記入するだけ」です。私も信じられませんでした。だけど実際にやってみたら、確かにうまくいくんですよね。試しに以下に”https://gudao-lazy.com/1st-article/”という私の最初の記事のURLを書いてみます。
ほら、ブログカードできてますよね？！
（＊現在はCocoonというテーマを使っているので、Cocoonが設定したオシャレなブログカードが表示されていますが、デフォルトでも同等のものが表示されます。）
以下はデフォルトのWordPressの基本テーマでのお話です。
これはWordPress4.4から対応したoEmbedという埋め込み用コード取得機能によるようで、内部リンク、もしくは他ブログの外部リンク(oEmbedに対応しているものなら)を埋め込み表示することができます。
デフォルトだと最初にタイトルが出て、その下の左側にアイキャッチ画像、右側に記事の書き出しが入ります。ありがたいことにリンクも自動で貼ってくれます。
左下にはサイトアイコンが表示されるのですが、設定していない場合は、WordPressのアイコンが表示されています。そして右下にコメント数と共有ボタンが表示されます。
ちなみに、この辺のレイアウトはアイキャッチ画像の縦横比に応じて自動に切り替わるようになっているようで、実際に別サイトのを引用表示すると上部に横幅一杯にアイキャッチ画像がきてその下に記事の書き出しがくる形になっていました。というわけで楽チンにできましたね。
唯一の注意事項は、前後に空白行を空けて、他の文字と分離しなければならない、という一点だけです。
SNSの投稿もブログカード風に参照してみる
このoEmbed機能はブロク記事だけでなく、YouTubeやTwitter、Instagramにも対応しているので、投稿URLを貼り付ければブログ記事内に表示させることが出来るらしいです。ということで、私のtwitterのつぶやきのURLを実際に直接貼り付けてみました。
うちの子はどうも動きが激しい子のようで、保育園では「ラックごと動いているらしい」。
— くたお (@gudao_lazy) July 9, 2018
おお、できているぞ。SNSでいちいち「埋め込みコード」を取得する必要はないんや。
（当然、埋め込みコードを取得してもらっても良いですが、その辺は個人の自由で。）
ブログカードのデザインやレイアウトを変更する方法
というわけでブログカードを簡単に表示できたわけですが、このカードのデフォルトのデザインやレイアウトがちょっと気に入らないと私は思ったわけです。
（ちなみにCocoonだと最初から満足が行くぐらいの出来のものが表示されます）
まずデフォルトだとカードの幅が固定でスマホとかだと表示が崩れてしまうことがあります。
これを防ぐためには埋め込みプレビュー表示のwidthを100%にします。
ご利用のテーマのスタイルシートファイル（style.cssなど）を開いて、
iframe.wp-embedded-content {width:100%;}
を追加します。これでブログカードが無事にウィンドウの幅になったはずです。
個人的にはもっとアイキャッチ画像を小さくして表示をスッキリさせたいと思ったわけです。
この辺のブログを読んでやってみました。
が、多少スッキリしたものの私の満足のいく見た目にはなかなかなりませんでした。
この辺は私のphpとcssに対する理解不足でしょう。まだまだ修行が必要なようです。
プラグインや自力で実装してもブログカードを作れるよ
ちなみに、当初の私の予想通りに自力で実装することもできるようで、以下の記事でされています。
こちらだと、「あくまで自サイトURLのみで他サイトのURLではカード化されない」ようですが、埋め込みではなく画像を作ってリンクを貼っている形になっています。simplicityだとデフォルトで対応してあるようです。iframeを多用したくないという方はこちらの方が良いのかもしれません。
simplicityの発展型のCocoonでも同等のものが実装されています。
あとブログカード用のプラグインもあります。
こちらでも自力で実装されていますね。時間に余裕があったら再チャレンジしたいところです。
上記で色々とレイアウト調整に時間をかけましたが、プラグインを使った方がレイアウトの調整が簡単です。
このPz-LinkCardというプラグインを使った場合の、私の最初の記事へのブログカードを貼っておきます。
Pz-LinkCardの使い方についてはこのプラグインを作った方のページに詳しいです。
まとめ
WordPressを使ってブログカードで過去記事を参照するのは、ただURLをそのまま打ち込めば良いので非常に簡単です。ですが、レイアウトを自分の希望のものにまで最適化するのはEmbed自体を理解する必要があり中々に大変なようです。いっそ、自力で実装したり、プラグインを使った方が楽そうでした。Cocoonの様にテーマによっては最初から満足のいくものが実装されているので、そういったテーマを使用するという選択肢もありだと思います。では。。。
コメント