web-dev-qa-db-ja.com

画像を保持するすべての段落にクラスを適用しますか？

画像をページまたは投稿に追加するとき、Wordpressは画像を保持する親として段落タグ<p>を自動的に追加します。そのようです：

<p><img src="my-image.jpg" alt=""></p>

CSSには親セレクタがないので、実際の画像を保持している段落に特定のクラス名を適用するための解決策を見つけたいと思います。したがって、上記の例では次のようになります。

<p class="my-class"><img src="my-image.jpg" alt=""></p>

イメージを保持している各pにクラス名を適用するためにadd_filter()を使用することができるというアイデアは何ですか？

phpfunctionsfilters
7
mathiregister

クラスを追加するためにJavaScriptに頼らなくてもよい場合は、jQueryを使用できます。

$(document).ready(function() {
    $('p:has(img)').addClass('image');
});

更新：.has()メソッドはおそらくもっと速いです、これを見てください jsperf.com test 。

$(document).ready(function() {
    $('p').has('img').addClass('image');
});
7
Geert

これがPHP解決策である必要がある場合。あなたは 'the_content'フィルタを使ってこのようなことをすることができます。これにより、Wordpressが投稿コンテンツを印刷するときに画像タグのみをラップする段落に、クラス名 "content-img-wrap"が追加されます。したがって、これは段落をイメージとスパンでラップしません。それがあなたが探しているものであれば、updateを見てください。

add_filter( 'the_content', 'img_p_class_content_filter' ,20);
function img_p_class_content_filter($content) {
    // assuming you have created a page/post entitled 'debug'
    $content = preg_replace("/(<p)(>[^<]*<img[^>]+>[^<]*)(<\/p>)/i", "\$1 class='content-img-wrap'\$2\$3", $content);

    return $content;
}

**以下のアップデート：より柔軟なラップの必要性に応えて。この正規表現を作成し、3つの自動的に折り返された段落（つまり、WPのpタグを追加していないことを意味する）に対して、投稿の最後に画像を付けてテストしました。それらはそれぞれ、ありそうなケースと柔軟性をテストするためのいくつかのランダムなタグとキャリッジリターンも含んでいました。アイデアは、<img>の後には何も一致させる必要がないということです。それから私達は私達のカスタムクラスを追加します。

function img_p_class_content_filter($content) {
    // assuming you have created a page/post entitled 'debug'
    $content = preg_replace("/(<p[^>]*)(\>.*)(\<img.*)(<\/p>)/im", "\$1 class='content-img-wrap'\$2\$3\$4", $content);

    return $content;
}
11
OnethingSimple

フロントエンドをできるだけリーンにしたいので、PHPソリューションが必要だと述べていますが...

個人的には、楽しみのためにこれにかなりの時間を費やし、正規表現のマッチングを破る方法を考え出し続けました（したがって、特別に設計されたライブラリアドオンなしでPHPを使用しないのはなぜですか？上記のリンクで述べたように、HTMLをトラバースします）...

例えば： 

このスクリーンショットのルールは、<p>または<P >にも一致します（最も単純な一致、すでにクラスを持っているかクラスを持たない他の属性を持っているPタグをまだ試していません）が、終了タグのブロック全体で一致します（HTMLのPHP正規表現は継ぎ目でバラバラになります）...矢印は、終了Pタグと開始Pタグが同じ行にある場所を指します。これをFINDとしてカウントし、<pを<p class="my-class"に置き換えると、間違った段落にmy-classを追加することになります。

このような「すべてのシナリオ」のユースケースが必要ない場合は、正規表現を使用して実行できます。スコープを少し狭めた場合。

範囲を制限することにした場合、次の情報に興味があるかもしれません。

    From wp-includes/default-filters.php
    these run on the_content with default priority (10):
        wptexturize
        convert_smilies
        convert_chars
        wpautop
        shortcode_unautop
        prepend_attachment
    shortcode renders may add new paragraphs and/or new images
        do_shortcode runs on the_content priority 11 so we hook in afterwards so $content already has shortcodes rendered
*/
add_filter('the_content', 'se_16033', 15); //a priority higher than 11

（jQuery経由ではなく）この複雑なルートを強制する場合の開始コードは次のとおりです。

    function se_16033($content) {
    if( !is_singular() || !is_main_query() //https://pippinsplugins.com/playing-Nice-with-the-content-filter/
    ) {
        return $content;
    }

    $content = force_balance_tags($content); //We do not want to be REGEXing on unbalanced HTML tags so we must make sure they are balanced before we get started -- garbage in, worse garbage out -- http://codex.wordpress.org/Data_Validation#HTML

    $patterns = array();
    $patterns[0] = '/quick/'; //first match p tags with existing classes because we just want to add an additional class
    $patterns[1] = '/brown/'; //second, match p tags with space (e.g. style) but without class=""
    $patterns[2] = '/fox/'; //third, match <p> tags without attributes
    ksort($patterns);

    $replacements = array();
    $replacements[0] = 'slow';
    $replacements[1] = 'black';
    $replacements[2] = 'bear';
    ksort($replacements);

    preg_replace_all($patterns, $replacements, $content);

    return $content;

}

http://codex.wordpress.org/Function_Reference/force_balance_tags の使用に注意してください。デフォルトでは、抜粋とコメントで使用されます。ソースを見ると、実際にはREGEXが使用されています。 https://core.trac.wordpress.org/browser/tags/4.1/src/wp-includes/formatting.php#L145

サイドノートREGEXの使用にfallback（理想的ではない）理由は、ほとんどすべてのホストのPHPで実行する必要があるためです考えられる構成（つまり、PHP拡張が無効になっている場合にライブラリをロードしたくない）。独自のソリューションでこれを行うために設計されたPHPライブラリーをロードすることを選択できます。 /サイドノート

is_singular()を実行するたびに実行されるコードは非常に多くなります。そのため、あなたのサイトがすでにJS/jQueryを使用している可能性がある場合、複雑なPHPソリューションのインスピレーションとして使用する価値があるかどうかはわかりません。

  • このPクラスは、JS非対応のブラウザーでも動作する必要がありますか？
  • あなたはüber-performanceの第一人者ですか？はいの場合、現在サイトで使用中のjQuery（スライダー、モーションなど）はありますか？はいの場合、これを行うために必要な最小限のjQueryは膨張を追加しません。それと一緒に行きます。
  • フロントエンドにjQueryがロードされていない場合、これを実現するための純粋なJavaScriptの方法を考え出すことができます（つまり、jQuery経由ではありません）

あなたの考えを共有してください。

1
Cliff P

Wordpressはautop関数を使用して、コンテンツの改行に<p></p>を追加します。

Autop機能は format.php の373行目にあります。オプションとして、デフォルトのautopを無効にし（下記参照）、クラスを追加する関数の新しいバージョンを作成してから、それをあなたのコンテンツに適用することもできます（それについては以下のリンクも参照してください）。 442行目に正規表現を追加してください。

段落の影響を取り除きたいだけの場合は、次のようにautopを無効にできます。

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

autopページ ：にあります。

0
shahar