外部リンク対応！リンクカードをプラグインなしで設置する方法：WordPress
シェア
ツイートWordPressのリンクカードのプラグインはPz-LinkCardが有名ですが、
Pz-LinkCardでは外部リンクの際にリンクにnofollowを付けるか付けないかどちらかしか選べず、
リンクによってnofollowを付けたくない等の場合に対応できなかったので
プラグイン無しで外部リンクに対応したブログカードをショートコードで表示する方法をご紹介します。
OpenGraph.phpの設置と編集
まず、OpenGraph.phpを設置する必要があります。
OpenGraph.phpは外部サイトのOGPタグから各種情報を取得できるようにするためのPHPファイルで、基本的には設置するだけでOK
まず、githubからファイルをダウンロードします。
https://github.com/scottmac/opengraph/
ダウンロードしたフォルダの中の
OpenGraph.php
ファイルをテーマ内のfuncrions.phpと同じ階層のディレクトリにアップします。
次に、文字化け対策としてOpenGraph.phpの83行目付近の「static private function _parse」関数の中に
$HTML = mb_convert_encoding($HTML,"HTML-ENTITIES","UTF-8");
を追加します。
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);
↑追加後はこのようになります。
こちらでOpenGraph.phpの編集と設置は完了です。
fucntions.phpの編集
次に、functions.phpに以下のコードを追加します。
//リンクカードのショートコードを作成
function my_Linkcard($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'excerpt'=>""
),$atts));
//画像サイズの横幅を指定
$img_width ="100";
//画像サイズの高さを指定
$img_height = "100";
//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=""を入力
}
//スクリーンショットを取得
$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 .'" />';
//ファビコンを取得
$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="linkcard">
<div class="lkc-external-wrap">
<a class="lkc-link no_icon" href="'. $url .'" target="_blank">
<div class="lkc-card">
<div class="lkc-info">
'. $favicon .'<div class="lkc-domain">'. $url .'</div>
<p></p></div>
<div class="lkc-content">
<figure class="lkc-thumbnail">'. $xLink_img .'</figure>
<div class="lkc-title">
<div class="lkc-title-text">'. $Link_title .'</div>
</div>
<div class="lkc-url"><cite>'. $url .'</cite></div>
<div class="lkc-excerpt">'. $Link_description .'</div>
<p></p></div>
<div class="clear"></div>
<p></p></div>
</a><p><a class="'. $url .'" target="_blank"></a>
</p></div>
</div>';
return $sc_Linkcard;
}
//ショートコードに追加
add_shortcode("linkcard", "my_Linkcard");
これでリンクカードをショートコードで追加することが可能になります。
使い方は
[linkcard url="ここにURL" title="タイトルを変えたい場合" excerpt="説明文を変えたい場合"]
のように記述でＯＫ
//ブログカードHTML出力
の箇所のHTMLを変更する事で自由に変更可能です。
上記の出力HTMLはPz-LinkCardと同じ出力HTMLになっています。
WordPressのおすすめ参考書
bookfan 1号店 楽天市場店
¥3,300 （2024/04/25 18:48時点 | 楽天市場調べ）
ポチップ
ポチップ