【WordPress】Twitterのツイート埋め込みをLINE風吹き出しにする

/**
 * LINE風Tweet埋め込み
 */
function tweet_like_func($args) {
  // TweetIDは必須なのでない場合空文字返却
  if ( !is_array($args) || count($args) == 0 ){
    return "";
  }
  $tweet_id = $args[0];

  // overflow:hiddenは中のtwitter-widgetがheightを持たないので高さを持たせる対策。
  return '<div class="tweet_line" data-tweet_id="' . $tweet_id . '" style="overflow: hidden;"></div>';
}
add_shortcode('tweet_line', 'tweet_like_func');

// Twitterのウィジェットスクリプトを読み込む
wp_enqueue_script('twitter_widget.js', 'https://platform.twitter.com/widgets.js', [], '', true);

function readyEmbedTweetLikeLine(){

  var styleTag = '<style>.EmbeddedTweet{max-width:100%;border:none}.CallToAction{display:none}.Tweet-brand{margin-left:4px;margin-top:-2px}.TweetAuthor-nameScreenNameContainer{display:flex;flex-direction:row}.TweetAuthor-decoratedName,.TweetAuthor-screenName{font-size:10px;color:#999}.EmbeddedTweet{min-width:300px}.EmbeddedTweet-tweet{padding:0!important}.Tweet{position:relative}.TweetAuthor{margin-left:0}.Tweet-body{position:relative;margin-top:-20px!important;margin-left:50px;box-sizing:border-box;padding:10px;border-radius:14px;background:#edf1ee}.Tweet-body:after{content:"";display:inline-block;position:absolute;top:3px;left:-19px;border:8px solid transparent;border-right:18px solid #edf1ee;-webkit-transform:rotate(35deg);transform:rotate(35deg)}.Tweet-text{float:left;font-size:14px;width:70%}.Tweet-card{float:right;width:30%;max-width:120px;margin-top:0!important}.TweetInfo{clear:both;font-size:12px!important;padding-top:10px;justify-content:flex-end}.TweetInfo-timeGeo{flex:0 1 auto}.tweet-InformationCircle{display:none}</style>';

  $('#entry .entry-content .tweet_line').each(function(){
    // 属性にtweetIDなければ次
    if ( !$(this).attr('data-tweet_id') ){
      return true;
    }

    twttr.widgets.createTweet ($(this).attr('data-tweet_id'), this,{
      align: "left" ,
      lang: "ja" ,
      conversation: "none",
      //cards: "hidden",    // 写真動画なし
      width: 550  // The maximum width of the rendered Tweet in whole pixels. This value should be between 250 and 550 pixels.
    }).then(function (el) {
      
      // style要素を追加
      $(el.shadowRoot).append(styleTag)

    });
  });
}

