プラグインなし！内部・外部リンク対応のブログカードを表示する方法。｜WordPress

Web

2022年7月16日

119 ビュー 0

お気に入りお気に入り削除しました 2

WordPressで、プラグインを使わずにブログカードを表示する方法をご紹介致します。

プラグイン不使用には、サーバー負荷の軽減やサイト表示速度の保持など様々なメリットがあります。

WordPressには多種多様なプラグインがたくさんありますが、できるだけ使わずにカスタマイズしたいものです。

同じ思いの方々に是非参考にしていただきたいと思い、本サイトでも導入している実装方法をご紹介させていただきます。

ショートコードを設置する方法で、内部リンク・外部リンクに対応しています。

1. 完成イメージ
- 1.1. 内部リンク
- 1.2. 外部リンク
2. 目的
- 2.1. 内部リンク対応ブログカード
- 2.2. 外部リンク対応ブログカード
3. 設置方法
4. ブログカード表示方法
5. まとめ

完成イメージ

下記が表示イメージです。

デザインはCSSで自由にカスタマイズ可能です。

※もし表示されない場合はリロードしてください。

内部リンク

https://blog.gunjow.net/

外部リンク

https://twitter.com/

目的

内部リンク対応ブログカード

内部リンクの場合「サイト内を横断する関連ページへのリンクのクリック率を上げて全体のPVアップに繋げる」ことで、自サイトのSEO内部対策の手法のひとつになります。

外部リンク対応ブログカード

外部リンク先のサイト送客貢献
外部サイト送客による何らかの恩恵獲得

関連コンテンツが掲載されたページからの被リンク獲得は外部リンク先のサイトにとってSEO上の恩恵があるため、自サイトにも何らかの形で恩恵が返ってくる可能性があります。

設置方法

次の手順で設置していきます。

OpenGraph.phpの導入
functions.phpの編集
CSSの編集
ショートコードでブログカードを挿入

OpenGraph.phpの設置

OpenGraph.phpは外部サイトのOGPタグから各種情報を取得できるようにするためのPHPファイルです。

ファイルダウンロード

以下サイトよりファイルをダウンロードします。

https://github.com/scottmac/opengraph/

「Code」ボタンをクリックし「Download ZIP」からファイル一式をダウンロードします。

ファイルの解凍・設置

Zipファイルを解凍し、「OpenGraph.php」をfunctions.phpがあるディレクトリと同じ場所に設置してください。

functions.phpの編集

functions.phpの編集を行います。

子テーマが利用できる環境であれば子テーマのfunctions.phpを利用してください。

各コードの説明書きはそれぞれコード上部に記載していますので、参考にされてください。

※必ずバックアップをとってから編集してください。

/* 外部リンク対応ブログカードのショートコードを作成 */
function show_Linkcard($atts) {
	extract(shortcode_atts(array(
		'url'=>"",
		'title'=>"",
		'excerpt'=>""
	),$atts));
	
	//画像サイズの横幅を指定
	$img_width ="170";
	//画像サイズの高さを指定
	$img_height = "170";
	
	//OGP情報を取得
	require_once 'OpenGraph.php';
	$graph = OpenGraph::fetch($url);
	
	//OGPタグからタイトルを取得
	$Link_title = $graph->title;
	if(!empty($title)){
		$Link_title = $title;//title=""の入力がある場合はそちらを優先
	}
		
	//OGPタグからdescriptionを取得（抜粋文として利用）
	$Link_description = wp_trim_words($graph->description, 60, '…' );//文字数は任意で変更
	if(!empty($excerpt)){
		$Link_description = $excerpt;//値を取得できない時は手動でexcerpt=""を入力
	}
	
	//wordpress.comのAPIを利用してスクリーンショットを取得
	$screenShot = 'https://s.wordpress.com/mshots/v1/'. urlencode(esc_url(rtrim( $url, '/' ))) .'?w='. $img_width .'&h='.$img_height.'';
	//スクリーンショットを表示
	$xLink_img = '<img src="'. $screenShot .'" width="'. $img_width .'" />';
	
	//ファビコンを取得（GoogleのAPIでスクレイピング）
	$host = parse_url($url)['host'];
	$searchFavcon = 'https://www.google.com/s2/favicons?domain='.$host;
	if($searchFavcon){
		$favicon = '<img class="favicon" src="'.$searchFavcon.'">';
	}
		
	//外部リンク用ブログカードHTML出力
	$sc_Linkcard .='
	<div class="blogcard ex">
	<a href="'. $url .'" target="_blank" rel="noopener noreferrer">
	 <div class="blogcard_thumbnail">'. $xLink_img .'</div>
	 <div class="blogcard_content">
	  <div class="blogcard_title">'. $Link_title .'</div>
	  <div class="blogcard_excerpt">'. $Link_description .'</div>
	  <div class="blogcard_link">'. $favicon .' '. $url .' </div>
	 </div>
	 <div class="clear"></div>
	</a>
	</div>';	
	
	return $sc_Linkcard;	
}

