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

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

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

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

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

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

完成イメージ

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

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

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

内部リンク

大吉 DAIKICI by FRECER

DAIKICI（大吉）：超ハッピーを爆誕させる。

🕒️2024-09-10

#DAIKICI #自由 #平和 #団結 #挑戦スーパーハッピーを爆誕させる！クラウドファンディング様々なプロジェクトを実現するためのクラウドファンディングを運営しています。植物植物を販売しています。「植物プロジェクト」のリターンになります。フィギュアコミック・特撮等のキャラクターフィギュアを販売しています。ファッション新品・ユーズドのファッション関連アイテムを販売しています。スポンサーDAIKICIを一緒に盛り上げていただけるスポンサー様を募集しています。ブログ専門記事やメンバーのライフログを掲載しています。

外部リンク

X (formerly Twitter)

x.com

https://x.com

目的

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

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

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

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

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

設置方法

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

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

OpenGraph.phpの設置

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

ファイルダウンロード

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

GitHub

GitHub - scottmac/opengraph: Helper class for accessing the OpenGraph Protocol

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

Helper class for accessing the OpenGraph Protocol. Contribute to scottmac/opengraph development by creating an account on GitHub.

「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出力
	$blog_card .='
	<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 $blog_card;	
}

//ショートコードに追加
add_shortcode("blog_card", "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に保存してください。

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

ブログカード表示方法

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

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

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

【ショートコード例】

[blog_card url="https://x.com/"]

【表示例】

X (formerly Twitter)

x.com

https://x.com

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

【ショートコード例】

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

【表示例】

X (formerly Twitter)

任意のタイトル名

https://x.com

任意の説明文

まとめ

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

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

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

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