2026年8月28日

WordPressでNFTギャラリーを構築する方法（データ取得・表示・安全対策）

カスタマイズ

WordPressでNFTギャラリーを作る場合、やることは「公開されているブロックチェーン上のデータを読み取り、作品の画像と情報を表示する」だけです。表示のためにウォレット接続や署名、秘密鍵は一切いりません。この記事では、NFTのデータがどこにあるのか、データ提供APIを使う方法とJavaScriptライブラリで直接読む方法、WordPressでの安全な表示コード、IPFS画像の注意点、著作権とセキュリティの考え方までを技術面に絞って説明します。売買や価格、投資の話は扱いません。

NFTのデータはどこにあるのか

ギャラリーを作る前に、表示する情報がどこにあるかを押さえておくと、つまずく場所が分かりやすくなります。

Ethereumや、Ethereum互換（EVM互換）のチェーンで一般的なNFTは、ERC-721やERC-1155という規格に沿ったスマートコントラクトとして発行されています。コントラクトが持っているのは、主に「どのトークンIDを誰が持っているか」と「メタデータの置き場所（URI）」です。ERC-721なら tokenURI(tokenId)、ERC-1155なら uri(id) という読み取り用の関数でURIを取得できます。

そのURIの先にあるのがメタデータのJSONで、作品名（name）、説明（description）、画像のURL（image）などが入っています。画像そのものはチェーン上ではなく、IPFSや通常のWebサーバーに置かれていることがほとんどです。

つまり、ギャラリーの表示は次の3段階になります。

表示したいトークン（コントラクトアドレスとトークンID）を決める、または所有者アドレスから一覧を取得する
各トークンのメタデータを取得する
メタデータの画像と作品名を表示する

データの取得方法は2通り

NFTデータ提供APIを使う

NFTのデータを整理して提供しているAPIサービスがいくつかあります。所有者アドレスを渡すと保有トークンの一覧とメタデータをまとめて返してくれるものが多く、ギャラリー用途ではいちばん手軽です。提供会社、対応チェーン、無料枠、APIの仕様は変わることがあるため、採用前に各社の公式ドキュメントで最新の情報を確認してください（2026年10月現在）。

この方式では、APIキーをサーバー側に置き、WordPressからAPIを呼び、結果をキャッシュして表示します。ブラウザからAPIを直接呼ぶとキーが丸見えになるため、サーバー経由にするのが基本です。

JavaScriptライブラリでチェーンを直接読む

ethers.js や viem といったライブラリを使えば、ブラウザからRPCノードに接続し、コントラクトの tokenURI() を直接呼べます。外部APIに頼らずに済む反面、「あるアドレスが持っているNFTの一覧」を取り出すのは簡単ではありません。一覧取得の機能（ERC-721の列挙拡張）は任意の仕様で、実装していないコントラクトも多いためです。表示するトークンIDが決まっている展示（自分の作品だけ、など）に向いています。

// ethers.js v6 のESM版を自サイトに置いて読み込む例（RPCのURLはダミー）
import { JsonRpcProvider, Contract } from './ethers.min.js';

const provider = new JsonRpcProvider('https://rpc.example.com');
const abi = ['function tokenURI(uint256 tokenId) view returns (string)'];
const nft = new Contract('0xYourContractAddress', abi, provider);

const uri = await nft.tokenURI(1n); // 読み取りのみ。署名やガス代は発生しない

import を使うスクリプトはモジュールとして読み込む必要があります。WordPress 6.5以降では wp_enqueue_script_module() でモジュールを登録できるので、<script> タグを直接テーマに書かずにこの関数を使います。読み取り専用の呼び出しなので、ウォレットは必要ありません。ただし、RPCサービスのURLにAPIキーが含まれる場合はブラウザから見えるため、提供元の管理画面で利用できるドメインを制限しておきます。

WordPressでギャラリーを表示するコード

ここでは、データ提供APIを使い、ショートコード [nft_gallery owner="0x..."] でギャラリーを表示する例を示します。APIのURLとレスポンスの形はダミーなので、実際に使うサービスの仕様に合わせて書き換えてください。APIキーは wp-config.php に定数として置き、コードやデータベースに直接書かないようにします。

// wp-config.php に追加（値はダミー）
define( 'MYNFT_API_KEY', 'your-api-key' );

<?php
// 自作プラグインまたは子テーマの functions.php に追加
function mynft_safe_image_url( $uri ) {
	$uri = trim( (string) $uri );
	if ( 0 === strpos( $uri, 'ipfs://' ) ) {
		// 公開ゲートウェイは速度や回数制限があるため、本番では提供元の推奨に従う
		$uri = 'https://ipfs.io/ipfs/' . substr( $uri, 7 );
	}
	return ( 0 === strpos( $uri, 'https://' ) ) ? $uri : '';
}

function mynft_fetch_items( $owner ) {
	if ( ! preg_match( '/^0x[a-fA-F0-9]{40}$/', $owner ) ) {
		return new WP_Error( 'mynft_bad_address', 'Invalid address.' );
	}

	$cache_key = 'mynft_' . md5( strtolower( $owner ) );
	$cached    = get_transient( $cache_key );
	if ( false !== $cached ) {
		return $cached;
	}

	$url = add_query_arg( array( 'owner' => $owner ), 'https://api.example-nft-provider.com/v1/nfts' );
	$res = wp_remote_get(
		$url,
		array(
			'timeout' => 10,
			'headers' => array( 'X-API-Key' => MYNFT_API_KEY ),
		)
	);
	if ( is_wp_error( $res ) || 200 !== wp_remote_retrieve_response_code( $res ) ) {
		return new WP_Error( 'mynft_api_error', 'API request failed.' );
	}

	$data  = json_decode( wp_remote_retrieve_body( $res ), true );
	$items = array();
	foreach ( (array) ( $data['items'] ?? array() ) as $nft ) {
		$items[] = array(
			'name'  => (string) ( $nft['name'] ?? '' ),
			'image' => mynft_safe_image_url( $nft['image'] ?? '' ),
		);
	}

	set_transient( $cache_key, $items, 10 * MINUTE_IN_SECONDS ); // 10分キャッシュ
	return $items;
}

