【プラグイン無】Wordpressで外部ドメインに対応したブログカードを作った話

// 簡易
blog_card url=""

// カテゴリー等一覧（タクソノミー用）
blog_card url="URL" tax="taxonomy_name" id="term_id"

// フル（外部サイト・詳細設定用）
blog_card url="URL" title="タイトル" excerpt="説明" thumb="media_id"

function addBlogCard_get_template_url() {
  if(is_child_theme()) {
    return get_stylesheet_directory_uri().'/functions/addBlogCard';
  } else {
    return get_template_directory_uri().'/functions/addBlogCard';
  }
}

function addBlogCard_get_data( $url ) {
  $headers = array(
    "HTTP/1.0",
    "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
    "Accept-Language:ja,en-US;q=0.9,en;q=0.8",
    "Connection:keep-alive",
    "User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36"
  );
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
  $result = curl_exec($ch);
  curl_close($ch);
  $dom = new DOMDocument();
  $html = mb_convert_encoding($result, "HTML-ENTITIES", "auto");
  @$dom -> loadHTML($html);
  $xpath = new DOMXPath($dom);
  $xpath -> registerNamespace("php", "http://php.net/xpath");
  $xpath -> registerPHPFunctions();
  return $xpath;
}

function addBlogCard($atts) {
}

$img_width  = 90;     // アイキャッチ画像サイズの幅指定
$img_height = 90;     // アイキャッチ画像サイズの高さ指定
$length     = 100;    // post_excerptがなかった場合の文字数
$site_icon  = addBlogCard_get_template_url().'/assets/site-icon.png';  // サイトアイコンの画像URLを指定
$no_image   = addBlogCard_get_template_url().'/assets/no-image.png';   // アイキャッチ画像がない場合の画像URLを指定

function addBlogCard($atts) {
  global $img_width, $img_height, $site_icon, $no_image;
}

extract(shortcode_atts(array(
  'url' => "",
  'title' => "",
  'excerpt' => "",
  'thumb' => "",
  // taxonomy用
  'tax' => "",
  'id' => ""
), $atts));

$my_site = stristr($url, $_SERVER['HTTP_HOST']);

if($my_site !== false) {
  // 同サイトの場合
  $site_name = get_bloginfo( 'name' );
  $site = isset($site_icon) ? "<img src='{$site_icon}' width='16' height='16' alt='{$site_name}'>{$site_name}" : "";

} elseif(stristr($url, 'youtube.com') || stristr($url, 'youtu.be')) {
  // youtubeの場合
  $site_name = 'youtube';
  $site = "<img src='".addBlogCard_get_template_url()."/assets/youtube.png' width='16' height='16' alt='{$site_name}'>{$site_name}";

}

if($my_site !== false) {
  $id = empty($id) ? url_to_postid($url) : $id;
}

function addBlogCard_excerpt($post_id) {
  global $length;
  $post = get_post($post_id);

  if($post->post_excerpt) {
    // excerptが入力されている場合
    $return = $post->post_excerpt;

  } else {
    // excerptが入力されていない場合
    $return = $post->post_content;
    $return = addBlogCard_flat_text($return);

    if(mb_strlen($return) > $length) {
      // $lengthよりも文字数が多い場合の対処
      $return = mb_substr($return, 0, $length);
      $return .= '...';
    }
  }
  return $return;
}

if( $my_site === false ) {
  // youtube以外の外部サイトの場合 ------------------------------------------------------------
  // 外部サイトの情報取得
  $xpath = addBlogCard_get_data($url);

  // title取得
  if(empty($title)) {
    $title = $xpath->query('//head/title[1]') ? $xpath->query('//head/title[1]')->item(0)->nodeValue : "";
  }
  // excerpt取得
  if(empty($excerpt)) {
    if($xpath->query('//meta[@property="og:description"]')[0]) {
      $excerpt = $xpath->query('//meta[@property="og:description"]/@content')[0]->textContent;
    } else if($xpath->query('//meta[@name="description"]')[0]) {
      $excerpt = $xpath->query('//meta[@name="description"]/@content')[0]->textContent;
    } else {
      $excerpt = "";
    }
  }

} else if(empty($tax)) {
  // タクソノミー一覧ではない場合の取得 ------------------------------------------------------------
  $title = empty($title) ? get_the_title($id) : $title;
  $excerpt = empty($excerpt) ? addBlogCard_excerpt($id) : $excerpt;

} else if(!empty($tax)) {
  // タクソノミー一覧の取得 ------------------------------------------------------------
  $term = get_term( $id, $tax );
  $title = empty($title) ? $term->name : $title;
  $excerpt = empty($excerpt) ? term_description($id, $tax) : $excerpt;

}

if(wp_get_attachment_url($thumb)) {
  // サムネイルが設定されている場合 ------------------------------------------------------------
  $img = wp_get_attachment_image_url($thumb, array($img_width,$img_height));
  $img_tag = "<img src='{$img}' alt='{$title}' width='{$img_width}' height='{$img_height}'>";

} elseif( empty($tax) && $my_site !== false ) {
  // 通常 ------------------------------------------------------------
  if(has_post_thumbnail($id)) {
    $img = wp_get_attachment_image_src(get_post_thumbnail_id($id), array($img_width,$img_height));
    $img_tag = "<img src='{$img[0]}' alt='{$title}' width='{$img[1]}' height='{$img[2]}'>";
  }

} elseif(!empty($tax)) {
  // taxonomyが設定されている場合（ACFの場合） ------------------------------------------------------------
  if(get_field('image', "{$tax}_{$id}")) {
    $attachment = get_field('image', "{$tax}_{$id}");
    $img_tag = "<img src='{$attachment["sizes"]["thumbnail"]}' alt='{$title}' width='{$img_width}' height='{$img_height}'>";
  }
}

