• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • おすすめテーマ
  • おすすめプラグイン
  • お問い合わせ
FOXWP / お役立ち情報 / メモ / WordPressでショートコードを入れ子にして実行する方法

WordPressでショートコードを入れ子にして実行する方法

2020年8月10日 2020年8月10日

WordPressのショートコードの中で、ショートコードを記述しても、内部にあるショートコードは実行されずそのまま表示される場合があります。

エディターで次のような記載を行なった場合です。

[foo]
  [bar]
[/foo]

これを解決するには、次の2つの方法があります。

  1. 呼び出しもとのショートコードでdo_shortcode()関数を使用する
  2. プラグイン「Outerbridge Nested Shortcodes」を利用する
目次 非表示
1 WordPressでショートコードを入れ子にして実行する2つの方法
1.1 ①呼び出しもとのショートコードでdo_shortcode()関数を使用する
1.2 ②プラグイン「Outerbridge Nested Shortcodes」を利用する

WordPressでショートコードを入れ子にして実行する2つの方法

2つのショートコード

  1. [ul]
  2. [li]

を以下のように定義した場合に

add_shortcode("ul", "ul_func");
function ul_func($atts, $content = null) {
    return '<ul>'. $content .'</ul>';
}

add_shortcode("li", "li_func");
function li_func($atts, $content = null) {
    return '<ul>'. $content .'</ul>';
}

エディターで次の記載を行うと

[ul]
  [li]アイテム1[/li]
  [li]アイテム2[/li]
  [li]アイテム3[/li]
[/ul]

HTML上では、次のような出力になってしまいます。

<ul>
  [li]アイテム1[/li]
  [li]アイテム2[/li]
  [li]アイテム3[/li]
</ul>

しかし、次のようなHTML出力を期待しているはずです。

<ul>
  <li>アイテム1<li>
  <li>アイテム2<li>
  <li>アイテム3<li>
</ul>

これを修正する2つの方法を解説します。

①呼び出しもとのショートコードでdo_shortcode()関数を使用する

呼び出しもとのショートコードの$contentに対して、do_shortcode()関数を使用します。

今回の例では、[li]を呼び出している[ul]の$contentに、do_shortcode()関数を使用します。

add_shortcode("ul", "ul_func");
function ul_func($atts, $content = null) {
    return '<ul>'. do_shortcode($content) .'</ul>';
}

add_shortcode("li", "li_func");
function li_func($atts, $content = null) {
    return '<ul>'. $content .'</ul>';
}

②プラグイン「Outerbridge Nested Shortcodes」を利用する

Outerbridge Nested Shortcodes

Author(s): Outerbridge

Current Version: 1.3

Last Updated: 2020年4月2日

nested-shortcodes.zip

96%Ratings 2,000+Installs WP 4.0+Requires

「Outerbridge Nested Shortcodes」の使い方は簡単です。インストールし、有効化するだけです。

特に難しい設定・操作はありません。

カテゴリー:メモ

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル

おすすめプラグイン

WordPressプラグイン「TablePress」の使い方

WooCommerceの設定方法と使い方

LuckyWP Table of Contentsの使い方と設定方法

【2018年版】コメント機能を改善するおすすめWordPressプラグイン

【2020年版】コメント機能を改善するおすすめWordPressプラグイン

おすすめテーマ

女性向けおしゃれなWordPressブログテーマ特集

【女性向け】おしゃれでかわいいWordPressブログテーマ特集!

おすすめ企業サイト向けWordPressテーマ

さっとクオリティの高い企業サイトを作成できるWordPressテーマ特集

アイキャッチ画像不要のWordPressテーマ

WordPressでアイキャッチ画像を表示したくないならZEROがおすすめ!

ポートフォリオ向けWordPressテーマ

ポートフォリオ向けWordPressテーマ|魅せるギャラリーが簡単にできる

Previous Post: « 【WordPress】ショートコードをPHPファイルで実行する方法
Next Post: WordPressでショートコードがそのまま表示される原因と対処法 »

Primary Sidebar

当サイトの利用テーマ

Genesis Theme Framework for WordPress
詳しく見る

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
詳しく見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

カテゴリー

  • WordPress
    • WordPressのSEO対策
    • WordPressのセキュリティ対策
    • WordPressの使い方
    • エラー・トラブル
    • カスタマイズ
  • WordPressテーマ
    • Divi
    • おすすめテーマ
    • テーマカスタマイズ
  • WordPressプラグイン
    • プラグインカスタマイズ
  • WordPress入門講座
  • WordPress設定関連
  • お役立ち情報
    • メモ
  • アフィリエイト
    • Amazonアフィリエイト
  • ドメインレジストラ
    • お名前.com
  • レンタルサーバー
    • ColorfulBox
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
    • PBN Lab
    • Rank Tracker
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2021 FOXWP All rights reserved.