前回「記事中urlをSimplicityのブログカード風に表示するカスタマイズ」で、Simplicity以外のテーマでも記事中のURLをブログカード風に表示する方法について書きました。
残念ながらこのblogではblog自体が重すぎて、ちょっと過負荷になってしまったようなので、考え方をかえてショートコードでブログカードが表示出来るようにカスタマイズしてみました。それについて書きます。
寝ログさんのブログカード風に表示するコードをショートコードにする
使っている子テーマのfunctions.phpに
//本文抜粋を取得する関数（綺麗な抜粋文を作成するため）
//使用方法：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;
}
/* 寝ログさんで紹介されたブログカードをショートコードで表示 */
function ryus_blogcard($atts) {
extract( shortcode_atts( array(
'url' => '',
), $atts ) );
$id = url_to_postid( $url );//IDを取得（URLから投稿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>';
return $tag;
}
/* ショートコードを追加する */
add_shortcode('ryus_blogcard', 'ryus_blogcard');
このようなコードを追加しました。寝ログさんのコードにあった本文を抜粋するfunctionと、ブログカード部分で変更したのは記事中からURLを探すのではなく、ショートコードなのでURLを引数として渡すので、URLについては渡ってきたものを使うというあたりです。
投稿や固定ページで
[ryus_blogcard url='http://ryuswp/warn-when-you-post1']
このように記述します。url=’表示したいURL’とします。
表示してみると、ちゃんとブログ風カードが表示されました(^^)/。
アイキャッチの指定がないときは一つ目の画像を使うようにカスタマイズする
しかし、別の記事を表示してみると
このように画像が壊れた状態で表示されてしまいした。これはこのblogはアイキャッチを指定せずに一つ目の画像をアイキャッチ代わりにしているので、アイキャッチが無い時に指定する no-image.png もないため、こんな表示になってしまうようです。
このblogで使いたいのでその部分を修正してみたいと思います。
以前書いた記事「投稿記事からイメージを取得して表示する」で作った記事中から画像を取得するfunctionを使えばできそうです。
// 記事ID指定
function get_the_content_image_by_postID($postid, $no=0) {
$post = get_post($postid);
return _get_the_content_image($post, $no);
$id = url_to_postid( $url );//IDを取得（URLから投稿ID変換）
$post = get_post($id);//IDから投稿情報の取得
}
function _get_the_content_image($post, $no=0)
{
// 子テーマのimagesに画像がなかったときのイメージnoimage.pngを作っておく
$noImage = get_stylesheet_directory_uri().'/images/noimage.png';
// <img で始まる部分を探す
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
if($output > $no){
$first_img = $matches [1] [$no];
} else {
if($no > 0){
if($output > 0){
$first_img = $matches [1] [0];
} else {
$first_img = $noImage;
}
} else {
$first_img = $noImage;
}
}
return $first_img;
}
このコードを追加して、先ほどの function ryus_blogcard の
if ( !$thumbnail ) {//サムネイルが存在しない場合
$thumbnail = '<img src="'.get_template_directory_uri().'/images/no-image.png" style="width:100px;height:100px;" />';
}
を
if ( !$thumbnail ) {//サムネイルが存在しない場合
$img = get_the_content_image_by_postID($id);
$thumbnail = '<img src="'. $img. '" style="width:100px;height:100px" />';
}
このように書き換えて、サムネイルが存在しないときは記事中の画像をとってくるようにしました。
これで、
このように、記事中の画像からサムネールが表示されるようになりました(^^)/
まとめ:このショートコードで表示出来るのは内部URLだけとなります
ということで、このblogにもこのカスタマイズをしたので実際に表示してみますね。
一つ前の関連記事はこちら↓
[ryus_blogcard url=’https://usortblog.com//blog-card-custom/’]
できました！
試しに外部のURLを指定してみると、
[ryus_blogcard url='http://theamazing7.com/']
[ryus_blogcard url=’http://theamazing7.com/’]
この記事のブログカードが表示されてしまいます。URLからポストIDをgetしたりすることは…(^_^;できないのでやっぱりそうですよね。。外部のURLをblogカード風に表示したかったらスクレイピングなどの別の方法が必要そうです。
Simplicityでは外部のURLもブログカード風に表示できるようになっているのでテーマをじっくり見させてもらえれば分かるかも？
それと以前から気になっていたこのblogで複数回にわたる記事の時に別の記事へのリンクを付けるということにこのブログカードが使えるのではないかな？と思いました。複数回なので複数のリンクを貼ることになるからもうちょっと場所を取らないものにしたいですね…ということでもうちょっと違うサイズを表示するショートコードを考えてみました。それについてはまた別の回で書きますね(^^)/
[amazon_searchlink search=”css”]
コメント