+本日の人気記事TOP10+
- カーメイトのエンジンスターターでエラー15表示と対処方法31
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法29
- 車のキーナンバー確認方法。キーレス紛失や壊れた時15
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく11
- エクストレイルでカーテシランプ新設、増設取り付け方法7
- エクストレイルおすすめエンジンオイルにプロステージSの10W-40を試してみた6
- 年賀状無料テンプレート無料イラスト素材でGoogleスライドで作成方法5
- WAKO'Sエンジンオイル添加剤SUPERHVはかなりおすすめです5
- Windows10,Windows8.1プロダクトキー確認方法5
- アイドリングストップシステム異常警告灯表示対処方法5
昨今、ShereHTMLでのリンク作成がここ数年メジャーでしたが、
WordPressやはてなブログにおいてはブログカードなるものが出てきました。
サイト内リンクや外部サイトリンクのサイトがカードみたいに表示されるものです。
私もWordPressをやるまでは知りませんでしたが、
いざ新しいものに手を出すと…。
なんとなくやってみたくなるのもわかる気がします。
これまでは、
+これまでによく読まれている記事一覧クリックでOPEN+
人気記事一覧
車のキーナンバー確認方法。キーレス紛失や壊れた時
148,547件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
105,350件の PV
Windows10,Windows8.1プロダクトキー確認方法
75,484件の PV
Windows10でエラーコード0x800705b4の対処方法
67,219件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
41,121件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整
40,218件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。
38,151件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
37,221件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
36,223件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法
31,376件の PV
車のキーナンバー確認方法。キーレス紛失や壊れた時 148,547件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 105,350件の PV
Windows10,Windows8.1プロダクトキー確認方法 75,484件の PV
Windows10でエラーコード0x800705b4の対処方法 67,219件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 41,121件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整 40,218件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。 38,151件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法 37,221件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 36,223件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法 31,376件の PV
この記事を読まれている方におすすめ一覧クリック
今後のカスタマイズやブログ移行などの可能性も考慮して、
今までの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(" ","",$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でお好みのスタイルにすればいいことですしね。
ブログカードで四苦八苦されている方の参考になれば嬉しいです。
追記)
内部リンク用のブログカードの修正をしました。
以下に新たに投稿しましたので、
参考になれば幸いです。
おすすめの記事一部広告
- カーメイトのエンジンスターターでエラー15表示と対処方法31
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法29
- 車のキーナンバー確認方法。キーレス紛失や壊れた時15
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく11
- エクストレイルでカーテシランプ新設、増設取り付け方法7
- エクストレイルおすすめエンジンオイルにプロステージSの10W-40を試してみた6
- 年賀状無料テンプレート無料イラスト素材でGoogleスライドで作成方法5
- WAKO'Sエンジンオイル添加剤SUPERHVはかなりおすすめです5
- Windows10,Windows8.1プロダクトキー確認方法5
- アイドリングストップシステム異常警告灯表示対処方法5
おすすめ!!
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
Multiplex 広告
あなたにおすすめ
-
WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録
パーマリンクURLを自動一括リダイレクト方法htaccessにて
サイトやホームページのURLはパーマリンクURLといい唯一無二のアドレスになります。そのサイトURLのパーマリンク設定URLをサイト移転などをした際に、記事数やホームページのURL数が多いとリダイレク…
インフィード広告アドセンス
-
プレビュー出来ない。権限がありません。解決方法教えて…。
WordPressでなぜか昨日以下の記事にある 「h2見出しタグ直前にアドセンスなどの広告コードを自動的に表示する方法」 のカスタマイズをした後、 表示がおかしいところはないかなどの確認…
インフィード広告アドセンス
-
AdSense WordPress カスタマイズ カスタマイズ 備忘録
h2見出しタグ直前に自動でアドセンスや広告自動表示させる方法
さて、さて、自分のブログやサイトにおいて収益や収入を得ている人は多くなってきているのではないでしょうか。 アフィリエイト広告からのアフィリエイト収入やGoogle AdSenseや忍者アドやnendや…
インフィード広告アドセンス
-
AFFINGER4Pro STINGER PLUS+ Stinger6 WordPress カスタマイズ 伝えたいこと 備忘録
ブログデザインがセンスの良いレイアウトやデザインにならない。Simple is Bestにしたい…。
人に見ていただくのでブログ運営においてデザインも重要です。自分の備忘録のみであれば、然程デザインやユーザビリティにこだわらなくても良いのかもしれません。テーマを変えてみようと思いましたが、これまでのカ…
「Stinger6, Stinger7, WordPress, カスタマイズ」同じカテゴリーの記事一覧
Total141アドセンス336pxPC閲覧記事下表示1つ目コード
アクセスランキング
よろしかったらシェアよろしくお願いします。
ユーザビリティとしても綺麗に配置されていて綺麗でシンプルな方がわかりやすいと思われます。
ただ、あまりにもユーザビリティばかり考えていると…。
昔、
私自身もハマってしまったサイト自体が重くなってしまいます。
これでは、
検索などでアクセスしてくれようとしている方々もなかなか表示されないので、
イライラしてしまったり、
なかなかサイトが表示されないのでアクセスすらしなくなってしまう可能性もなきにしもあらずです。
それでは本末転倒なので、
カスタマイズも程々が一番良いと思います。
なので、
私はWordPressをはじめてからは出来る限りプラグインは使用しないでいます。
サイトマップGoogleへの/sitemap.xlmもプラグインは使用していません。
以前紹介したコンタクトフォームも、
Contact Form7というメジャーなプラグインは使用していません。
あとは…。
思い出した書き込みます。
よくよく調べたらはてなブログカードのブックマークレットがあったんですねorz。
でも、
これだとWordPressでもブログカードを作成することは可能ですが、
問題としてはブログカードがはてなブログを経由していることです。
はてなブログが仕様変更などしてしまうと使えなくなります。
また、リンク先がすべてはてなブログ経由になってしまいリファラーがわからないです。
iframeを使用しているようです。
と思っていたら…。
iframeを使用しないブックマークレットもあるじゃないですかw(゜ー゜;)wワオッ!!
時流に乗り遅れているのか、
それとも、
調度よい時期にWordPressをはじめてすんなりブログカードなるものを導入できたことを喜ぶべきか…。
とまぁ、
そんなことはさておきまして…。
はじめのiframeを使ってのブログカードだと以下のようになります。
次のiframeを使用しない方法だと以下のようになります。
はてなブログカードをやめて Embedly に移行してもいいんじゃないか。公式ボタンもあるし。ブックマークレットも作った。
ちゃっかりブックマークレットだけは登録させて頂いちゃいました≦(._.)≧
ちょっと長くなりすぎちゃいました^^;。
これまでいろいろな先駆者がブログカードなるものをいろいろな方法で作成されていたのですね。
でも、それは今は時流に乗っているとは言えないのではないのかなぁ。
なんて(*゜.゜)ゞポリポリ)
なのでとりあえず、
2つ目のサイト内リンクの際のブログカード作成方法が、
- WordPress内のみで完結するし、
- リファラーはわかるし、
- プラグイン不要だし、
ということで一番いいんじゃないでしょうか。
デザインはcssでお好みのスタイルにすればいいことですしね。
ブログカードで四苦八苦されている方の参考になれば嬉しいです。
追記)
内部リンク用のブログカードの修正をしました。
以下に新たに投稿しましたので、
参考になれば幸いです。
おすすめの記事一部広告
- カーメイトのエンジンスターターでエラー15表示と対処方法31
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法29
- 車のキーナンバー確認方法。キーレス紛失や壊れた時15
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく11
- エクストレイルでカーテシランプ新設、増設取り付け方法7
- エクストレイルおすすめエンジンオイルにプロステージSの10W-40を試してみた6
- 年賀状無料テンプレート無料イラスト素材でGoogleスライドで作成方法5
- WAKO'Sエンジンオイル添加剤SUPERHVはかなりおすすめです5
- Windows10,Windows8.1プロダクトキー確認方法5
- アイドリングストップシステム異常警告灯表示対処方法5
おすすめ!!
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
Multiplex 広告
あなたにおすすめ
-
WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録
パーマリンクURLを自動一括リダイレクト方法htaccessにて
サイトやホームページのURLはパーマリンクURLといい唯一無二のアドレスになります。そのサイトURLのパーマリンク設定URLをサイト移転などをした際に、記事数やホームページのURL数が多いとリダイレク…
インフィード広告アドセンス
-
プレビュー出来ない。権限がありません。解決方法教えて…。
WordPressでなぜか昨日以下の記事にある 「h2見出しタグ直前にアドセンスなどの広告コードを自動的に表示する方法」 のカスタマイズをした後、 表示がおかしいところはないかなどの確認…
インフィード広告アドセンス
-
AdSense WordPress カスタマイズ カスタマイズ 備忘録
h2見出しタグ直前に自動でアドセンスや広告自動表示させる方法
さて、さて、自分のブログやサイトにおいて収益や収入を得ている人は多くなってきているのではないでしょうか。 アフィリエイト広告からのアフィリエイト収入やGoogle AdSenseや忍者アドやnendや…
インフィード広告アドセンス
-
AFFINGER4Pro STINGER PLUS+ Stinger6 WordPress カスタマイズ 伝えたいこと 備忘録
ブログデザインがセンスの良いレイアウトやデザインにならない。Simple is Bestにしたい…。
人に見ていただくのでブログ運営においてデザインも重要です。自分の備忘録のみであれば、然程デザインやユーザビリティにこだわらなくても良いのかもしれません。テーマを変えてみようと思いましたが、これまでのカ…
「Stinger6, Stinger7, WordPress, カスタマイズ」同じカテゴリーの記事一覧
アドセンス336pxPC閲覧記事下表示1つ目コード
アクセスランキング
よろしかったらシェアよろしくお願いします。
-Stinger6, Stinger7, WordPress, カスタマイズ
-WordPress, ブログカード, プラグインなし, 作成方法
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
comment