WordPressブログカード作成方法

更新日:


本日の人気記事BEST10

所要時間目安: 約 6

ブログカード

Stinger6 Stinger7 WordPress カスタマイズ

ブログカード

昨今、ShereHTMLでのリンク作成がここ数年メジャーでしたが、
WordPressやはてなブログにおいてはブログカードなるものが出てきました。

サイト内リンクや外部サイトリンクのサイトがカードみたいに表示されるものです。

私もWordPressをやるまでは知りませんでしたが、
いざ新しいものに手を出すと…。

なんとなくやってみたくなるのもわかる気がします。

 

これまでは、

目次

目次に戻る

今後のカスタマイズやブログ移行などの可能性も考慮して、

 

今までのShereHTMLでリンク作成すれば一番安泰じゃないのかなぁ。
と思っていました。

 

ですが、
当ブログでもいくつかの方法でブログカードとブログカードみたいなもの(リンク先サイトのキャプチャ画像とリンク)をショートコードでできるようにしました。



スポンサーリンク

 

特に一番簡単な方法がブログカードみたいなものです。

以下のコードをfunction.phpに記載します。

 

function get_wp_screenshot($attr) {
 extract(shortcode_atts(array(
 // デフォルト設定
 'url' => '',
 'alt' => '',
 'class' => 'wpshot', // imgタグに付加するclass名
 'width' => 0, // 画像の幅(0の場合はwidthタグを出力しない)
 'link' => 1 // 0:リンクしない 1:リンクする
 ), $attr));
 if ($url == '') {
 return;
 }
 $image = 'http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url));
 if ($width > 0) {
 $height = floor($width/16*9);
 $image .= '?w=' . $width;
 $image_wh = ' width="' . $width . '" height="' . $height . '"';
 }
 if ($class != '') {
 $image_wh .= ' class="' . $class . '"';
 }
 $image = '<img src="' . $image . '" alt="' . $alt . '"' . $image_wh . '>';
 if ($link == 1) {
 $image = '<a href="' . $url . '" target="_blank">' . $image . '</a>';
 }
 return $image;
 }
 add_shortcode('wpshot','get_wp_screenshot');

そして、
ショートコードは、[wpshot url="リンクするURL" width="幅" alt="属性"]です。

[]は半角です。

 

次に、本格的なブログカードの作成方法です。

 

こちらはサイト内リンクと外部サイトリンクではちょっと異なります。
(外部サイトリンクはちょっと難しいので次回に時間のあるときに記事にします。)

サイト内リンクをブログカードの用に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 nlink_scode($atts) {
 extract(shortcode_atts(array(
 'url'=>"",
 'title'=>"",
 'excerpt'=>""
 ),$atts));

 $id = url_to_postid($url);//URLから投稿IDを取得
 $post = get_post($id);//IDから投稿情報の取得
 $date = mysql2date('Y-m-d H:i', $post->post_date);//投稿日の取得

 $img_width ="90";//画像サイズの幅指定
 $img_height = "90";//画像サイズの高さ指定
 $no_image = get_template_directory_uri().'/images/no-img.png';//アイキャッチ画像がない場合の画像を指定

 //抜粋を取得
 if(empty($excerpt)){
 if($post->post_excerpt){
 $excerpt = get_the_custom_excerpt($post->post_excerpt , 90);

 }else{
 $excerpt = get_the_custom_excerpt($post->post_content , 90);
 }
 }

 //タイトルを取得
 if(empty($title)){
 $title = esc_html(get_the_title($id));
 }

 //アイキャッチ画像を取得 
 if(has_post_thumbnail($id)) {
 $img = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($img_width,$img_height));
 $img_tag = "<img src='" . $img[0] . "' alt='{$title}' width=" . $img[1] . " height=" . $img[2] . " />";
 } else { $img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />';
 }

 $nlink .='<div class="blog-card"><a href="'. $url .'"><div class="blog-card-thumbnail">'. $img_tag .'</a></div><div class="blog-card-content"><div class="blog-card-title"><a href="'. $url .'">'. $title .' </a></div><div class="blog-card-excerpt">' . $excerpt . '</div></div><div class="blog-card-footer clear"><div class="blog-card-date">'.$date.'</div><div class="blog-card-hatebu"><img src="http://b.hatena.ne.jp/entry/image/'. $url .'" alt="はてブ"></div></div></div>';

 return $nlink;
 } 

 add_shortcode("nlink", "nlink_scode");

 

