WordPress標準の大きすぎるブログカードをカスタマイズで解決

システム屋の作るものってどうしてこうもセンスがないんだ。

いやがらせなのか?うっとおしい。という機能があります。

 

wordpress4.5.3以降の標準ブログカードが大きすぎる!

smplicityの頃から大変お世話になったブログカードは、URLを入力するだけなのですごく助かっていました。

luxeritasにはその機能がなかったので、対応を考えていたらなんとブログカードが勝手に表示されていました。4.5.3以降は標準になっていたんですね。

4.5.3以前から最近までsimplicityを使っていたので気づきませんでした。

いったい誰がこんなデザインするのか? 昔からプログラマーが作るデザインは奇抜なものが多く僕の神経を逆なでしてくれます。

久々にイラっとしたので、回避することにしました。

 

 

原因はwordpressが4.5.3から実装したoEmbed

実はこの指摘はずいぶん昔からされていたようです。

WordPress 4.4 oEmbed 埋め込みカードの仕組みと注意点!! - セルティスラボ

その記事中に回避方法がありました。

 

//oEmbed endpoint 検出用リンク停止(oEmbed サービス提供はしないが他のサイトの埋め込みは可能)
remove_action( ‘wp_head’, ‘wp_oembed_add_discovery_links’, 10 );
//WP REST API リンク <http://www.example.com/wp-json/>; rel=”https://api.w.org/”
remove_action( ‘wp_head’, ‘rest_output_link_wp_head’, 10 );
remove_action( ‘template_redirect’, ‘rest_output_link_header’, 11, 0 );

 

これをfunction.phpに張り付けるだけです。

 

これでイラっとするブログカードがURLの文字だけになりました。

でもこれでは困ります。きちんとしたブログカードを設定する必要があります。

プラグインもいいと思ったのですが、ショートコードなので修正が面倒です。

そこで参考にしたのが

URLを記入するだけ!WordPressに内部ブログカードを実装するカスタマイズ方法 - 寝ログ

 

//ブログカードここから
//100×100pxのサムネイルを作成
add_image_size(‘thumb100’, 100, 100, true);
 
//サイトドメインを取得
function get_this_site_domain(){
  //ドメイン情報を$results[1]に取得する
  preg_match( ‘/https?:\/\/(.+?)\//i’, admin_url(), $results );
  return $results[1];
}
 
//本文抜粋を取得する関数(綺麗な抜粋文を作成するため)
//使用方法: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;
}
 
//本文中のURLをブログカードタグに変更する
function url_to_blog_card($the_content) {
  if ( is_singular() ) {//投稿ページもしくは固定ページのとき
    //1行にURLのみが期待されている行(URL)を全て$mに取得
    $res = preg_match_all(‘/^(<p>)?(<a.+?>)?https?:\/\/’.preg_quote(get_this_site_domain()).‘\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+(<\/a>)?(<\/p>)?(<br ? \/>)?$/im’, $the_content,$m);
    //マッチしたURL一つ一つをループしてカードを作成
    foreach ($m[0] as $match) {
      $url = strip_tags($match);//URL
      $id = url_to_postid( $url );//IDを取得(URLから投稿ID変換)
      if ( !$id ) continue;//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>’;
      //本文中のURLをブログカードタグで置換
      $the_content = preg_replace(‘{‘.preg_quote($match).‘}’, $tag , $the_content, 1);
    }
  }
  return $the_content;//置換後のコンテンツを返す
}
add_filter(‘the_content’,‘url_to_blog_card’);//本文表示をフック
 
//ブログカードここまで
 

 

↑上記のコードをfunction.phpに張り付けてさらに

 

/************************************
** ブログカードのスタイル
************************************/
.blog-card{
  padding:12px;
  margin:10px 0;
  border:1px solid #ddd;
  word-wrap:break-word;
  max-width:100%;
  width:474px;
  border-radius:5px;
}
 
.blog-card-thumbnail{
  float:left;
}
 
.blog-card-content{
  margin-left:110px;
  line-height:120%;
}
.blog-card-title{
  margin-bottom:5px;
}
 
.blog-card-title a{
  font-weight:bold;
  text-decoration:none;
  color:#111;
}
 
.blog-card-excerpt{
  color:#333;
  font-size:90%;
}
 
.blog-card-footer{
  font-size:70%;
  color:#777;
  margin-top:5px;
}
 
.clear{
  clear:both;
}
 
 

↑上記のCSSをstyle.cssに張り付けます。

luxeritasならすべて子テーマに張り付ければOKです。

 

そうするとsimplicityで表示されたようなブログカードが出てきます。

まあ上記phpとCSSは寝ログさんが書いたものなので当然ですが(笑)

 

luxeritasのるなさんも

なんか・・・「ブログカードを実装してくれ」とかいう要望が 10 件超えた・・・

あれって、そんなに良いものか?
正直どーでもいいと思ってるけど、そんなに欲しいなら実装したる。

バグ修正 Luxeritas 1.31 

と言っています。なんか気合入っているのでどんなものができるのかちょっと楽しみです。

 

追伸:ソースコード整形なしの表示ですみません。Crayon Syntax Highlighterは、軽いといっても、ソース表示プラグインとしては軽いという意味らしいし。

highlight.jsは設置後のアップデート対応が手動というのはいかがなものかと思うし・・

ということでご容赦ください。すごく軽いプラグインあったら誰か教えて

細かい設定はちょっと・・という人はこの有料テンプレート

SEOに強い戦略的テンプレート「賢威7」。レスポンシブWebデザインにも対応!パンダアップデート・ペンギンアップデートで悩むサイトオーナー様必見のSEOマニュアルが付属!

Posted by mg1bz


PAGE TOP