ローディング中

ブログカードを手軽に、これからの記事、今までの記事に

みなさんこんにちは

個別指導塾コミット塾長、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('');
      //本文中の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/

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

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

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

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

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

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

おわり

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

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.