//ショートコードに追加
add_shortcode("sc_Linkcard", "show_Linkcard");

CSSコードの設定

最後にCSSの調整を行います。

CSSコードは以下になります。

style.cssなど任意のスタイルシートに丸ごとコピペしてください。

.blogcard {
  line-height: 1;
  background-color: #fff;
  word-wrap: break-word;
  margin: 10px 0
}

.blogcard.ex {
  background-color: #f5f5f5;
  border-radius: 5px
}

.blogcard a {
  text-decoration: none;
  opacity: 1;
  transition: all .2s ease
}

.blogcard a:hover {
  opacity: .6
}

.blogcard_thumbnail {
  float: left;
  padding: 20px
}

.blogcard_title {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
  padding: 17px 20px 10px
}

.blogcard_excerpt {
  font-size: .85em;
  line-height: 1.6;
  padding: 0 17px 15px 20px
}

.blogcard_link {
  font-size: .9em;
  padding: 0 17px 15px 20px;
  text-align: left
}

.blogcard_link .favicon {
  margin-bottom: -4px;
  width: 18px;
  height: 18px
}

CSSをカスタマイズすることで任意のデザインに変更可能です。

スマートフォン用のCSS

スマートフォン表示に対応するためのCSSコードです。

@media screen and (max-width:768px) {
  .blogcard {
    margin: 10px 0
  }
  .blogcard_thumbnail img {
    width: 90px
  }
  .blogcard_title {
    font-size: .95em;
    padding-bottom: 17px
  }
  .blogcard_excerpt {
    display: none
  }
}

CSSの編集が完了したら、テーマで使用しているCSSに保存してください。

設定については以上で完了です。

ブログカード表示方法

以下のようなショートコードを挿入します。

[sc_Linkcard url="リンク先URL"]

例えば、『https://twitter.com/』のカードを表示させたい場合は下記のようなショートコードになります。

【ショートコード例】

[sc_Linkcard url="https://twitter.com/"]

【表示例】

https://twitter.com/

また、外部リンク先のタイトルやdescriptionが取得できない場合や、個別に文言を入れる際は、ショートコード内に「url」とは他に「title」「excerpt」を手動で入力することで任意のテキストを表示させることが可能です。

【ショートコード例】

[sc_Linkcard url="https://twitter.com/" title="任意のタイトル名" excerpt="任意の説明文"]

【表示例】

任意のタイトル名

任意の説明文

https://twitter.com/

まとめ

今回はプラグインを使わずにWordPressに「内部・外部リンク対応のブログカードを表示させる方法」をご紹介しました。

作業自体は時間もかからず、すぐに実装できますので宜しければ参考にされてください。

更に条件分岐なども加え、特定の記事ページのみ反映させ、その他のページ速度に影響を与えない方法もご紹介予定ですので、引き続きご購読いただけますと幸いです。

最後までご覧いただきありがとうございました。

プラグインなし！内部・外部リンク対応のブログカードを表示する方法。｜WordPress

完成イメージ

内部リンク

外部リンク

目的

内部リンク対応ブログカード

外部リンク対応ブログカード

設置方法

OpenGraph.phpの設置

ファイルダウンロード

ファイルの解凍・設置

functions.phpの編集

CSSコードの設定

スマートフォン用のCSS

ブログカード表示方法

まとめ

「二和園クラファン終了」及び「Cacttoクラファン開始」のお知らせ

プラグインなし！目次を実装する方法。｜WordPress

Googleアドセンス（Google Adsense）広告を遅延読み込み（LazyLoad）して表示速度を高速化する方法。

Googleスピードテストで100点を取るための方法。WordPressのテーマやプラグインで、より良いWebバイタルの作り方。「開発者向けチェックリスト」

WordPress データベースの接頭辞（プレフィックス）変更プラグイン「Change Table Prefix」

WordPressのユーザー情報をCSVエクスポート、インポートするプラグイン

コメント・評価返信をキャンセル

サボテンとは。「Cactos」の由来と特徴【1】

ギムノカリキウムバッテリー（Gymnocalycium vatteri）とは？

長生きする方法

【クーポン:225819】打倒新コロイベント！「Webサイト激安セール」を開催しました。

ポイントは「日・風・水・土」！多肉植物の育て方。

プラグインなし！内部・外部リンク対応のブログカードを表示する方法。｜WordPress

完成イメージ

内部リンク

外部リンク

目的

内部リンク対応ブログカード

外部リンク対応ブログカード

設置方法

OpenGraph.phpの設置

ファイルダウンロード

ファイルの解凍・設置

functions.phpの編集

CSSコードの設定

スマートフォン用のCSS

ブログカード表示方法

まとめ

コメント・評価 返信をキャンセル

コメント・評価返信をキャンセル