WordPressでリンクカードをプラグインなしで設置する方法

2021-03-04 WordPress

WordPressでリンクカードをプラグインなしで設置する方法をメモ

1 OpenGraph.phpの設置
2 functions.phpの編集
3 CSSの装飾

OpenGraph.phpの設置

まず、OpenGraph.phpを以下のURLからダウンロードします。
https://github.com/scottmac/opengraph/

ダウンロードしたOpenGraph.php内の84行目くらいにある

	static private function _parse($HTML) {
		$old_libxml_error = libxml_use_internal_errors(true);
    
		$doc = new DOMDocument();
		$doc->loadHTML($HTML);

↑こちらの部分に

$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をfunctions.phpと同じディレクトリにアップします。

functions.phpの編集

次に、functions.php内に

    /* 外部リンク対応ブログカードのショートコードを作成 */
    function show_Linkcard($atts) {
      extract(shortcode_atts(array(
        'url'=>"",
        'title'=>"",
        'excerpt'=>""
      ),$atts));
      
      //画像サイズの横幅を指定
      $img_width ="110";
      //画像サイズの高さを指定
      $img_height = "110";
      
      //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出力
      $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">'. $favicon .' '. $url .' <i class="icon-external-link-alt"></i></div>
       </div>
       <div class="clear"></div>
      </a>
      </div>';  
      
      return $sc_Linkcard;  
    }
    //ショートコードに追加
    add_shortcode("linkcard", "show_Linkcard");

を追加します。

参考サイト：https://dis-play.net/wordpress/tips/blogcard-external/

あとはリンクカードを設置したい箇所に

[linkcard url=”https://yahoo.co.jp/” title=”任意のタイトル名” excerpt=”任意の説明文”]
のように追加することでOK

CSSの装飾

あとはCSSで装飾する際の目安として


    .blogcard {
      line-height: 1;
      background-color: #ffffff;
      border: 1px solid #eeeeee;
      word-wrap: break-word;
      margin: 0 4% 10px;
		text-align:left;
      box-shadow: 0 0 5px 6px rgba(0,0,0,.025);
    }
    .blogcard.ex {
      background-color: #f7f7f7;
    }
    .blogcard a {
      text-decoration: none;
      opacity: 1;
      transition: all 0.2s ease;
    }
.blogcard img{
	max-width:100% !important;
	width:auto !important;
	height:auto;
}
    .blogcard a:hover {
      opacity: 0.6;
    }
    .blogcard_thumbnail {
      float: left;
      padding: 20px;
		width:100px;
    }

    .blogcard_title {
      font-size: 1em;
      font-weight: bold;
      line-height: 1.4;
      padding: 17px 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 .favicon {
      margin-bottom: -4px;
    }
    .blogcard_link .icon-external-link-alt::before {
      font-size:0.75em;
    }

↑こちらを追加することである程度の見た目は整います。