WordPressのブログカードを簡単コピペ作成!SEO対策

WordPressのブログカードを簡単コピペ作成!SEO対策

この記事は自分の投稿欄に、内部リンク用のブログカードを作りたい。けどプラグインは重そうだから、別の方法でないかな?という人の為に、コピペで簡単にできる方法を教えます!

コーディングはよく分からないけど、コピペはできる!という人にはおすすめです!

 

WordPressの投稿記事にブログカードを作ろう

SEOにも有効だし、せっかくかいた記事を内部リンクしたい。
本記事コードで作成できる、ブログカードの使用方法を解説します!

普通にaタグで囲うだけだとちょっと物足りないという人におすすめです。

使用方法

[nlink url=”https://ssit.jp/blog-011/”]
※[]は半角で使ってください

投稿ページに記入するだけでこんな感じで表示されます!

WordPressのブログカードを簡単コピペ作成!SEO対策
WordPressのブログカードを簡単コピペ作成!投稿記事に内部リンクを貼ることで、SEO効果も高くなります!aタグでは物足りない、けどプラグインは増やしたくない人必見!
READ MORE..

アレンジ(1)

[nlink url=”https://ssit.jp/blog-011/” title=”ブログカードを簡単コピペ作成!”]

タイトル文字を置換えてくれます

ブログカードを簡単コピペ作成!
WordPressのブログカードを簡単コピペ作成!投稿記事に内部リンクを貼ることで、SEO効果も高くなります!aタグでは物足りない、けどプラグインは増やしたくない人必見!
READ MORE..

アレンジ(2)

[nlink url=”https://ssit.jp/blog-011/” title=”ブログカードを簡単PHP・cssコピペ作成!” excerpt=”簡単コピペで誰でも使えます!めんどくさいあなたに必見です。”]

タイトル文字と内容を置換えてくれます

ブログカードを簡単PHP・cssコピペ作成!
簡単コピペで誰でも使えます!めんどくさいあなたに必見です。
READ MORE..

スマホ対応(11/19追記)

今回はスマホ閲覧時に、抜粋内容を非表示にしてボタン表示にするCSSに変更しました!

サンプル画像:
WordPressのブログカードを簡単コピペ作成!SEO対策-スマホ対応画像

コピペコード

function.php

テーマのfunction.phpの一番下にコピペします。
※子テーマの場合はそちらにコピペ。

function get_the_custom_excerpt($content, $length) {
     $length = ($length ? $length : 70); 
     $content = preg_replace('/<!--more-->.+/is',"",$content); 
     $content = strip_shortcodes($content);
     $content = strip_tags($content);
     $content = str_replace(" ","",$content); 
     $content = mb_substr($content,0,$length);
     return $content; 
} 
//内部リンクをカード風にするショートコード 
function nlink_scode($atts) 
{ 
    extract(shortcode_atts(array( 'url'=>"", 'title'=>"", 'excerpt'=>"" ),$atts)); 
    $id = url_to_postid($url);
    $post = get_post($id);
    $date = mysql2date('Y-m-d H:i', $post->post_date);

    $img_width ="120";//アイキャッチの幅
    $img_height = "120";//アイキャッチの高さ
    $no_image = get_template_directory_uri().'/images/no-img.png';
    
    //アイキャッチ画像がない場合 
    if(empty($excerpt)){
         if($post->post_excerpt){ 
             $excerpt = get_the_custom_excerpt($post->post_excerpt , 90); 
        }else{ 
            $excerpt = get_the_custom_excerpt($post->post_content , 90); 
        } 
    } 
    
    //タイトルを取得 
    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 
    .'</a></div><div class="blog-card-content"><div class="blog-card-title"><a href="'. $url 
    .'">'. $title .' </a></div><div class="blog-card-excerpt">' . $excerpt . 
    '</div><div class="blog-card-button">READ MORE..</div></div><div class="blog-card-footer clear"><div class="blog-card-date">'.$date
    .'</div><div> </div></div></div>';
    
    return $nlink; 
} 

add_shortcode("nlink", "nlink_scode");

CSS

テーマのstyle.cssもしくはテーマのカスタムCSSにコピペします。

.blog-card{
    padding:12px 12px 0 12px;
    margin:30px 0;
    border:1px solid #ddd;
    word-wrap:break-word;
    max-width:100%;
    border-radius:5px;
}

.blog-card:hover {
    background: #fee;
}

.blog-card-thumbnail{
    float:left;
    margin-right:10px;
} 

.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-title a{
    font-weight:bold;
    color:#111;
    text-decoration: none;
}
.blog-card-title a:hover{
    text-decoration: underline;
}
.blog-card-excerpt{
    color:#333;
    font-size:90%;
    margin-bottom:10px;
}
.blog-card-button{
    display:none;
    text-align: center;
    border:1px solid #ddd;
    border-radius:5px;
    color:#ddd;
    margin:0px 30px 10px 150px;
    font-size:80%;
}
.blog-card-footer{
    padding-top:5px;
    border-top:1px solid #ddd;
    border-width: 90%;
}
.blog-card-date{
    color:#333;
    font-size:75%;
    float:left;
    margin-right:10px;
} 
.clear{
    clear:both;
} 

@media only screen and (max-width: 480px){
.blog-card-excerpt {
    display: none;
}
.blog-card-title{
    padding:5px 10px 10px 0;
    font-size:90%;
}
.blog-card-button{
    display:block;
}
.blog-card-thumbnail{
    width:100px;
}
}

参考サイト

作成にあたり、下記の記事を参考にさせて頂き、コードをを改造・使用させていただきました。

大変ありがとうございます。ぜひこちらの記事も見てください!

【ふくどん様】アフィリエイトで稼ぐための手法について-「大変分かりやすく解説されています!」

まとめ

内部リンクにも有効なブログカードをコピペで簡単に作成できます。

シンプルながらも使い勝手のよいカードだと思います。

一部のテーマではうまく表示されないケースなどがあります。

せひご利用下さい!

(11/12):【修正済】アイキャッチの画像を実際のサイズに変更
(11/19):スマホ表示の時に抜粋項目をボタンに変更して見やすく修正

Follow me!