僕が最近重視しているのは回遊率。当ブログもユーザー数が増えてきたのですが、回遊率（PV/UU）はそこまで高くない。それは僕がレコメンドしてあげている記事が外れていたりとか、そもそも魅力を感じてもらえていないのか。。。などいろいろな要素が考えられます。
「ブログカードリンク」よりも「テキストリンク」のほうがクリックされやすいという話は結構聞くのですが、それでもテキストリンクってプレーンな状態だとかっこよくないんですよね。
ときにリンクのサムネイルまで見せたいというときもあるので、ブログカード自体を挿入できる準備はいつでも整えておきたい。今回はそんなブログカードをプラグインなしで実装してみたいとおもいます。
なぜプラグインなしで、自分で実装する必要があるのか
前置きとして、さらっとなぜプラグインを利用しないのかという点について。
ブログカードのプラグインで言えばPz-LinkCardが有名かもしれません。僕も昔は使っていましたが、今は導入していません。理由は一つ、重いから。
プラグインって誰でも利用できるように色々試行錯誤して作られているので、必然的にサイトの表示などが重くなります。（独自のCSSとかを別途読み込むし。）
他にはembedlyやはてなブックマークリンク（wordpressなら直接URL打てば勝手にブログカード化される）などがあるのですが、こちらも僕はできれば使いたくない。こういう外部サービスを利用すると、万が一サービスの変更があったときの影響が大きい。自分の管理下で作成するのが後々のことを考えると拡張性も高く、便利だと考えました。
ただ、自分で実装するにはある程度知識が必要。初心者で、やってもらえる人が他にいない場合はこれらのプラグインや外部サービスを積極的に活用することも視野にいれておきましょう。
プラグイン無しで内部リンクカードを表示するためのフロー
さて、早速実装してまいります。フローとしては2つで
- function.phpに該当部分のコードをコピペ
- style.cssにCSSを追加
の2点。そうするとこんな感じになります↓
こちらはショートコードで記事内に入れることができるようになりますので、記事に入れるのも簡単。
有名なオープンケージのwordpressテーマに実装されているブログカードを参考にし、CSSを使って割とシンプルなデザインにしています。さっそく導入するコードをご紹介しましょう。
function.phpに挿入するコード
基本的にはコードをコピペするだけ。まずは下記のコードをfunction.phpにコピペしましょう。（参考記事：http://www.komaroku.com/related-articles-blog-card）
注意点
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
function get_the_custom_excerpt($content, $length) { $length = ($length ? $length : 70);//デフォルトの長さを指定する $content = strip_shortcodes($content);//ショートコード削除 $content = strip_tags($content);//タグの除去 $content = str_replace(" ","",$content);//特殊文字の削除（今回はスペースのみ） return $content; } //内部リンクをはてなカード風にするショートコード function nlink_scode($atts) { extract(shortcode_atts(array( 'url'=>"", 'title'=>"", 'excerpt'=>"" ),$atts)); $id = url_to_postid($url);//URLから投稿IDを取得 $post = get_post($id);//IDから投稿情報の取得 $img_width ="160";//画像サイズの幅指定 $img_height = "100";//画像サイズの高さ指定 $no_image = get_template_directory_uri().'/images/no-img.png';//アイキャッチ画像がない場合の画像を指定 //タイトルを取得 if(empty($title)){ $title = esc_html(get_the_title($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> <div class="clear"></div> </a></div>'; return $nlink; } add_shortcode("nlink", "nlink_scode"); |
こちらを入れると
|
1 |
[nlink url="表示したい記事のURL"] |
というショートコードで内部リンクをブログカード表示できるようになります。ただしこの状態だとデザインが崩れてしまっているので、整えるコードを書きます。
style.cssにコピペするコード
cssはこちら。このコードをstyle.cssの一番下に追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
/*----------------------------------- 内部リンクをショートコードでブログカード化 ------------------------------------*/ .blog-card{ border:1px solid #999; word-wrap:break-word; max-width:100%; border-radius:0px; margin-bottom: 30px; font-size :1.2em; box-shadow: 4px 4px 0px #666; transition:0.1s ease; position:relative; } .blog-card:hover{ box-shadow: 0px 0px 0px #666; } .blog-card a { color: #333; background: #fff; display: block; -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; text-decoration:none; font-weight: bold; border-radius: 0px; padding: 0px; } .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; margin-top: 0!important; } .blog-card-content{ line-height:120%; } .blog-card-title{ padding: 13px 10px 10px 0; font-size: 90%; } .blog-card-title::before { content: '>続きを読む'; font-size: 0.7em; font-weight: bold; color: #fff; background: #111; width: 7em; display: inline-block; padding: 0.2em; position: absolute; text-align: center; margin-right: 1em; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 3px; bottom: 10px; right: 0px; } .blog-card-date{ color:#333; font-size: 90%; margin-right:10px; font-family: GillSans; } /*----------------------------------- スマホのサイズ調整 ------------------------------------*/ @media only screen and (max-width: 600px){ .blog-card-title { font-size: 70%; } .blog-card-title::before { font-size: 0.7em; } .blog-card-thumbnail img { max-width: 100%; margin-left: 0px!important; margin-bottom: 0!important; } } |
部分的に僕のサイトのデザインように整えてしまっている部分（「!important」を入れている部分とか）があるので、その辺は適宜変更してもらえればと思います。
これでもう終わり。ちゃんと記事に表示されているか確認してみましょう！
追記：「続きを読む」のボタンについて
ブログカードをよりクリックしてもらう為に、ブログカード内に「続きを読む」ボタンを追加しました。（コードはすでに修正したものを記載しています。）
右下に固定する形で表示していますので、タイトルが長い場合は少し被ってしまうものの、実際にクリック率は1.5倍くらいに上がっています。みんなも試してみてね。
少しでもブログはおしゃれにしたいよね。
いくらテキストリンクがいいとはいえ、やっぱり僕はデザインも重視したいと思っています。
見た目が良くないと読者もついてくれないですし、何より記事を書いていて自分が気持ちよくない。今回のコードは内部リンクのみですが、これで回遊してくれる人が増えると嬉しいと思っています。
興味のある方はぜひ今回の方法で実装してみてくださいね！
ショートコードでサイトを最強体質にしましょう
サイトデザインの見せ方を変更するのに便利なプラグインがあります。
僕はこのShortcodes Ultimateというものを結構使っています。少し自分の記事が味気ないなと感じている人はぜひ一度読んでみてくださいな！
