एक "पी" टैग में वर्डप्रेस रैपिंग इमेजेज को रोकें


33

मैंने इसके सरल समाधान के लिए उच्च और निम्न खोज की है, लेकिन कोई फायदा नहीं हुआ। Wordpress मेरी छवियों को p टैग में लपेटता रहता है और जिस साइट पर मैं काम कर रहा हूं उसके लिए लेआउट की विलक्षण प्रकृति के कारण, यह बहुत कष्टप्रद है।

मैं छवियों को खोलना करने के लिए एक jQuery समाधान बनाया है, लेकिन यह बहुत अच्छा नहीं है। यह पृष्ठ पर अन्य सामान लोड होने के कारण पिछड़ जाता है और इसलिए इसमें बदलाव धीमी गति से किए जाते हैं। क्या पी टैग के साथ सिर्फ छवियों को लपेटने से रोकने का एक तरीका है? एक हुक या फ़िल्टर शायद जिसे चलाया जा सकता है।

यह तब हो रहा है जब कोई छवि अपलोड कर रहा है और फिर उसे WYSIWYG संपादक में सम्मिलित कर रहा है। मैन्युअल रूप से कोड दृश्य में जाना और p टैग को हटाना कोई विकल्प नहीं है क्योंकि ग्राहक तकनीकी रूप से अयोग्य नहीं है।

मैं समझता हूं कि छवियां इनलाइन हैं, लेकिन जिस तरह से मेरे पास साइट कोडित छवियां हैं वे divs के अंदर हैं और ब्लॉक करने के लिए सेट हैं, इसलिए वे मान्य कोड हैं।


जवाबों:


34

यहाँ हमने कल एक क्लाइंट साइट पर क्या किया है जिससे हमें यह समस्या हो रही थी ... मैंने प्लगइन के रूप में एक त्वरित फ़िल्टर बनाया और इसे सक्रिय किया।

<?php
/*
Plugin Name: Image P tag remover
Description: Plugin to remove p tags from around images in content outputting, after WP autop filter has added them. (oh the irony)
Version: 1.0
Author: Fublo Ltd
Author URI: http://fublo.net/
*/

function filter_ptags_on_images($content)
{
    // do a regular expression replace...
    // find all p tags that have just
    // <p>maybe some white space<img all stuff up to /> then maybe whitespace </p>
    // replace it with just the image tag...
    return preg_replace('/<p>(\s*)(<img .* \/>)(\s*)<\/p>/iU', '\2', $content);
}

// we want it to be run after the autop stuff... 10 is default.
add_filter('the_content', 'filter_ptags_on_images');

यदि आप अपने / wp-content / plugins फ़ोल्डर में एक php फ़ाइल में ड्रॉप करते हैं और फिर इसे सक्रिय करते हैं, तो इसे किसी भी पैरा से p टैग को हटा देना चाहिए जिसमें बस एक छवि शामिल है।

मुझे यकीन नहीं है कि अगर यह दूसरे संपादकों के आउटपुट के साथ विफल हो जाएगा, तो उदाहरण के लिए, imgx के साथ बंद होने पर regexp कितना मजबूत होगा। अगर किसी के पास कुछ भी मजबूत है, तो यह वास्तव में मददगार होगा।

चीयर्स,

जेम्स

--- बेहतर फिल्टर ---

लिंक में लिपटे चित्रों के साथ काम करने के लिए, यह आउटपुट में लिंक रखता है और पी टैग हटाता है।

return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);

बिना किसी संदेह के, यह उचित उत्तर है। धन्यवाद जेम्स, मैंने इसे आज़माया और यह अजीब तरह से काम करता है।
ड्वेन चारिंगटन

हाय @ ड्वेन - प्रतिक्रिया के लिए धन्यवाद। मैंने एक बेहतर फ़िल्टर जोड़ा है जो लिंक को संभालेगा, अब हम इसे हमारे क्लाइंट साइट पर उपयोग कर रहे हैं।
jamesc

