コーディングはよく分からないけど、コピペはできる!という人にはおすすめです!
Contants
WordPressの投稿記事にブログカードを作ろう
普通にaタグで囲うだけだとちょっと物足りないという人におすすめです。
以前利用していたLightningテーマで使用していました。
現在はテーマ用のブログカードを使用しています。
使用方法(URLを記述するのみ)
まずは使い方と実際の表示を見てみましょう。
投稿ページURLを記入するだけでこんな感じで表示されます!
※[]は半角で使ってください
[nlink url=”https://ssit.jp/blog-011/”]
アレンジ(1)
タイトル文字を置換えてくれます
記事のタイトルとは違う、ブログカード用のタイトルを設定できます。
[nlink url=”https://ssit.jp/blog-011/” title=”ブログカードを簡単コピペ作成!”]
アレンジ(2)
タイトル文字と内容を置換えてくれます
記事のタイトルと投稿内容とは違う、ブログカード用のタイトル・投稿内容を設定できます。
[nlink url=”https://ssit.jp/blog-011/” title=”ブログカードを簡単PHP・cssコピペ作成!” excerpt=”簡単コピペで誰でも使えます!めんどくさいあなたに必見です。”]
スマホ対応(11/19追記)
今回はスマホ閲覧時に、抜粋内容を非表示にしてボタン表示にするCSSに変更しました!
サンプル画像:
コピペコード
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;
}
}
参考サイト
【ふくどん様】アフィリエイトで稼ぐための手法について-「大変分かりやすく解説されています!」
まとめ
内部リンクにも有効なブログカードをコピペで簡単に作成できます。
シンプルながらも使い勝手のよいカードだと思います。
せひご利用下さい!
一部のテーマではうまく表示されないケースなどがあります。
(11/12):【修正済】アイキャッチの画像を実際のサイズに変更
(11/19):スマホ表示の時に抜粋項目をボタンに変更して見やすく修正