【WordPress】ブログカードをプラグインなしで実装する方法

// ショートコードの登録
add_shortcode("blogcard-original", "blogcard-original_shortcode");

function blogcard_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'url' => '',
        ),
        $atts,
        'blogcard'
    );

    if (empty($atts['url'])) {
        return '';
    }

    // OGP情報を取得
    $ogp_data = get_ogp_data($atts['url']);
    if (!$ogp_data) {
        return '';
    }

    // ブログカードのHTML出力
    $html = '<div class="blogcard-original">';
    $html .= '<a href="' . esc_url($atts['url']) . '" target="_blank">';
    $html .= '<div class="blogcard-original-thumbnail"><img src="' . esc_url($ogp_data['image']) . '" alt="' . esc_attr($ogp_data['title']) . '"></div>';
    $html .= '<div class="blogcard-original-content">';
    $html .= '<div class="blogcard-original-title">' . esc_html($ogp_data['title']) . '</div>';
    $html .= '<div class="blogcard-original-description">' . esc_html($ogp_data['description']) . '</div>';
    $html .= '</div></a></div>';

    return $html;
}

function get_ogp_data($url) {
    $response = wp_remote_get($url);
    if (is_wp_error($response)) {
        return false;
    }

    $html = wp_remote_retrieve_body($response);

    // 正規表現を使用してOGPタグを抽出
    $ogp_tags = array(
        'title' => '',
        'description' => '',
        'image' => ''
    );

    preg_match('/<meta property="og:title" content="(.*?)"/', $html, $matches);
    if (isset($matches[1])) {
        $ogp_tags['title'] = $matches[1];
    }

    preg_match('/<meta property="og:description" content="(.*?)"/', $html, $matches);
    if (isset($matches[1])) {
        $ogp_tags['description'] = $matches[1];
    }

    preg_match('/<meta property="og:image" content="(.*?)"/', $html, $matches);
    if (isset($matches[1])) {
        $ogp_tags['image'] = $matches[1];
    }

    return $ogp_tags;
}

/* ブログカードの基本スタイル */
.blogcard-original {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  margin: 16px 0;
  transition: box-shadow 0.3s ease;
}

.blogcard-original a {
  display: flex;
  text-decoration: none;
  color: inherit;
}

.blogcard-original-thumbnail img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-right: 1px solid #ddd;
  max-width: inherit;}

.blogcard-original-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blogcard-original-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.blogcard-original-description {
  font-size: 14px;
  color: #666;
}

/* ホバー効果 */
.blogcard-original:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .blogcard-original {
      flex-direction: column;
  }

  .blogcard-original-thumbnail img {
      width: 100%;
      height: auto;
      border-right: none;
      border-bottom: 1px solid #ddd;
  }

  .blogcard-original-content {
      padding: 8px;
  }

  .blogcard-original-title {
      font-size: 16px;
  }

  .blogcard-original-description {
      font-size: 12px;
  }
}

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

[blogcard url="https://blog.allity.jp/wordpress-blog-card-no-plugin/"]