ペンギンスタート

クッキーの保存と表示を行うWordPressカスタムブロックを開発する

2025/05/19

WordPress, ブロック開発

HOME > アーカイブ > WordPress > ブロック開発 > クッキーの保存と表示を行うWordPressカスタムブロックを開発する

クッキーを保存するボタンと、保存したクッキーを表示するボタンを設置し、カスタムブロックからクッキー操作を行います。

コンテンツ

クッキーを操作するメソッドの構文
クッキーを保存するカスタムブロック

クッキーを操作するメソッドの構文

JavaScript でクッキーを保存・設定する

document.cookie = “名前=値; オプション1; オプション2; …”;

document.cookie = “username=chatuser; path=/; max-age=3600”;

username=chatuser：クッキーの名前と値
path=/：このクッキーはサイト全体（/ 以下）で使える
max-age=3600：クッキーの寿命（秒数）※expiresより優先される
expires=日付：クッキーの有効期限（例：expires=Wed, 01 Jan 2030 00:00:00 GMT）
domain=example.com：有効なドメイン範囲（通常は省略可）
secure：HTTPS 通信時のみ送信される（https:// 限定）
SameSite=Lax：クロスサイトでの送信制御：Lax, Strict, None

複数のクッキーを保存・取得

// 保存
document.cookie = "theme=dark; path=/";
document.cookie = "fontSize=14px; path=/";
// 取得
console.log(document.cookie);
// theme=dark; fontSize=14px

クッキーを削除する場合は期限切れにする。

document.cookie = "fontSize=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

クッキーを保存するカスタムブロック

import { useState } from "@wordpress/element";

import "./editor.scss";

export default function Edit() {
	const [cookieValue, setCookieValue] = useState("");

	// クッキーを保存
	const setCookie = () => {
		document.cookie = "username=user12345; path=/; max-age=3600";
		alert("クッキーを保存しました");
	};

	// クッキーを表示
	const showCookie = () => {
		const value = document.cookie;
		setCookieValue(value);
	};

	return (
		<div>
			<h2>クッキー操作ブロック</h2>
			<button onClick={setCookie}>クッキーを保存</button>
			<button onClick={showCookie}>クッキーを表示</button>

			<p>
				<strong>現在のクッキー：</strong>
				{cookieValue}
			</p>
		</div>
	);
}