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

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

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

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;
    }

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

TAGS

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