
最近ちょくちょくワードプレスに
ブログカードを入れているサイトを見かけます。
ブログカードとはこういうものです。
↓ ↓ ↓
ワードプレスを一回カスタマイズすれば
後は記事の自分の好きな所に
URLをいれるだけで
このような見た目の良いブログカードを
表示させることができます。
見た目もかっこいいし
サイトの回遊率も上がります。
ユーザービリティのことを考えると
これはやるしかないですね。
①functions.phpを編集する
functions.phpには、以下のコードを追記してください。
functions.phpは編集を間違ってしまうと
エラーがでてサイトが表示されなくなるので
編集する前に必ずバックアップを取っておいてください。
//100×100pxのサムネイル add_image_size('thumb100', 100, 100, true); //サイトドメインを取得 function get_this_site_domain(){ //ドメイン情報を$results[1]に取得する preg_match( '/https?:\/\/(.+?)\//i', admin_url(), $results ); return $results[1]; } //本文抜粋を取得する関数 //使用方法:http://nelog.jp/get_the_custom_excerpt function get_the_custom_excerpt($content, $length) { $length = ($length ? $length : 70);//デフォルトの長さを指定する $content = preg_replace('/<!--more-->.+/is',"",$content); //moreタグ以降削除 $content = strip_shortcodes($content);//ショートコード削除 $content = strip_tags($content);//タグの除去 $content = str_replace(" ","",$content);//特殊文字の削除 $content = mb_substr($content,0,$length);//文字列を指定した長さで切り取る return $content; } //本文中のURLをブログカードタグに変更する function url_to_blog_card($the_content) { if ( is_singular() ) {//投稿ページもしくは固定ページのとき //1行にURLのみが期待されている行(URL)を全て$mに取得 $res = preg_match_all('/^(<p>)?(<a.+?>)?https?:\/\/'.preg_quote(get_this_site_domain()).'\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+(<\/a>)?(<\/p>)?(<br ? \/>)?$/im', $the_content,$m); //マッチしたURL一つ一つをループしてカードを作成 foreach ($m[0] as $match) { $url = strip_tags($match);//URL $id = url_to_postid( $url );//IDを取得 if ( !$id ) continue;//IDを取得できない場合はループを飛ばす $post = get_post($id);//IDから投稿情報の取得 $title = $post->post_title;//タイトルの取得 $date = mysql2date('Y-m-d H:i', $post->post_date);//投稿日の取得 $excerpt = get_the_custom_excerpt($post->post_content, 90);//抜粋の取得 $thumbnail = get_the_post_thumbnail($id, 'thumb100', array('style' => 'width:100px;height:100px;', 'class' => 'blog-card-thumb-image'));//サムネイルの取得(要100×100のサムネイル設定) if ( !$thumbnail ) {//サムネイルが存在しない場合 $thumbnail = '<img src="'.get_template_directory_uri().'/images/no-image.png" style="width:100px;height:100px;" />'; } //取得した情報からブログカードのHTMLタグを作成 $tag = '<div class="blog-card"><div class="blog-card-thumbnail"><a href="'.$url.'" class="blog-card-thumbnail-link">'.$thumbnail.'</a></div><div class="blog-card-content"><div class="blog-card-title"><a href="'.$url.'" class="blog-card-title-link">'.$title.'</a></div><div class="blog-card-excerpt">'.$excerpt.'</div></div><div class="blog-card-footer clear"><span class="blog-card-date">'.$date.'</span></div></div>'; //本文中のURLをブログカードタグで置換 $the_content = preg_replace('{'.preg_quote($match).'}', $tag , $the_content, 1); } } return $the_content;//置換後のコンテンツを返す } add_filter('the_content','url_to_blog_card');//本文表示をフック
②style.cssを編集する
style.cssに以下のコードを張ってください。
/************************************ ** ブログカード ************************************/ .blog-card{ padding:12px; margin:10px 0; border:1px solid #ddd; word-wrap:break-word; max-width:100%; width:474px; border-radius:5px; } .blog-card-thumbnail{ float:left; } .blog-card-content{ margin-left:110px; line-height:120%; } .blog-card-title{ margin-bottom:5px; } .blog-card-title a{ font-weight:bold; text-decoration:none; color:#111; } .blog-card-excerpt{ color:#333; font-size:90%; } .blog-card-footer{ font-size:70%; color:#777; margin-top:5px; } .clear{ clear:both; }
まとめ
①functions.phpの編集
②style.cssの編集
をしたら
あとは記事に自分の入れたいURLを入力してください。
そうすれば
このようなブログカードが表示されるようになります。
大変メリットの大きいものなので
ワードプレスを運用している方は
ぜひ取り入れてくださいね。