Áp dụng lớp cho mỗi đoạn giữ hình ảnh?


7

Khi thêm hình ảnh vào trang hoặc bài đăng, Wordpress sẽ tự động thêm thẻ đoạn <p>khi phụ huynh giữ hình ảnh. Thích như vậy:

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

Vì CSS không có bộ chọn cha mẹ trong CSS, tôi muốn tìm một giải pháp để áp dụng một tên lớp cụ thể cho các đoạn đó chứa một hình ảnh thực tế. Ví dụ trên sẽ dẫn đến:

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

Bất kỳ ý tưởng nếu tôi có thể sử dụng add_filter()để áp dụng một tên lớp cho mỗi người pgiữ một hình ảnh?

Câu trả lời:


7

Bạn có thể sử dụng jQuery nếu bạn không muốn dựa vào JavaScript để thêm lớp.

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

Cập nhật: .has()phương pháp có thể nhanh hơn, xem bài kiểm tra jsperf.com này .

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

11

Nếu bạn cần điều này là một giải pháp PHP. Bạn có thể làm một cái gì đó như thế này bằng cách sử dụng bộ lọc 'the_content'. Điều này sẽ thêm tên lớp "content-img-quấn" vào bất kỳ đoạn nào chỉ gói một thẻ hình ảnh khi Wordpress in nội dung bài đăng của bạn. Vì vậy, điều này sẽ không bao gồm một đoạn với một hình ảnh và một khoảng. Xem cập nhật nếu đó là những gì bạn đang tìm kiếm.

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;
}

** CẬP NHẬT DƯỚI ĐÂY: Đáp ứng nhu cầu bọc linh hoạt hơn. Tôi đã tạo và nhanh chóng kiểm tra regex này với 3 đoạn được gói tự động (có nghĩa là tôi đã không thêm các thẻ p, WP đã làm) với hình ảnh ở cuối bài. Mỗi cái cũng chứa một số thẻ ngẫu nhiên và lợi nhuận vận chuyển để kiểm tra các trường hợp có khả năng và tính linh hoạt. Ý tưởng là bạn không phải khớp bất cứ thứ gì sau <img> vì sự hiện diện của bất kỳ <img> nào chứng minh trường hợp của chúng tôi. Sau đó, chúng tôi chỉ cần thêm lớp / es tùy chỉnh của chúng tôi (cải thiện nhiều hơn sau đó chào mừng):

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;
}

Từ việc xem xét nhanh về regex, tôi nghĩ [^<]*là quá hẹp, vì nó sẽ không xem xét khoảng thời gian xảy ra trong các đoạn văn.
Bram Vanroy 8/2/2015

@BramVanroy, tôi thậm chí không đoán được rằng bạn có thể đặt tiền thưởng cho một câu hỏi không phải của riêng bạn. IMO bạn nên đặt câu hỏi vì câu hỏi này đã được giải quyết và tôi sẽ ngạc nhiên nếu nhiều người sẽ bận tâm đọc nó.
Mark Kaplun 8/2/2015

6
@MarkKaplun Vì vậy, bạn nghĩ rằng tôi muốn viết cùng một bài viết một lần nữa? Nó sẽ bị đánh dấu là một bản sao tôi sợ.
Bram Vanroy

@BramVanroy, vâng, thật là khó xử, nhưng tôi không biết liệu bạn có thể trao phần thưởng không và như tôi đã nói, hầu hết mọi người có thể không nhìn vào các câu hỏi đã được giải quyết.
Đánh dấu Kaplun

@MarkKaplun Tôi + có thể chỉ định tiền thưởng, không phải là vấn đề. Ngoài ra tôi nghĩ rằng rất nhiều người mong muốn nhận được tiền thưởng nhìn vào danh mục tiền thưởng, vì vậy họ sẽ tìm đường đến đây.
Bram Vanroy 9/2/2015

1

Trong khi tôi hiểu rằng muốn mặt trước phải gọn gàng nhất có thể và do đó nói rằng bạn muốn một giải pháp PHP ...

Cá nhân, tôi đã dành khá nhiều thời gian cho việc này chỉ để giải trí và tôi tiếp tục tìm ra cách phá vỡ kết hợp regex (do đó, tại sao không sử dụng PHP mà không có tiện ích bổ sung thư viện được thiết kế đặc biệt để duyệt qua HTML, như đã đề cập trong liên kết ở trên) ...

Ví dụ:

Quy tắc của ảnh chụp màn hình này sẽ khớp <p>hoặc thậm chí <P >(khớp đơn giản nhất, chưa thử đối với các thẻ P đã có một lớp hoặc có các thuộc tính khác nhưng không phải là một lớp), nhưng hãy xem rằng nó phải được khớp với toàn bộ khối thẻ đóng (trong đó Regex PHP cho HTML rơi ra tại các đường nối) ... mũi tên chỉ vào nơi thẻ P đóng và thẻ P mở nằm trên cùng một dòng và do đó, nếu bạn tính đây là TÌM và sau đó thay thế <pbằng <p class="my-class", bạn ' d được thêm my-classvào đoạn văn sai.

