[WordPress] テキストリンク作成用のショートコードを自作してみた

こんにちは!Takuya.B(@TB_IQ)です。

先日のブログデザイン崩壊から、ちょこちょことブログデザインをイジっています。

ブログの記事本文中で、自分の過去の記事、または他のサイト・ブログのリンクを貼りたいという場合、これまでであればブログカードを利用していました。

しかし、色々調べてみると、クリック率などの関係上ブログカード形式よりもテキストリンクの方が良いということを知りました。

はてなブログなどではよく見る上の写真のような形式もwordpressで実装するにはどうすればよいのだろうと、色々調べていたのですが、方法がわからなかったので、とりあえず自分で色々と調べて実装してみました。

スポンサーリンク

今回作ったのはこれ!

今回、下記のテキストリンクをショートコードで作成できるようにしました。

▼これな↓

関連記事

このように上部に『関連記事』と表示させ、ページタイトルを表示させています。これはfunction.phpでショートコードを作成しています。

ちなみにこの『関連記事』の部分は変更することが可能です。

例えば、

プロフィールはこちら!

このように『関連記事』ではなく『プロフィール…』と表示させることも可能です。

実装したコードはこちら

それでは、実際にどのようにしてショートコード化しているのか、解説します。

サンプルコード(function.php)

まず、サンプルコードは以下の通りです。

これをfunction.phpに追加します。コードについて順番に説明します。

(1) kanren関数について

まず、ショートコードを入力した時に呼び出されるkanren関数についてです。

これについては以下のページを参考にしました。

参考にしたページ

このkanren関数ではwordpressのshortcode_atts関数とphpのextract関数を用いています。

shortcode_attsの解説はこちら
extractの公式解説はこちら

上の2つの解説じゃよくわからんという方(まさに私のことだが)は次のリンクがわかりやすいです。

とどのつまりはこういうこと

ショートコードで入力したurlプロパティの値をgetPageTitle関数の引数に渡しています。titleプロパティの値はそのまま出力され、値が空の場合は関連記事と出力しています。

そして、最終的にreturnでhtmlタグの文字列として出力しています。

(2) getPageTitle関数について

getPageTitle関数は引数に指定したurlのサイトのタイトルを取得する関数です。

こちらのコードは以下のサイトから拝借しました。

参考にしたページ

(3) ショートコードの生成

最後にショートコードを生成して完了です。

add_shortcode関数の第1引数はショートコードに使用する文字列を表し、第2引数は関数名を表しています。

CSS

現在表示しているリンクのCSSは以下の通りです

今回のサンプルコードをそのまま使うのでしたら、このCSSも使って下さい。適当にイジって自分好みにデザインすることをオススメします。

番外編:プラグイン wptouch を使っているので…

ちなみに余談ですが、このブログをスマホで見ようとするとレイアウトが異なります。理由は、自分でレスポンシブデザインしておらず、wptouchというプラグインを使用しているからです。

このプラグインを導入すると、レスポンシブ対応していなくてもスマホで閲覧することが可能です。しかし、1つの難点としてショートコードが反映されないという点が挙げられます。

つまり、今回のショートコードを入力しても、スマホで見ると[kanren url=”hoge.com” title=”hoge”]とそのまま出力されてしまいます。

これは他のショートコードに関しても言えることですが、wptouchがfunction.phpを認識していないため起こるトラブルで、解消するためには上述のコードをプラグイン化することで解決します。

wptouchを使っていない方にとってはどうでも良いことですが、もしwptouchを使っていてショートコードが反映されなくてお困りの方はこちらをご覧ください。

私はここを見て解決しました

スポンサーリンク

まとめ

今回、テキストリンクのショートコード化を行いました。

ブログのデザインは楽しいんで、これからもちょくちょくこういう記事UPしていきます。