Loading…

Stinger6 Stinger7 WordPress カスタマイズ

ブログカード

WordPressブログカード作成方法

本日の人気記事BEST10

所要時間目安:6


Stinger6 Stinger7 WordPress カスタマイズ

ブログカード

ブログカード

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

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

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

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

 

これまでは、

よく読まれている人気記事一覧

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

 

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

 

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

スポンサーリンク

アドセンス336pxPC閲覧記事下表示1つ目コード

 

目次に戻る


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

以下のコードを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 = 'https://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に記述します。

 

/*本文抜粋を取得する関数(綺麗な抜粋文を作成するため)*/
 /*使用方法:https://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="https://b.hatena.ne.jp/entry/image/'. $url .'" alt="はてブ"></div></div></div>';

 return $nlink;
 } 

 add_shortcode("nlink", "nlink_scode");

 

こちらのショートコードは[nlink url="https://infovarious.com/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;
 }

 

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

 

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

 

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

 

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

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

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

 

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

なので、

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

 

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

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

 

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

 

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

 

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

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

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

 

と思っていたら…。

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

 

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

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

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

 

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

 

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

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

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

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

 

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

なのでとりあえず、

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

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

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

 

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

スポンサーリンク

追記)

 

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


アドセンス336pxPC閲覧記事下表示1つ目コード

おすすめの記事一部広告

    Multiplex 広告

Stinger6, Stinger7, WordPress, カスタマイズ」同じカテゴリーの記事一覧


関連記事

記事上に人気記事表示

AdSense Stinger6 WordPress カスタマイズ

Stinger6トップページ記事間にアドセンス広告を表示・入れる方法

ここのところ WordPressにハマっている私です。 特にまだ始めたばかりなのでカスタマイズに没頭中です。(汗) トップページの記事一覧にダッシュボードのStinger管理よりいくつの記事を表示する…

もっと読む

インフィード広告アドセンス

WordPressFTPダウンロードエラー設定変更

WordPress アップグレード 伝えたいこと 備忘録

WordPressFTPソフトでダウンロード出来ない場合の対処方法

WordPressのアップデート・アップグレードには必須と言っていいFTPソフト(FFFTPなど)でのサーバー上の大事なフォルダ類のバックアップです。 一応、バックアップ対象フォルダはwp-conte…

もっと読む

インフィード広告アドセンス

はてブボタン

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

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

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

もっと読む

インフィード広告アドセンス

最善策

AFFINGER4Pro WordPress テーマ 伝えたいこと 備忘録 時事ネタ

テーマ選びは何が最善策なのか?迷う時はどうした良いのか!?

人生において迷うことは多々あると思います。絶対にあります!!と言い切れますよね。 生まれてから義務教育を終えて高校受験からどの高校に行こうかなどの時が人生においての初めての最善策を選択するのに迷うこと…

もっと読む

目次に戻る

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

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



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

せきららの
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください