RaraテーマでWordPressショートコードを使用する方法
公開: 2018-12-07WordPressのショートコードは素晴らしいです。 ショートコードを使用してコンテンツをカスタマイズしたり、WordPressWebサイトに特別な機能を追加したりできます。
ショートコードは、WordPressユーザーが毎回長いHTMLまたはCSSコードを記述せずに、WordPress Webサイトで事前定義されたコンテンツスクリプト、関数などをプルできるようにする一意のタグです。
RaraテーマのWordPressテーマには、WordPressコンテンツをより魅力的にするのに役立つ重要なカスタムショートコードが付属しています。 テーマで使用できるショートコードには、グリッドレイアウト、仕切り、間隔、ソーシャルアイコン、召喚状、スライダー、トグル、タブ、リストスタイル、アコーディオン、ドロップキャップなどがあります。
この記事では、各ショートコードの機能とその使用方法について説明します。 ただし、その前に、ショートコードとその一般的な重要性について説明しましょう。
目次
- WordPressショートコードとは何ですか?
- WordPressのテーマとプラグインでショートコードが使用されるのはなぜですか?
- RaraテーマでWordPressショートコードを使用する方法
- グリッドレイアウトのショートコード
- 仕切りのショートコード
- 間隔のショートコード
- ソーシャルアイコンのショートコード
- 召喚状のショートコード
- スライダーショートコード
- ショートコードを切り替えます
- タブショートコード
- リストスタイルのショートコード
- アコーディオンショートコード
- ドロップキャップショートコード
- 結論
WordPressショートコードとは何ですか?
WordPress Shortcodeは、Webサイトで専用のタスクを実行するコードです。
これらのコードは非常に用途が広く、投稿、ページ、ウィジェット領域など、Webサイトのどこにでも挿入できます。 たとえば、ショートコードを使用して、テキストのスタイルを編集したり、ギャラリーを表示したり、目次を挿入したりすることができます。
ほとんどのテーマとプラグインには、独自のショートコードのセットが組み込まれています。 これらのショートコードを使用すると、機能を拡張することで、テーマやプラグインをさらに活用できます。
WordPressのテーマとプラグインでショートコードが使用されるのはなぜですか?
WordPressのショートコードは、サイトのカスタマイズを便利にするために、テーマやプラグインの開発者によってよく使用されます。
ショートコードは非常に柔軟性があり、ユーザーは複雑なコードを記述せずにさまざまな機能を実装できます。 さらに、ショートコードを使用すると、開発者はWebサイトのレイアウト、デザイン、および機能をユーザーに制御できます。
さまざまなテーマとプラグインがショートコードに依存しており、Webサイトに魅力的なルックアンドフィールを提供します。 Rara Themeによって開発されたほとんどのテーマには、適切な形式のコンテンツを作成するのに役立つショートコードが組み込まれています。
RaraテーマでWordPressショートコードを使用する方法
私たちのテーマには、投稿やページに簡単に実装できるショートコードが組み込まれています。 テーマに組み込まれているショートコードを使用して、レイアウトを変更したり、Webサイトの投稿やページにさまざまな要素を追加したりできます。
Raraテーマのショートコードを使用するには、次の手順に従ってください。
- WordPress管理パネルにログインします
- ページ/投稿に移動
- [新規追加]をクリックします
- ショートコードをクリックします

選択したショートコードを選択して、投稿で使用できます。
RaraテーマのWordPressテーマで利用可能な各ショートコードの機能とその使用方法を以下に説明します。
グリッドレイアウトのショートコード
このショートコードを使用して、投稿/ページのコンテンツをグリッドレイアウトで表示できます。
グリッドレイアウトのショートコードのデモンストレーションを以下に示します。
- 投稿/ページエディタで、[ショートコード]をクリックし、[グリッドレイアウト]を選択します

- 表示する列数を選択します
- すべての列の幅を選択します

- コンテンツに追加されたコードがいくつか表示されます。

- 「列(1,2,3…)のテキストを入力してください」を、以下のように目的のテキストに置き換えます

- [公開]をクリックします。
あなたはあなたの投稿/ページで次の結果を期待するべきです。

仕切りのショートコード
このショートコードを使用して、段落間に分割線を追加できます。 また、仕切り線のカスタムスタイル、太さ、幅、マージンを維持できます。
Dividerショートコードのデモンストレーションを以下に示します。
- 投稿/ページエディタで、Dividerを表示するコンテンツ領域に移動します
- ショートコードをクリックして、 Dividerを選択します

- 境界線の色、境界線のスタイル、境界線の太さ、境界線の幅、上部の間隔、下部の間隔を入力します

- [ OK]をクリックします。 コンテンツに追加されたコードがいくつか表示されます。

- [公開]をクリックします
あなたはあなたの投稿/ページで次の結果を期待するべきです。

間隔のショートコード
間隔のショートコードは、テキスト/段落の間に余分なスペースを追加するために使用されます。
Spacingショートコードのデモンストレーションを以下に示します。
- 投稿/ページエディタで、余分なスペースを表示するコンテンツの領域に移動します。
- ショートコードをクリックして、間隔を選択します

- 必要なスペースをpxで入力してください

- [ OK]をクリックします。 コンテンツに追加されたコードがいくつか表示されます。

- [公開]をクリックします
あなたはあなたの投稿/ページで次の結果を期待するべきです。

ソーシャルアイコンのショートコード
ソーシャルアイコンのショートコードを使用して、Webサイトの投稿/ページのコンテンツ内にソーシャルアイコンとそのリンクを表示できます。
ソーシャルアイコンのショートコードのデモンストレーションを以下に示します。
- 投稿/ページエディタで、ソーシャルアイコンを表示するコンテンツの領域に移動します。
- ショートコードをクリックしてソーシャルアイコンを選択

- ソーシャルアイコンのリンクを入力してください

- [ OK]をクリックします。 コンテンツに追加されたコードがいくつか表示されます。

- [公開]をクリックします
あなたはあなたの投稿/ページで次の結果を期待するべきです。

召喚状のショートコード
このショートコードを使用して、Webサイトの投稿/ページのコンテンツ内に召喚ボタンを表示できます。
召喚状のショートコードのデモンストレーションを以下に示します。
- 投稿/ページエディタで、召喚状を表示するコンテンツの領域に移動します。
- ショートコードをクリックして、召喚状を選択します

- 召喚状のタイトル、説明、ボタンのテキスト、ボタンのURLを入力します
- [リンクを開く]タブと[ボタンの配置]を選択します

- [ OK]をクリックします。 コンテンツに追加されたコードがいくつか表示されます。

- [公開]をクリックします
あなたはあなたの投稿/ページで次の結果を期待するべきです。


スライダーショートコード
このショートコードを使用して、Webサイトの投稿/ページのコンテンツ内に召喚状ボタンを表示できます。
召喚状のショートコードのデモンストレーションを以下に示します。
- 投稿/ページエディタで、スライダーを表示するコンテンツの領域に移動します。
- ショートコードをクリックしてスライダーを選択

- 画像数を入力してください
- [キャプションを表示]、[画像をURLにリンク]、[リンクを開く]のオプションを同じタブまたは別のタブで選択します。

- コンテンツに追加されたコードがいくつか表示されます。 以下に示すように、スライダーコンテンツのキャプションテキスト、リンク、および画像のURLを入力します。

- [公開]をクリックします
あなたはあなたの投稿/ページで次の結果を期待するべきです。

ショートコードを切り替えます
このショートコードを使用して、Webサイトの投稿/ページのコンテンツ内にトグルを表示できます。
Toggleショートコードのデモンストレーションを以下に示します。
- 投稿/ページエディタで、トグルを表示するコンテンツの領域に移動します。
- ショートコードをクリックして、[切り替え]を選択します

- 見出しと詳細を入力します。 トグルを開く/閉じるとして表示するかどうかを選択します。 [開く]を選択すると、デフォルトでトグルが開きます。

- [ OK]をクリックします。 コンテンツに追加されたコードがいくつか表示されます。

- [公開]をクリックします
あなたはあなたの投稿/ページで次の結果を期待するべきです。

タブショートコード
このショートコードを使用して、Webサイトの投稿/ページのコンテンツ内にタブを表示できます。
タブショートコードのデモンストレーションを以下に示します。
- 投稿/ページエディタで、タブを表示するコンテンツの領域に移動します。
- ショートコードをクリックしてタブを選択します

- タブの数とタブの配置を入力します。 [キャプションを表示する]オプションを選択します。

- [ OK]をクリックします。 コンテンツに追加されたコードがいくつか表示されます。

- [公開]をクリックします
あなたはあなたの投稿/ページで次の結果を期待するべきです。

リストスタイルのショートコード
このショートコードを使用して、Webサイトの投稿/ページのコンテンツ内にリストを表示できます。
リストスタイルのショートコードのデモンストレーションを以下に示します。
- 投稿/ページエディタで、リストを表示するコンテンツの領域に移動します。
- ショートコードをクリックして、リストスタイルを選択します

- 表示するリストアイテムの数を入力します。 リストアイコンを選択します

- [ OK]をクリックします。 コンテンツに追加されたコードがいくつか表示されます。

- [公開]をクリックします
あなたはあなたの投稿/ページで次の結果を期待するべきです。

アコーディオンショートコード
このショートコードを使用して、Webサイトの投稿/ページのコンテンツ内にアコーディオンを表示できます。
アコーディオンショートコードのデモンストレーションを以下に示します。
- 投稿/ページエディタで、アコーディオンを表示するコンテンツの領域に移動します。
- ショートコードをクリックして、アコーディオンを選択します

- 表示したいアコーディオンの数を入力してください

- [ OK]をクリックします。 コンテンツに追加されたコードがいくつか表示されます。 アコーディオンのタイトルと内容を入力してください

- [公開]をクリックします
あなたはあなたの投稿/ページで次の結果を期待するべきです。

ドロップキャップショートコード
このショートコードを使用して、Webサイトの投稿/ページのコンテンツ内にドロップキャップテキストを表示できます。 ドロップキャップは、特定の文字を大きくするのに役立ちます。
ドロップキャップショートコードのデモンストレーションを以下に示します。
- 投稿/ページエディタで、ドロップキャップを表示するコンテンツの領域に移動します。
- ショートコードをクリックして、ドロップキャップを選択します

- フォントサイズを選択し、ドロップキャップ文字を入力します

- [ OK]をクリックします。 コンテンツに追加されたコードがいくつか表示されます。

- [公開]をクリックします
あなたはあなたの投稿/ページで次の結果を期待するべきです。

結論
これらは、Raraテーマのテーマで使用可能なショートコードです。 それでも混乱したり、ショートコードを使用できない場合は、サポートチームにお問い合わせください。