はぴすぷ

【WordPress】ショートコードで「はてなのブログカード」的なものを作成する方法！

      2015/10/03

ずっと自分でショートコード作ってみたいなーと思っていたんですが、ついに今日作り方を覚えました＼(^o^)／

結構難しいものだと思っていたんですが、意外と簡単です！

とは言え、やっぱり最初は偉大な先人様達の模倣からですね！

今回はこういうやつを作ります。

1万PV目前！ブログ運営2ヶ月目のアクセス数と収益など公開！2015年8月

当サイトの2015年8月のアクセス情報と収益などをまとめた記事です！ 7月は4日しかデータ取れなくてあれで
 2015/09/03 23:58 12,345views

実はこの月次報告で、課題としてランキングを綺麗に見せると上げていたので、なんとかしないとなーと思って、今回の「はてなのブログカード」的なものを入れることにしました。

スポンサーリンク

ショートコードの作り方

まず始めに、ショートコードの作り方なんですが、すごい簡単です。

function.phpに以下のように書きます。

function shortcode_function($atts) {
  return 'ショートコードが置き換えられる文字列';
}
add_shortcode("original_shortcode", "shortcode_function");

あとは記事を書く時に、作成したショートコードを指定するだけ。

[original_shortcode]

これで、[original_shortcode]の部分が「ショートコードが置き換えられる文字列」と置き換えられて表示されます。

パラメータを渡す場合は

[original_shortcode hoge="ほげ" fuga="ふが"]

shortcode_functionの引数$attsが以下の様な配列になる。

$atts = array('hoge'=>"ほげ", 'fuga'=>"ふが");

なので引数を元に加工して返すのが普通の使いかなかなと思います。

公式にドキュメントあるので、詳しく知りたい人はドキュメント確認してみましょう。

ショートコード API

今回のソースコード

こちらを参考にさせて頂きました。
【WordPress】内部リンクをはてなのブログカード風のサムネイル付きリンクにデザインするショートコード

function.phpに以下を追記

//本文抜粋を取得する関数（綺麗な抜粋文を作成するため）
//使用方法：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;
}
/**
 * ランキング記事で使うブログカードを作成する
 */
function create_rank_card($atts) {
  extract(shortcode_atts(array(
    'url' => '',
    'views' => 0,
  ), $atts));
  $id = url_to_postid($url); // URLから投稿IDを取得
  $post = get_post($id); // IDから投稿情報の取得
  $date = mysql2date('Y/m/d H:i', $post->post_date); // 投稿日の取得
  $title = esc_html($post->post_title); // タイトル
  // 概要
  if ($post->post_excerpt) {
      $excerpt = get_the_custom_excerpt($post->post_excerpt, 60);
  } else {
      $excerpt = get_the_custom_excerpt($post->post_content, 60);
  }
  $img_width = 100; // 画像サイズの幅指定
  $img_height = 100; // 画像サイズの高さ指定
  // アイキャッチ画像のタグ
  $img = get_the_post_thumbnail($id, array($img_width, $img_height));
  // 返すhtmlタグ
  $rank_html = <<< EOF
<div class="rank-card">
  <dl class="clearfix">
    <dt><a href="$url">$img</a></dt>
    <dd>
      <h3><a href="$url">$title</a></h3>
      <div class="rank-excerpt smanone">$excerpt</div>
    </dd>
  </dl>
  <div class="rank-date-box">
    <span class="rank-date"><i class="fa fa-clock-o"></i>&nbsp;$date</span> <span class="rank-view">{$views}views</span>
  </div>
</div>
EOF;

  return $rank_html;
}
 
add_shortcode("rank_card", "create_rank_card");

スタイルシート

/* ランキング用 */
.rank-card {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    word-wrap: break-word;
    max-width: 100%;
    border-radius: 5px;
}
.rank-card dt {
    float: left;
}
.rank-card dd {
    padding-left: 110px;
}
.rank-card dd h3 {
    border: 0px;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
}
.rank-card dd .rank-excerpt {
    color: #666;
    line-height: 24px;
    font-size: 15px;
}
.rank-card .rank-date-box {
    border-top: 1px solid #ddd;
    margin-top: 4px;
    padding-top: 4px;
}
.rank-card .rank-date-box .rank-date {
    color: #aaa;
    font-size: 13px;
}
.rank-card .rank-date-box .rank-view {
    color: #f66;
    font-size: 15px;
    margin-left: 10px;
    text-decoration: underline
}

完成！

使い方

[rank_card url="https://hapisupu.com/2015/09/access-report-2month-2015-08/" views="12,345"]

「rank_card」がショートコードで、「url」と「views」（閲覧された回数）を指定します。

説明

URLから記事のIDを取得して、記事のIDからブログカードに表示する為の項目の値を取得します。

後は、ブログカードみたいにデザインしたhtmlのタグに取得した値を埋め込んで返すだけです。

当サイトはSTINGER5のテーマを使用していているので、他のテーマを使用している場合はスタイルが崩れる可能性大です。

終わりに

今回、自分でショートコードを作れるようになったので、今後は記事内でhtml書いたりせずに出来る限りショートコードで汎用化して使っていこうと思います！

早く月次報告の記事書くためにレイアウトもっといい感じにしたかったんですが、一旦今の形で完成にしときます(；・∀・)CSS苦手。

また手が空いた時に順位周りとかも合わせて、もうちょっと綺麗に見せられるようにカスタマイズしよう。

普通のテキストリンクしかなかった前の状態よりは格段に良くなったはず！

というわけで、明日は9月の月次報告を書く予定です。

それでは！

 - WordPress , ,