[WordPress]外部リンクをカード形式で表示する方法はコレで決まり！
Zennでは、URLをコピペすると自動でカード形式に変換をして表示してくれますよね。
↑これです(ワォ...カッコいい）
この仕組みをWordPressの記事編集をする時にも使えたらいいなと思ったので、実装してみました。
選択肢
WordPressで外部リンクをカードに変換する方法を調べてみると、いくつかありました。
- プラグイン(ex.
Pz-LinkCard)を使用する - ジェネレーター(ex.
embed.ly)を用いる - カード作成の関数を実装する
プラグインを使用するのは重くなるので気が引けるし、毎度ジェネレーターを使ってリンクカードを生成するのは面倒だなぁ。
関数を設置して1行のフォーマットにURLを挿入するだけで、カード化できるようにするのが良さそう！
という訳で、選択肢３のカード作成の関数を実装するをやってみました。
実装ステップ
この仕組みを施すためには、大きく3つのステップがあります。
- OpenGraphファイルの設置
- カード作成の変数追加
- CSSでデザイン調整
ステップ1では、外部サイトに設置されているOGPの情報を取得するできるようにします。続くステップ2では、取得した情報をHTML要素として出力する関数を作成します。最後にステップ3で、出力されたHTMLをカードに見えるようスタイリングします。
1. OpenGraphファイルの設置
OpenGraphファイルとは、画像やサイト名などのOGP情報を簡単に取得することができるようにしてくれるファイルです。
こちらからフォルダーをダウンロードすると中に、opengraph.phpというファイルがあります。
このopengraph.phpを今回編集するテーマの一番上の階層に設置します。
2. カード作成の変数追加
次にテーマのfunctions.phpを開きます。ここにリンクをカード形式で表示するための関数を追記します。
/* リンクをカード形式で表示するための関数 */
function show_Linkcard($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'excerpt'=>""
),$atts));
//OGP情報を取得
require_once 'OpenGraph.php';
$graph = OpenGraph::fetch($url);
//OGPタグからタイトルを取得
$Link_title = $graph->title;
$src = $graph->image;
//OGPタグからdescriptionを取得
$Link_description = wp_trim_words($graph->description, 60, '…' );
if(!empty($excerpt)){
$Link_description = $excerpt;//値を取得できない時場合は直にexcerpt=""を入力
}
$xLink_img = '<img src="'. $src .'" />';
//HTML出力
$sc_Linkcard .='
<div class="blogcard ex">
<a href="'. $url .'" target="_blank">
<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">'. $url .'</div>
</div>
<div class="clear"></div>
</a>
</div>';
return $sc_Linkcard;
}
//関数利用時のフォーマット
add_shortcode("sc_Linkcard", "show_Linkcard");
3. CSSでデザイン調整
このままではなんとも寂しいカードなので、CSSでスタイリングを調整します。カスタマイズできるのもこの方法の良いところですね。
/* リンクをカード形式で表示させる時のスタイル */
.blogcard {
line-height: 1;
background-color: #ffffff;
border: 1px solid #eeeeee;
word-wrap: break-word;
box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.025);
color: black;
}
.blogcard.ex {
background-color: #f7f7f7;
}
.blogcard a {
text-decoration: none;
opacity: 1;
transition: all 0.2s ease;
color: black;
}
.blogcard a:hover {
opacity: 0.6;
color: #0066ca;
}
.blogcard_thumbnail {
float: left;
padding: 20px 10px;
width: 100%;
}
.blogcard_thumbnail img {
margin-bottom: 0px !important;
}
.blogcard_title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
padding: 20px 20px 10px;
}
.blogcard_excerpt {
font-size: 0.85em;
line-height: 1.6;
padding: 0 17px 15px 20px;
}
.blogcard_link {
font-size: 0.65em;
padding: 0 17px 15px 20px;
text-align: left;
}
.blogcard_link .icon-external-link-alt::before {
font-size: 0.75em;
}
@media screen and (max-width: 768px) {
.blogcard {
margin: 40px 0;
}
.blogcard_title {
font-size: 0.95em;
padding-bottom: 17px;
}
.blogcard_excerpt {
display: none;
}
}
@media screen and (min-width: 769px) {
.blogcard_thumbnail {
overflow: hidden;
width: 200px;
height: 200px;
position: relative;
margin-right: 10px;
background-color: #2b2b2b;
}
.blogcard_thumbnail img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
}
使ってみた
記事編集画面から実際に機能を使ってみます。
[sc_Linkcard url="https://zenn.dev/"]
おぉ！いい感じ。。
モバイル版はこんな感じでした。
Summary
調べる前は結構大変かなと思いましたが、偉大な先人方のおかげでサクッと実装することができました。
Referencesの中でも"【外部リンク対応】ブログカードをプラグインなしで設置する方法【長文】"が特に参考になったので、この機能についてさらに深く理解したい方にはおすすめです。
References
Discussion