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

みなさんこんにちは

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

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

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

ブログカードとは

ブログカードとは、こんな感じのやつです。これははてなブログさんのものになります。
ブログカードを手軽に、これからの記事、今までの記事に

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

ありがとうございます。

作っていきます

一行のみの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/

こうなります

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

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

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

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

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

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

おわり

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

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →