KH-WEBLOG TOP > WEBメモ > WordPress > 外部リンク対応!リンクカードをプラグインなしで設置する方法:WordPress

外部リンク対応!リンクカードをプラグインなしで設置する方法:WordPress

WordPressのリンクカードのプラグインはPz-LinkCardが有名ですが、
Pz-LinkCardでは外部リンクの際にリンクにnofollowを付けるか付けないかどちらかしか選べず、
リンクによってnofollowを付けたくない等の場合に対応できなかったので
プラグイン無しで外部リンクに対応したブログカードをショートコードで表示する方法をご紹介します。

コーディング・WordPress化作業を代行します

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="説明文を変えたい場合"]

のように記述でOK

//ブログカードHTML出力
の箇所のHTMLを変更する事で自由に変更可能です。

上記の出力HTMLはPz-LinkCardと同じ出力HTMLになっています。

コーディング・WordPress化作業を代行します

WordPressのおすすめ参考書

楽天Kobo電子書籍ストア
¥3,278 (2024/05/20 15:06時点 | 楽天市場調べ)

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン ブログカード プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク リンクカード レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 関連記事