macoblog

「ゲーム × プログラミング」で生きていく

毎週金曜夜22時〜LIVEやってます

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

WordPress プログラミング

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

こんな要望に応えます。

本記事では、wordpress環境における内部リンクのブログカード化を誰でも簡単に出来る方法(作り方)で解説しています。「オシャレなブログにしたい」「はてなブログみたいにしたい」なんて方は参考にどうぞ、抜粋文表示も可能でサイトも重たくなりません。

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

目次【知りたい情報をピックアップ】

スポンサードサーチ


ブログカードとは?

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

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

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

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

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

「THEリンク」って感じで面白くない、読み流してしまうのも頷けます、もちろん全然ダメってわけじゃないんですけどね。

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

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

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

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

macoblogブログカード

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

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

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

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

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);
  $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;
}

スポンサードサーチ


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

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

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

ショートコードの中に記事リンクをコピペするだけでOKです。

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

ショートコードをその都度入力するのは面倒だと思います、そんな時はAddQuicktagというプラグインを使ってショートコードを登録しておくと便利です(最低限使用するべきプラグインの一つ)

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

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

手順詳細(一部)

AddQuicktagの使い方【手順詳細(一部)】

実装イメージ

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

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

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

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

以上になります。

「Twitter@WEBトマト」では色々な情報を発信しております、是非フォローよろしくお願いいたします。

人気記事【2018年版】稼げるゲームブログの作り方「初心者に向けて書きました」

人気記事【初心者向け】ゲームブログで稼ぐコツ「まずは3万稼いでみよう」

参考にした記事