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

//OpenGraph.phpに追加するコード
$HTML = mb_encode_numericentity($HTML, [0x80, 0x10FFFF, 0, 0x1FFFFF], 'UTF-8');

//OpenGraph.php

static private function _parse($HTML) {
  $old_libxml_error = libxml_use_internal_errors(true);

  //コードを追加する
  $HTML = mb_encode_numericentity($HTML, [0x80, 0x10FFFF, 0, 0x1FFFFF], 'UTF-8');

  $doc = new DOMDocument();
  $doc->loadHTML($HTML);
		
  libxml_use_internal_errors($old_libxml_error);

//OpenGraph.php

private $_position = 0;
//rewind()の隣に「:void」を追加する
public function rewind():void { reset($this->_values); $this->_position = 0; }
//current()の隣に「:mixed」を追加する
public function current():mixed { return current($this->_values); }
//key()の隣に「:mixed」を追加する
public function key():mixed { return key($this->_values); }
//next():の隣に「:void」を追加する
public function next():void { next($this->_values); ++$this->_position; }
//valid()の隣に「:bool」を追加する
public function valid():bool { return $this->_position < sizeof($this->_values); }

<!-- functions.php -->

<?php

function show_Linkcard($atts) {

 $default_atts = shortcode_atts(array(
  'url'=>'',
  'title' => ''
 ),$atts);

 $url = $default_atts['url'];
 $title = $default_atts['title'];

 //$urlが空文字の場合は処理を終了する
 if( empty($url) ) {
  return 'URLを設定してください';
 }
 
 //画像サイズの横幅を指定
 $img_width = 180;
 //画像サイズの高さを指定
 $img_height = 100;
 
 //OpenGraph.phpを読み込む
 require_once 'OpenGraph.php';
 //OGP情報を取得する 
 $graph = OpenGraph::fetch($url);

 if( !empty ( $title ) ){
  //$titleが設定している場合は優先して「$Link_title」に代入する
  $Link_title = $title;
 }elseif( !empty($graph->title) ) {
  //OGPタグからタイトルを取得する
  $Link_title = $graph->title;
 }else {
  $Link_title = '';
 }
 
 if( !empty($graph->image ) ) {
  //OGPタグから画像のURLを取得する
  $thumbnail = $graph->image;
 }else {
  $thumbnail = '';
 }

 if( !empty( $thumbnail ) ) {
  $xLink_img = '<img src="'. esc_url($thumbnail)  .'" width="'. $img_width .'" height="'.$img_height .'" alt="'. $Link_title .'"/>';
 }else {
  //「WP REST 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 .'" height="'.$img_height .'" alt="'. $Link_title .'"/>';
 }
 
 //外部リンク用ブログカードHTML出力
 $sc_Linkcard = '';
 $sc_Linkcard .='
 <div class="blogcard ex">
  <a href="'. esc_url($url) .'" target="_blank" rel="noopener noreferrer">
   <div class="blogcard-wrapper">
    <div class="blogcard-thumbnail">'. $xLink_img .'</div>
    <div class="blogcard-texts">
      <h3 class="blogcard-title">'. esc_html($Link_title) . '</h3>
      <p class="blogcard-url">' . esc_url($url) . '</p>
    </div>
   </div>
  </a>
 </div>';

  return $sc_Linkcard;
}

//ショートコードを登録する
add_shortcode("sc_Linkcard", "show_Linkcard");

 $default_atts = shortcode_atts(array(
  'url'=>'',
  'title' => ''
 ),$atts);

$default_atts = array(
  'url'=>'https://example.com',
  'title' => ''
);

if( empty($url) ) {
 return 'URLを指定してください';
}

if( !empty ( $title ) ){
 //$titleが設定している場合は優先して「$Link_title」に代入する
  $Link_title = $title; 
}elseif( !empty($graph->title) ) {
 //OGPタグからタイトルを取得する
 $Link_title = $graph->title;
}else {
 $Link_title = '';
}

if( !empty($graph->image ) ) {
 //OGPタグから画像のURLを取得する
 $thumbnail = $graph->image;
}else {
 $thumbnail = '';
}

 if( !empty( $thumbnail ) ) {
  $xLink_img = '<img src="'. esc_url($thumbnail)  .'" width="'. $img_width .'" height="'.$img_height .'" alt="'. $Link_title .'"/>';
 }else {
  //「WP REST 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 .'" height="'.$img_height .'" alt="'. $Link_title .'"/>';
 }

<?php 

$url1 = "https://code-sq.com/";

$url2 = rtrim($url1, "/");        //$url1の最後の「/」を取り除く

var_dump($url2);

/*出力結果*/

//string(18) "http://code-sq.com"  URLの最後の「/」が取り除かれる

?>

<?php

$url1 = "https://code-sq.com";

$url2 = urlencode($url1);

var_dump($url2);

/*出力結果*/

//string(25) "https%3A%2F%2Fcode-sq.com" ":"が"%3A"、"/"が"%2F"に置き換えられている

?>

.blogcard {
  line-height: 1;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  word-wrap: break-word;  
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  transform: translateY(-5px);
  transition: all 0.5s ease;
}

.blogcard:hover {
  transform: translateY(0);
  box-shadow: none;
}

.blogcard.ex {
  background-color: #f7f7f7;
}

.blogcard a {
  text-decoration: none;
  opacity: 1;
  transition: all 0.2s ease;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.blogcard-wrapper {
  display: flex;
  align-items: center;
}

.blogcard-thumbnail {
  width: 25%;
  max-width: 180px;
  aspect-ratio: 180/100;
}

.blogcard-thumbnail img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.blogcard-texts {
  width: 75%;
}

.blogcard-title {
  font-size: 1.2vw;
  font-weight: bold;
  line-height: 1.4;
  padding: 17px 20px 10px;
  color: #333;
}

.blogcard-url {
  font-size: 1vw;
  padding: 0 20px 10px;
  color: #333;
}