こちらのショートコードは[nlink url="http://izu.wpblog.jp/post-815/"]というように、
nlinkの後に自サイトのURLを記載します。

 

ブログカードみたいな下記のショートコードで作成した場合は、
CSSにて表示の設定をしないと綺麗に表示されません。

 

参考に当ブログでのCSSは以下です。

 

/*内部リンクショートコード*/

 .blog-card{
 padding:12px 12px 0 12px;
 margin:10px 0;
 border:1px solid #fff;
 word-wrap:break-word;
 max-width:100%;
 border-radius:5px;
 }

 .blog-card-thumbnail{
 float:left;
 margin-right:10px;
 }

 .blog-card-content{
 line-height:120%;
 }
 .blog-card-title{
 margin-bottom:5px;
 }

 .blog-card-title a{
 font-weight:bold;
 color:#111;
 text-decoration: none; 
 }

 .blog-card-title a:hover{
 text-decoration: underline; 
 }

 .blog-card-excerpt{
 color:#333;
 font-size:90%;
 }

 .blog-card-footer{
 padding-top:5px;
 border-top:1px solid #fff;
 border-top-width: 90%;
 }

 .blog-card-hatebu{

 }

 .blog-card-date{
 color:#333;
 font-size:75%;
 float:left;
 margin-right:10px;
 }

 .clear{
 clear:both;
 }

 

これで、
当ブログのサイト内リンクのリンク先記事が以下のように表示されるようになります。

昔からインターネットがメジャーになる前にIP抜くぞ!! とか言われていた時期がありました。 今も昔も変わっていないのですが、 IPアドレスから個人までの特定はでき

 

アクセス増加にもデザインは結構重要です。

 

また、
ユーザビリティとしても綺麗に配置されていて綺麗でシンプルな方がわかりやすいと思われます。

 

ただ、あまりにもユーザビリティばかり考えていると…。

昔、
私自身もハマってしまったサイト自体が重くなってしまいます。

これでは、
検索などでアクセスしてくれようとしている方々もなかなか表示されないので、
イライラしてしまったり、
なかなかサイトが表示されないのでアクセスすらしなくなってしまう可能性もなきにしもあらずです。

 

それでは本末転倒なので、
カスタマイズも程々が一番良いと思います。

なので、

私はWordPressをはじめてからは出来る限りプラグインは使用しないでいます。

 

サイトマップGoogleへの/sitemap.xlmもプラグインは使用していません。

以前紹介したコンタクトフォームも、
Contact Form7というメジャーなプラグインは使用していません。

当ブログにも、ページの欄・所にコンタクトフォームを設けていて、 emailでメール送信されるようにしています。 コンタクトフォームは、 俗に言う「お問い合わせ先」

 

あとは…。
思い出した書き込みます。

 

よくよく調べたらはてなブログカードのブックマークレットがあったんですねorz。

 

でも、
これだとWordPressでもブログカードを作成することは可能ですが、
問題としてはブログカードがはてなブログを経由していることです。
はてなブログが仕様変更などしてしまうと使えなくなります。

また、リンク先がすべてはてなブログ経由になってしまいリファラーがわからないです。

iframeを使用しているようです。

 

と思っていたら…。

iframeを使用しないブックマークレットもあるじゃないですかw(゜ー゜;)wワオッ!!

 

時流に乗り遅れているのか、
それとも、
調度よい時期にWordPressをはじめてすんなりブログカードなるものを導入できたことを喜ぶべきか…。

とまぁ、
そんなことはさておきまして…。

はじめのiframeを使ってのブログカードだと以下のようになります。

 

次のiframeを使用しない方法だと以下のようになります。

 

はてなブログカードをやめて Embedly に移行してもいいんじゃないか。公式ボタンもあるし。ブックマークレットも作った。

ちゃっかりブックマークレットだけは登録させて頂いちゃいました≦(._.)≧

