หยุดการบีบภาพด้วย Wordpress ในแท็ก“ P”


33

ฉันค้นหาสูงและต่ำเพื่อหาทางออกที่ง่ายสำหรับเรื่องนี้ แต่ก็ไม่มีประโยชน์ Wordpress ใช้การห่อรูปภาพของฉันในแท็ก p และเนื่องจากลักษณะที่ผิดปกติของเลย์เอาต์สำหรับไซต์ที่ฉันกำลังทำงานอยู่นี่เป็นเรื่องที่น่ารำคาญอย่างมาก

ฉันได้สร้าง jQuery solution เพื่อแกะภาพออกมา แต่มันก็ไม่ได้ยอดเยี่ยมขนาดนั้น มันล่าช้าเนื่องจากการโหลดสิ่งอื่น ๆ บนหน้าและการเปลี่ยนแปลงจะทำช้า มีวิธีป้องกัน Wordpress เพียงแค่ห่อรูปภาพด้วยแท็ก p หรือไม่? เบ็ดหรือตัวกรองที่สามารถเรียกใช้

สิ่งนี้เกิดขึ้นเมื่ออัพโหลดรูปภาพแล้วแทรกลงในเครื่องมือแก้ไขแบบ 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');

หากคุณวางสิ่งนั้นลงในไฟล์ php ในโฟลเดอร์ / wp-content / plugins ของคุณแล้วเปิดใช้งานมันควรลบแท็ก p ออกจาก para ใด ๆ ที่มีภาพอยู่

ฉันไม่แน่ใจว่า regexp มีความแข็งแกร่งเพียงใดในกรณีที่มันจะล้มเหลวด้วยเอาต์พุตจากตัวแก้ไขอื่น ๆ - ตัวอย่างเช่นหากแท็ก img ถูกปิดด้วยเพียงแค่> มันจะล้มเหลว ถ้าใครมีอะไรที่แข็งแกร่งกว่านี้ก็จะเป็นประโยชน์จริงๆ

ไชโย

เจมส์

--- ปรับปรุงตัวกรอง ---

ในการทำงานกับรูปภาพที่รวมอยู่ในลิงค์มันจะเก็บลิงค์ไว้ในเอาต์พุตและลบแท็ก p ออก

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

ไม่ต้องสงสัยเลยว่านี่คือคำตอบที่เหมาะสม ขอบคุณเจมส์ฉันลองแล้วมันใช้งานได้ดีมาก
Dwayne Charrington

สวัสดี @ ดเวย์น - ขอบคุณสำหรับความคิดเห็น ฉันได้เพิ่มตัวกรองที่ได้รับการปรับปรุงซึ่งจะจัดการกับลิงก์เรากำลังใช้ตัวกรองนี้ในเว็บไซต์ลูกค้าของเรา
jamesc

คุณควรใส่สิ่งนี้ลงในที่เก็บปลั๊กอินของเวิร์ดเพรส การค้นหา google อย่างรวดเร็วแสดงให้เห็นว่าผู้คนจำนวนมากกำลังประสบปัญหานี้โดยไม่มีทางออกที่ดี
Geoffrey Burdett

1
โปรดทราบว่าสิ่งนี้จะไม่ทำงานกับimgมาร์กอัปHTML5 ที่เป็นค่าเริ่มต้นเช่น<img ...>ไม่มีเครื่องหมายทับปิด มันจะดีกว่าที่จะทำให้เป็นตัวเลือกใน regex ของคุณ หรือดีกว่ายังคุณสามารถปล่อยมันออกมาตามที่.*จะดูแลมัน
Bram Vanroy

มีใครทำให้มันทำงาน<img ...>โดยไม่/>?
Runnick

13

โดยทั่วไปคุณต้องทำให้ WordPress ใช้งานimgเช่นองค์ประกอบระดับบล็อกเพื่อการจัดรูปแบบ องค์ประกอบดังกล่าวถูกฮาร์ดโค้ดwpautop()และไม่มีการกรองรายการ

สิ่งที่ฉันจะทำคือ:

  1. แยกwpautop()ภายใต้ชื่ออื่น
  2. เพิ่มimgไปยัง regexp ใน$allblocksตัวแปร
  3. ลบออกwpautopจากthe_contentตัวกรอง
  4. the_contentเพิ่มรุ่นคดเคี้ยวของคุณเพื่อ
  5. คุณอาจต้องเล่นโดยมีลำดับความสำคัญและอาจลบและเพิ่มตัวกรองอื่น ๆ อีกครั้งหากมีสิ่งผิดปกติเนื่องจากลำดับการประมวลผลที่เปลี่ยนแปลง

ฉันจะลองวิธีนี้ ฉันไม่เคยคิดที่จะเพิ่มแท็ก img ให้กับตัวแปร allblocks นั่นเป็นแนวคิดที่อัจฉริยะ ฉันจะดูว่าฉันไป
Dwayne Charrington

ทำงานได้ดีในตอนแรกจากนั้นฉันกดปุ่มสถานการณ์เมื่อภาพอยู่ในแท็กจุดยึดและทั้งคู่อยู่ในย่อหน้า (ดังนั้น p> img> a) ด้วย img ที่ถือว่าเป็นบล็อก wp-autop จะปิดแท็กย่อหน้าออกก่อนที่แท็ก img จะเริ่มต้นโดยจัดวางเค้าโครง
benz001

