【WordPress】コピペで実装ブログカードの作り方【プラグインなし】

【WordPress】コピペで実装ブログカードの作り方【プラグインなし】

PR
ブログ初心者

内部リンクのクリック率を上げるために、WordPressにもブログカードを実装しようと思う、イメージとしてははてなブログにあるお洒落なリンク、ってことでプラグインに頼らず簡単に作れる方法ってない？、、、あ、メンドクサイのは勘弁してね。

この記事では、WordPressで内部リンクのブログカード化を誰でも簡単に実装する方法（作り方）を解説しています。はてなブログみたいなお洒落なブログカードを簡単に作りたい方は参考にどうぞ、抜粋文表示も可能でサイトも重たくなりませんよ。

内部リンクをブログカード化 → クリック率アップ

目次[ click ]

ブログカードとは？

簡単に言うと、内部リンクのクリック率を上げる試みのことです。

内部リンクをブログカード化すると「サイトの離脱率を下げクリック率を上げることが可能」、実装することでクリック率が2倍になったなんて声もあるくらい効果は抜群です（本ブログでも実装しています）

実際に見た方が早いと思いますので、【ただのテキストリンク】【はてなブログ】【本ブログ】の3パターンを先に紹介しておきます。

テキストリンク【ブログカード化しない】

ブログカード化していないただのテキストリンクだと下記のようになります、ほとんどのサイトがこれですね。

【wordpress】記事を書く時に自動保存が有効だとヤバイ【無効にする】

明らかにリンクですよねって感じで面白くないし目に止まらない、読み流してしまうのも頷けます、もちろん全然ダメってわけじゃないんですけどね。記事の属性によっては有効な場合はあります。

はてなブログカード【先駆け】

ブログカードの先駆けとして有名なのがはてなブログです、下記の画像がその例です。

はてなブログ【ブログカード】

先ほどのテキストリンクと比べると全然印象が違うと思います、画像を小さく表示させることで興味も引きますので読み流されることも少なくなります（離脱率が下がる&クリック率が上がる）

macoblogブログカード

最後に本ブログで実装しているものを紹介、下記になります。

【WordPress】ブログカード自動化の代償「プラグイン実装の落とし穴」
本記事では、ブログカード実装における選択肢とリスクについて解説しています、「とりあえずプラグインでブログカードを実装」と…
macoblog.com

本記事で紹介するブログカードをベースに作りなおしただけで基本は同じです、実装手順が異なるので気になる方は上の記事を読んでください。

ブログカードの作り方【プラグインなし】

ブログカードの作り方【プラグインなし】

WordPressでブログカードを実装する方法は大きく2つあります。

  • プラグインを使う
  • 自作する

一番手っ取り早いのはプラグインを使うことですがオススメできません、【プラグインを使いすぎることを避けたい】【そのくらい自分で作ろう】などが理由です（詳細は割愛させていただきます）

「自作する」と聞けば難しいイメージがありますがそんなことはありません、コピペするだけなので誰でもすぐ実装する事が可能です、ということで今回はプラグインを使用せずブログカードを実装してみたいと思います。

準備するもの【子テーマのみ】

WordPress環境下で親テーマを直接編集することは推奨できませんので必ず子テーマを使用しましょう、使用するファイルは子テーマ内にある【functions.php】【style.css】の2つのみ（子テーマ内にある必須ファイル）

子テーマを用意していない方は今すぐ作りましょう、方法についてはmacoblogブログカード【本記事で実装できる】で紹介している記事を読めばOKです。

ブログカード化の処理

子テーマ内にあるfunctions.php内に下記のコードをコピペしましょう（ファイルの一番下でOK）

子テーマ/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_the_excerpt();
  $post = $post_bu;
  return $output;
}

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

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

	$img_width ="90";//画像サイズの幅指定
	$img_height = "90";//画像サイズの高さ指定
	$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),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.'" />';
    }

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

	return $nlink;
}

add_shortcode("nlink", "nlink_scode");
//---------------------------------------//
// ここまで
// 内部リンクのブログカード化（ショートコード）
//---------------------------------------//

ブログカードのスタイル

子テーマ内にあるstyle.css内に下記のコードをコピペしましょう（ファイルの一番下でOK）

子テーマ/style.css

/*-------------------------
  ブログカード
-------------------------*/
.blog-card {
  background: #fbfaf8;
	border:1px solid #ddd;
	word-wrap:break-word;
	max-width:100%;
	border-radius:5px;
	margin: 30px;
  /* sp用 ※4 */
}
.blog-card:hover {
  background: #fee;
}
.blog-card a {
  text-decoration: none;
}
.blog-card-title {
	color: #337ab7;
	display: block;
}
.blog-card-thumbnail {
	float:left;
	padding:10px;
}
.blog-card-thumbnail 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:120%;
  font-weight: bold;
  line-height: 1.5em;
}
.blog-card-excerpt {
	color:#333;
	margin:0 10px 10px;
  line-height: 1.5em;
}
.blog-card .clear {
  clear: both;
}

