テーマ専用ショートコードを使う

WordPressテーマ
ご注意

WordPress 5.0以降の投稿画面の新エディタ「Gutenberg」ではテーマ専用ショートコードをご利用頂くことができません。
WordPress公式プラグイン「Classic Editor」をインストールすることでテーマ専用ショートコードをご利用頂けます。

WordPress5.0以降でClassic Editor(旧エディタ)を使う方法

ショートコードとは

ショートコードとはWordPressでページを投稿する際に利用できるマクロ機能です。
HTMLやPHPなどの長く複雑なコードもショートコードが事前に設定してあれば、記事を投稿する際には短く簡単なコード(ショートコード)を記述するだけで自動的に変換されます。

例えば、このようなモーダルウィンドウを設置するためには

タイトル

通常は以下のような長いHTMLコードを記述する必要があります。

<a class="waves-effect waves-light btn modal-trigger" href="#modal-ID">タイトル</a>
<div id="modal-ID" class="modal">
  <div class="modal-content">
    <h2>タイトル</h2>
    <p>コンテンツ</p>
  </div>
  <div class="modal-footer">
     <a href="#" class="waves-effect waves-green btn modal-action modal-close">確認</a>
  </div>
</div>

しかし、ショートコードを使えば簡単に記述することが可能です。

[modal title='タイトル' close='確認' id='modal-ID'] コンテンツ [/modal]

最初からショートコードが用意されているWordPressテーマはほとんどありません。通常、ショートコードを使う際にはプラグインを利用するか、 テーマフォルダ内のfunctions.phpを編集して独自のショートコードを追加して利用します。

しかし、プラグインは海外製のものが多く設定も英語で解りにくい場合が少なくありません。 また、自分でテーマフォルダ内のfunctions.php を編集する場合には相当の知識がないと設定が難しく、間違った設定をすると最悪テーマそのものが動かなくなってしまう場合さえあります。

Dolce & VivaceのWordPressテーマは、HTMLやPHPなどの知識がない方がプラグインを使わなくてもWordPressをもっと便利に扱えるよう、 テーマ専用のショートコードをたくさんご用意しています。 フォントの色やサイズ、よく使うリストや表、さらにはデザイン性の高いLightboxやモーダルウィンドウなどを投稿画面から簡単に呼び出して使うことができます。

自分で独自のショートコードを設定したい!というWordPress上級者の方は 【 WordPress上級者向け設定 】 にてテーマ専用のショートコードを無効にすることで、プラグインや独自のショートコードと競合せずにテーマをご利用頂けます。

テーマ専用ショートコードの使い方

テーマを適用すると自動的に専用ショートコードが有効になっていますので、設定等は必要ありません。
記事に画像を入れるのと同じ感覚で、投稿画面のドロップダウンから目的のショートコードを選択するだけで簡単に挿入して頂けます。


挿入されたショートコードのデフォルトのテキストや数字を必要に応じて書き換えて下さい。
各テーマ専用ショートコードの見本やテキストや数字の変更方法については下記のページを参考にして下さい。

【 ショートコード一覧 】


HINT

テーマ専用ショートコードを利用する際には「テキストエディタ」を利用して下さい。
「ビジュアルエディタ」でショートコードを挿入すると表示が崩れる場合があります。
*「テキストエディタ」や「ビジュアルエディタ」等のWordPress本体の利用方法についてはサポート対象外となります。

意図しない改行でショートコードを使ったコンテンツの表示が崩れる場合

WordPressでは初期状態で自動整形機能(auto paragraph) が有効になっており、<br>や<p>などの改行タグが自動的に挿入されます。
自動整形機能によりショートコード内のコンテンツに改行が入ることで表示が崩れる場合があります。

Dolce & VivaceのWordPressテーマはプラグインを導入することなく、管理画面のテーマオプションでWordPressの自動整形機能を無効にすることができます。 詳しい設定方法は下記のページを参考にして下さい。
自動整形機能はWordPress本体の機能/設定であり、サポートの対象外となりますのでお問い合わせやご質問には対応致しかねますので予めご了承下さい。

テーマオプション – WordPress上級者向け設定

ご注意

テーマ専用ショートコードはDolce & VivaceのWordPressテーマでのみ利用可能です。
また、他のショートコードプラグインを使用している場合には設定が競合してしまう可能性があります。その際にはWordpress(ワードプレス)管理画面のテーマオプションでテーマ専用のショートコードを無効にして下さい。