wordpressで記事の中に他の記事をサムネイル付きで紹介する方法！【内部リンク】
2016/02/23Author:
費用：0円 時間：10分
よく見ると思います。
記事の中に、他の記事をサムネイル付きで紹介する手法は、いろいろなサイトで行われています。
有名サイトでも行われているので、自分のサイトだけ普通にwordpressのリンク機能を使うというのも寂しいですよね((+_+))
それに、自分の記事を紹介するということで、自分のサイトを長い間見てもらえるというのはうれしい限りです！
ということで、サムネイル付きで他の記事を簡単に紹介する方法を紹介したいと思います！
今回は、プラグインを使わずにコードの編集です！コードの編集なので、編集するコードのバックアップはお忘れなく！
sponsored link
１．functions.phpを編集
wordpressの管理画面＞＞外観＞＞コードの編集に進んで、functions.phpの編集画面に進みましょう。
そして、コードの最後に以下のコードを書き足しましょう！
//本文抜粋を取得する関数（綺麗な抜粋文を作成するため）
//使用方法：http://nelog.jp/get_the_custom_excerpt
function get_the_custom_excerpt($content, $length) {
$length = ($length ? $length : 70);//デフォルトの長さを指定する
$content = preg_replace('/<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-more="more" data-wp-more-text="" class="wp-more-tag mce-wp-more" alt="" title="続きを読む..." data-mce-resize="false" data-mce-placeholder="1" />.+/is',"",$content); //moreタグ以降削除
$content = strip_shortcodes($content);//ショートコード削除
$content = strip_tags($content);//タグの除去
$content = str_replace("&nbsp;","",$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);//URLから投稿IDを取得
$post = get_post($id);//IDから投稿情報の取得
$img_width ="110";//画像サイズの幅指定
$img_height = "110";//画像サイズの高さ指定
$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 , 100);
}else{
$excerpt = get_the_custom_excerpt($post->post_content , 100);
}
}
//タイトルを取得
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>
</div>
';
return $nlink;
}
add_shortcode("nlink", "nlink_scode");
これで、サムネイル付きで他の記事を紹介する機能を実装しました。
２．style.cssを編集しよう
では、紹介するリンクの形などを編集しましょう。
/*内部リンクショートコード*/
.blog-card{
padding: 12px;
margin: 10px 0 !important;
border: 1px solid #ddd !important;
word-wrap:break-word;
max-width: 100%;
border-radius: 5px;
}
.blog-card-thumbnail{
float:left;
margin-right:10px;
}
.blog-card-content{
line-height:120%;
height: 100px;
}
.blog-card-title{
margin-top: 10px;
margin-bottom:5px;
}
.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%;
}
.clear{
clear:both;
}
３．実際に使う方法
使う方法は、簡単で、記事を編集する際に、
と書き込むと、内部リンクが形成されます。ビジュアルモードでも、変化はありませんので、プレビューで確認しましょう。
また、上のはデフォルトです。
リンクの、タイトルを新しく設定したい場合や、紹介文を新しく書き換えたい場合は、
と書き込めばokです。
これで内部リンクをサムネイル付きで紹介できるようになります(^^)/
ｐｓ.
これだとサイズが変わったりしたら、文字ズレしたり、改行されたりと見た目が悪くなります。スマホだと、ボックスの形を維持できずに、崩れてしまう場合もあります。
stinger5の場合だったら・・・
style.cssの最初あたりに、
@media screen and (max-width: 1050px){
.blog-card-excerpt{
display: none !important;
}
.blog-card-thumbnail{
float:left;
margin-right: 10px;
}
}
@media screen and (max-width: 780px){
.blog-card{
height: 110px;
border: 1px solid #ddd !important;
}
.blog-card-title{
padding-top: 10px;
}
}
div #search{
margin-top: 40px;
margin-bottom: 40px;
}
を書くと、サイズが小さくなったら、記事の概略を非表示にしたりして、形を維持できます。まあ、お試しを。
参考にしたサイト
ふく丼さんの、【WordPress】内部リンクをはてなのブログカード風のサムネイル付きリンクにデザインするショートコードを参考に色々カスタマイズしてます。
