【コピペOK】ワードプレスで自作のブログカードを作る【PHP】


どうも、こんにちは。
友太郎(@yutarou_sakai)です。

当ブログでは自作のブログカードを使っています。
これ↓

今回は、コピペで簡単にブログカードを作れるようにコードを紹介していますので、ぜひ参考にしてくださいm(__)m

ワードプレスで自作のブログカードを作る

今回作るブログカードはこんな感じ。

レスポンシブ対応してますので、PC・スマホともに綺麗にブログカードを表示できます。

コード

今回はphpとcssを記述します!

functions.php


//---------------------------------------//
  // 内部リンクのブログカード化(ショートコード)
  // ここから
  //---------------------------------------//
  //内部リンクをはてなカード風にするショートコード
  function nlink_scode($atts) {
    extract(shortcode_atts(array(
      'url'=>"",
      'title'=>"",
      'excerpt'=>""
    ),$atts));
    $id = url_to_postid($url);//URLから投稿IDを取得
    $img_width ="180";//画像サイズの幅指定
    $img_height = "180";//画像サイズの高さ指定
    $no_image = "' . esc_url(get_template_directory_uri()) . '/img/noimg.png";//アイキャッチ画像がない場合の画像を指定
    //タイトルを取得
    if(empty($title)){
      $title = esc_html(get_the_title($id));
    }
    //抜粋文を取得
    if(has_excerpt($id)){
      //抜粋文字列がある場合
      $excerpt = wp_trim_words(get_the_excerpt($id), 72, '…' );
    } else {
      //抜粋文字列がない場合本文から切り出し
      $excerpt = wp_trim_words(strip_shortcodes(get_post($id)->post_content), 72, '…' );
    }
    //アイキャッチ画像を取得
    if(has_post_thumbnail($id)) {
      $img = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($img_width,$img_height));
      $img_tag = "{$title}";
    } else {
      $img_tag ='';
    }
    $nlink .='
      <div class="blog-card">
        <a href="'. $url .'">
            <div class="blog-card-thumbnail">'. $img_tag .'</div>
            <div class="blog-card-content">
                <div class="blog-card-title">'. $title .' </div>
                <div class="blog-card-excerpt">'. $excerpt .'</div>
            </div>
            <div class="clear"></div>
        </a>
      </div>';
    return $nlink;
  }
  add_shortcode("nlink", "nlink_scode");
  //---------------------------------------//
  // ここまで
  // 内部リンクのブログカード化(ショートコード)
  //---------------------------------------//

$nlink~でブログカード用のHTMLを記述しています。
ブログカードのサムネイルの配置などを変える際は、ここをいじればOKですね!

style.css


main .blog-card {
  background: #fff;
  border: 1px solid #ddd;
  word-wrap: break-word;
  width: 100%;
  height: 250px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  margin: 10px 0 50px;
}

main .blog-card:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  -webkit-box-shadow: 6px 6px 10px 3px rgba(0, 0, 0, 0.4);
          box-shadow: 6px 6px 10px 3px rgba(0, 0, 0, 0.4);
}

main .blog-card a {
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

main .blog-card a .clear {
  clear: both;
}

main .blog-card a .blog-card-thumbnail {
  padding: 10px;
  width: 40%;
  height: 100%;
}

main .blog-card a .blog-card-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}

main .blog-card a .blog-card-content {
  line-height: 120%;
  margin-left: 20px;
  width: 50%;
  height: 100%;
}

main .blog-card a .blog-card-content .blog-card-title {
  width: 100%;
  color: #000;
  display: block;
  padding: 10px 10px 10px 0;
  font-size: 120%;
  font-weight: bold;
  line-height: 1.5em;
}

main .blog-card a .blog-card-content .blog-card-excerpt {
  width: 100%;
  color: #333;
  margin: 0 10px 10px;
  line-height: 1.5em;
}

この辺はお好きにカスタムしてください!

レスポンシブ化


@media screen and (max-width: 639px) {
  /*スマホ用のcssを記述*/

main .blog-card {
    height: auto;
  }
  main .blog-card a {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  main .blog-card a .blog-card-thumbnail {
    padding: 10px;
    width: 100%;
  }
  main .blog-card a .blog-card-content {
    width: 100%;
    margin: 0;
  }
  main .blog-card a .blog-card-content .blog-card-title {
    padding: 10px;
    font-size: 100%;
  }
  main .blog-card a .blog-card-content .blog-card-excerpt {
    font-size: 2.2vw;
    padding: 0 10px 10px;
    margin: 0;
  }
}

こんな感じです~。

使い方

ワードプレスのビジュアルエディタでショートコードブロックに[nlink url=””]と記述し(カッコも小文字で)、” ”内にブログカード化したい記事のURLを書いてください。

これだけです!

注意点!!

自作ですので多少使いづらいピンポイントがあります。

注意点としてまとめておきますので、ご理解の上ご利用くださいm(__)m

外部記事には使えない

ブログカードに使うタイトルやサムネイルは投稿IDから取得していますので、投稿IDが取得取得できずデータが取れない外部記事には使えません。orz

方法はあるようですが、手間がかなりかかるのとあまり外部記事のリンクを貼らない(貼ったとしてもブログカードにしなくていい)ので、今回は作っていません。

必要に応じて追記したいと思います。

カテゴリーページにも使えない

なんと、カテゴリーページは実質外部記事扱いなようで、今回の方法ではブログカードにすることができません、、、。

外部記事に対応できるようにカスタムするか、プラグインのブログカードを使えば解決できます。

自作ブログカードってなんかいいやん

自分で作ったワードプレステーマなので、どうせならと思い自作ブログカードを使っています。

デザインはけっこう気に入っていますし、仕様が分かっているので今は特に困っていません。
必要があればさらにカスタムしようと思えるのも、自作ブログカードのいいところですね~。

てなわけで、もしよろしければ僕がデザインしたブログカードを使ってみてください!!