একটি "পি" ট্যাগে ওয়ার্ডপ্রেস মোড়ানো চিত্রগুলি বন্ধ করুন


33

এর সহজ সমাধানের জন্য আমি উচ্চ এবং নিম্ন সন্ধান করেছি, তবে কোনও ফলসই হয়নি। ওয়ার্ডপ্রেস আমার ছবিগুলিকে পি ট্যাগগুলিতে মুড়িয়ে রাখে এবং যে সাইটটিতে আমি কাজ করছি তার জন্য লেআউটটির উদ্ভট প্রকৃতির কারণে এটি অত্যন্ত বিরক্তিকর।

আমি চিত্রগুলি আন-মোড়ক করার জন্য একটি jQuery সমাধান তৈরি করেছি, তবে এটি এত দুর্দান্ত নয়। পৃষ্ঠায় অন্যান্য স্টাফ লোড হওয়ার কারণে এটি পিছিয়ে পড়ে এবং তাই পরিবর্তনগুলি করা ধীর হয়। ওয়ার্ডপ্রেসকে পি ট্যাগ সহ কেবল চিত্রগুলি মোড়ানো রোধ করার কোনও উপায় আছে? একটি হুক বা ফিল্টার সম্ভবত এটি চালানো যেতে পারে।

কোনও চিত্র আপলোড করার পরে এটি ডাব্লুওয়াইএসআইডাব্লুওয়াইজি সম্পাদক হিসাবে tingোকানোর সময় এটি ঘটছে। কোড ভিউটিতে ম্যানুয়ালি গিয়ে পি ট্যাগগুলি মুছে ফেলা কোনও বিকল্প নয় কারণ ক্লায়েন্টটি প্রযুক্তিগতভাবে অক্ষম নয়।

আমি বুঝতে পারি যে চিত্রগুলি ইনলাইন, তবে আমার কাছে সাইটের কোডেড চিত্রগুলি ডিভের অভ্যন্তরে এবং ব্লক করতে সেট করেছে, সুতরাং সেগুলি বৈধ কোড।


উত্তর:


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');

যদি আপনি এটি আপনার / ডাব্লুপিপি-সামগ্রী / প্লাগইন ফোল্ডারে কোনও পিএইচপি ফাইলে ফেলে দেন এবং তারপরে এটি সক্রিয় করেন তবে এটি কেবলমাত্র একটি চিত্র রয়েছে এমন কোনও প্যারা থেকে পি ট্যাগগুলি সরিয়ে ফেলতে হবে।

আমি নিশ্চিত নই যে রেজিএক্সপ্স কতটা শক্তিশালী তা যদি অন্য সম্পাদকদের আউটপুট দিয়ে ব্যর্থ হয় - উদাহরণস্বরূপ যদি আইএমজি ট্যাগটি কেবলমাত্র বন্ধ করা হয় তবে এটি ব্যর্থ হবে। কারও কাছে যদি আরও শক্তিশালী কিছু থাকে তবে তা সত্যিই সহায়ক।

চিয়ার্স,

জেমস

--- উন্নত ফিল্টার ---

লিঙ্কগুলিতে মোড়ানো ছবিগুলির সাথে কাজ করতে, এটি লিঙ্কগুলিকে আউটপুটে রাখে এবং p ট্যাগগুলি সরিয়ে দেয়।

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

সন্দেহ নেই, এটি সঠিক উত্তর। ধন্যবাদ জেমস, আমি এটি চেষ্টা করেছি এবং এটি দুর্দান্তভাবে কাজ করে।
ডোয়াইন চারিংটন

হাই @ ডোয়েন - প্রতিক্রিয়াটির জন্য ধন্যবাদ আমি একটি উন্নত ফিল্টার যুক্ত করেছি যা লিঙ্কগুলি পরিচালনা করবে, আমরা এখন এটি আমাদের ক্লায়েন্ট সাইটে ব্যবহার করছি।
jamesc

আপনার অবশ্যই এটি ওয়ার্ডপ্রেস প্লাগইন সংগ্রহস্থলে রাখা উচিত। একটি দ্রুত গুগল অনুসন্ধানে দেখায় যে অনেক লোক কোনও ভাল সমাধান ছাড়াই এই সমস্যা নিয়ে আসছেন।
জেফ্রি বার্ডেট

1
মনে রাখবেন এটি HTML5 ডিফল্ট imgমার্কআপের সাথে কাজ করবে না , অর্থাত্ <img ...>ক্লোজিং স্ল্যাশ ছাড়াই। আপনার রেজেক্সে thatচ্ছিক করা আরও ভাল। বা আরও ভাল, আপনি এটি এটিকে ছেড়ে দিতে পারেন যেমন .*এটি যত্ন নেবে।
ব্রাম ভ্যানরোয়

