今回はWordPressオリジナルテーマのブログカード制作手順を解説します。
これまでに以下の作業を行いました。
制作手順の前にブログカードの基礎知識や作るメリットも解説しているので、これからブログカードを作りたい方は必見です。
ブログカードはタイトル付き投稿記事やアイキャッチ画像のリンク
ブログカードはタイトル付き投稿記事やアイキャッチ画像のリンクで、以下のようなデザインです。
リンクだけが貼られているよりも目立つので、クリックしやすくなります。
※インストールしているテーマによって表示は異なります。
また、テキストリンクのほうがクリック率が高いことは知られています。
※詳しくは後ほど解説します。
ブログカードの特徴は以下の通りです。
- オシャレなデザインで見やすい
- インパクトがあるので目立つ
これらのメリットからも、テキストリンクを併せて使えばリンクのクリック率は格段に高くなります。
ブログカードを作るメリット
ブログなど記事を閲覧してもらうには、記事をリンクで繋げる方法はSEOの観点からも必須ではないでしょうか。
しかしながら、そのリンクデザイン次第でサイト内の回遊率が大きく変わる事をご存知でしょうか？
リンクデザインを修正したところ、20％～30%以上のクリック率向上も珍しくないのです。
リンクを変えただけでこのような結果がでたので、やってみる価値はあるのではないでしょうか。
アイキャッチ画像の質も関係するので一概に必ず上がるとは言い切れませんが、ガジェット系など現物と一緒に表示する必要があるブログとは相性良いと思います。
こうした結果を踏まえても、ブログカードを作るメリットはあるのです。
ブログカードの作り方には3つの方法がある
ブログカードの作り方は以下の3つです。
- プラグインを使う
- WordPressテーマに搭載されている機能を使う
- プラグインを使わずに自分で作る
それぞれの方法にメリットやデメリットがありますが、今回は「プラグインを使わずに自分で作る」がお勧めです。
ブログカードを手軽に使う場合ならプラグインやWordpressテーマのブログカードで十分です。
ただ、タダのリンクだと画像をとってこれないんですよね。
プラグインに頼ると重くなる・デザインも完全に自由とは言えないという弊害も。
ブログカードを作成するときには、「Pz-LinkCard」という有名なプラグインがありますが、重くなります。
そうした面やクリック率を高めることを踏まえると、ブログカードを自分で作ったほうが思い入れもありますし何よりオシャレです。
ちなみに、ブログカードの自作は以下のようなメリットがあります。
- プラグインを使わないので動作が軽い
- デザインが自由かつオシャレ
- 1度の設定でワンクリックで簡単に使える
アンカーリンクや外部リンクで使いにくいなどのデメリットもありますが、全体的に見てもブログカードの自作には多くのメリットがあるのです。
ブログカードの制作手順
ここからは、ブログカードの制作手順を解説します。
「ブログカードの自作は難しいんじゃないの」と感じるかもしれませんが、「function.php」「style.css」を使ってコードを貼り付けるだけで完了するのでとても簡単です。
ちなみに、function.phpはWordpress上でも大事な部分です。
カスタマイズする前には必ずバックアップを取っておきましょう。
ブログカードの自作は以下の手順で進めていきます。
- ブログカード
- ブログカードのデザイン変更
- ブログカードのデザインをシンプルに見せる
- シンプルなブログカードデザインへのラベル貼り付け
ブログカード化
最初の作業はブログカード化です。
編集箇所は、Wordpress管理画面『外観』⇒『テーマエディター』⇒『function.php』です。
どのデザインにするときもfunction.phpは同じなのでとても分かりやすいです。
以下のコードをfunction.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=”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”);このコードは、抜粋文部分を正しく設定したメタディスクリプションから取っているのです。
なお、このコードは「Yoast SEO」を使っている状態で記述しています。
「All in One SEO」を使用している場合はコード変更が必要です。
どちらも使っていない場合は、抜粋文(上から110文字)を取るようにしましょう。
以下のコードを参考にして「$output =・・・」部分を変更すれば問題ありません。
ちなみに、最近のWordpressテーマにはディスクリプション指定できる機能もあります。
使っているWordpressテーマに合わせて調べて記述することをお勧めします。
//YoastSEOを使っている人（そのままでOK)
$output = get_post_meta($post_id,’_yoast_wpseo_metadesc’,true);//YoastSEOから
//上記のコードの部分を、All in One SEOを使っている人は↓に変更
$output = get_post_custom()[‘_aioseo_description’][0];//AllinOneSEOから
//どっちも使っていない人は↓に変更
$output = get_the_excerpt();
//SANGOを使っている人は↓に変更
$output = get_post_meta( $post_id, ‘sng_meta_description’, true );これでfunction.phpは完了です。
ブログカードのデザイン変更
ここではブログカードのデザイン変更手順を解説します。
この状態ではブログカードのデザインはあまり良くありません。
ブログカードのデザインをもっと綺麗に見せるには、CSSもstyle.cssの一番下側に貼り付ける必要があるのです。
色が付いているものとシンプルなものと2種類があります。
好みのデザインを選んで貼り付けると完了です。
編集箇所は、Wordpress管理画面『外観』⇒『テーマエディター』⇒『style.css』です
「色付き」「抜粋文付き」デザインにしたいならこのCSSコードがお勧めです。
.blog-card {
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;
}
.blog-card: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);
}
.blog-card:before {
font-family: FontAwesome;
position: absolute;
padding: 2px 6px;
content: “\f02e 詳細を見る”;
background-color: #fb8c00;
color: #fff;
font-size: .8em;
z-index: 1;
}
.blog-card a {
text-decoration: none;
}
.blog-card-thumbnail {
width: 35%;
display: table-cell;
vertical-align: middle;
padding: 10px 0 10px 10px;
}
.blog-card-thumbnail img {
padding: 0;
}
.blog-card-content {
display: table-cell;
vertical-align: middle;
}
.blog-card-title {
font-size: 1em;
margin: 5px 10px 5px 0px;
font-weight: bold;
line-height: 1.4;
}
.blog-card-title:hover {
text-decoration: underline;
}
.blog-card-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;
}
.blog-card .clear {
clear: both;
}
@media screen and (max-width: 500px) {
.blog-card:before {
font-size: .56em;
}
.blog-card-title {
font-size: .70em;
}
.blog-card-excerpt {
font-size: .60em;
}
}ブログカードのデザインをシンプルに見せる
ここでは、ブログカードのデザインをシンプルに見せる手順を解説します。
シンプルな見た目にする場合でも、function.phpの変更は必要ありません。
先程と同じようにそのままCSSを貼り付けましょう。
ただ、両方のCSSを貼り付ける行為は禁止です。
その理由は、抜粋文はCSSで消しているだけであり、どうしても気になる場合はリスク覚悟でfunction.phpをカスタマイズすれば良いと思います。
特に気にならない場合はそのまま貼り付けるだけで完了です。
シンプルな見た目にしたいなら以下のコードがお勧めです。
.blog-card {
position: relative;
border: 2px solid #e5e5e5;
word-wrap: break-word;
box-sizing: border-box;
max-width: 100%;
margin: 1em 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: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);
}
.blog-card a {
text-decoration: none;
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;
}
.blog-card a:hover {
color: #333;
background: rgba(235, 235, 235, 0.8);
text-decoration: none;
}
.blog-card-thumbnail {
width: 200px;
display: table-cell;
vertical-align: middle;
}
.blog-card-thumbnail img {
padding: 0;
max-width: 100%;
}
.blog-card-content {
display: table-cell;
vertical-align: middle;
padding: 0.4em;
border-left: #e5e5e5 solid 2px;
}
.blog-card-title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
color: #333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-card-excerpt {
display: none;/*消します*/
}
.blog-card .clear {
clear: both;
}
@media screen and (max-width: 500px) {
.blog-card-title {
font-size: .85em;
}
.blog-card-thumbnail {
width: 160px;
}
}貼り付けはこれで完了です。
確認した後で気になるようでしたら色を調節しましょう。
シンプルなブログカードデザインへのラベル貼り付け
最後の作業は、シンプルなブログカードデザインへのラベル貼り付けです。
シンプルなブログカードデザインは「リンクとして認識されない」リスクがあります。
認識されないリスクを回避するやり方は、最初に紹介したfunction.phpに1行追記します。
追記するコードは以下のコード3行目。
ちなみに、「関連記事」を「人気記事」への変更もできます。
$nlink .=’ <div class=”blog-card”>
<a href=”‘. $url .'”>
<div class=”blog-card-label”>関連記事</div>
<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>’;さらに以下のラベル部分のCSSを追記すれば完了です。
/*ブログカードでラベルを付ける*/
.blog-card-label{
display: inline-block;
position: absolute;
background-color: #ffb36b;
top: 0px;
left: 0px;
width: 70px;
height: 25px;
color: #fff;
font-size: .8rem;
font-weight: 700;
text-align: center;
line-height: 25px;
transform-origin: 50% 50%;
animation: animScale 3.5s ease-out;
}ラベル名は自由に変更できるので、クリック率を高めたい場合は追記することをお勧めします。
ブログカードの使い方
ブログカードは以下のコードを記述すれば使えるようになります。
[nlink url=”https://○○.com”]簡単に実装できますし、毎回記述するのが面倒な時は辞書登録や「AddQuickTag」というプラグインで登録しておくと便利です。
まとめ
今回はWordPressオリジナルテーマのブログカード制作手順を解説しました。
ブログやWebサイトの離脱率の高さに悩んでいる方はもちろん、ブログカードを使うことで離脱率の軽減にも繋がります。
アイキャッチ画像に凝っているWebサイトやブログは、特にブログカードの実装をお勧めします。
次回は、Wordpressオリジナルテーマ「記事一覧ページ」の制作手順を解説します。