ブログカードを簡単に表示したい!wordpress用ショートコードを公開します。
2016/01/13
またまた技術系の話題で失礼します。
最近、記事執筆の高速化をはかりたいなーという気持ちが強まってきました。で、その一環として、今までブックマークレットを使っていちいち取得していたブログガードを、wordpressのショートコード化することにしました。
よそさまのブログは、まだブックマークレット経由で取得しなきゃいけないけれど、内部リンクについては、これでぐぐっと楽になるはず。
というわけで、せっかくですので、作ったショートコードを下記に公開したいと思います。wordpressユーザのかたには、役に立つ情報かと思いますので、どうぞご自由にご利用ください。
ブログカードって何だ
そもそもの前提として、ブログカードとは何でしょうか。要するに、下記のような奴です。
これを今まで筆者は、wordpressのテキストエディタに直接手打ちでコピペしていたのです。それを下記のようなショートコードだけで実現しちゃおうぜというのが今回の主旨です。
1 | [mbc path=minimalist_post_matome] |
これがショートコード。短くて簡単。いちいちビジュアルエディタとテキストエディタを行ったり来たりしなくて済むしで、いいことづくめです。ブログカードは見栄えもいいので、まだ使ったことがない人は一度使ってみるとよいと思いますよ。
では、早速導入方法を見ていきましょう。
ブログカード表示用ショートコードの導入方法
function.phpにソースコードを追加
以下のソースをfunction.phpにコピペしてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 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.phpに追加すると、ショートコードが使用可能になります。ビジュアルエディタもしくはテキストエディタで、以下のようなショートコードを書いてください。
1 | [mbc path=minimalist_post_matome] |
すると、下記のように表示されます。
とりあえずこの辺押さえとけばOK!ミニマリストに興味のある人向け記事15選
またテレビでミニマリスト特集があったようですね。筆者はテレビを持っていませんが、ブログへのアクセス流...
引数のpathにはスラッグを指定する
1 | [mbc path=minimalist_post_matome] |
pathには記事のスラッグを渡します。
※スラッグがよくわからない人は、上記のブログカードを踏んでみてください。遷移先ページのURLを見て、ショートコードと見比べてみると「ふむふむ、スラッグってここのことを言うのね」とわかるはずです。
引数にはidも利用できる
記事IDを指定する書き方もできます。
1 | [mbc id=123] |
表示イメージは、スラッグ指定の場合とまったく変わりません。IDとスラッグの両方を指定している場合は、スラッグが優先されます。
まとめ
というわけで、いかがだったでしょうか。
今までやろうやろうと思っていたものの、なんとなくめんどくさくて積んでいたショートコード化。ついに実現してひゃっほいな気分です。
ショートコードを利用することで、記事執筆が爆速に
このショートコードを作成したことによって、おそらく劇的に記事作成が楽になるはずです。特に、例として貼ったブログカード「とりあえずこの辺押さえとけばOK!ミニマリストに興味のある人向け記事15選」のような「自記事のまとめ記事」を作りたい時には威力を発揮するでしょう。
これ以外にも執筆スピード向上策を色々考えているのですが、まずはこのブログカードのショートコード化がその第一弾です。きっとすべての向上策を実施した後、筆者の執筆速度はグン上がりになっていることでしょう。ふふふ、楽しみだー。
外部リンクには使えないので、その点だけ注意
ソースコードを見ていただければわかるかもしれませんが、めちゃめちゃwordpressの内部関数を呼んでいるので、よそさまのリンクをブログカードで貼るシーンには使えません。
外部リンクはサムネをどこから取得するかとか色々考えなければならないので、ショートコード化しづらいのです。どう実装するかちょっと考え中です。まあ、今までどおりのブックマークレットでも十分な気もするのですが…。
ご自由にどうぞ
上記ソースコードを使用したいかたは、自己判断のもと、ご自由にどうぞ。(ただ、presents by表記は消さないでやってください)
余談、というか宣伝のお時間
もっとオリジナルな機能をお求めの場合は、カスタム相談依頼とかも請け負えますよー。
書くと叶う!らしいので、自分の得意なことを書いてみる。こんなないなりはいかがですか?
よく「ブログに書くと、夢が叶うよ」的な話を目にすることがあります。「夢が叶う」と言ってしまう...
↑詳しくは、こちらの記事にて!!

最近書いた記事とか
- 【NEW】ブログやサロンやコンサルで収益化しようとするのは、他に技能がないから。
- 節約vs時短!エアコンをつけるべきか否かひたすら考える。
- レコーディング者の苦悩を救う有線/bluetooth両対応ヘッドホン「MPBH059AB」の使用感がかなりいい話。
- 夢中になると、それ以外がどんどん簡略化していく。最近の時短施策傾向について。
- とある男性ミニマリスト志向者が「捨てなくてよかったぁ」と思ったアイテム2つ。
反応・感想・リクエスト等お待ちしております。