आपको इसे Wordpress plugin repository में जरूर डालना चाहिए। एक त्वरित Google खोज से पता चलता है कि बहुत से लोग इस समस्या का कोई अच्छा समाधान नहीं कर रहे हैं।
ज्योफ्री बर्डेट

1
ध्यान दें कि यह HTML5 डिफॉल्ट imgमार्कअप के साथ काम नहीं करेगा , यानी <img ...>क्लोजिंग स्लैश के बिना। अपने रेगेक्स में उस विकल्प को बनाना बेहतर है। या बेहतर अभी तक, आप इसे छोड़ सकते हैं जैसा .*कि यह ध्यान रखेगा।
ब्रैम वनरॉय

क्या किसी ने इसके <img ...>बिना काम किया है />?
रन्निक

13

मूल रूप से आप वर्डप्रेस का इलाज करने की जरूरत है img स्वरूपण के उद्देश्य के लिए ब्लॉक स्तर तत्व की तरह। ऐसे तत्वों को हार्डकोड किया गया हैwpautop() और सूची दुर्भाग्य से फ़िल्टर नहीं की गई है।

मैं क्या करूंगा:

  1. कांटा wpautop()अलग नाम से।
  2. चर imgमें regexp में जोड़ें $allblocks
  3. फ़िल्टर wpautopसे निकालें the_content
  4. करने के लिए अपने forked संस्करण जोड़ें the_content
  5. बदले हुए प्रसंस्करण क्रम के कारण कुछ टूटने पर आपको प्राथमिकता के साथ खेलने और संभवतः अन्य फ़िल्टर हटाने और पुनः जोड़ने की आवश्यकता हो सकती है।

मैं इस दृष्टिकोण की कोशिश करने जा रहा हूं। मैं वास्तव में allblocks चर के लिए img टैग को जोड़ने के बारे में कभी नहीं सोचा था, यह एक प्रतिभाशाली विचार है। मैं देखूंगा कि मैं कैसे जाता हूं।
ड्वेन चारिंगटन

पहले अच्छी तरह से काम किया, फिर मैंने उस परिदृश्य पर प्रहार किया जब एक छवि एक एंकर टैग के भीतर होती है और दोनों पहले से ही एक पैराग्राफ के अंदर होते हैं (इसलिए p> img> a)। Img के साथ ब्लॉक wp-autop के रूप में व्यवहार किए जाने से पहले लेआउट को बंद करने से पहले img टैग शुरू होने पर पैराग्राफ टैग को बंद कर देता है।
बेंज़001

2

शायद यह मदद करेगा

remove_filter('the_content', 'wpautop')

लेकिन फिर आप मैन्युअल रूप से सब कुछ के लिए पैराग्राफ जोड़ने जा रहे हैं।


मैंने इस दृष्टिकोण पर विचार किया, लेकिन क्योंकि लेआउट सनकी है जैसा कि मैंने कहा कि यह पी टैग की आवश्यकता पर बहुत निर्भर करता है। जैसा कि मैं एक 2 कॉलम टेक्स्ट चीज़ कर रहा हूँ जहाँ p टैग्स को टेक्स्ट के 2 कॉलम की उपस्थिति देने के लिए छोड़ा गया है। तो आप देख सकते हैं कि एपी टैग एक छवि को क्यों लपेटता है क्योंकि यह भी चल रहा है एक समस्या होगी।
ड्वेन चारिंगटन

1

सोस्का ने एक / आसान तरीका दिया है।

लेकिन मैं क्या कर रहा हूं, सामग्री से छवि निकालें और इसे अलग से प्रदर्शित करें।


मैंने इस पर भी विचार किया और यह अभी भी एक विकल्प है। हालाँकि, क्योंकि यह केवल सभी को बचाने के लिए केवल एक छवि है, मैं इसके बजाय केवल चित्रित पोस्ट थंबनेल का उपयोग कर सकता हूं जो मुझे यह नियंत्रित करने देगा कि छवि कैसे प्रदर्शित करती है।
ड्वेन चाररिंगटन

भी आप कस्टम पोस्ट को पोस्ट / पेज में जोड़ सकते हैं, अंगूठे की छवि की तरह और इसके मूल्य में छवि पथ को बचा सकते हैं ...
अविनाश

