![フリーランス主夫が開発・販売するWordPressテーマでつかえるオリジナルブロック「ショートコードプレビュー」](https://huntoshuhu.com/wp-content/uploads/2023/11/shortcode_preview_thumbnail728.gif)
フリーランス主夫が開発・販売するWordPressテーマのオリジナルブロック「ショートコードプレビュー」を活用すればブロックエディターでショートコードの反映状況が確認できます。
オリジナルブロック「ショートコードプレビュー」
![当サイトの運営責任者。40代前半フリーランス主夫](https://huntoshuhu.com/wp-content/uploads/2023/05/hukidashi_kaiwa_icon_sample.png)
僕が開発・販売するWordPressテーマのオリジナルブロック「ショートコードプレビュー」を活用すればブロックエディターに挿入したショートコードの反映結果をプレビューできます。
ショートコードプレビュー
上下の余白 | px(ピクセル)単位で変更可能 |
横幅 | %で変更可能 |
オリジナルブロック「ショートコードプレビュー」にContact Form 7で作成した注文フォームのショートコードを設定
オリジナルブロック「ショートコードプレビュー」の設定方法
![当サイトの運営責任者。40代前半フリーランス主夫](https://huntoshuhu.com/wp-content/uploads/2023/05/hukidashi_kaiwa_icon_sample.png)
マウス操作だけで簡単にショートコードプレビューを設定できます!こちらでは設定方法を解説します。
STEP 1 ショートコードプレビューを呼び出す ブロックエディターの挿入したいところに「ショートコードプレビュー」を呼び出します
![フリーランス主夫が開発・販売するWordPressテーマでつかえるオリジナルブロック「ショートコードプレビュー」の設定方法。STEP.1](https://huntoshuhu.com/wp-content/uploads/2023/11/shortcode_preview_thumbnail1_728.gif)
- 「ブロックを追加」を選択
- オリジナルブロックの「ショートコードプレビュー」を選択
STEP 2 見出しを入力しカスタマイズ 見出しテキストを入力しカスタマイズ項目を選択
![フリーランス主夫が開発・販売するWordPressテーマでつかえるオリジナルブロック「ショートコードプレビュー」の設定方法。STEP.2](https://huntoshuhu.com/wp-content/uploads/2023/11/shortcode_preview_thumbnail2_728.gif)
- ポップアップの入力フォームにショートコードを入力
- 上下余白・横幅を設定
- ショートコードのコンテンツがブロックエディターに反映
![当サイトの運営責任者。40代前半フリーランス主夫](https://huntoshuhu.com/wp-content/uploads/2023/05/hukidashi_kaiwa_icon_sample.png)
全てマウス操作だけで設定できました!
WordPressテーマのオリジナルブロック
![当サイトの運営責任者。40代前半フリーランス主夫](https://huntoshuhu.com/wp-content/uploads/2023/05/hukidashi_kaiwa_icon_sample.png)
ぼくが開発・販売するWordPressテーマには、今回紹介した「ショートコードプレビュー」の他にもコンテンツの作成をサポートするオリジナルロックが多数あります!