Wordpress カスタマイズ 2021年3月17日

WordPressにブログカードのプラグインなしで表示する方法

今回ご紹介する事例は、ブログの運用をしていると内部リンクを張る場面があると思います。内部リンクをおしゃれなカード式プラグインなしで簡単に設置できる方法をご紹介します。内部リンクのデザインを見やすくすることでクリック率を上げることもできます。

ブログカードって何？
functions.phpに下記ソースコードを追記する
style.cssを追記する
まとめ

ブログカードって何？

「ブログカード」とは、ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくデザインして表示する埋め込み形式のことをいいます。
また、今回作成するブログカードは、以下のようなものです。

ブログカードで有名な「Pz-LinkCard」というプラグインもあります。ただそのプラグインはサイトが重くなります。
「Pz-LinkCard」に関しては下記で説明しています。

WordPressの記事埋め込み（Embed）機能が上手く表示されない時の代替プラグイン「Pz-LinkCard」

今回ご紹介するものは、記事埋め込み（Embed）機能が上手く表示されない時に代替Wordpressプラグイン「Pz-LinkCard」です。このプラグインを使 […]

functions.phpに下記ソースコードを追記する

準備として「functions.php」を呼び出して、コードを記述していきます。それでは手順です。

WordPressにログインします。
メニューの［外観］→［テーマの編集］
「functions.php」を選択し、ソースコードを記述します。
functions.phpの中に、下記のコードを挿入します。

/// 記事IDを指定して抜粋文を取得
function ltl_get_the_excerpt($post_id){
global $post;
$post_bu = $post;
$post = get_post($post_id);
setup_postdata($post_id);
$output = get_post_meta($post_id,'_yoast_wpseo_metadesc',true);//YoastSEOから
$post = $post_bu;
return $output;
}

//ショートコード
function nlink_scode($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'excerpt'=>""
),$atts));

$id = url_to_postid($url);//URLから投稿IDを取得

$no_image = 'noimageに指定したい画像があればここにパス';//アイキャッチ画像がない場合の画像を指定

//タイトルを取得
if(empty($title)){
$title = esc_html(get_the_title($id));
}
//抜粋文を取得
if(empty($excerpt)){
$excerpt = esc_html(ltl_get_the_excerpt($id));
}

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

$nlink .='
<div class="blogcard">
<a href="'. $url .'">
<div class="blogcard-thumbnail">'. $img_tag .'</div>
<div class="blogcard-content">
<div class="blogcard-title">'. $title .' </div>
<div class="blogcard-excerpt">'. $excerpt .'</div>
</div>
<div class="clear"></div>
</a>
</div>';

return $nlink;
}

add_shortcode("nlink", "nlink_scode");

上記ソースコードは、ブログカードに表示する抜粋文は、設定したメタディスクリプションからとってきています。また、YoastSEOを使っている場合と、All in One SEOを使用している場合は、少しコードを変更する必要があります。

どっちも使用していない方は、抜粋文（上から110文字）をとってくるように変更しましょう。以下のコードを参考に、7行目の$output =・・・の部分を変更してみてください。

//YoastSEOを使っている人はそのまま。
$output = get_post_meta($post_id,'_yoast_wpseo_metadesc',true);

//上記のコードの部分を、All in One SEOを使っている人は↓に変更してください。
$output = get_post_meta($post_id,'_aioseop_description',true);

//どっちも使っていない人は↓に変更してください。
$output = get_the_excerpt();

style.cssを追記する

style.cssに下記ソースを追記して、デザインを整えます。

.blogcard {
  background: rgba(251, 140, 0, 0.02);
  border: 1px solid #fb8c00;
  word-wrap: break-word;
  max-width: 100%;
  border-radius: 5px;
  margin: 0px 10px 15px 10px;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .2);
  -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;
}

.blogcard:hover {
  cursor: pointer;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.blogcard:before {
  font-family: FontAwesome;
  position: absolute;
  padding: 2px 6px;
  content: "\f02e 詳細を見る";
  background-color: #fb8c00;
  color: #fff;
  font-size: .8em;
  z-index: 1;
}

.blogcard a {
  text-decoration: none;
}

.blogcard-thumbnail {
  width: 35%;
  display: table-cell;
  vertical-align: middle;
  padding: 10px 0 10px 10px;
}

.blogcard-thumbnail img {
  padding: 0;
}

.blogcard-content {
  display: table-cell;
  vertical-align: middle;
}

.blogcard-title {
  font-size: 1em;
  margin: 5px 10px 5px 0px;
  font-weight: bold;
  line-height: 1.4;
}

.blogcard-title:hover {
  text-decoration: underline;
}

.blogcard-excerpt {
  font-size: .74em;
  color: #4c4c4c;
  margin: 0 10px 5px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blogcard .clear {
  clear: both;
}

@media screen and (max-width: 500px) {
  .blogcard:before {
    font-size: .56em;
  }
  .blogcard-title {
    font-size: .70em;
  }
  .blogcard-excerpt {
    font-size: .60em;
  }
}

まとめ

今回は、プラグインなしで内部リンクをおしゃれなカード式に設置できる方法をご紹介しました。上記設定で誰でも簡単に内部リンクのデザインを見やすくすることができますので、ぜひ設置してみてください。