1

यह पोस्ट थोड़ी पुरानी है, लेकिन एक बहुत सरल उपाय है, सीएसएस को अपने अंत में रोकना।

एक div में img टैग लपेटने का थोड़ा नकारात्मक प्रभाव पड़ता है।


1

मैंने एक प्लगइन विकसित किया है जो इस सटीक मुद्दे को तय करता है: http://wordpress.org/extend/plugins/unwrap-images/

यह मार्जिन सेट करने से बेहतर है, या उन लोगों के लिए वर्डप्रेस कोड में डाइविंग करना सही है, जो कोड के साथ गड़बड़ नहीं करना चाहते हैं क्योंकि यह उनके पी टैग की सभी छवियों को अनफ्रैप करने के लिए jQuery के मूल अनकैप फ़ंक्शन का उपयोग करता है।

आशा है कि यह किसी की मदद करता है! चीयर्स, ब्रायन


जाहिरा तौर पर अभी भी 30+ सक्रिय प्रतिष्ठान हैं: डी
जुलिक्स

1

स्वीकृत उत्तर ने मुझे केवल छवियों के साथ मदद की लेकिन संशोधित कोड लिंक की गई छवियों को मेरी साइट पर अच्छी तरह से संभाल नहीं पाता है। इस ब्लॉग पोस्ट में एक कोड है जो पूरी तरह से काम करता है।

यहाँ कोड है:

function wpautop_forked($pee, $br = 1) {

if ( trim($pee) === '' )
return '';
$pee = $pee . "\n"; // just to make things a little easier, pad the end
$pee = preg_replace('|<br />\s*<br />|', "\n\n", $pee);
// Space things out a little
$allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li
|pre|select|option|form|map|area|blockquote|img|address|math|style|input
|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer
|nav|figure|figcaption|details|menu|summary)';
$pee = preg_replace('!(<' . $allblocks . '[^>]*>)!', "\n$1", $pee);
$pee = preg_replace('!(</' . $allblocks . '>)!', "$1\n\n", $pee);
$pee = str_replace(array("\r\n", "\r"), "\n", $pee); // cross-platform newlines
if ( strpos($pee, '<object') !== false ) {
$pee = preg_replace('|\s*<param([^>]*)>\s*|', "<param$1>", $pee); // no pee inside object/embed
$pee = preg_replace('|\s*</embed>\s*|', '</embed>', $pee);
}
$pee = preg_replace("/\n\n+/", "\n\n", $pee); // take care of duplicates
// make paragraphs, including one at the end
$pees = preg_split('/\n\s*\n/', $pee, -1, PREG_SPLIT_NO_EMPTY);
$pee = '';
foreach ( $pees as $tinkle )
$pee .= '<p>' . trim($tinkle, "\n") . "</p>\n";
$pee = preg_replace('|<p>\s*</p>|', '', $pee); // under certain strange conditions it could create a P of entirely whitespace
$pee = preg_replace('!<p>([^<]+)</(div|address|form)>!', "<p>$1</p></$2>", $pee);
$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee); // don't pee all over a tag
$pee = preg_replace("|<p>(<li.+?)</p>|", "$1", $pee); // problem with nested lists
$pee = preg_replace('|<p><blockquote([^>]*)>|i', "<blockquote$1><p>", $pee);
$pee = str_replace('</blockquote></p>', '</p></blockquote>', $pee);
$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)!', "$1", $pee);
$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee);
if ($br) {
$pee = preg_replace_callback('/<(script|style).*?<\/\\1>/s', create_function('$matches', 'return str_replace("\n", "<WPPreserveNewline />", $matches[0]);'), $pee);
$pee = preg_replace('|(?<!<br />)\s*\n|', "<br />\n", $pee); // optionally make line breaks
$pee = str_replace('<WPPreserveNewline />', "\n", $pee);
}
$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*<br />!', "$1", $pee);
$pee = preg_replace('!<br />(\s*</?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)[^>]*>)!', '$1', $pee);
if (strpos($pee, '<pre') !== false)
$pee = preg_replace_callback('!(<pre[^>]*>)(.*?)</pre>!is', 'clean_pre', $pee );
$pee = preg_replace( "|\n</p>$|", '</p>', $pee );

