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;
 }

 

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

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

 

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

 

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

 

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

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

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

 

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

なので、

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

 

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

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

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

 

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

 

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

 

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

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

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

 

と思っていたら…。

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

 

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

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

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

 

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

 

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

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

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

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

 

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

なのでとりあえず、

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

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

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

 

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

スポンサーリンク

追記)

 

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

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


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

おすすめの記事一部広告

    Multiplex 広告

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


関連記事

石垣島

WordPress

WordPressアップグレード、バージョンアップできない。

なぜなのかわかりませんが、 WordPressのバージョンアップ通知が来ているのですが、 「今すぐ更新」を何度しても何回か展開しています。 とはなるものの…。 一向にアップグレード?バージョンアップが…

もっと読む

カテゴリの人気記事イメージ画像アイキャッチ画像を丸くする

WordPress テーマ 伝えたいこと 備忘録

カテゴリの人気記事イメージ画像を丸くする方法

えーと…。 ここのところイメージ画像・アイキャッチ画像を丸くすることにこだわってしまっている私です…。 こんな感じで過去に3回もイメージ画像を丸くする方法を投稿しています。 関連記事のイメージ画像を丸…

もっと読む

温泉の入り方

WordPress カスタマイズ カスタマイズ セキュリティ 伝えたいこと 備忘録

head内の出力を綺麗にする方法WordPressにて

WordPressでブログをしていますと、自分が使わないものもheader内に出力されてしまっています。 Windows Live Writerとか使わないし、外部からのアプリケーションなどでは記事も…

もっと読む

トップページのアイキャッチ画像を丸くする方法

WordPress テーマ 伝えたいこと 備忘録

トップページの記事のイメージキャプチャ画像を丸くする方法

えーっと…。 カスタマイズというものは、 やってもやってもどこか抜け目があってしまうというものなのか…。(´~`ヾ) ポリポリ・・・ 関連記事のイメージ画像を丸くする方法 Stinger7の様に関連記…

もっと読む

目次に戻る

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

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



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

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

言えないことはTwitterで!!



目次に戻る

目次に戻る


コメントを閉じる

comment

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

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