投稿時にURLをブログカード風に表示するショートコードを作りました

この記事は約9分で読めます。

前回「記事中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("&nbsp;","",$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”]

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ 全般 css
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。