【WordPress】プラグインなしでブログカードを実装する方法
今回はプラグインなしでブログカードを実装する方法をご紹介します。
この記事では次のようなお悩みを解決できます。
- ・プラグインなしでブログカードを作りたい
- ・内部リンク、外部リンク両方に対応したブログカードを作りたい
- ・ブログカードのデザインを自由に変えたい
1. ブログカードとは?
リンクにはブログカードとテキストリンクがあり、ブログカードはサムネイル画像、タイトル、本文などの情報をカード形式で表示するリンクのことです。
ブログカードには以下のようなメリット・デメリットがあります。
- 【ブログカードのメリット】
- ・関連記事にアクセスできるので回遊性を高め、PV数の向上が期待できる
- ・ユーザーの目を惹きやすい
- ・リンク先の情報をわかりやすく表示できる
- 【ブログカードのデメリット】
- ・広告と間違われやすい
- ・多用しすぎるとサイトの表示速度が遅くなる
ブログカードは毎回サムネイル画像を読み込むので多用しすぎるとページの表示速度が遅くなる原因になるのでテキストリンクと使い分けて適切に配置しましょう。
今回はプラグインなしで以下のようなサムネイル画像、タイトル、URLだけを表示するシンプルなブログカードを作成します。このブログカードは内部リンク、外部リンク両方に対応しています。
2. ブログカードの実装方法
ブログカードを実装するには以下の手順で行います。
- ① OpenGraph.phpを設置する
- ② functions.phpを編集する
- ③ CSSファイルを編集する
以下は今回参考にさせていただいたサイトです。
2-1. OpenGraph.phpを設置する
手順①でダウンロードするOpenGraph.phpはOGPタグから情報を取得するために使用するphpファイルです。
OGPとは「Open Graph Protocol」の略でX(Twitter)やFacebookなどのsnsでシェアした時にWebサイトのURL、タイトルやサムネイル画像、概要などの詳細情報を表示するための機能のことです。
OGPタグはHTMLのheadタグ内に設定します。
リンク先のWEBサイトにOGPタグが設定されていれば、情報を取得できるようになります。
OpenGraph.phpをダウンロードするにはまず以下のサイトにアクセスします。
「Code」➡「DownloadZIP」をクリックしてZIPファイルをダウンロードします。
ダウンロードしたらOpenGraph.phpをfunctions.phpと同じ階層に設置します。
設置したら、OpenGraph.phpに以下のコードをstatic private function _parseの中の83行目付近に入力します。これは、タイトルや説明文の文字化けを防ぐためのコードです。
//OpenGraph.phpに追加するコード
$HTML = mb_convert_encoding($HTML,"HTML-ENTITIES","UTF-8");//OpenGraph.php
static private function _parse($HTML) {
$old_libxml_error = libxml_use_internal_errors(true);
//ここに入力する
$HTML = mb_convert_encoding($HTML,"HTML-ENTITIES","UTF-8");
$doc = new DOMDocument();
$doc->loadHTML($HTML);
libxml_use_internal_errors($old_libxml_error);2-2. functions.phpを編集する
functions.phpに以下のコードを追記します。
functions.phpを編集する際に誤って必要なコードを削除してしまうと、サイトが表示されなくなる可能性があります。編集する前にバックアップを取ることをおすすめします。
バックアップの取り方がわからない方は以下の記事で紹介していますので参考にしてください。
<!--functions.php-->
<?php
//ブログカードのショートコードを作成
function show_Linkcard($atts) {
$default_atts = shortcode_atts(array(
'url'=>"",
'title'=>"",
),$atts));
//$default_attsの値または空文字を変数に代入
$url = !empty($default_atts['url']) ? $default_atts['url'] : '';
$title = !empty($default_atts['title']) ? $default_atts['title'] : '';
//画像サイズの横幅を指定
$img_width ="180";
//画像サイズの高さを指定
$img_height = "120";
//OGP情報を取得
require_once 'OpenGraph.php';
$graph = OpenGraph::fetch($url);
//OGPタグからタイトルを取得
$Link_title = $graph->title;
if(!empty($title)){
$Link_title = $title; //title=""の入力がある場合はそちらを優先
}
//OGPタグからサムネイル画像を取得
$thumbnail = $graph->image;
//画像を表示
if(!empty($thumbnail)) {
//サムネイル画像がある場合は表示
$xLink_img = '<img src="'. $thumbnail .'" width="'. $img_width .'" />';
}else {
//サムネイル画像がない場合、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 .'" />';
}
//ブログカードHTML出力
$sc_Linkcard .='
<div class="blogcard ex">
<a href="'. $url .'" target="_blank">
<div class="blogcard-wrapper">
<div class="blogcard-thumbnail">'. $xLink_img .'</div>
<div class="blogcard-texts">
<h3 class="blogcard-title">'. $Link_title .'</h3>
<p class="blogcard-url">' . $url . '</p>
</div>
</div>
</a>
</div>';
return $sc_Linkcard;
}
//ショートコードに追加
add_shortcode("sc_Linkcard", "show_Linkcard");functions.phpの解説
8-11行目：$default_atts = shortcode_atts(array(～));
shortcode_atts() はショートコードに指定されていない属性値をデフォルト値に置き換える関数です。
第１引数にはデフォルトで指定したい属性名と属性値の配列、第２引数($atts)にはショートコードに入力した属性名と属性値の配列が指定します。ここでは「url」と「title」が指定されていない場合、空文字に置き換えられます。
$default_atts = shortcode_atts(array(
'url'=>"",
'title'=>"",
),$atts);ショートコードはブログカードを設置したい場所に以下のように入力します。
[ショートコード名 属性名 = “属性値” ]
例として以下のように入力したとします。
[sc_Linkcard url = "リンク先のURL" ]
第２引数の$attsはショートコードで指定した属性名がキー、属性値が値の連想配列です。今回の例だと
$atts = array('url' => 'リンク先のURL');となります。
$attsにはtitleは指定されていないので第１引数に設定したデフォルト値(空文字)になります。shortcode_atts(～);は次のように置き換えることができます。
$default_atts = array(
'url' => 'リンク先のURL',
'title' => ''
);13行目：$url = !empty($default_atts[‘url’]) ? $default_atts[‘url’] : ”;
14行目：$title = !empty($default_atts[‘title’]) ? $default_atts[‘title’] : ”;
$default_attsの配列の値を変数$url、$titleに代入します。「!empty($default_atts[‘url’]) ? $default_atts[‘url’] : ”;」は$default_atts[url]の値が空じゃない場合、その値を変数に代入また空の場合は空文字を代入します。今回の場合は以下のようになります。
$url = "リンク先のurl";
$title = "";23行目：require_once ‘OpenGraph.php’;
24行目：$graph = OpenGraph::fetch($url);
require_onceでOpenGraph.phpを読み込み、fetchでOGPのデータを取得しています。fetchの引数の$urlはショートコードに指定したURLです。したがって、$graphはリンク先のページのOGPの各種データを取得しています。
26行目：$Link_title = $graph->title;
33行目：$thumbnail = $grapg->image;
$title、$thumbnailはそれぞれOGPのデータからタイトル、サムネイル画像のデータを取得しています。
29-31行目：if(!empty($title)){ $Link_title = $title; }
ショートコードに「title」が指定されている場合は、OGPタグから取得したものではなくショートコードに記述したタイトルを$Link_titleに設定します。
37-44行目：if(!empty($thumbnail)) {~};
サムネイル画像がある場合はOGPから取得した画像を表示、ない場合は「WP REST API」でスクリーンショットを取得します。
42行目：$screenshot = ‘https://s.wordpress.com/mshots/v1/’. urlencode( esc_url( rtrim( $url, ‘/’ ))) .’?w=’. $img_width .’&h=’.$img_height.”;
「WP REST API」はWordPressが提供するAPIで上記のURLを入力するとWebサイト（WordPress以外のサイトでもOK）のスクリーンショットを自動的に取得してくれます。
「https://s.wordpress.com/mshots/v1/」に続けて$url(取得したいURL)、$img_width(画像の横幅)、$img_height(画像の高さ)を指定します。
rtrim()は第１引数の文字列の最後から空白または第２引数で指定した文字列を取り除く関数です。以下はrtrim()の使い方の例です。
<!--例-->
<?php
$url1 = "https://code-sq.com/";
$url2 = rtrim($url, "/"); //文字列の最後の"/"を取り除く
var_dump($url2);
/*出力結果*/
//string(18) "https://code-sq.com" URLの最後の"/"が取り除かれる
?>urlencode()はURLエンコードする関数です。URLエンコードとはURLで使えない文字（日本語など）を使用できる別の文字（半角英数字や記号）に置き換えることです。以下はurlencode()の使い方の例です。
<!--例-->
<?php
$url1 = "https://code-sq.com";
$url2 = urlencode($url1);
var_dump($url2);
/*出力結果*/
//string(25) "https%3A%2F%2Fcode-sq.com" ":"が"%3A"、"/"が"%2F"に置き換えられている
?>64行目：add_shortcode(“sc_Linkcard”, “show_Linkcard”);
add_shortcord()はショートコードを追加するための関数です。第1引数にはショートコード名、第2引数はショートコードの設定をした関数(functions.phpに追記した関数)を指定します。
2-3. style.cssファイルを編集する
次にstyle.cssファイルを編集します。以下は最初にご紹介したブログカードのデザインのコードになります。デザインは必要に応じて変更してください。
.blogcard {
line-height: 1;
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 5px;
word-wrap: break-word;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
transform: translateY(-5px);
transition: all 0.5s ease;
}
.blogcard:hover {
transform: translateY(0);
box-shadow: none;
}
.blogcard.ex {
background-color: #f7f7f7;
}
.blogcard a {
text-decoration: none;
opacity: 1;
transition: all 0.2s ease;
display: inline-block;
width: 100%;
height: 100%;
padding: 20px;
}
.blogcard-wrapper {
display: flex;
align-items: center;
}
.blogcard-thumbnail {
width: 25%;
}
.blogcard-thumbnail img {
border-radius: 5px
object-fit: cover;
}
.blogcard-texts {
width: 75%;
}
.blogcard-title {
font-size: 1.2vw;
font-weight: bold;
line-height: 1.4;
padding: 17px 20px 10px;
color: #333;
}
.blogcard-url {
font-size: 1vw;
padding: 0 20px 10px;
color: #333;
}
3. ブログカードの使用方法
ブログカードの使い方はfunctions.phpの64行目で指定したショートコード名とリンク先のURLを以下のように入力するだけです。
「title」はOGPから取得したタイトルで問題なければ、指定しなくても大丈夫です。タイトルを変更したい場合のみ指定してください。
[ショートコード名 title=”ページのタイトル“ url=”リンク先のURL”]
例：[sc_Linkcard url="https://code-sq.com/pagination_without_plugin"]
このショートコードをエディターに入力すると以下のようなブログカードが作成できます。
もしサムネイル画像がない場合、「WP REST API」でスクリーンショットを取得して表示するようにしていますが、以下の画像ように表示されることがあります。その場合はリロードしてみてください。リロードするとスクリーンショットが読み込まれるようです。
「WP REST API」からスクリーンショットを読み込むと若干表示が遅くなるので、サムネイル画像のなりサイトのブログカードを設置する場合、その点は注意してください。
4. まとめ
今回はプラグインなしでブログカードを実装する方法をご紹介しました。
ブログカードを自作すると、今回のようなシンプルなブログカードだけではなくサイト名、本文や作成日など詳細な情報も表示することもできますし、デザインも自由に変更できます。
ぜひ、実装してみてください！
