以下は表示確認用のサンプルです。実際の評価・料金・推薦を示すものではありません。従来の記事本文を変更せずに利用できます。
監修者情報・プロフィール [art_supervisor]
name・title・image・alt・profile_urlを指定します。囲んだ本文は段落として表示します。youtube_url・facebook_urlを指定するとSNSのアイコンリンクを表示します。省略するとアイコンは表示されません。
[art_supervisor name="Hoipoi編集部" title="音楽制作・動画マーケティング編集部" label="監修者情報" image="https://hoipoi.jp/wp-content/plugins/hoipoi-article-shortcodes/assets/hoipoiman.png" alt="ホイポイマン" profile_url="https://hoipoi.jp/editorial-policy/" profile_text="編集方針を見る" youtube_url="https://www.youtube.com/@hoipoi4203" facebook_url="https://www.facebook.com/hoipoi.jp"]
楽曲制作・マスタリング・音楽サブスクを編集部にて実機検証。クリエイター向けの実践的な情報を2020年から発信中
[/art_supervisor]記事の確認情報 [art_meta]
date・checked・research・reviewsで更新日や調査情報を表示します。
[art_meta date="2026.10.10" checked="表示確認用" research="3項目" reviews="2件"]注意・補足ボックス [art_alert]
typeはinfo / good / warn / bad / ai。本文にはstrongなどの簡単なHTMLを使えます。5種類すべての表示とコードを確認できます。
[art_alert type="info"]ここは<strong>補足情報</strong>の表示サンプルです。[/art_alert][art_alert type="good"]ここは<strong>良い点</strong>を伝える表示サンプルです。[/art_alert][art_alert type="warn"]ここは<strong>確認が必要な点</strong>の表示サンプルです。[/art_alert][art_alert type="bad"]ここは<strong>注意したい点</strong>の表示サンプルです。[/art_alert][art_alert type="ai"]ここは<strong>AIに関する補足</strong>の表示サンプルです。[/art_alert]この記事でわかること [art_summary]
1行に1項目ずつ記入します。titleで見出しを変更できます。
- ショートコードの使い方
- 表示と操作の確認方法
[art_summary title="表示サンプルの要点"]
ショートコードの使い方
表示と操作の確認方法
[/art_summary]目次 [art_toc]
1行を「見出し|#見出しID」で記入。指定済みの有効なIDは維持します。6項目以上は展開できます。
[art_toc]
担当者情報|#sample-art_supervisor
更新情報|#sample-art_meta
補足情報|#sample-art_alert
要点|#sample-art_summary
引用|#sample-art_voice
メリット・デメリット|#sample-art_pros_cons
料金カード|#sample-art_plan_card
[/art_toc]引用・コメント [art_voice]
name・role・initialで引用元の表示を指定します。実際の引用は出典と掲載条件を確認してください。
これは表示確認用の文章で、実際の口コミではありません。
[art_voice name="サンプルの引用者" role="表示例" initial="例"]これは表示確認用の文章で、実際の口コミではありません。[/art_voice]メリット・デメリット [art_pros_cons]
pros・consは「|」で項目を区切ります。
- 選択肢を比較しやすい
- 要点をまとめられる
- 条件の確認が必要
- 表示例として使用
[art_pros_cons pros="選択肢を比較しやすい|要点をまとめられる" cons="条件の確認が必要|表示例として使用"]料金プランカード [art_plan_card]
name・tagline・price・price_unit・feats・cta_urlなどを指定。featsは「|」区切りです。
[art_plan_card name="サンプルプラン" tagline="料金表示の確認用" price="1,000" price_unit="円（表示例）" price_sub="実際の販売価格ではありません" feats="サンプル項目1|サンプル項目2" recommended="yes" ribbon="表示サンプル" cta_url="https://hoipoi.jp/contact/" cta_text="問い合わせページへ"]リンクボタン [art_cta]
url・text・noteを指定。元の広告リンク用rel属性も維持します。
[art_cta url="https://hoipoi.jp/contact/" text="お問い合わせを確認" note="表示サンプルです"]グラデーションのリンクボタン [art_cta_active]
url・text・note・externalを指定。白文字のボタンです。サイト内リンクはexternal="no"、外部リンクは指定を省略します。
[art_cta_active url="https://hoipoi.jp/contact/" text="お問い合わせ" note="表示サンプルです" external="no"]FAQ [art_faq]
質問は「Q:」、回答は「A:」で改行して記入します。
[art_faq]
Q:どこにショートコードを書きますか？
A:記事本文のショートコードブロックやテキスト欄に記入します。
Q:テーマを変えても使えますか？
A:このプラグインを有効にしていれば使えます。
[/art_faq]手順 [art_step]
1行を「STEP:タイトル|所要時間|説明」で記入します。
-
コードを選ぶ 約1分
下のコード例を確認します。
-
本文に記入 約1分
記事をプレビューして確認します。
[art_step]
STEP:コードを選ぶ|約1分|下のコード例を確認します。
STEP:本文に記入|約1分|記事をプレビューして確認します。
[/art_step]機能グリッド [art_feat_grid]
1行を「アイコン タイトル|説明」で記入します。
[art_feat_grid]
✓ 表示確認|カードの見た目を確認できます。
♪ 使い方|本文にコードを記入します。
[/art_feat_grid]向いている人・条件 [art_recommend]
yes・noに「|」で区切った項目を指定します。
- 要点を整理したい人
- 比較条件を明示したい人
- 前提条件を省きたい場合
- 表示確認前の公開
[art_recommend yes="要点を整理したい人|比較条件を明示したい人" no="前提条件を省きたい場合|表示確認前の公開"]体験談カード [art_testimonial]
industry・job・size・plan・period・initial・usage（用途）・equipment（使用機材）などのラベルを指定します。
これはカードの表示例で、実際の利用者の体験談ではありません。
[art_testimonial industry="表示サンプル" job="確認担当" plan="サンプル" period="テスト表示" initial="例" usage="表示の確認" equipment="確認用機材"]これはカードの表示例で、実際の利用者の体験談ではありません。[/art_testimonial]強調マーカー [art_highlight]
淡いゴールドの単色マーカーです。type="underline"で下線に切り替えられます。長い文章も自然に折り返します。
大切な条件は契約前に確認しておきましょう。
控えめな強調には下線のマーカーも使えます。
<p>大切な条件は[art_highlight]契約前に確認しておきましょう。[/art_highlight]</p>
<p>控えめな強調には[art_highlight type="underline"]下線のマーカー[/art_highlight]も使えます。</p>出典・参考資料 [art_source]
nameに資料名、urlに参照先を入力します。URLを省略すると紙の資料なども記載できます。dateは確認日（任意）です。
[art_source name="WordPress公式ドキュメント：ショートコード" url="https://developer.wordpress.org/plugins/shortcodes/"]
[art_source name="編集時に参照した紙の資料（入力例）"]確認チェックリスト [art_checklist]
1行に1項目を記入します。表示中にチェックを付けられます。チェック状態は保存されません。titleで見出しを変更できます。
[art_checklist title="相談前に確認すること"]
制作の目的と使用する媒体を整理した
予算と希望する納期を確認した
参考資料と、相談したい内容を用意した
[/art_checklist]比較表 [art_table]
見出し行は「H:」、データ行は「R:」で始め、セルを「|」で区切ります。
表示サンプルの比較表
| 項目 | サンプルA | サンプルB |
|---|---|---|
| 対応例 | ◎ 対応 | ○ 条件付き |
| 補足 | 説明文 | 比較条件を記載 |
すべて表示確認用です
[art_table title="表示サンプルの比較表" caption="すべて表示確認用です" highlight="2"]
H:項目|サンプルA|サンプルB
R:対応例|◎ 対応|○ 条件付き
R:補足|説明文|比較条件を記載
[/art_table]用語・解説リスト [art_deflist]
1行を「項目名|説明文」で記入します。
[art_deflist]
ショートコード|記事本文から装飾を表示するための記法です。
プレビュー|公開前に表示を確認する画面です。
[/art_deflist]筆者ノート [art_balloon]
initial・image・alt・label・captionを指定。画像未指定の場合はinitialを表示します。
ここに筆者の補足や確認した内容を記載します。
[art_balloon initial="例" label="SAMPLE" caption="表示サンプル"]ここに筆者の補足や確認した内容を記載します。[/art_balloon]見出し（h2・h3・h4） HTML
記事本文で使うh2・h3・h4の実際の表示と、HTMLの記入例です。
見出しレベル2の表示例
見出しレベル3の表示例
見出しレベル4の表示例
<h2>見出しレベル2の表示例</h2>
<h3>見出しレベル3の表示例</h3>
<h4>見出しレベル4の表示例</h4>開閉ボックス（旧記事互換） [open]
titleで開閉見出しを指定します。SANGOを外しても本文を表示できます。
補足を開く
[open title="補足を開く"]これは旧記事の開閉ボックスを引き継ぐ表示サンプルです。[/open]箇条書きリスト [list]
順番のない項目はul・liで記入します。titleは省略できます。従来の[list]もそのまま使えます。
確認しておきたいこと
- 目的に合ったサービスを選ぶ
- 料金と利用条件を確認する
- 比較した内容を整理し、必要な情報をそろえてから問い合わせる
[list title="確認しておきたいこと"]
<ul>
<li>目的に合ったサービスを選ぶ</li>
<li><strong>料金と利用条件</strong>を確認する</li>
<li>比較した内容を整理し、必要な情報をそろえてから問い合わせる</li>
</ul>
[/list]番号付きリスト [list]
順番のある項目は同じ[list]の中にol・liで記入します。olのstart属性で開始番号も指定できます。
相談までの流れ
- 制作の目的と希望する内容を整理する
- 参考資料や希望する納期をそろえる
- 問い合わせフォームから相談する
[list title="相談までの流れ"]
<ol>
<li>制作の目的と希望する内容を整理する</li>
<li>参考資料や希望する納期をそろえる</li>
<li>問い合わせフォームから相談する</li>
</ol>
[/list]