④：カスタマイズ版（マコブログVer）の場合

マコブログと同じデザインのブログカードを作るにはどうすればいいか？という問い合わせが山ほどありまして、これに対しては説明する手間と知識量の差を考えて「難しい」と回答してきたわけですが、突っ返すのも申し訳ないという事で、「マコブログVer」という形でコードを調整してみましたので紹介しておきます。

マコブログとほぼ同じ、というか更にリッチになっている事が分かるかと思います。先ほど紹介した「②：ブログカード化の処理」と「③：ブログカードのスタイル」の部分をこれから紹介するコードに置き換えて設定してもらえれば実装できます。

※WPデフォルトテーマ「Twenty Seventeen」で調整及び動作確認済み、内部リンク用としてご利用ください。質問・問い合わせに関しては受け付けません（質問の仕方によっては回答するかも）

うぇぶとまと / Webエンジニア

ブログカード左上に「合わせて読みたい」を表示したいとご要望がありましたので、スタイルに追加し実装させて頂きました。色の変更・非表示に関しては後述していますのでそちらをご参考ください。

子テーマ/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_the_excerpt();
  $post = $post_bu;
  return $output;
}

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

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

    $img_width ="200";//画像サイズの幅指定
    $img_height = "200";//画像サイズの高さ指定
    $no_image = 'noimageに指定したい画像があればここにパス'; //アイキャッチ画像がない場合の画像（絶対パス）を指定

  //自サイト名を表示させたい場合はここにアイコン画像（絶対パス）を指定
  //サイズは 1:1 推奨
  //表示させない場合はそのまま未入力で
  $site_icon = '';

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

  //抜粋文を取得
    if( empty( $excerpt ) ){
        $excerpt = esc_html( ltl_get_the_excerpt( $id ) );
    if( mb_strlen($excerpt, 'UTF-8') > 80 ){
        $excerpt= mb_substr($excerpt, 0, 80, 'UTF-8').'.....';
    }
    }

  //サイト名を取得
  if( $site_icon != "" ){
        $site = '<img src="' . $site_icon . '" alt="' . get_bloginfo( 'name' ) . '">' . get_bloginfo( 'name' );
    }

    //アイキャッチ画像を取得
    if( has_post_thumbnail( $id ) ) {
      $img = wp_get_attachment_image_src( get_post_thumbnail_id( $id ),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.'" />';
    }

    $nlink .='
<a href="'. $url .'" class="tmt-blog-card">
  <div class="tmt-blog-card-box">
    <div class="tmt-blog-card-thumbnail">'. $img_tag .'</div>
    <div class="tmt-blog-card-content">
        <div class="tmt-blog-card-title">'. $title .' </div>
        <div class="tmt-blog-card-excerpt">'. $excerpt .'</div>
    </div>
  </div>
  <div class="tmt-blog-card-site">'. $site .'</div>
</a>';

    return $nlink;
}

add_shortcode("nlink", "nlink_scode");
//---------------------------------------//
// ここまで
// 内部リンクのブログカード化（ショートコード）
//---------------------------------------//
サイトアイコンを表示させたい時は34行目に画像の絶対パス（https://～.png）を設定しましょう。

子テーマ/style.css

