web-dev-qa-db-ja.com

ウィジェットからのショートコードは、不要な<p>要素で囲まれています

私は Black Studio TinyMCE Widget をリッチテキストエディタウィジェットとして使用しています。サイドバーに、私は[testimonial]というショートコードとそれ以降の内容を含むTinyMCEウィジェットを挿入しました。

例えば：

[testimonial]

Read more client testimonials (as a link)

そのウィジェットのHTMLタブに切り替えると、次のようになります。

<p>[testimonial]</p>
<p><a title="Testimonials" href="http://mm.dev/testimonials/">Read more client testimonials</a></p>

Shorcodeは単にランダムなTestimonial CPT投稿を表示しています：

add_shortcode("testimonial", "dlma_testimonial_shortcode");
function dlma_testimonial_shortcode($atts, $content = null){
    $args = array(
        'post_type' => 'testimonial',
        'post_status' => 'publish',
        'posts_per_page' => '1',
        'orderby' => 'Rand'
    );
    $testimonial = new WP_Query($args);

    if($testimonial){
        return apply_filters('the_content', $testimonial->posts[0]->post_content);
    }
    return "";
}

しかし、私がページを見たとき、浮いた<p>要素が挿入されています：
Tom J Nowellに感謝します 

<div class="textwidget">
  <p>
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum velit convallis sem pulvinar vitae lobortis metus varius.” <em>Person name, Person job</em></p>
    </blockquote>
  </p>
  <p>
    <a href="http://mysite.com/testimonials/" title="Testimonials">Read more client testimonials</a>
  </p>
</div>

[testimonial]ショートコードは正しく展開されましたが、それはもともとウィジェットの<p>要素にラップされていたため、それはまだラップされているように見えます。ウィジェットのHTMLタブビューから<p>要素を削除しようとしましたが、[保存]ボタンをクリックするたびに<p>要素が再度挿入されます。

以下のように<p>フィルタでショートコードをラップする不要なthe_content要素を削除しようとしました。

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 12);

それはうまくいきませんでした。私はそれがショートコードでウィジェットの内容を処理するという間違った流れを持っていたと思います。私は今とても混乱しています。ショートコードをラップする不要な<p>要素を削除するにはどうすればよいですか？

私はどんな助けにも大いに感謝します！

どうもありがとう。

widgetsfiltersshortcodeformattingwp-autop
2
dashaluna

<p>タグでショートコードをラッピングするWordpressエディタを処理する方法はいくつかあります。

このコードはおそらくそれを行う最も簡単な方法を示しています...あなたが functions.php ファイルに入れる必要がある単純で短い関数です。あなたがそうすれば、あなた自身のライン上にあるあなたのショートコードの周りのこれ以上のタグはもうありません！

function wpex_clean_shortcodes($content){   
$array = array (
    '<p>[' => '[', 
    ']</p>' => ']', 
    ']<br />' => ']'
);
$content = strtr($content, $array);
return $content;
}
add_filter('the_content', 'wpex_clean_shortcodes');

出典： http://www.wpexplorer.com/snippet/clean-wordpress-shortcodes

誰かに役立つことを願っています！

10
Trevor

blockquoteはブロック要素であり、<p>タグの中に置くべきではありません。ブラウザDOMが無効なHTMLマークアップを補おうとしているのが見えます。生成された生のソースコード自体を見ると、それらのあいまいな段落タグは見つかりません。

<p>のラッピングタグを削除し、<p>タグでラッピングする必要があるコンテンツがショートコードの内側にあることを確認します。

https://stackoverflow.com/questions/3428828/p-tag-is-a-block-level-element-in-xhtml

一般的な規則として、<p>要素はブロック要素ですが、ブロック要素を含めることはできず、インライン要素のみを含めるようにします。

例えば。：

  • p要素には、次のものを含めることができます。
    • span
    • b
    • strong
    • 等
  • p要素には、を含めることはできません。
    • div
    • blockquote
    • ul
    • ol
    • h1
    • 等
1
Tom J Nowell

これは、インラインであることを意図している可能性のある他の場所に影響を与えることなく、特定の「ブロックレベル」のショートコードを「p」要素の外側に移動することをお勧めします。

function my_fix_shortcodes($content){  
  if (strpos($content, '<p>') !== false) {
    /* Move 'block level' shortcode tags outside <p> elements by surrounding with </p>...<p>
       If they have content, this will be put inside a new <p>
       - you could use a final regex to remove this if needed... */
    $block_level_shortcodes = array(
      'testimonial',
      'another_shortcode'
    );
    $regex_shortcode = '(' . implode('|', $block_level_shortcodes) . ')';
    // Match opening/standalone or closing shortcode tags
    $regex = '/(\[' . $regex_shortcode . '[^\]]*\]|\[\/' . $regex_shortcode . '\])/';
    $regex_count = 0;
    $content = preg_replace($regex, '</p>$1<p>', $content, -1, $regex_count);
    if ($regex_count > 0) {
      /* Remove <br/>s at start or end of <p> which might now be present,
         then any empty <p>s which quite probably are */
      $content = preg_replace(
        array('/<p>\s*<br *\/>/s', '/<br *\/>\s*<\/p>/s', '/<p>\s*<\/p>/s'),
        array('<p>', '</p>', ''),
        $content
      );                    
    }
  }
  return $content;
}
add_filter('the_content', 'my_fix_shortcodes');

また、WordPress [4.00]自体の中でこの種の問題を解決しようとして失敗した試みがあるように思われるので、あなたのショートコードハンドラは、</p>で始まり<p>で後付けされる$ contentを渡されるかもしれません。検出して削除する必要があります。

更新：WordPress自体の内部では壊れたものがあるようです（<p>と</p>の散発的な追加に関して、最初に述べたように短いコードが含まれている場合、ただしこれらの散発的な要素は渡されません）。これは、たとえ次のようになっていても、この解決策が常にうまくいくとは限らないことを意味します。

0
Jake

これは何年も前から知られている問題です。 Wordpress Ticket をご覧ください。

他の人が前述したように、この問題を修正するためのプラグインがあります。これは " ショートコード空段落修正 "と呼ばれます。それは最善の解決策ではありませんが、それほど悪くありません。

私のWPのインストールに膨大な時間を費やすのは好きではありません - だから私はクラスなしでdivでショートコードをラップし、問題を修正しました。

<div> [woocommerce_cart] </div>

今後数年間で問題が解決されることを願っています;）だから私は私のdivを削除することができます - 私の意見ではより安全な方法です。

0
evavienna