function addBlogCard_flat_text( $text ) {
  $text = strip_shortcodes($text);               // ショートコードの削除
  $text = wp_strip_all_tags($text);              // htmlの削除
  $rp = array('　', ' ', "\xc2\xa0", " ");
  $text = str_replace($rp, '', $text);           // $rpの文字列削除
  return $text;
}

$title   = addBlogCard_flat_text($title);
$excerpt = addBlogCard_flat_text($excerpt);
$site    = isset($site) ? $site : "";
$img_tag = isset($img_tag) ? $img_tag : "";

$args = array(
  'url'     => $url,     // リンク先URL
  'img_tag' => $img_tag, // アイキャッチ画像
  'title'   => $title,   // タイトル
  'excerpt' => $excerpt, // 抜粋文
  'site'    => $site,    // サイトアイコン
);

function addBlogCard_template( $args ) {
  ob_start();
  get_template_part( 'functions/addBlogCard/addBlogCard', 'template', $args );
  return ob_get_clean();
}

return addBlogCard_template( $args );

add_shortcode("blog_card", "addBlogCard");

<a href="<?php echo $args['url'] ?>" target="_blank" class="blog-card">
  <div class="blog-card__header">
    <?php if(!empty($args['img_tag'])): ?>
      <div class="blog-card__thumbnail">
        <?php echo $args['img_tag'] ?>
      </div>
    <?php endif; ?>
    <div class="blog-card__content">
      <div class="blog-card__title"><?php echo $args['title'] ?></div>
      <div class="blog-card__excerpt"><?php echo $args['excerpt'] ?></div>
    </div>
  </div>
  <div class="blog-card__footer">
    <div class="blog-card__site"><?php echo $args['site'] ?></div>
    <div class="blog-card__more"><span>続きを読む</span></div>
  </div>
</a>

.blog-card {
  display: block;
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #fff;
  border: 2px solid #eee;
  text-decoration: none;
  color: #4C4C4C;
}
.blog-card__header {
  width: 100%;
  display: flex;
  gap: 1.5rem;
}
.blog-card__footer {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}
.blog-card__site {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 80%;
}
.blog-card__site img {
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
.blog-card__more span {
  display: inline-block;
  padding: 0px 2rem;
  border: 1px solid #eee;
  font-size: 80%;
  font-weight: bold;
}
.blog-card__thumbnail {
  flex-shrink: 0;
}
.blog-card__title,
.blog-card__excerpt {
  line-height: 1.7;
  text-align: justify;
}
.blog-card__title {
  font-weight: bold;
}
.blog-card__excerpt {
  font-size: 85%;
}
@media screen and (max-width: 599px) {
.blog-card__excerpt {
  display: none;
}
}

add_action( 'wp_enqueue_scripts', 'addBlogCardScript' );
function addBlogCardScript() {
  $css = addBlogCard_get_template_url().'/addBlogCard.css';
  wp_enqueue_style( 'addBlogCard_style', $css, array() );
}

tinymce.create('tinymce.plugins.blogcard', {
  init: function(ed, url) {
    ed.addButton('blog_card', {
      title: 'ブログカード',
      text: 'ブログカード',
      type: 'menubutton',
      menu: [
        {
          text: '簡易',
          onclick: function () {
            ed.insertContent('［blog_card url=""］');
          }
        },
        {
          text: 'カテゴリー等一覧',
          onclick: function () {
            ed.insertContent('［blog_card url="" tax="category ea etc" id="category_id"］');
          }
        },
        {
          text: 'フル',
          onclick: function () {
            ed.insertContent('［blog_card url="" title="タイトル" excerpt="説明" thumb="media_id"］');
          }
        }
      ]
    });
  },
  createControl : function(n, cm) {
    return null;
  },
});
tinymce.PluginManager.add('blogcard_plugin', tinymce.plugins.blogcard);

// 作成したプラグインを登録
add_filter( 'mce_external_plugins', 'register_mce_blogcard_plugins' );
function register_mce_blogcard_plugins( $plugin_array ) {
  if(is_child_theme()) {
    $js = get_stylesheet_directory_uri().'/functions/addBlogCard/addBlogCard.js';
  } else {
    $js = get_template_directory_uri().'/functions/addBlogCard/addBlogCard.js';
  }
  $plugin_array[ 'blogcard_plugin' ] = $js;
  return $plugin_array;
}

// 作成したプラグインのボタンを登録
add_filter( 'mce_buttons', 'add_blogcard_buttons' );
function add_blogcard_buttons( $buttons ) {
  $buttons[] = 'blog_card';
  return $buttons;
}

require_once 'addBlogCard-tinymce.php';

include 'functions/addBlogCard/addBlogCard.php';