return $pee;
}

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

चीयर्स!


1

मैं एक विशेषज्ञ नहीं हूँ, लेकिन पी छेद में लिपटा हुआ डी आईएमजी को हल करने की कोशिश कर रहा छेद दोपहर बिताया और यह मेरे लिए काम किया।

मैं एक वर्डप्रेस आधारित थीम पर काम कर रहा हूं और इसे फ़ंक्शन.js फ़ाइल में जोड़ दिया गया है

जेकरी फंक्शन अनकैप

> $(document).ready(function (){
> 
> // for images wraped in a tags
> 
> $(‘.entry a’).unwrap(‘p’);
> 
> //for images wraped in just p tags
> $(‘.entry img’).unwrap(‘p’);

अब मैं पी और आईजी से अलग से काम कर सकता हूं।

इसके अलावा एक अलग वर्ग के साथ एक div जोड़ सकते हैं इस का उपयोग कर img के आसपास:

$(document).ready(function (){

$('.entry img').wrap('<div class="justImg"></div>');

यह पिछले मेरी समस्या हल नहीं हुई क्योंकि मैं प्रदर्शन के साथ पी टैग बनाना चाहता था: कोई नहीं; तो मैं वास्तव में उन img वहाँ से बाहर ले जाना था।


3
क्या आप वास्तव में घुंघराले उद्धरण का उपयोग करते हैं? :)
FUXIA

मैंने इस दृष्टिकोण पर पहले तरीके से विचार किया जब, लेकिन jQuery के माध्यम से अनावश्यक DOM हेरफेर का विचार बहुत अधिक जोखिम और संभावित अनावश्यक ओवरहेड के बारे में था जब आप पीएचपी में नियमित नियमित अभिव्यक्ति के साथ ऐसा कर सकते हैं।
ड्वेन चारिंगटन

0

पोस्ट के आधार पर, प्रति पोस्ट आधार पर ऑटो-पी फ़ंक्शन को अक्षम करने के लिए एक और समाधान WP Unformatted प्लगइन का उपयोग किया जा सकता है ।


यह बहुत उपयोगी है, हालाँकि मैं देख सकता हूँ कि यदि आप चाहते हैं कि छवियाँ P टैग न हों बल्कि आपके पृष्ठ के भीतर पाठ हों, तो यह एक बड़े पैमाने पर गड़बड़ होने वाला है। यह शायद उन पोस्टों के लिए अच्छा होगा जिनमें सिर्फ चित्र और शायद पाठ की कुछ पंक्तियाँ हों। फिर भी, उपयोगी।
ड्वेन चारिंगटन

हाँ, यही कारण है कि मैंने कहा कि यह पोस्ट पर निर्भर करता है।
Synetech

0

यदि कोई व्यक्ति किसी भी टैग के लिए इसे ठीक करने के लिए एक त्वरित और गंदे तरीके की तलाश में है , तो मैंने क्या किया:

  1. wp-content / formatting.php पर जाएं
  2. wpautop फ़ंक्शन खोजें। (यदि आपने इसे याद किया है, तो यह WP-AUTO-P है , इसे प्राप्त करें?)
  3. "सभी ब्लॉक" वेरिएबल को फाइनल करता है, कुछ ऐसा होना चाहिए $allblocks = '(?:table|thead|tfoot|capti...
  4. अंत में उस ब्लॉक को जोड़ें जिसे आप छोड़ना चाहते हैं - img, aआदि ... उदाहरण के लिए यदि यह टैग जोड़ने के लिए (...)menu|summary)';परिवर्तन में समाप्त होता है और इसे ऑटोपि करने से बचें । पाइप विभाजक पर ध्यान दें - यह रेगेक्स सिंटैक्स है!(...)menu|summary|a)';a|

यह बात है, खुश Wordpressing!

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.