add_shortcode( 'nft_gallery', function ( $atts ) {
	$atts  = shortcode_atts( array( 'owner' => '' ), $atts, 'nft_gallery' );
	$items = mynft_fetch_items( $atts['owner'] );
	if ( is_wp_error( $items ) || empty( $items ) ) {
		return '<p>作品を読み込めませんでした。</p>';
	}

	$html = '<ul class="nft-gallery">';
	foreach ( $items as $item ) {
		if ( '' === $item['image'] ) {
			continue;
		}
		$html .= sprintf(
			'<li><img src="%s" alt="%s" loading="lazy"><span>%s</span></li>',
			esc_url( $item['image'] ),
			esc_attr( $item['name'] ),
			esc_html( $item['name'] )
		);
	}
	return $html . '</ul>';
} );

ポイントは3つです。1つ目は、アドレスの形式を正規表現で確かめてから外部に問い合わせていることです。2つ目は、トランジェントでキャッシュし、ページを開くたびにAPIを呼ばないようにしていることです。無料枠の回数制限を超えにくくなり、表示も速くなります。3つ目は、メタデータの中身を信用せず、作品名は esc_html()、画像URLは https:// に限定したうえで esc_url() で出力していることです。メタデータは発行者が自由に書けるため、HTMLやスクリプトが仕込まれている可能性を前提にします。SVGやHTML形式の作品を <img> 以外の方法でページに直接埋め込むのも避けてください。

表示されないときは、まずショートコードに渡したアドレス、次に wp-content/debug.log（WP_DEBUG_LOG を有効にした場合）でAPIエラーが出ていないかを確認します。キャッシュが残っていると修正が反映されないため、テスト中はキャッシュ時間を短くするか、トランジェントを削除してから確かめます。

画像の置き場所とIPFSの注意点

NFTの画像は ipfs:// で始まるURIで指定されていることがよくあります。ブラウザはこの形式を直接表示できないため、上のコードのようにHTTPSのゲートウェイURLに変換します。このとき次の点に気を付けてください。

公開ゲートウェイは遅かったり、アクセス回数を制限されたりすることがある。継続して表示するなら、専用ゲートウェイやピン留めサービスの利用を検討する
ipfs://ipfs/... のように書き方が揺れているメタデータもあるため、変換処理はデータを見ながら調整する
IPFS上のデータは、誰もピン留めしていなければ取得できなくなることがある
通常のWebサーバーに画像が置かれている場合は、発行者側の都合でURLが変わったり、内容が差し替えられたりする可能性がある

表示速度のために画像を自分のサーバーへコピーしたくなりますが、それは作品の複製にあたります。次の著作権の項目を確認してからにしてください。

著作権とライセンスの考え方

NFTを持っていることと、作品の著作権を持っていることは別の話です。多くの場合、NFTの所有者が得るのはトークンそのものであり、作品をどこまで使えるかはコレクションごとに定められた利用条件によって決まります。商用利用を広く認めるもの、個人的な展示だけを認めるもの、条件が明記されていないものなど、さまざまです。

ギャラリーを公開する際は、次の点を確認してください。

自分が制作した作品か、作者から掲載の許可を得た作品を中心にする
他者の作品を掲載する場合は、コレクションの利用条件を読み、作者名や出典を明記する
画像の複製保存や加工は、利用条件で認められている範囲にとどめる
権利者から削除依頼があった場合の連絡先と対応方法を決めておく

判断に迷う場合や商用で運用する場合は、著作権に詳しい専門家に相談してください。

セキュリティ上の注意

ギャラリーの表示は読み取りだけで完結します。訪問者にウォレット接続や署名を求める必要はなく、求めないほうが安全です。

秘密鍵やシードフレーズ（復元用の単語列）を、wp-config.php、データベース、プラグインの設定欄などWordPressのどこにも保存しない
「秘密鍵を入力すると自動で同期します」といった機能をうたうプラグインやサービスは使わない
管理画面が乗っ取られると、偽の「ウォレット接続」ボタンや不正な署名要求を出すスクリプトを仕込まれるおそれがある。管理者アカウントの二段階認証、プラグインの最小化、更新の継続で入口を減らす
外部から読み込むスクリプトは必要なものだけにし、Content-Security-Policy で読み込み元を制限する

NFTの販売や交換をサイトで扱う場合は、法令や税務の論点が出てきます。事業として行う場合は、弁護士や税理士などの専門家に事前に相談してください。

まとめ

NFTギャラリーは、コントラクトのメタデータURIをたどって画像と作品名を表示する読み取り専用の仕組みで作れる
所有者ごとの一覧が必要ならデータ提供API、表示するトークンが決まっているなら ethers.js や viem での直接読み取りが向いている
APIキーはサーバー側に置き、結果はトランジェントでキャッシュし、メタデータはエスケープしてから出力する
IPFSの画像はゲートウェイの速度や可用性に左右されるため、表示できないときの扱いも決めておく
NFTの所有と著作権は別。掲載は利用条件と作者の許可を確認し、秘密鍵はWordPressに一切置かない