ページの一部として使う場合…
はじめにこっち書けばいいよねｗ
ページの一部として表示
ページの一部として表示する場合、PHPが使えないといけないので拡張子 .php である前提で書きます。
ユーティリティを作る
こちらのコードを util.inc.php としてファイル保存してください。
<?php
/**
* MICROCMS サンプル
*/
define( 'MICROCMS_URL_BLOG', "https://yyyyyyy.microcms.io/api/v1/blog" );
define( 'MICROCMS_API_KEY', "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx" );
global $posts, $act, $blog_id;
if ( $act === "" ) { $act = "top"; }
// curl "https://yyyyyyy.microcms.io/api/v1/blog" -H "X-API-KEY: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"
$headers = array(
"X-API-KEY: " . MICROCMS_API_KEY,
);
$ch = curl_init();
// blog : curl "https://yyyyyyy.microcms.io/api/v1/blog/WymCAd26C" -H "X-API-KEY: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"
$opt = "?limit=6&ver=".time();
if ( ! empty( $blog_id ) ) {
$opt = "/" . $blog_id;
}
$access_url = MICROCMS_URL_BLOG . $opt;
curl_setopt( $ch, CURLOPT_URL, $access_url );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
// ヘッダー追加オプション
curl_setopt( $ch, CURLOPT_HTTPHEADER, $headers );
$html = curl_exec( $ch );
curl_close( $ch ); //終了
$response = json_decode( $html );
$posts = $response->contents;
if ( $act == "blog" ) {
$posts = $response;
}
class Util {
public static function get_image_sizes( $url ) {
$imagesize = getimagesize( $url );
if($imagesize){
// echo $imagesize[0]; // width
// echo $imagesize[1]; //height
// echo $imagesize[2]; //画像の種類
// echo $imagesize[3]; //サイズの文字列（width="X" height="Y"）
}else{
return null;
}
return $imagesize;
}
}一覧表示
こちらは index.php に表示する前提です。
他の部分はテキトーにあるものとして下記のようになります。
<?php
require_once "util.inc.php";
?><!DOCTYPE html>
<html lang="ja" class="col1">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>microCMSやってみたよ</title>
<meta name="description" content="microCMSやってみたよ のトップページ">
</head>
<body>
<h2>事例紹介</h2>
<div class="entry-list">
<?php
foreach ( $posts as $content_item ) {
?>
<!--
<?php var_dump( $content_item ); ?>
-->
<div class="entry-list_item">
<div class="entry">
<figure class="entry_thumb">
<a href="blog.php?id=<?php echo $content_item->id; ?>"><img src="<?php echo $content_item->image->url; ?>" alt="<?php echo $content_item->title; ?>" width="270" height="180"></a>
</figure>
<div class="entry_inner">
<p class="entry_title"><a href="blog.php?id=<?php echo $content_item->id; ?>"><?php echo $content_item->title; ?></a></p>
<div class="entry_status">
<ul class="entry_date">
<?php if ( date('Ymd', strtotime( $content_item->updatedAt ) ) > date( 'Ymd', strtotime( $content_item->date ) ) ) { ?>
<li class="entry_date_item">更新日:<time datetime="<?php echo $content_item->updatedAt; ?>"><?php echo date( 'Y年m月d日', strtotime( $content_item->updatedAt ) ); ?></time></li>
<?php } ?>
<li class="entry_date_item">公開日:<time datetime="<?php echo $content_item->date; ?>"><?php echo date( 'Y年m月d日', strtotime( $content_item->createdAt ) ); ?></time></li>
</ul>
</div>
<div class="entry_description"><?php echo $content_item->description; ?></div>
<div class="ently_read-more">
<a href="blog.php?id=<?php echo $content_item->id; ?>" class="btn dir-arw_r"><span class="icon_arrow_s_right"></span> 続きを読む</a>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
</body>
</html>先頭の
require_once “util.inc.php”;
こちらで先に作ったファイルを動かしてデータを取得しています。
記事コンテンツへのリンクは今回 blog.php にて表示するようになっています。が、違う場合は書き換えてください。
もちろん blog.php も PHPファイルです。
記事表示部分
下記ソースを blog.php として保存してください。
<?php
$act = "blog";
$blog_id = htmlentities( $_GET['id'] );
require_once "util.inc.php";
?><!DOCTYPE html>
<html lang="ja" class="col1">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php echo $posts->title; ?> | microCMSやってみたよ</title>
<meta name="description" content="<?php echo $posts->description; ?>">
</head>
<body>
<article>
<header class="article-header">
<h1 class="entry_title"><?php echo $posts->title; ?></h1>
<div class="entry_status">
<ul class="entry_date">
<?php if ( date('Ymd', strtotime( $posts->updatedAt ) ) != date( 'Ymd', strtotime( $posts->createdAt ) ) ) { ?>
<li class="entry_date_item">更新日:<time datetime="<?php echo $posts->updatedAt; ?>"><?php echo date( 'Y年m月d日', strtotime( $posts->updatedAt ) ); ?></time></li>
<?php } ?>
<li class="entry_date_item">公開日:<time datetime="<?php echo $posts->createdAt; ?>"><?php echo date( 'Y年m月d日', strtotime( $posts->createdAt ) ); ?></time></li>
</ul>
</div>
</header>
<div class="article-body"><?php if ( $posts->image->url ) {
$sizes = Util::get_image_sizes( $posts->image->url ); ?>
<div class="article-visual" itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject">
<img src="<?php echo $posts->image->url; ?>" alt="<?php echo $posts->description; ?>">
<meta itemprop="url" content="<?php echo $posts->image->url; ?>">
<meta itemprop="width" content="<?php echo $sizes[0]; ?>">
<meta itemprop="height" content="<?php echo $sizes[1]; ?>">
</div><?php } ?><?php echo $posts->content; ?></div><!--article-body-->
</article>
</body>
</html>ヘッダとかフッタとかいろいろあるはずですが、コンテンツ部分のみです。
階層はこんな感じ
.
├── blog.php
├── index.php
└── util.inc.php
ま、テキトーにやってみてください。
サンプルサイトはこちら
↑こちらが実行結果です！
引っ越しが便利だった！
このフォルダひとつ用意して作り込めばいい感じになりそうです。
最新記事6件っていうのが今回の感じですが、ページングとかのために limit とか offset とか APIパラメータが用意されていますのでかなり作り込めそうです。
で、今回、ドメインを間違えてあまり公開したくないドメインで検証してたんですね…
ああ、こっちじゃなくてこっちにしようと思ったときに、WordPressだとデータベースとか移動して設定変えて…いろいろ重い作業になりがちです。
しかし！これだとフォルダ引っこ抜いて移転先にぶっこむだけ！
※多少作り方によりますが。
内部にパスとかがなければ、データベースがない分らくらく引っ越せました。
拡張性が高いのでいろいろ応用効かせられそうです。
今回はとりあえず動くとこまで触ってみた…という感じなので、エラー出た！とかこのコードクソ！とか受け付けませんｗ
よろしくお願いいたします。
