ヘッドレスじゃなくてヘッドフォンや！

microCMSの使い方ですが…

まずは、microCMSのアカウントを登録してください！

https://microcms.io/

登録したら下記の順番で使えるところまで持っていきます。

  1. API設定で項目を作る
  2. コンテンツを作る
  3. PHPで呼び出して表示するテンプレートを作る
  4. 画面プレビューしてみる
  5. 公開する
  6. サイトで確認する

microCMS 側のフィールド作成

microCMS 側にフィールドを作ってみます。

まず、API設定にアクセスします。

API基本設定

API名とエンドポイントを設定します。

API名は「ブログ」にして
エンドポイントは「blog」にしました。

API名

で、「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でプレビューできる。

すごいっすね。アイディア賞ですね。

画面プレビューボタンはこちら

とりあえず一覧表示してみる

今回作ったサンプルでトップページの「事例紹介」にある一覧がそうです。

https://zti.jp/microcms/

ここの表示部分の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

あじもそっけもないっすね（笑）

普通に使う場合も次に書いてみます。

次のページでは「ページの一部として表示する方法」を書いています。記事一覧を部分的に表示できます。

この記事が気に入ったら
いいね ! しよう

シェアする
ツイートする
Twitter で