/*-------------------------
  ブログカード
-------------------------*/
a.tmt-blog-card {
  border: 1px solid #e1e1e1;
  box-shadow: 2px 2px #ddd;
  display: block;
  padding: 20px;
  position: relative;
  -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;
  width: 100%;
}
  a.tmt-blog-card::before {
    background-color: #505050;
    border: solid 1px #939393;
    color: #FFF;
    content: '合わせて読みたい';
    font-size: 12px;
    display: block;
    padding: 4px 20px;
    position: absolute;
    top: -15px;
    left: 25px;
  }
  a.tmt-blog-card::after {
    border: solid 1px #939393;
    color: #939393;
    content: '続きを読む';
    font-size: 14px;
    display: block;
    padding: 5px 20px;
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
  a.tmt-blog-card:hover {
    box-shadow: none;
    opacity: .8;
  }
.tmt-blog-card-box {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
  .tmt-blog-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #428bca;
    padding-bottom: 5px;
  }
  .tmt-blog-card-thumbnail {
    flex: 1;
    margin-right: 15px;
    padding-top: 5px;
  }
    .tmt-blog-card-thumbnail img {
      width: 100%;
    }
  .tmt-blog-card-content {
    flex: 2.5;
  }
  .tmt-blog-card-excerpt {
    border-bottom: dashed 1px #a4a4a4;
    color: #a4a4a4;
    font-size: 13px;
    padding-bottom: 15px;
  }
  .tmt-blog-card-site {
    color: #b2b2b2;
    font-size: 11px;
    padding-left: 5px;
  }
    .tmt-blog-card-site img {
      margin-right: 5px;
      vertical-align: bottom;
      width: 20px;
    }
@media (max-width: 980px) {
  .tmt-blog-card-excerpt {
    border: none;
  }
}
@media (max-width: 640px) {
  a.tmt-blog-card {
    padding: 10px 10px 20px 10px;
  }
  a.tmt-blog-card::before {
    font-size: 11px;
    padding: 2.5px 8px;
    top: -15px;
    left: 10px;
  }
  a.tmt-blog-card::after {
    font-size: 12px;
    padding: 2px 13px;
    right: 10px;
  }
  .tmt-blog-card-thumbnail {
    margin-right: 10px;
    padding-top: 10px;
  }
  .tmt-blog-card-title {
    font-size: 14px;
  }
  .tmt-blog-card-excerpt {
    display: none;
  }
}
ブログカード左上の「合わせて読みたい」の色を調整したい場合は17～19行目の色コードを変更してください。シンプルなままがいい（非表示にしたい）という方は16～27行目を削除してください。

実装したブログカードの使い方【ショートコード】

投稿のエディタ内でショートコードとして利用できるようになります、使い方は下記の通り。

実装したブログカードの使い方【ショートコード】

ショートコード [nlink url="ここに記事リンク"] の中に記事リンクをコピペするだけでOKです。

ショートコードを入力するのが面倒な時は？

ショートコードをその都度入力するのは面倒だと思います、そんな時はAddQuicktagというプラグインを使ってショートコードを登録しておくと便利です、他の用途でも使えるのでかなり便利です（私も使っています）

登録までの手順は下記の通り【ざっくり解説】

  1. AddQuicktagをインストールし有効化
  2. ボタン名を決める【例：ブログカード】
  3. 「開始タグ」にショートコードを登録する【終了タグは無視】
  4. 「アクセスキー」「順番」は無視
  5. チェックを入れる【左から3つにチェックすればOK】
  6. 一番下にある「変更を保存」ボタンを押せば完了

手順詳細（一部）

AddQuicktagの使い方【手順詳細（一部）】

実装イメージ

ブログカードのショートカットボタン実装イメージ

外部リンク用に自由度を高めたい時は？

「外部リンク用に自由度を高めたい」と要望がありました、下記の様に外部リンクに対して直接タイトルや抜粋文、アイキャッチ画像を入力したい時は下記コードをfunctions.phpにコピペします。

※先ほど紹介したコードは消してください、スタイルはそのままでOK

[nlink url="リンク" title="タイトル" excerpt="抜粋文" img="画像のパス"]

子テーマ/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_the_excerpt();
  $post = $post_bu;
  return $output;
}

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

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

    $img_width ="90";//画像サイズの幅指定
    $img_height = "90";//画像サイズの高さ指定
    $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(empty($img)){
    //アイキャッチ画像を取得
    if(has_post_thumbnail($id)) {
        $img = wp_get_attachment_image_src(get_post_thumbnail_id($id),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.'" />';
    }
  }else {
        $img_tag = "<img src='" . $img . "' alt='{$title}' width=" . $img_width . " height=" . $img_height . " />";
  }


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

    return $nlink;
}

add_shortcode("nlink", "nlink_scode");
//---------------------------------------//
// ここまで
// 内部リンクのブログカード化（ショートコード）
//---------------------------------------//

実装する時は下記のような感じでショートコードを使えばOKです、下にあるコードをコピペすればこの記事のブログカードになっていると思います（見にくくてゴメンね）

[nlink url="https://macoblog.com/wp-blogcard-notplugin/" title="【WordPress】コピペで実装ブログカードの作り方【プラグインなし】" excerpt="wordpress環境における内部リンクのブログカード化を誰でも簡単に出来る方法（作り方）で解説しています。「オシャレなブログにしたい」「はてなブログみたいにしたい」なんて方は参考にどうぞ" img="https://macoblog.com/wp-content/uploads/2018/03/wp-blogcard-notplugin-1.jpg"]

終わりに【ブログカード実装で質の高いサイトに】

ブログカードを実装すること自体は特別難しい事ではありませんので、wordpressでブログを運営している方やPVが伸びないことで悩んでいる方は是非実装してみることをオススメします。

スタイルを変えたいという方はstyle.cssをお好みに調整していただければなと思います、わからない事があれば気軽にお問い合わせください（TwitterからDMで連絡頂ければ早い返信に期待できます。笑）

以上になります。

コメント (0)

コメントする人

セキュリティのためreCAPTCHAを利用しています。
Googleのプライバシーポリシーと利用規約が適用されます。
うぇぶとまと｜Webエンジニア
うぇぶとまと｜Webエンジニア

飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。