Nếu bạn không muốn trường hợp sử dụng "mọi kịch bản" như vậy, thì có thể thực hiện được thông qua regex. Nếu bạn thu hẹp phạm vi của bạn một chút.

Nếu bạn quyết định giới hạn phạm vi của mình, bạn có thể quan tâm đến thông tin này:

    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

Đây là một số mã bắt đầu nếu bạn tự ép mình xuống tuyến đường phức tạp này (thay vì thông qua 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;

}

Lưu ý việc sử dụng http://codex.wordpress.org/Function_Reference/force_balance_tags Theo mặc định, nó được sử dụng trên Excerpt và Comments Nếu bạn nhìn vào nguồn của nó, nó thực sự sử dụng REGEX: https: //core.trac.wordpress. org / browser / tags / 4.1 / src / wp-gộp / format.php # L1453

SIDENOTE Tôi cho rằng lý do họ dự phòng (không lý tưởng) khi sử dụng REGEX là do nhu cầu của WP chạy trên hầu hết mọi cấu hình PHP của máy chủ có thể tưởng tượng được (nghĩa là không muốn tải thư viện trong trường hợp tiện ích mở rộng PHP bị tắt). Bạn có thể chọn tải một thư viện PHP được thiết kế để thực hiện điều này trong giải pháp của riêng bạn. / SIDENote

Đó là toàn bộ rất nhiều mã được chạy mỗi lần is_singular(). Như vậy, tôi không chắc rằng nó đáng để sử dụng làm nguồn cảm hứng cho một số giải pháp PHP phức tạp khi trang web của bạn có khả năng đã sử dụng JS / jQuery.

  • Có phải lớp P này bằng cách nào đó cần phải hoạt động ngay cả trên các trình duyệt không hỗ trợ JS?
  • Bạn có phải là một chuyên gia hiệu suất über? Nếu có, hiện tại bạn có sử dụng jQuery nào trên trang web của mình không (ví dụ: thanh trượt, chuyển động, v.v.)? Nếu có, jQuery tối giản cần thiết để làm điều này sẽ không thêm phình to. Chỉ cần đi với nó.
  • Nếu bạn KHÔNG tải jQuery ở mặt trước, chúng tôi có thể đưa ra một cách JavaScript thuần túy để thực hiện điều này (tức là không thông qua jQuery)

Hãy chia sẻ suy nghĩ của bạn.


0

Wordpress sử dụng autopchức năng để thêm <p></p>vào ngắt dòng trong nội dung của bạn.

Chức năng autop có thể được tìm thấy trên dòng 373 trong formatting.php . Một tùy chọn là vô hiệu hóa tự động mặc định (xem bên dưới), tạo phiên bản mới của chức năng thêm lớp của bạn và sau đó áp dụng nó cho nội dung của bạn (cũng xem liên kết bên dưới). Tôi đoán bạn sẽ thêm một regex xung quanh dòng 442 để làm điều đó.

Nếu bạn chỉ muốn loại bỏ hiệu ứng của đoạn văn, bạn có thể tắt autopnhư thế này:

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

Có thể tìm thấy trên trang autop :


sẽ không downvote, nhưng gây rối với autop là một điều rất nguy hiểm và nó sẽ không giải quyết được trường hợp html được tạo bởi một shortcode.
Đánh dấu Kaplun

Tôi không đề xuất việc gây rối với autop, tôi khuyên bạn nên tạo một chức năng tùy chỉnh dựa trên autop, điều này hoàn toàn ổn và không nguy hiểm. Tôi không thấy shortcode được đề cập trong câu hỏi.
Steven

điều này hoàn toàn giống với việc gây rối với autop và bạn cũng không thấy các nhịp và các liên kết được đề cập nữa ....
Mark Kaplun 9/2/2015

Nếu viết một chức năng tùy chỉnh được gọi là 'gây rối' thì tôi đoán bạn đã đúng.
Steven

1
autop là tùy chọn, nếu bạn thấy câu trả lời, bạn sẽ thấy một tham chiếu để xóa autop do Wordpress cung cấp. Wordpress được xây dựng để linh hoạt và cho phép các nhà phát triển sửa đổi hành vi của nó cho các nhu cầu tùy chỉnh. Đây là một trong số họ. Nếu tôi đề nghị chạm vào các tệp cốt lõi, bạn sẽ có một điểm, nhưng như tôi thì không, bạn thì không.
Steven
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.