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

千ちゃん

内部リンク用のブログカードを作りたい、プラグインでない方法あるかしら？

シンさん

ショートコードとスタイルで作る方法を解説するね！

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

Contants

WordPressの投稿記事にブログカードを作ろう
コピペコード
- function.php
- CSS
参考サイト
まとめ

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

シンさん

本記事コードで作成できる、ブログカードの使用方法を解説します！

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

以前利用していたLightningテーマで使用していました。
現在はテーマ用のブログカードを使用しています。

使用方法(URLを記述するのみ)

まずは使い方と実際の表示を見てみましょう。
投稿ページURLを記入するだけでこんな感じで表示されます！

※［］は半角で使ってください

[nlink url=”https://ssit.jp/blog-011/”]

WordPressのブログカードを簡単コピペ作成！SEO対策-標準画像

アレンジ(1)

タイトル文字を置換えてくれます
記事のタイトルとは違う、ブログカード用のタイトルを設定できます。

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

WordPressのブログカードを簡単コピペ作成！SEO対策-投稿内容変更

アレンジ(2)

タイトル文字と内容を置換えてくれます
記事のタイトルと投稿内容とは違う、ブログカード用のタイトル・投稿内容を設定できます。

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

WordPressのブログカードを簡単コピペ作成！SEO対策-タイトル・投稿内容変更

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

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

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

コピペコード

function.phpとテーマのstyle.cssもしくはテーマのカスタムCSSへ、コピペできるコードを紹介します！

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 . " height=" . $img . " />"; 
    } 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;
}
}