WordPressのプラグインなしで外部リンク用のブログカードを作ってみる

つい最近、こちらの記事で内部リンク用のブログカードをプラグイン無しで作ってみたところでしたが、早速外部リンク用も必要になったので作成してみました。

WordPressのプラグインなしで内部リンク用のブログカードを作ってみる

内部、外部とまとめて書いて条件分岐して上手いこと出し分けが出来ればよいものですが、まだそこまで上手くいかなかったので、とりあえず今回は内部と外部で別々で書く場合。

Table of Contents

functions.phpに記載するコード

何はともあれ、まずはコードから。

function show_external_blogcard($atts) {
  extract(shortcode_atts(array(
    'url' => "",
    'title' => "",
    'excerpt' => "",
    'img_width' => "240",
    'img_height' => "160",
    //画像が取得できなかった場合
    'no_image' => 'img/default.jpg'
  ), $atts));

  //外部ページから情報を取得
  $html = file_get_contents($url);
  $doc = new DOMDocument();
  libxml_use_internal_errors(true);
  $doc->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
  $xpath = new DOMXPath($doc);

  //タイトルを取得
  if (empty($title)) {
    $title = $xpath->query('//title')->item(0)->nodeValue;
  }

  //抜粋文を取得
  if (empty($excerpt)) {
    $meta_description = $xpath->query('//meta[@name="description"]')->item(0);
    if ($meta_description) {
      $excerpt = $meta_description->getAttribute('content');
    }
  }

  //アイキャッチ画像を取得
  if ($xpath->query('//meta[@property="og:image"]')->length > 0) {
    $img_url = $xpath->query('//meta[@property="og:image"]')->item(0)->getAttribute('content');
  } elseif ($xpath->query('//meta[@name="twitter:image"]')->length > 0) {
    $img_url = $xpath->query('//meta[@name="twitter:image"]')->item(0)->getAttribute('content');
  } else {
    $img_url = $no_image;
  }

  $blogcard_html = '
    <div class="blogcard">
      <a href="' . $url . '">
        <div class="blogcard-img">
          <img src="' . $img_url . '" alt="' . $title . '" width="' . $img_width . '" height="' . $img_height . '" />
        </div>
        <div class="blogcard-content">
          <div class="blogcard-title">' . $title . '</div>
          <div class="blogcard-excerpt">' . $excerpt . '</div>
        </div>
      </a>
    </div>
  ';

  return $blogcard_html;
}
add_shortcode("external_blogcard_sc", "show_external_blogcard");

こんな感じ。

前回の記事とHTML部分はほぼ一緒にしてあるので、CSSはこちらの記事を参考にしてください。

記事に設置する際は以下のショートコードで大丈夫です。

[external_blogcard_sc url="リンク先のURL"]

タイトル文字数を制限する

外部サイトから、どんな条件でタイトルとして扱われているテキストを引っ張ってくるか分からないので、もの凄い長いテキストだったりすることもあるわけで、そんな時は文字数制限しちゃいます。

こちらは40文字に制限した場合。

if (empty($title)) {
  $title = $xpath->query('//title')->item(0)->nodeValue;
}
$title = wp_trim_words($title, 40, '...');

抜粋文を文字数制限する

続けて抜粋文を文字数制限する場合です。抜粋文もそこそこ長くなってしまうこともあるので、むしろタイトルよりもこちらの方が必須になるかもしれません。

こちらは50文字に制限しています。

if (empty($excerpt)) {
  $meta_description = $xpath->query('//meta[@name="description"]')->item(0);
  if ($meta_description) {
    $excerpt = $meta_description->getAttribute('content');
  }
}
$excerpt = wp_trim_words($excerpt, 50, '...');

外部リンク用のブログカードを作ってみて

先に作っていた内部リンクコードをいじって何とか作ってみましたが今のところ大丈夫そう。
上記コードになるまでにサイト全体が重くなってしまったり、真っ白になってしまったり色々ありましたが、何とか問題ないところまで持っていけたので一旦完了にしちゃってますが、もっと良い書き方は当然あるでしょうね。
自分ももうちょっと考えて改良していきたいと思います。