!important

WordPress

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

blogcard

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

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

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

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

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

WordPressでパーマリンクを設定する３つのメリット
WordPressでパーマリンクを設定する３つのメリット
2019-01-25
myImg
Yuta

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

記述するコード

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

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

//内部リンクをはてなカード風にするショートコード
function kanren_scode($atts) {
  extract(shortcode_atts(array(
    'postid'=>"",
  ),$atts));

  $post = get_post($postid);//記事IDから投稿情報の取得
  $url = get_permalink($postid);//記事IDからURLの取得
  $title = get_the_title($postid);//タイトルを取得
  $date = mysql2date('Y-m-d', $post->post_date);//投稿日の取得

  $img_width ="90";//画像サイズの幅指定
  $img_height = "90";//画像サイズの高さ指定
  $no_image = get_template_directory_uri().'/img/no-image.gif';//アイキャッチ画像がない場合の画像を指定

  //アイキャッチ画像を取得
  if(has_post_thumbnail($postid)) {
    $img = wp_get_attachment_image_src(get_post_thumbnail_id($postid),array($img_width,$img_height));
    $img_tag = "<img src='" . $img[0] . "' alt='{$title}' width=" . $img[1] . " height=" . $img[2] . ">";
  } else { $img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'">';
  }

  $kanren .='
<div class="blog-card"><a href="'. esc_url($url) .'">
  <div class="blog-card-thumbnail">'. $img_tag .'</div>
  <div class="blog-card-content">
    <div class="blog-card-title">'. esc_html($title) .' </div>
    <div class="blog-card-date">
    <i class="fas fa-pencil-alt"></i>
    '.$date.'
    </div>
  </div>
  <div class="cb"></div>
</a></div>';

  return $kanren;
}

add_shortcode("kanren", "kanren_scode");

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

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

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

[kanren postid="351"]

コードの解説

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

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

$post = get_post($postid);//記事IDから投稿情報の取得
$url = get_permalink($postid);//記事IDからURLの取得
$title = get_the_title($postid);//タイトルを取得
$date = mysql2date('Y-m-d', $post->post_date);//投稿日の取得

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

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

  $kanren .='
<div class="blog-card"><a href="'. esc_url($url) .'">
  <div class="blog-card-thumbnail">'. $img_tag .'</div>
  <div class="blog-card-content">
    <div class="blog-card-title">'. esc_html($title) .' </div>
    <div class="blog-card-date">
    <i class="fas fa-pencil-alt"></i>
    '.$date.'
    </div>
  </div>
  <div class="cb"></div>
</a></div>';

  return $kanren;
}

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

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

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

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

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

.cb {
  /* floatを解除 */
  clear: both;
}

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

デザインをカスタマイズ

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

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

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

WordPressにjQueryでアコーディオンメニューを追加する
WordPressにjQueryでアコーディオンメニューを追加する
2019-01-24 

.blog-card {
  border:1px solid #ddd;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
  word-wrap:break-word;
  max-width:100%;
  margin-bottom: 30px;
  a {
    color: #38383e;
    background: #fff;
    display: block;
    text-decoration: none;
    -webkit-transition: box-shadow 0.2s ease-in-out;
    -moz-transition: box-shadow 0.2s ease-in-out;
    -o-transition: box-shadow 0.2s ease-in-out;
    transition: box-shadow 0.2s ease-in-out;
    &:hover {
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
  }
}

.blog-card-thumbnail{
  float:left;
  padding:10px;
  img {
    display: block;
    padding: 0;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
}

.blog-card-content{
  line-height:120%;
}

.blog-card-title{
  padding:10px 10px 10px 0;
  font-size:85%;
  &:before {
    content: '関連記事';
    font-size: 0.7em;
    font-weight: bold;
    color: #fff;
    background: #111;
    width: 5em;
    display: inline-block;
    padding: 0.2em;
    position: relative;
    top: -2px;
    text-align: center;
    margin-right: 0.5em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
  }
}

.blog-card-date{
  color: lighten(#38383e, 10%);
  font-size:75%;
  margin-right:10px;
}

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

myImg
Yuta

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