画像生成APIを利用してサムネイルを表示します。
前回まで
DBにタイトルや概要文をキャッシュして読み書きしました。
[link url=”https://popozure.info/20180824/13323″]
サムネイルを取得する
WordPress.comの画像生成APIを利用する
WordPress.comの画像生成APIを利用します。
URLの一部にサムネイルを作りたいURLを組み込み、「w」パラメータで横幅を指定します。
https://s.wordpress.com/mshots/v1/(URL)?w=94
[php title=”popo-blogcard.php” start-line=”70″ mark=”5″] ‘excerpt’ => $excerpt
)
);
}
$thumbnail = ‘
$html = ‘
return $html;
}[/php]
HTMLにサムネイルを組み込む
サイト名称の次、タイトルの前に組み込みます。
[php title=”popo-blogcard.php” start-line=”70″ mark=”6″] ‘excerpt’ => $excerpt
)
);
}
$thumbnail = ‘
$html = ‘
return $html;
}[/php]
スタイルシートを追加する
左寄せで表示されるようにスタイルシートを追加します。
[css title=”style.css” start-line=”12″ mark=”5-9″].popo_bc_site_name {
display: block;
font-size: 12px;
}
.popo_bc_thumbnail {
float: left;
padding: 8px;
max-width: 94px;
}
.popo_bc_title {
display: block;
font-size: 18px;
overflow: hidden;[/css]
表示してみる
ブログカードの左側にサムネイルが表示されました。
今回のコード
今回はここまでです。
プラグイン本体
[php title=”popo-blogcard.php”]get_row($wpdb->prepare(“SELECT * FROM “.$wpdb->prefix.”popo_blogcard WHERE url=%s”, $url ) );
if ($data ) {
$site_name = $data->site_name;
$title = $data->title;
$excerpt = $data->excerpt;
} else {
$ch = curl_init($url );
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true );
curl_setopt($ch, CURLOPT_TIMEOUT, 8 );
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true );
curl_setopt($ch, CURLOPT_MAXREDIRS, 8 );
curl_setopt($ch, CURLOPT_AUTOREFERER, true );
curl_setopt($ch, CURLOPT_COOKIESESSION, true );
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false );
$html = curl_exec($ch );
if (curl_errno($ch ) ) {
$site_name = ”;
$title = $url;
$excerpt = ”;
} else {
$html = mb_convert_encoding($html, ‘UTF-8’, ‘ASCII,JIS,UTF-8,EUC-JP,SJIS’ );
if (preg_match(‘/property=”og:title”\s*content=”([^”]*)/si’, $html, $m ) ) {
$title = esc_html($m[1]);
} else {
if (preg_match(‘/<\s*title\s*[^>]*>\s*([^<]*)\s*<\s*\/title\s*[^>]*>/si’, $html, $m ) ) {
$title = esc_html($m[1]);
}
}
if (preg_match(‘/property=”og:description”\s*content=”([^”]*)/si’, $html, $m ) ) {
$excerpt = esc_html($m[1]);
} else {
if (preg_match(‘/name=”description”\s*content=”([^”]*)/si’, $html, $m ) ) {
$excerpt = esc_html($m[1]);
}
}
if (preg_match(‘/property=”og:site_name”\s*content=”([^”]*)/si’, $html, $m ) ) {
$site_name = esc_html($m[1]);
} else {
$m = parse_url($url );
$site_name = $m[‘host’];
}
}
curl_close($ch );
$result = $wpdb->insert(
$wpdb->prefix.’popo_blogcard’,
array(
‘url’ => $url,
‘site_name’ => $site_name,
‘title’ => $title,
‘excerpt’ => $excerpt
)
);
}
$thumbnail = ‘
$html = ‘
return $html;
}
public function activate() {
global $wpdb;
$wpdb->hide_errors();
require_once (ABSPATH.’wp-admin/includes/upgrade.php’);
$sql = “CREATE TABLE “.$wpdb->prefix.”popo_blogcard (
url VARCHAR(2048) DEFAULT ”,
site_name VARCHAR(100) DEFAULT ”,
title VARCHAR(200) DEFAULT ”,
excerpt VARCHAR(500) DEFAULT ”,
) “.$wpdb->get_charset_collate().” ;”;
dbDelta($sql);
}
public function deactivate() {
global $wpdb;
$sql = “DROP TABLE “.$wpdb->prefix.”popo_blogcard”;
$wpdb->query($sql);
}
function enqueue() {
wp_enqueue_style(‘popo-blogcard’, plugin_dir_url(__FILE__).’style.css’);
}
}
$popo_blogcard = new popo_blogcard;[/php]
スタイルシート
[css title=”style.css”].popo_bc_wrap {
margin: 16px;
padding: 8px;
width: 96%;
border: 2px solid #8888ff;
background-color: #ffffff;
border-radius: 3px;
}
.popo_bc_link {
text-decoration: none;
}
.popo_bc_site_name {
display: block;
font-size: 12px;
}
.popo_bc_thumbnail {
float: left;
padding: 8px;
max-width: 94px;
}
.popo_bc_title {
display: block;
font-size: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.popo_bc_url {
display: block;
font-size: 12px;
color: #00f;
text-decoration: underline;
}
.popo_bc_excerpt {
height: 32px;
font-size: 12px;
color: #444;
overflow: hidden;
text-overflow: ellipsis;
}[/css]
次回は･･･
最後にサイトアイコン（ファビコン）を追加しようと思います。
[link url=”https://popozure.info/20180826/13339″]
では、この辺で。(^-^)o
[amzn-link asin=”4774187062″][amzn-link asin=”B00M939Y0I”][amzn-link asin=”4798143774″][amzn-link asin=”B019GNUT0C”][amzn-link asin=”B01LATWL5G”]
