WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。
OpenSeaには魅力的なNFTアート作品がたくさんありますよね。最近はNFT関連のWebメディアも色々と立ち上がっているので嬉しい限りです。実はOpenSeaには作品を貼るためのカード表示のコードが用意されています。ウェブサイト内に専用コードを貼ることで指定したNFT作品の見た目を自動で整えることができます。
Classic EditorをOpenSeaのカード表示に対応させる便利なプラグイン「WP NFT Card Tag TinyMCE」
まずは実際に貼り付けた状態をご確認くださいませ。下記がスクリーンショット。
OpenSeaでは各詳細ページの「Share」に「Embed Asset」という機能があります。
Embed Assetにコピペ用の専用コードがあります。記事内に貼り付けるとカードが表示される仕組みですね。
ただ、ワードプレスのクラシックエディターでは入力モードを「ビジュアル」へ切り替えるとタグが消えます。
カンタンに言えばエディター内の自動補完が勝手に動くからです。以下の通り「ビジュアルモードからテキストモードに切り替えると必要なタグがなくなっている」ことが確認できます。もしテキストモードしか使っていなければ特に問題はありませんがビジュアルモードへ戻すたびに必要なタグが削除されるのも不便ですよね。
以下の通り「scriptタグ」しか残りません。もちろん、安全性を考慮した結果。個別対策する必要があります。
当然、必要なタグが足りていない状態なのでウェブサイト側にカードでの表示はできません。そこでプラグイン「WP NFT Card Tag TinyMCE」が役に立ちます。インストールするだけで使えるので超カンタン。
プラグインを有効化すればOK
以下が実際のEmbed codeです。
<nft-card contractAddress="0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb" tokenId="7804"> </nft-card> <script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>指定タグは作品ページから取得すればOK。専用タグは「テキストモード」にしてから貼り付けてください。プラグインを有効にした状態では貼り付け後に「ビジュアルモード」へ切り替えてもタグが消えません。
カードを表示した状態が下記です。しっかりボタンが押せるようになっていますね。
まとめ
本日は「ワードプレスのクラシックエディターでOpenSeaのカード表示に対応する方法」を解説いたしました。
プラグインのダウンロードはいつも通りデータをまとめていますので最下部からご確認くださいませ。プラグインを有効化するだけで使用できる状態にしているので誰でも手軽に導入できます。
ワードプレスで運営中のウェブサイト内にOpenSeaのカード表示を取り入れたい方はぜひご活用ください。
補足
ちなみにプラグインを有効化する手順は別の記事でまとめていますので併せてご参考いただけますと幸いです。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