ちょっと長くなりすぎちゃいました^^;。

これまでいろいろな先駆者がブログカードなるものをいろいろな方法で作成されていたのですね。

 

でも、それは今は時流に乗っているとは言えないのではないのかなぁ。
なんて(*゜.゜)ゞポリポリ)

なのでとりあえず、

2つ目のサイト内リンクの際のブログカード作成方法が、

  • WordPress内のみで完結するし、
  • リファラーはわかるし、
  • プラグイン不要だし、

ということで一番いいんじゃないでしょうか。

 

デザインはcssでお好みのスタイルにすればいいことですしね。
ブログカードで四苦八苦されている方の参考になれば嬉しいです。

スポンサーリンク

追記)

 

内部リンク用のブログカードの修正をしました。
以下に新たに投稿しましたので、
参考になれば幸いです。

先日、 WordPressにおいてブログカード(内部リンク用)を作成するショートコードのphp関数コードを紹介しました。 http://izu.wpblog.j

-Stinger6, Stinger7, WordPress, カスタマイズ
-, , ,

スポンサーリンク

関連記事一部広告

目次に戻る

+ クリックで展開します

おすすめ!!

加圧シェイプで24時間無意識運動状態が可能!! 引き締め効果で魅力的なシルエットをサポート!! 運動している時だけでなく、仕事やプライベート就寝中にも!! 通気性がよく、体の動かしやすい伸縮性のある素材です!! 常に体が引き締まって、着心地いい!! 毎日着たい方用にセットも充実!!

女性必見のバストアップにおすすめ!!

マンガでの商品説明を販売ページに採用しています。 商品のメリットや良さが伝わりやすいです。 ★知名度と信頼度!ニュースアプリや芸能人ブログでも話題! (インスタグラム SmartNews yahoo アメーバ crooz 楽天) ●知名度が高く購入率の高い商品です。 ●ニュースサイトの紹介でも話題となり、有名タレント、モデル等にも使用して頂きブログなどでも紹介されている信頼度の高い商品です。 ●まとめ買いが多いのが特徴です。

関連記事

コメント欄を開閉式にする方法

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

Stinger6,Stinger5,StingerPLUS+コメント欄を開閉式スライドにする方法

前々から気にかけてどうにか出来たらいいなぁ…。なんて思っていたコメント欄です。 コメント欄を非表示にしてしまうというのもありかなぁ。と思ったこともありましたが、 いくつかのブログにてコメント欄が開閉式・・・続きを読む

Stinger7

Stinger6 Stinger7 WordPress テーマ

Stinger7がもう公開予定…。Stinger6が公開されたばかりだと思っていたのに…。

  昨年末2015年12月に公開されたばかりのStinger6ですが、 おおよそ2ヶ月弱で、もうStinger7が期間限定で公開されました。 現在はダウンロードできないようですが、 目次1 ・・・続きを読む

はてブボタン

SNS インターネット カスタマイズ ツール 伝えたいこと 備忘録

はてブボタンオリジナル作成方法

現在のサイトには企業のホームページやサイト、そして個人のブログやサイトには、 必ずあると言っても過言ではないソーシャル系のSNSボタンです。 その中のはてなブックマークボタンのオリジナルの作成方法につ・・・続きを読む

テキストにリンクがある場合にくるっと回るアニメーション

WordPress カスタマイズ 伝えたいこと 備忘録

テキストにリンクがある場合にアニメーション効果をつけるCSS方法11選

先日画像にリンクがある場合に画像を透過させるCSSでの方法を記載しました。 画像にリンクがある場合にCSSだけでゆっくりと透過させる方法 リンクが付いたテキストや画像にマウスを乗せた時(マウスオーバー・・・続きを読む

よろしかったらシェアよろしくお願いします。



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



  • この記事を書いた人
  • 最新記事

izumi

プロフィールページ詳細

はじめまして、izumiの旦那です。医療ミスにより長胸神経麻痺になってしまい若干の障害がありブログをさせていただいています。共同運営(しばらくは単独になると思います。)になりつつありますがよろしくお願いいたします。

Follow Me !

Copyright© WordPressデビュー津々浦々 , 2019 All Rights Reserved Powered by AFFINGER5.