কেউ কি এটি <img ...>বিনা জন্য কাজ করেছে />?
রান্নিক

13

মূলত আপনার ফর্ম্যাটের উদ্দেশ্যে ওয়ার্ডপ্রেসকে ইম্কের মতো ব্লক-স্তর উপাদান তৈরি করা দরকার। এই জাতীয় উপাদানগুলিকে হার্ডকোড করা হয়wpautop() এবং দুর্ভাগ্যক্রমে তালিকাটি ফিল্টার করা হয় না।

আমি যা করবো তা হ'ল:

  1. wpautop()বিভিন্ন নামে কাঁটাচামচ ।
  2. পরিবর্তনশীল imgমধ্যে regexp যোগ করুন $allblocks
  3. ফিল্টার wpautopথেকে সরান the_content
  4. এতে আপনার কাঁটাযুক্ত সংস্করণ যুক্ত করুন the_content
  5. আপনার অগ্রাধিকারের সাথে খেলতে হবে এবং পরিবর্তিত প্রক্রিয়াকরণ আদেশের কারণে যদি কিছু কিছু ভেঙে যায় তবে সম্ভবত অন্য ফিল্টারগুলি সরিয়ে এবং পুনরায় যুক্ত করতে হবে।

আমি এই পদ্ধতির চেষ্টা করতে যাচ্ছি। আমি আসলেই allblocks পরিবর্তনশীলটিতে img ট্যাগ যুক্ত করার কথা ভাবি নি, এটি একটি প্রতিভা ধারণা। আমি কিভাবে যাব তা দেখব।
ডোয়াইন চারিংটন

প্রথমে ভালভাবে কাজ করেছি, তারপরে আমি দৃশ্যের হিট করেছি যখন কোনও চিত্র অ্যাঙ্কর ট্যাগের মধ্যে থাকে এবং উভয়ই ইতিমধ্যে একটি অনুচ্ছেদের অভ্যন্তরে থাকে (সুতরাং পি> ইমজি> এ)। Img এর সাথে ব্লক হিসাবে চিকিত্সা করা হয় wp-autop, img ট্যাগটি শুরু হওয়ার আগে প্যারাগ্রাফ ট্যাগটি বন্ধ করে, লেআউটটি বুট করে।
বেনজ 1001

2

সম্ভবত এটি সাহায্য করবে

remove_filter('the_content', 'wpautop')

তবে আপনি নিজে হাতে সমস্ত কিছুর জন্য অনুচ্ছেদ যুক্ত করতে চলেছেন।


আমি এই পদ্ধতির বিষয়টি বিবেচনা করেছি, তবে লেআউটটি বিশিষ্ট বলে আমি বলেছি এটি পি ট্যাগের প্রয়োজনের উপর খুব বেশি নির্ভর করে। যেহেতু আমি একটি 2 কলামের পাঠ্য জিনিসটি করছি যেখানে পাঠ্য 2 কলামের উপস্থিতি দিতে প ট্যাগগুলি বাম দিকে ভাসা হচ্ছে। সুতরাং আপনি দেখতে পাচ্ছেন যে কোনও এপ ট্যাগ কোনও ছবি মোড়ানো কেন একটি সমস্যা হবে কারণ এটিও ভাসমান।
ডোয়াইন চারিংটন 17'11

1

সোসকা একটি / সহজ উপায় দিয়েছে।

তবে আমি যা করি তা হ'ল বিষয়বস্তু থেকে চিত্রটি বের করুন এবং এটি আলাদাভাবে প্রদর্শন করুন।


আমি এটিও বিবেচনা করেছি এবং এটি এখনও একটি বিকল্প। তবে সমস্ত ঝামেলা বাঁচানোর জন্য এটি কেবলমাত্র একটি চিত্র, আমি এর পরিবর্তে কেবল বৈশিষ্ট্যযুক্ত পোস্ট থাম্বনেল ব্যবহার করতে পারি যা আমাকে কীভাবে চিত্রটি প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে দেয়।
ডোয়াইন চারিংটন 17'11

এছাড়াও আপনি পোস্ট / পৃষ্ঠায় কাস্টম ফিল্ড যুক্ত করতে পারেন, থাম্ব ইমেজের মতো এবং ইমেজের পথটিকে এর মান হিসাবে সংরক্ষণ করতে পারেন ...
অবিনাশ

1

