ブログカードを手軽に、これからの記事、今までの記事に – ホームページ・デザイン制作のAWESOME

みなさんこんにちは

個別指導塾コミット塾長、AWESOMEの開発担当の船津です。

今回は弊社ブログにブログカードをつけたい、という要望があったのでつけてみました。
もう下に出てますね。これが自動で挿入されるようにしてみましょう。

このブログもカードだらけにしていきますよ―！！

ブログカードとは

ブログカードとは、こんな感じのやつです。これははてなブログさんのものになります。
Screen Shot 2016 11 03 at 16 26 52

今回の記事はこちらのサイトを参考に作成しました。

ありがとうございます。

作っていきます

一行のみのURLをカードと置き換えることができるようなコードを作ります。

準備するもの

プラグインを準備します。
Pz-LinkCardというプラグインが人気のようなのでこれでいきましょう。

Pz-LinkCard

このプラグインのまま使用しても良いのですが、ショートコードの挿入が面倒なので、自動化しましょう。

functions.phpを編集

以下を追記します。

<?php
//本文中のURLをはてなブログカードタグに変更する
function url_to_blog_card($the_content) {
  if ( is_singular() ) {//投稿ページもしくは固定ページのとき
    //1行にURLのみが期待されている行（URL）を全て$mに取得
    $res = preg_match_all('/^(<p>)?(<a.+?>)?https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+(<\/a>)?(<\/p>)?(<br ? \/>)?$/im', $the_content,$m);
    //マッチしたURL一つ一つをループしてカードを作成
    foreach ($m[0] as $match) {
      $url = strip_tags($match);//URL

      //取得した情報からブログカードのHTMLタグを作成
      $tag = do_shortcode('[blogcard url=' . $url . ']');
      //本文中のURLをブログカードタグで置換
      $the_content = preg_replace('{'.preg_quote($match).'}', $tag , $the_content, 1);
    }
  }
  return $the_content;//置換後のコンテンツを返す
}
add_filter('the_content','url_to_blog_card');//本文表示をフック

以上です。

ついでに適当なリンクを貼ってみましょう

本文にこうやって書くだけで…
https://www.commit-edu.net/blog/2016/10/26/halloween_party/

こうなります
https://www.commit-edu.net/blog/2016/10/26/halloween_party/

コミットではハロウィンパーティーが行われていたようです。

もちろんこれまでの記事にも反映される

この仕組はこれまでに張られた１行だけのリンク全てに反映されます。

カードになって困ることはあまり無いので特に問題ないかと思いますが、ご注意下さい。

httpsのページからhttpのページのカードを作ると怒られる

もしページがhttps通信の場合、http通信のページのカードを作る段階でエラーが出るので、ご注意下さい。

おわり

どうでしょう？手間の割にかなり便利だと思います。
プラグインのアップデートには気をつけてくださいね。