ブログカードを簡単に表示したい！wordpress用ショートコードを公開します。

2015/12/27 2016/01/13

【2017.12.11追記】探しにくい？だから、まとめました！男性ミニマリスト系ブログ10選

またまた技術系の話題で失礼します。

最近、記事執筆の高速化をはかりたいなーという気持ちが強まってきました。で、その一環として、今までブックマークレットを使っていちいち取得していたブログガードを、wordpressのショートコード化することにしました。

よそさまのブログは、まだブックマークレット経由で取得しなきゃいけないけれど、内部リンクについては、これでぐぐっと楽になるはず。

というわけで、せっかくですので、作ったショートコードを下記に公開したいと思います。wordpressユーザのかたには、役に立つ情報かと思いますので、どうぞご自由にご利用ください。

一分でわかるこの記事の概要

1ブログカードって何だ←今ココ
2ブログカード表示用ショートコードの導入方法
2.1function.phpにソースコードを追加
3ブログカード表示用ショートコード使い方
3.1ビジュアルエディタ/テキストエディタでのショートコードの使い方
3.2引数のpathにはスラッグを指定する
3.3引数にはidも利用できる
4まとめ
4.1ショートコードを利用することで、記事執筆が爆速に
4.2外部リンクには使えないので、その点だけ注意
4.3ご自由にどうぞ
4.4余談、というか宣伝のお時間

ブログカードって何だ

そもそもの前提として、ブログカードとは何でしょうか。要するに、下記のような奴です。

とりあえずこの辺押さえとけばOK！ミニマリストに興味のある人向け記事15選

またテレビでミニマリスト特集があったようですね。筆者はテレビを持っていませんが、 …

seminimalist.info

これを今まで筆者は、wordpressのテキストエディタに直接手打ちでコピペしていたのです。それを下記のようなショートコードだけで実現しちゃおうぜというのが今回の主旨です。

[mbc path=minimalist_post_matome]

1	[mbc path=minimalist_post_matome]

これがショートコード。短くて簡単。いちいちビジュアルエディタとテキストエディタを行ったり来たりしなくて済むしで、いいことづくめです。ブログカードは見栄えもいいので、まだ使ったことがない人は一度使ってみるとよいと思いますよ。

では、早速導入方法を見ていきましょう。

ブログカード表示用ショートコードの導入方法

function.phpにソースコードを追加

以下のソースをfunction.phpにコピペしてください。

function my_blog_card($atts) {
    extract(shortcode_atts(array(
        'id' => null,
        'path' => null,
    ), $atts));
    if($path <> null){
        $id = get_posts("name=".$path)[0];
    }
    $bc_post = get_post($id);
    $bc_title = $bc_post->post_title;
    $bc_short_content = mb_substr($bc_post->post_content,0,50);
    $bc_thumb_path = wp_get_attachment_image_src(get_post_thumbnail_id($id))[0];
    $bc_url = get_permalink($id);
    $bc_domain = str_replace("http://","",get_option('home'));
    return '<!--'.$bc_title.'-->
<div style="width:100%;max-width:500px;margin:0 0 20px 0;background:#fff;border:1px solid#ccc;border-radius:5px;box-sizing:border-box;padding:12px;">
<div style="width:100px;height:100px;float:right;margin:0 0 10px 10px;padding:0;position:relative;overflow:hidden;">
<a href="'.$bc_url.'"style="position:absolute;width:1000%;left:50%;margin:0 0 0 -500%;text-align:center;">
<img src="'.$bc_thumb_path.'"style="width:auto;height:100px;margin:0;vertical-align:middle;display:inline;">
</a>
</div>
<p style="margin:0;">
<a href="'.$bc_url.'" style="color:#333;font-weight:bold;text-decoration:none;font-size:17px;margin:0 0 10px 0;line-height:1.5;">
'.$bc_title.'</a>
</p>
<p style="margin:0;color:#666;font-size:11px;line-height:1.5;">
'.$bc_short_content.'...</p>
<div style="border-top:1px solid#eee;clear:both;margin:10px 0 0 0;padding:0;">
<div style="color:#999;margin:3px 0 0 0;font-size:11px;float:left;">
<img src="http://favicon.hatena.ne.jp/?url='.$bc_url.'"style="margin:0 5px 0 0;padding:0;border:none;display:inline;vertical-align:middle;">
'.$bc_domain.'<img src="http://b.hatena.ne.jp/entry/image/'.$bc_url.'"style="margin:0 0 0 5px;padding:0;border:none;display:inline;vertical-align:middle;">
</div>
<div style="color:#999;font-size:11px;margin:3px 0 0 0;text-align:right;">
<a href="https://seminimalist.info/blog_card/" target="_blank" style="color:#777;">presents by seminimalist.info</a>
</div>
</div>
</div>
';
}
add_shortcode('mbc', 'my_blog_card');

function my_blog_card($atts) {

extract(shortcode_atts(array(

'id' => null,

'path' => null,

), $atts));

if($path <> null){

$id = get_posts("name=".$path)[0];

}

$bc_post = get_post($id);

$bc_title = $bc_post->post_title;

$bc_short_content = mb_substr($bc_post->post_content,0,50);

$bc_thumb_path = wp_get_attachment_image_src(get_post_thumbnail_id($id))[0];

$bc_url = get_permalink($id);

$bc_domain = str_replace("http://","",get_option('home'));

return '

</a>

</div>

'.$bc_title.'</a>

</p>

'.$bc_short_content.'...</p>

'.$bc_domain.'<img src="http://b.hatena.ne.jp/entry/image/'.$bc_url.'"style="margin:0 0 0 5px;padding:0;border:none;display:inline;vertical-align:middle;">

</div>

<a href="https://seminimalist.info/blog_card/" target="_blank" style="color:#777;">presents by seminimalist.info</a>

</div>

}

add_shortcode('mbc', 'my_blog_card');

これで実装完了です。簡単ですね。