WordPress 將類應用於保存圖像的每個段落？

問題描述

將圖像添加到頁面或帖子中時，Wordpress 會自動添加段落標籤<p> 作為父母持有該圖像。像這樣：

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

由於 CSS 中沒有父選擇器，我很樂意找到一個解決方案來將具體的類名應用於持有實際圖像的段落。因此，上述示例將導致：

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

任何想法，如果我可以使用 add_filter()為每個 p 持有一個圖像應用一個類名？

最佳解決方案

如果您不介意依靠 JavaScript 添加類，則可以使用 jQuery 。

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

更新：.has()方法可能更快，看到這個 jsperf.com test 。

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

次佳解決方案

如果你需要這個 PHP 解決方案。您可以使用’the_content’ 過濾器進行此類操作。這將在 Wordpress 打印您的帖子內容時將類名”content-img-wrap” 添加到僅包含圖像標籤的任何段落。所以這不會包含帶有圖像和跨度的段落。看到更新，如果這是你的尋找。

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 個自動包裝的段落 (意味着我沒有添加 p 標籤，WP 做) 與一個帖子結尾的圖像。它們各自還包含一些隨機標籤和回車，用於測試可能的情況和靈活性。這個想法是，您不必在< img> 之後匹配任何內容。因為存在任何< 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;
}

參考文獻

Apply class to every paragraph that holds image?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 將類應用於保存圖像的每個段落？