投稿時にURLをブログカード風に表示するショートコードを作りました

前回「記事中urlをSimplicityのブログカード風に表示するカスタマイズ」で、Simplicity以外のテーマでも記事中のURLをブログカード風に表示する方法について書きました。
残念ながらこのblogではblog自体が重すぎて、ちょっと過負荷になってしまったようなので、考え方をかえてショートコードでブログカードが表示出来るようにカスタマイズしてみました。それについて書きます。

寝ログさんのブログカード風に表示するコードをショートコードにする

使っている子テーマのfunctions.php

このようなコードを追加しました。寝ログさんのコードにあった本文を抜粋するfunctionと、ブログカード部分で変更したのは記事中からURLを探すのではなく、ショートコードなのでURLを引数として渡すので、URLについては渡ってきたものを使うというあたりです。

投稿や固定ページ

このように記述します。url=’表示したいURL’とします。

表示してみると、ちゃんとブログ風カードが表示されました(^^)/。

アイキャッチの指定がないときは一つ目の画像を使うようにカスタマイズする

しかし、別の記事を表示してみると

このように画像が壊れた状態で表示されてしまいした。これはこのblogはアイキャッチを指定せずに一つ目の画像をアイキャッチ代わりにしているので、アイキャッチが無い時に指定する no-image.png もないため、こんな表示になってしまうようです。

このblogで使いたいのでその部分を修正してみたいと思います。

以前書いた記事「投稿記事からイメージを取得して表示する」で作った記事中から画像を取得するfunctionを使えばできそうです。

このコードを追加して、先ほどの function ryus_blogcard の

このように書き換えて、サムネイルが存在しないときは記事中の画像をとってくるようにしました。
これで、

このように、記事中の画像からサムネールが表示されるようになりました(^^)/

まとめ:このショートコードで表示出来るのは内部URLだけとなります

ということで、このblogにもこのカスタマイズをしたので実際に表示してみますね。

一つ前の関連記事はこちら↓

WordPressのテーマSimplicityではurlをブログカード風に表示してくれる機能が備わっています。urlを書くだけで画像やリンクをカード風に作ってくれるのはとても便

できました!

試しに外部のURLを指定してみると、

前回「記事中urlをSimplicityのブログカード風に表示するカスタマイズ」で、Simplicity以外のテーマでも記事中のURLをブログカード風に表示する方法について書き

この記事のブログカードが表示されてしまいます。URLからポストIDをgetしたりすることは…(^_^;できないのでやっぱりそうですよね。。外部のURLをblogカード風に表示したかったらスクレイピングなどの別の方法が必要そうです。

Simplicityでは外部のURLもブログカード風に表示できるようになっているのでテーマをじっくり見させてもらえれば分かるかも?

それと以前から気になっていたこのblogで複数回にわたる記事の時に別の記事へのリンクを付けるということにこのブログカードが使えるのではないかな?と思いました。複数回なので複数のリンクを貼ることになるからもうちょっと場所を取らないものにしたいですね…ということでもうちょっと違うサイズを表示するショートコードを考えてみました。それについてはまた別の回で書きますね(^^)/

[Amazon sponsored link] css 関連本
兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る