WordPress

WordPressに記事IDで呼び出すブログカードを追加する

blogcard

内部リンクを目立たせて表示させる、いわゆるブログカードという機能があります。
このブログにも実装しましたので、やり方を紹介します。

追加するブログカードの条件

僕がブログカードに求める条件は以下の2つです。

  1. プラグインを使用しないこと
    プラグインを使用すると、読み込み速度が落ちてしまいます。
    ブログカードを表示する定番のプラグイン「Pz-LinkCard」は、非常に重たいことで有名です。
    悪影響を抑えるために、直接書き込んで実装します。
  2. 記事IDで指定できること
    URLで記事を指定するショートコードだと、パーマリンクを変更した際に修正が必要になります。
    パーマリンクを変更することは滅多にありませんが、念の為、記事IDで指定できるようにします。

パーマリンクに関しては下の記事で説明しています。

myImg
Yuta

こんな感じのブログカードを実装します。

記述するコード

こちらのサイトを参考に、function.phpにコードを追加しました。
抜粋は必要ないので、不要な部分は削っています。

また、URLから記事IDを取得する処理を削除し、逆に記事IDからURLを取得しています。

ショートコードの名称を変更して、オープンケージのテーマのショートコードと互換性を持たせています。

僕は、運営している他のサイトでオープンケージのテーマを使っています。
なので、その方が書いてて違和感が少ないという個人的な理由です。

下記のように、記事のIDを渡してあげるとブログカードが表示されます。

コードの解説

仕組みのわからないコードを貼り付けるのには抵抗がある方もいるでしょう。
ですので、簡単にプログラムの意味を解説していきます。

まず、ショートコードで記事IDを引数として渡します。
すると、$postidという変数の中に、記事IDが代入されます。

get_post()は記事IDで指定した記事のレコードをデータベースから取得する関数です。
取得した情報を$postに代入して、それを使って$dateに投稿日の情報を代入しています。

get_permalink()は記事のURLを取得する関数です。
ブログカードはリンクですので、当然ですが遷移するURLが必要です。

$kanrenという変数に実際に表示させるHTMLを代入して、returnで返します。

phpにおける「.」は文字列の連結を意味します。

投稿日の前にを表示させています。
Fontawesomeを読み込んでいない場合は消してください。

URLとタイトルは、それぞれesc_url()とesc_html()でエスケープしています。
第三者の入力した値を出力するわけではないのではありませんが、エスケープできるものはしておいたほうがいいでしょう。

33行目ではfloatを解除しています。
僕は、cssに以下のコードが書いてあります。

floatを解除しないとサムネイルがはみ出す原因になります。
cssも変更するのが面倒な方は、下記のコードで置き換えてください。

デザインをカスタマイズ

style.cssにブログカードに関する記述を追加します。
こちらのサイトを参考に、Sassで書きました。

僕のブログの記事一覧との統一感を出したかったので、影を使ったデザインにしました。
カーソルを乗せるとフワッとします。

言葉で表すのは難しいので、実際にカーソルを乗せてみてください。

この記事を書くにあたって、TSUNJI様のこまろくNOTEを参考にさせて頂きました。

myImg
Yuta

回遊率を上げるためには、内部リンクの設置が重要です。以前書いた記事も定期的にリライトして、他の記事との繋がりを強化しましょう。