昨日のエントリー「ブログへのアクセスが増えない貴方!努力足りてる?」の反応が今ひと少ない事にへこんでいます。
もう少し努力をしなければ!と奮起してちょっとしたショートコードを書いてみました。
早速ググる
photo credit: MoneyBlogNewz via photopin cc
このブログ、色々なサイトを紹介させてもらっているのですが、テキストリンクだけで紹介しているので味気ないなぁ〜と。
たまに画面キャプチャーを撮らせてもらいそちらを使う事もあるのですが、もうちょっとスマートに出来ないかなぁ〜と。
いつものように「ググって」みました。
綺麗にやられている方いました。感謝。
[hsk_thum_intro url=’http://rikumalog.com/wordpress/bmshots-createlink.html’ title=’ブログ記事をサムネイル画像+はてブ数付きで紹介する方法・Chrome版’ text=’いろんな方々の有益なサイトやブログエントリーをシェア(紹介)したい時、当ブログではサムネイル画像と「はてなブックマーク」の数を付加して表示させています。今回はそのリンクを簡単に生成できる方法を紹介します。’ size=’160′ b=’on’]
まさに秋田が求めていたエントリー。ありがとうございます。
早速読み込んでみました。
フムフム・・・プラグイン「BM_Shots」を利用されているようです。これ、プラグインが無くても使えるので、ショートコードを作ったら、色々な方も利用してもらえるかな?もしかして・・・理想の「人が読みたい」「誰かに伝えたい」って記事が書けるかも!
なんてほくそ笑みながらショートコードを作る事にしました。もちろん「りくまろぐ」さんを参考にさせて頂きました。感謝!
ソースコード
書いたのは以下のソースです。ソースを使われているテーマフォルダにある「functions.php」にコピペして下さい。
<br /> //サムネイル付きのページ紹介枠作成<br /> add_shortcode('hsk_thum_intro', 'hsk_thum_introFunc');<br /> function hsk_thum_introFunc($atts){<br /> extract(shortcode_atts(array(<br /> 'url' => '',<br /> 'title' => '',<br /> 'text' => '',<br /> 'size' => '120',<br /> 'b' => 'off',<br /> ), $atts));</p> <p> $rtn = '';<br /> $url = trim($url);</p> <p> if($url){<br /> $imgurl = '';<br /> $imgurl = 'http://s.wordpress.com/mshots/v1/'.$url.'?w='.$size;</p> <p> $css = '';</p> <p> $css .= '<br /> <style type="text/css">'; $css .= '<!--'; $css .= '.hsk-thum-intro{'; $css .= 'padding:5px;'; $css .= 'border:dotted 2px #9999ff;';</p> <p> $css .= '}';</p> <p> $css .= '.hsk-thum-img{'; $css .= 'float:left;'; $css .= 'margin-right: 15px;'; $css .= '}';</p> <p> $css .= '.hsk-thum-introdetail{'; $css .= ''; $css .= ''; $css .= '}';</p> <p> $css .= '.hsk-thum-hatebuuser{'; $css .= ''; $css .= ''; $css .= '}';</p> <p> $css .= '-->'; $css .= '</style> <p>';</p> <p> $rtn .= ' <div class="hsk-thum-intro clearfix">';<br /> $rtn .= ' <div class="hsk-thum-img">';<br /> $rtn .= '<a href="'.$url.'" target="_blank">';<br /> $rtn .= '<img src="'.$imgurl.'" width="'.$size.'">';<br /> $rtn .= '</a>';<br /> $rtn .= '</div> <p><!-- /hsk-thum-img -->';<br /> $rtn .= ' <div class="hsk-thum-introdetail">';<br /> if($title){<br /> $rtn .= '<a href="'.$url.'" target="_blank">';<br /> $rtn .= $title;<br /> $rtn .= '</a><br />';<br /> }</p> <p> if($title){<br /> if($b == 'on'){<br /> $rtn .= '<br /> <blockquote>'.$text.'</p></blockquote> <p>';<br /> }else{<br /> $rtn .= $text.'<br />';<br /> }<br /> }</p> <p> $rtn .= ' <div class="hsk-thum-hatebuuser">';<br /> $rtn .= '<a href="http://b.hatena.ne.jp/entry/'.$url.'" target="_blank">';<br /> $rtn .= '<img src="http://b.hatena.ne.jp/entry/image/'.$url.'"alt="*" />';<br /> $rtn .= '</div> <p><!-- /hsk-thum-hatebuuser -->';<br /> $rtn .= '</a>';<br /> $rtn .= '</div> <p><!-- /hsk-thum-introdetail -->';<br /> $rtn .= '</div> <p><!-- /hsk-thum-intro -->';<br /> $rtn .= ' <div style="clear: both;"></div> <p>';</p> <p> }else{<br /> $rtn = '';<br /> }</p> <p> return $css.$rtn;<br /> }<br />
- php が解る方で、スタイルシートは style.css じゃなきゃいや!って方はCSSを外だしのカスタマイズして下さい。
- ある日「http://s.wordpress.com/mshots/v1/」が使えなくなったら画像が出なくなっちゃいます。
- トラブルが発生しても自己責任で利用下さい。
エントリーにショートコード
エントリーをテキストモードにしてショートコードを書き入れます。ショートコードは以下。
[hsk_thum_intro url=” title=” text=” size=” b=”]
- url:httpから始まる URL を入れて下さい。正確には URI かな?
- title:紹介するページのタイトル
- text:紹介文章
- size:サムネイル画像の横幅。全体枠の立て幅にもなります
- b:on を入れると全体を引用 blockquote で括ります
上記でも使いましたが、実際に使うと以下になります。
[hsk_thum_intro url=’https://obrigado.biz/’ title=’オブリーガード’ text=’秋田隆輝のIT系の経営や技術系の日記’ size=’120′]
これは
[hsk_thum_intro url=’https://obrigado.biz/’ title=’オブリーガード’ text=’秋田隆輝のIT系の経営や技術系の日記’ size=’120’]
こう書いています。
まとめ
紹介させてもらうページからは、色々な知識を頂いているので、見栄え良く紹介したかったので自分ながら嬉しいです。
これで気軽に色々な方のページ紹介を見栄え良くする事が出来ます。
色々な方に使って頂けたらさらに嬉しいです。
コメント