microCMSの使い方ですが…
まずは、microCMSのアカウントを登録してください！
登録したら下記の順番で使えるところまで持っていきます。
- API設定で項目を作る
- コンテンツを作る
- PHPで呼び出して表示するテンプレートを作る
- 画面プレビューしてみる
- 公開する
- サイトで確認する
目次[閉じる]
microCMS 側のフィールド作成
microCMS 側にフィールドを作ってみます。
まず、API設定にアクセスします。
API基本設定
API名とエンドポイントを設定します。
API名は「ブログ」にして
エンドポイントは「blog」にしました。
API名
で、「API名」はテキトーに決めました。
たぶん、メニューで出てくるだけ…かな。
項目を作る
「APIスキーマ」メニューで項目作ります。
| フィールドID | 表示名 | 種類 |
|---|---|---|
| date | 投稿日時 | 日時 |
| title | タイトル | テキストフィールド |
| content | コンテンツ | リッチエディタ |
| image | イメージ | 画像 |
| description | 概要 | テキストフィールド |
今回は基本的なものだけ。
レイアウト決めて content2 とか画像2とか入れられると使い勝手よさそう。すべてがカスタムフィールドのイメージですね。
画面プレビューの設定ができる！
コンテンツを入力し始めたらすぐ気がつくんですが、「プレビュー」ボタンがあるんですよ。
プレビュー…ってヘッドレスだからどうやって出すんだろ！？って思ったら、この設定をしていないとダメですと。
今回、テストサイトの表示URLを入れました。
https://zti.jp/microcms/index.php?act=blog&{CONTENT_ID}&prev={DRAFT_KEY}
{DRAFT_KEY}と{CONTENT_ID}は含めないといけないのかな・・・
これだけ…あとの Webhook とか HTTPメソッド とかはいろいろできるんですが、今回は触れません。
コンテンツをつくるのじゃ！！
入れ物が出来たところなので、投稿しまくります！
この投稿画面は日本製だけあって、落ち着く感じです。
投稿に関してはなにも言うことなし！！
画面プレビュー
画面プレビューボタンがあって、先に設定しておいたURLでプレビューできる。
すごいっすね。アイディア賞ですね。
とりあえず一覧表示してみる
今回作ったサンプルでトップページの「事例紹介」にある一覧がそうです。
ここの表示部分のPHPを紹介します。
…の前に今回 index.php を介してすべてのページを表示している「なんちゃってフレームワーク」なので、それに沿って書いてます。「余計なことすんな！！」と思う方は各自ばらしてご利用ください。
テキトーにディレクトリ作ってその中に index.php を入れます。
<?php
/**
* MICROCMS テスト
*/
define( 'MICROCMS_URL_BLOG', "https://yyyyyy.microcms.io/api/v1/blog" ); // ご自身のURLにしてください
define( 'MICROCMS_API_KEY', "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" ); // ご自身のAPIキーにしてください
// 一覧表示件数 ご自由に
define( 'DISPLAY_CONTENTS_COUNT', 6 );
global $posts; // WordPressのグローバル変数ではないです。
$act = htmlentities( $_GET['act'] );
if ( $act === "" ) { $act = "top"; }
$blog_id = htmlentities( $_GET['id'] );
// curl "https://yyyyyy.microcms.io/api/v1/blog" -H "X-API-KEY: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
$headers = array(
"X-API-KEY: " . MICROCMS_API_KEY,
);
$ch = curl_init();
// blog : curl "https://yyyyyy.microcms.io/api/v1/blog/WymCAd26C" -H "X-API-KEY: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
$opt = "?limit=".DISPLAY_CONTENTS_COUNT."&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;
}
require_once "template-". $act . ".php";
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 で保存してください。
一覧表示部
一覧表示するテンプレートを template-top.php にしました。
<?php
global $posts;
?><!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="index.php?act=blog&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="index.php?act=blog&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="index.php?act=blog&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>大事な部分しか書いてません。
これを template-top.php として保存してください。
サイトの一部に入れる場合はちょっと調整が必要です。
コンテンツページ表示
上記の一覧からクリックした先のページです。
template-blog.php を作ります。
記事の部分だけ…っすね。
<?php
global $posts;
?><!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>template-blog.php として保存します。
階層はこんな感じになる
.
├── index.php
├── template-blog.php
└── template-top.php
あじもそっけもないっすね（笑）
普通に使う場合も次に書いてみます。
