Loading…

記事内にプロモーションが含まれています。

Stinger6 Stinger7 WordPress カスタマイズ

WordPressブログカード作成方法

ブログカード

所要時間目安:6

This session is using  IPv4  is established in

この記事は2016年2月17日のものです。現在は状況が異なる可能性がありますのでご注意ください。

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でお好みのスタイルにすればいいことですしね。
ブログカードで四苦八苦されている方の参考になれば嬉しいです。

追記)

 

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

あなたにおすすめな関連記事

AFFINGER5

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

AMP対応ショートコード(自作)をAFFINGER4で増やす方法

アイキャッチ画像:AFFINGER4公式HP(https://the-money.net/)のスクリーンショットです。 AFFINGER4では標準でAMP対応機能が備わっています。 そんな中で、自分で…

もっと読む

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

記事上に人気記事表示

Stinger6 WordPress カスタマイズ

WordPress,css外部ファイル化方法Stinger

昨今…。 といっても、 ここ数年ページ表示速度もSEO対策のひとつにもなります。 また、 検索してくれた方がそのサイトが表示されるのになかなか表示されないと離脱率どころではなく、 サイトにすら訪れてく…

もっと読む

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

カバレッジの問題が新たに検出されました解決方法

WordPress カスタマイズ カスタマイズ テーマ 不具合 伝えたいこと 備忘録 設定

Search Consoleカバレッジに関する問題解決方法AFFINGERなど

時々、Search Consoleからさまざまなエラー報告内容のメールや問題があります。という通知メール内容が来ることがあります。特に多いのがガバレッジに関する問題があります。という通知メール内容が多…

もっと読む

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

AMP非対応化

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

AMP化対応方法を辞めてみるアクセス解析が不明瞭なので

昨年11月から徐々にAMP対応にしていき12月にはページのみAMP完全対応にしました。 ですが、 Google Analyticsでのアクセス解析の仕方・方法がいまいちわからないというのと、通常ページ…

もっと読む

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

GoogleFont

Stinger6 WordPress

webフォントの使い方GoogleFontは遅い所か早い

  ブログやホームページを運営していくにあたり時折他のPCで自分のブログやホームページを表示した所、 自分のPCでの文字表示(フォント)が異なってしまいデザイン自体が崩れたりしました。 しか…

もっと読む

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

WordPress4.6.1バージョンアップ後jetpack有効化後に表示されるWarning

WordPress カスタマイズ テーマ 不具合 伝えたいこと 備忘録

Warning: Cannot modify header information - headers already sent by

WordPressをバージョンアップしたところ・・・・・・。そしてjetpackを有効化したところ・・・・・・。何やら警告メッセージがダッシュボードの一部分のみですが表示されるようになりました。いろい…

もっと読む

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

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

Total200


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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