2

อาจจะช่วยได้

remove_filter('the_content', 'wpautop')

แต่คุณจะเพิ่มย่อหน้าสำหรับทุกสิ่งด้วยตนเอง


ฉันพิจารณาวิธีนี้ แต่เนื่องจากเลย์เอาต์นั้นผิดปกติเพราะฉันบอกว่ามันต้องอาศัยแท็ก p อย่างมาก ขณะที่ฉันกำลังทำข้อความ 2 คอลัมน์ที่แท็ก p ลอยไปทางซ้ายเพื่อให้มีลักษณะของคอลัมน์ 2 ข้อความ ดังนั้นคุณจะเห็นได้ว่าทำไมการห่อแท็ก ap ภาพจึงเป็นปัญหาเพราะมันลอยได้เช่นกัน
Dwayne Charrington

1

Soska ให้วิธีหนึ่ง / ง่ายๆ

แต่สิ่งที่ฉันทำคือแยกภาพออกจากเนื้อหาและแสดงแยกต่างหาก


ฉันพิจารณาเรื่องนี้ด้วยและก็ยังเป็นตัวเลือก อย่างไรก็ตามเนื่องจากเป็นเพียงภาพเดียวที่ช่วยลดความยุ่งยากทั้งหมดฉันอาจใช้ภาพขนาดย่อของโพสต์เด่นซึ่งจะให้ฉันควบคุมวิธีการแสดงภาพ
Dwayne Charrington

คุณยังสามารถเพิ่มฟิลด์ที่กำหนดเองไปโพสต์ / หน้าเหมือนภาพที่นิ้วหัวแม่มือและบันทึกเส้นทางภาพในด้านความคุ้มค่า ...
Avinash

1

โพสต์นี้เก่าไปหน่อย แต่มีวิธีแก้ไขที่ง่ายกว่ามากยกเว้น CSS ในตอนท้ายของคุณ

การห่อแท็ก img ใน div มีผลเชิงลบเล็กน้อย


1

ฉันพัฒนาปลั๊กอินที่แก้ไขปัญหาที่แน่นอนนี้: http://wordpress.org/extend/plugins/unwrap-images/

ดีกว่าการตั้งค่าระยะขอบหรือดำดิ่งลงในรหัส Wordpress สำหรับผู้ที่ไม่ต้องการยุ่งกับรหัสเพราะใช้ฟังก์ชั่นการแกะแบบดั้งเดิมของ jQuery เพื่อแกะภาพทั้งหมดของแท็ก p

หวังว่านี่จะช่วยใครซักคน! ไชโยไบรอัน


เห็นได้ชัดว่ายังมีการติดตั้งมากกว่า 30 รายการ: D
Julix

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

ฉันไม่ใช่ผู้เชี่ยวชาญ แต่ใช้เวลาแค่ช่วงบ่ายเพื่อพยายามแก้ปัญหา img ห่อด้วยแท็ก p และนี่ก็ใช้ได้สำหรับฉัน

ฉันกำลังทำงานกับธีมที่ใช้เวิร์ดเพรสและเพิ่งเพิ่มไฟล์นี้ลงในไฟล์ function.js

ฟังก์ชั่น 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’);

ตอนนี้ฉันสามารถทำงาน p และ img แยกกันได้

นอกจากนี้ยังสามารถเพิ่ม div ด้วยคลาสที่แตกต่างกันได้ img ใช้สิ่งนี้:

$(document).ready(function (){

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

อันสุดท้ายนี้ไม่ได้แก้ปัญหาของฉันเพราะฉันต้องการสร้างแท็ก p พร้อมจอแสดงผล: ไม่มี; ดังนั้นฉันต้องถอด img เหล่านั้นออกจากที่นั่น


3
คุณใช้เครื่องหมายคำพูดหยิกหรือไม่ :)
fuxia

ฉันได้พิจารณาวิธีนี้ย้อนกลับไปก่อน แต่ความคิดเกี่ยวกับการจัดการ DOM ที่ไม่จำเป็นผ่าน jQuery นั้นมีความเสี่ยงและค่าใช้จ่ายที่ไม่จำเป็นมากเกินไปเมื่อคุณสามารถทำได้ใน PHP ด้วยนิพจน์ทั่วไปที่ยุ่งยาก
Dwayne Charrington

0

โซลูชันอื่นอาจใช้ปลั๊กอินWP ที่ไม่จัดรูปแบบเพื่อปิดใช้งานฟังก์ชั่น auto-p ในแต่ละโพสต์


มันมีประโยชน์ทีเดียวแม้ว่าข้อแม้เดียวที่ฉันเห็นก็คือถ้าคุณต้องการภาพที่ไม่มีแท็ก P แต่มีข้อความในหน้าของคุณ นี่อาจเป็นผลดีสำหรับโพสต์ที่เพิ่งมีภาพและข้อความไม่กี่บรรทัด ยังมีประโยชน์
Dwayne Charrington

ใช่นั่นคือเหตุผลที่ฉันพูดขึ้นอยู่กับโพสต์
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แท็กและหลีกเลี่ยงการติดตามโดยอัตโนมัติ สังเกตการ|แยกไปป์- เป็นไวยากรณ์ของregex !

นั่นคือความสุข Wordpressing!

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.