এই পোস্টটি কিছুটা পুরানো, তবে আপনার শেষের দিকে CSS বাদ দিয়ে আরও একটি সহজ সমাধান রয়েছে।

একটি ডিভিউতে ইমগ ট্যাগটি মোড়ানো এর নেতিবাচক প্রভাব খুব কম has


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

আমি কোনও বিশেষজ্ঞ নই, কেবলমাত্র পি ট্যাগগুলিতে মোড়ানো ডি ইমগি সমাধান করার চেষ্টা করে গর্তের দুপুরটি কাটিয়েছি এবং এটি আমার জন্য কাজ করেছে।

আমি একটি ওয়ার্ডপ্রেস ভিত্তিক থিম নিয়ে কাজ করছি এবং এটি কেবল ফাংশন.জেএস ফাইলে যুক্ত করেছি

Jquery ফাংশন আনআরপ করুন

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

এখন আমি পি এবং ইম্পজি আলাদাভাবে কাজ করতে পারি।

এছাড়াও এটি ব্যবহার করে ইমগের চারপাশে একটি পৃথক শ্রেণীর সাথে একটি ডিভি যোগ করতে পারে:

$(document).ready(function (){

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

এই শেষটি আমার সমস্যার সমাধান করেনি কারণ আমি প্রদর্শন সহ পি ট্যাগ তৈরি করতে চেয়েছিলাম: কিছুই নয়; সুতরাং আমাকে সত্যিই সেখান থেকে এই img নিতে হয়েছিল।


3
আপনি কি সত্যিই কোঁকড়ানো উদ্ধৃতি ব্যবহার করেন? :)
ফুসিয়া

আমি এই পদ্ধতির প্রথম দিকে ফিরে যখন বিবেচনা করেছি, তবে আপনি যখন জটিল নিয়মিত অভিব্যক্তি দিয়ে পিএইচপি করতে পারেন তখন jQuery এর মাধ্যমে অপ্রয়োজনীয় ডিওএম ম্যানিপুলেশন সম্পর্কে চিন্তাভাবনা খুব বেশি ঝুঁকিপূর্ণ এবং সম্ভাব্য অপ্রয়োজনীয় ওভারহেডের ছিল।
ডোয়াইন চারিংটন

0

পোস্টের উপর নির্ভর করে, আরেকটি সমাধান হ'ল প্রতি পোস্টের ভিত্তিতে অটো-পি ফাংশনটি অক্ষম করতে ডাব্লুপি আনফর্ম্যাটেড প্লাগইন ব্যবহার করা যেতে পারে ।


এটি বেশ কার্যকর, যদিও আমি দেখতে পাচ্ছি একমাত্র সতর্কতা হ'ল আপনি যদি ইমেজগুলিতে পি ট্যাগ নাও রাখতে চান তবে আপনার পৃষ্ঠায় টেক্সট থাকে তবে এটি একটি বিশাল জগাখিচুড়ি হতে চলেছে। এটি সম্ভবত পোস্টগুলির জন্য ভাল হবে যেখানে কেবল চিত্র এবং কয়েকটি পাঠ্য পাঠ্য থাকতে পারে। এখনও, দরকারী।
ডোয়াইন চারিংটন

হ্যাঁ, তাই কেন আমি বলেছিলাম এটি পোস্টের উপর নির্ভর করে।
Synetech

0

যদি কেউ কোনও ট্যাগের জন্য এটি ঠিক করার জন্য দ্রুত এবং নোংরা উপায়ের সন্ধান করে তবে আমি যা করেছি তা এখানে:

  1. ডাব্লুপি-কনটেন্ট / ফরম্যাটিং.এফপি যান
  2. wpautop ফাংশন সন্ধান করুন। (আপনি যদি এটি মিস করেন তবে এটি ডাব্লুপি-অটো-পি , এটি পেয়েছেন?)
  3. "সমস্ত ব্লক" ভেরিয়েবলের ফিনস দেয় এমন কিছু হওয়া উচিত $allblocks = '(?:table|thead|tfoot|capti...
  4. শেষে ব্লক আপনি বর্জন করতে ইচ্ছুক যুক্ত করুন - img, a, ইত্যাদি ... উদাহরণস্বরূপ যদি এটা শেষ হয় (...)menu|summary)';পরিবর্তনের (...)menu|summary|a)';যোগ করার জন্য aট্যাগ এবং এড়ানোর autopeeing করুন। পাইপ |বিভাজকটি নোট করুন - এটি রেজেক্স সিনট্যাক্স!

এটাই, হ্যাপি ওয়ার্ডপ্রেসিং!

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.