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 將類應用於儲存影像的每個段落？