CREATE TABLE `wp_tweet_line` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `tw_id` varchar(30) DEFAULT NULL,
  `tw_created_at` datetime DEFAULT NULL,
  `tw_user_name` varchar(45) DEFAULT NULL,
  `tw_screen_name` varchar(45) DEFAULT NULL,
  `tw_text` varchar(255) DEFAULT NULL,
  `tw_user_profile_image_url` varchar(255) DEFAULT NULL,
  `tw_retweet_count` int(11) DEFAULT NULL,
  `tw_favorite_count` int(11) DEFAULT NULL,
  `tw_json` json DEFAULT NULL,
  `created_at` datetime DEFAULT CURRENT_TIMESTAMP,
  `updated_at` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `tw_id_UNIQUE` (`tw_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

composer require abraham/twitteroauth

require_once __DIR__ . "/../../vendor/autoload.php";

use Abraham\TwitterOAuth\TwitterOAuth;

define("CONSUMER_KEY", "YOURS");
define("CONSUMER_SECRET", "YOURS");
define("ACCESS_TOKEN", "YOURS");
define("ACCESS_TOKEN_SECRET", "YOURS");


function get_db_instance() {
  static $db = null;
  if (!$db) {
    $dsn  = "mysql:host=" . DB_HOST . ";dbname=" . DB_NAME;
    $user = DB_USER;
    $pass = DB_PASSWORD;

    $options = [
      PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8mb4'
    ];

    $db = new EasyPDO($dsn, $user, $pass, $options);
  }
  return $db;
}

/**
 * LINE風Tweet埋め込み for DB
 */
function tweet_like_func($args) {
  try {
    // TweetIDは必須なのでない場合空文字返却
    if (!is_array($args) || count($args) == 0) {
      return "";
    }
    $tw_id = $args[0];

    $db = get_db_instance();

    $row = $db->fetchRow("select * from wp_tweet_line where tw_id = ?", [$tw_id]);
    
    /* テーブルになかった場合は新規で取得する */
    if (!$row) {
      $row = store_tweet_data($tw_id);
    } else {
      /* レコードとして存在する場合は数日超えていたら再度取得とかでいいと思う */
      /* お気に入りの数値とかが更新される */
      // WP上ではdata_i18nを指定しないと日本時間とれない
      $expired_time = strtotime(date_i18n("YmdHis") . " -3 days");
      $updated_time = strtotime($row["updated_at"]);
      if ( $updated_time < $expired_time ) {
        $row = store_tweet_data($tw_id, $row);
      }
    }
    
  }catch(Exception $ex){
    $row = null;
  }
  
  $html = "";
  if ( $row ){
    $html = setup_tweet_line_html($row);
  }
  
  return $html;
}

/**
 * Twitter APIからデータを取得してDBに格納する
 * そしてDBデータを返却する
 * @param      $tw_id
 * @param null $exist_row
 * @return bool
 */
function store_tweet_data($tw_id, $exist_row = null){
  try{
    $db = get_db_instance();
    
    $connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);
    $param      = [
      "id" => $tw_id,
      "tweet_mode" => "extended"  // これがないと本文が省略されてしまう
    ];
    $content    = $connection->get("statuses/show?tweet_mode=extended", $param);

    // そもそも取れなかったり、idがなかったりしたらfalse返却
    if (!$content || !isset($content->id_str)) {
      return false;
    }

    $tw_id = $content->id_str;

    // TwitterはGMT時間なのにGMT+9とか書いてくれないのでこちらで+9 hoursしてあげる
    $data = [
      "tw_id"                     => $tw_id,
      "tw_created_at"             => date_i18n('Y/m/d H:i:s', strtotime($content->created_at . " +9 hours")),
      "tw_user_name"              => $content->user->name,
      "tw_screen_name"            => $content->user->screen_name,
      "tw_text"                   => isset($content->full_text) ? $content->full_text : $content->text,
      "tw_user_profile_image_url" => $content->user->profile_image_url_https,
      "tw_retweet_count"          => $content->retweet_count,
      "tw_favorite_count"         => $content->favorite_count,
      "tw_json"                   => json_encode($content, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE),
    ];
    
    if (!$exist_row) {
      $res = $db->insert("wp_tweet_line", $data);
    } else {
      $res = $db->update("wp_tweet_line", $data, ["tw_id" => $tw_id]);
    }

    $row = $db->fetchRow("select * from wp_tweet_line where tw_id = ?", [$tw_id]);
    
    return $row;
    
  }catch(Exception $ex){
    
    return false;
  }
}

/**
 * Twitterのレコードをもとにhtmlを組み立てます。
 * @param $record
 */
function setup_tweet_line_html($record){
  $r = $record; // shortcode
  $t = json_decode($record["tw_json"], true); // Tweetデータそのもの

  $tweet_url = "https://twitter.com/{$r['tw_screen_name']}/status/{$r['tw_id']}";
  $media_img = "";
  if ( isset($t["entities"]["media"]) && count($t["entities"]["media"]) > 0 ){
    $media_url = $t["entities"]["media"][0]["media_url_https"];
    $media_img = "<img src=\"{$media_url}\" />";
  }
  $user_url = "https://twitter.com/{$r['tw_screen_name']}";
  $tweeted_date = $r["tw_created_at"];

  $tweet_text = $r["tw_text"];

  // テキスト最後にそのツイートURLが入るのでそれを除去する
  $tweet_text = preg_replace ( "/\s?https:\/\/t\.co.+$/", "", $tweet_text );

  // 最後に改行を<br>変換
  $tweet_text = nl2br($tweet_text);

  $html = <<<HTML
<blockquote class="tweet_line_box" cite="{$tweet_url}">
  <div class="col-1">
    <a href="{$user_url}" target="_blank" rel="noopener noreferrer">
      <div class="tw_author_icon" style="background-image: url({$t['user']['profile_image_url_https']})"></div>
    </a>
  </div>
  <div class="col-2">
    <a href="{$user_url}" target="_blank" rel="noopener noreferrer">
    <div class="tw_author">
      <span class="tw_author_display_name">{$t['user']['name']}</span>
      <span class="tw_author_screen_name">@{$t['user']['screen_name']}</span>
    </div>
    </a>
    <a href="{$tweet_url}" target="_blank" rel="noopener noreferrer">
    <div class="tw_content">
      <div class="tw_media">
        {$media_img}
      </div>
      <p class="tw_text">
        {$tweet_text}
      </p>
      
      <div class="tw_content_footer">
        <!-- ♡<span class="tw_favoriot_count">{$t['favorite_count']}</span> -->
        <span class="tw_created_at">{$tweeted_date}</span>
      </div>
    </div>
    </a>
  </div>
  
</blockquote>
HTML;
  
  return $html;
}

add_shortcode('tweet_line_db', 'tweet_like_func');

blockquote.tweet_line_box {
  display: flex;
  min-width: 300px;
  max-width: 600px;
  padding: 10px;
  border: 0;
}
blockquote.tweet_line_box .col-1 {
  flex: 0 0 55px;
}
blockquote.tweet_line_box .col-1 .tw_author_icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}
blockquote.tweet_line_box .col-2 {
  flex-grow: 1;
}
blockquote.tweet_line_box .col-2 .tw_author {
  font-size: 11px;
  color: #999;
  cursor: pointer;
}
blockquote.tweet_line_box .col-2 .tw_author:hover {
  text-decoration: underline;
}
blockquote.tweet_line_box .col-2 .tw_content {
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 14px;
  background-color: #edf1ee;
  color: #444;
}
blockquote.tweet_line_box .col-2 .tw_content:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px;
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #edf1ee;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
blockquote.tweet_line_box .col-2 .tw_content .tw_media {
  float: right;
  width: 35%;
  min-width: 100px;
  min-height: 100px;
  margin-left: 10px;
  margin-bottom: 10px;
}
blockquote.tweet_line_box .col-2 .tw_content .tw_media img {
  width: 100%;
  height: auto;
  box-shadow: 0 0 4px grey;
  border-radius: 4px;
}
blockquote.tweet_line_box .col-2 .tw_content .tw_text {
  margin: 0;
  font-size: 14px;
}
blockquote.tweet_line_box .col-2 .tw_content .tw_content_footer {
  clear: both;
  font-size: 11px;
  text-align: right;
}
blockquote.tweet_line_box .col-2 .tw_content .tw_content_footer .tw_favoriot_count {
  display: none;
}
blockquote.tweet_line_box .col-2 cite {
  font-size: 11px;
}
blockquote.tweet_line_box:before {
  content: none;
}
blockquote.tweet_line_box a:hover {
  text-decoration: none;
}