"P"태그로 이미지 줄 바꿈 중지


33

나는 이것에 대한 간단한 해결책을 찾기 위해 높고 낮게 검색했지만 아무 소용이 없습니다. Wordpress는 이미지를 p 태그로 계속 감싸고 있으며 현재 작업중 인 사이트 레이아웃의 편심 특성 때문에 매우 성가신 일입니다.

이미지를 풀기 위해 jQuery 솔루션을 만들었지 만 그렇게 크지는 않습니다. 페이지에 다른 항목이로드되어 지연되어 변경이 느립니다. WordPress에서 p 태그로 이미지 만 줄 바꿈하는 것을 방지하는 방법이 있습니까? 실행 가능한 후크 또는 필터

이미지를 업로드 한 다음 WYSIWYG 편집기에 이미지를 삽입 할 때 발생합니다. 클라이언트가 기술적으로 부적절하지 않기 때문에 수동으로 코드보기로 이동하여 p 태그를 제거하는 것은 옵션이 아닙니다.

이미지가 인라인이지만 사이트 코딩 된 이미지가 div 내부에 있고 차단되도록 설정된 방식이므로 유효한 코드입니다.


답변:


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 태그를 제거해야합니다.

다른 편집기의 출력으로 실패 할 경우 정규 표현식의 강도가 확실하지 않습니다 (예 : img 태그가 닫혀있는 경우> 실패). 누군가가 더 강한 것을 가지고 있다면 정말 도움이 될 것입니다.

건배,

제임스

--- 개선 된 필터 ---

링크로 래핑 된 이미지로 작업하려면 링크를 출력에 유지하고 p 태그를 제거합니다.

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

의심의 여지없이 이것이 정답입니다. 고마워 제임스, 나는 그것을 시도하고 훌륭하게 작동합니다.
Dwayne Charrington

안녕 @ 드웨인-피드백 주셔서 감사합니다. 링크를 처리 할 개선 된 필터를 추가했습니다. 이제 클라이언트 사이트에서 사용하고 있습니다.
jamesc

반드시 Wordpress 플러그인 저장소에 넣어야합니다. 빠른 Google 검색은 많은 사람들이 좋은 해결책 없이이 문제를 겪고 있음을 보여줍니다.
Geoffrey Burdett

1
HTML5 기본 img마크 업 (예 : <img ...>닫는 슬래시) 에서는 작동하지 않습니다 . 정규식에서 옵션을 선택하는 것이 좋습니다. 또는 더 나은 방법으로, 처리 할 때 그대로 둘 수 있습니다 .*.
Bram Vanroy 2016 년

누구든지 <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 태그가 시작되기 전에 단락 태그를 닫아 레이아웃을 무효화합니다.
벤츠 001

2

어쩌면 이것은 도움이 될 것입니다

remove_filter('the_content', 'wpautop')

그러나 수동으로 다른 모든 단락을 추가 할 것입니다.


나는이 접근법을 고려했지만 레이아웃이 편심하기 때문에 p 태그가 필요하다는 것에 크게 의존합니다. 2 열 텍스트 일을 할 때 p 태그가 왼쪽으로 떠서 2 열의 텍스트 모양을 나타냅니다. 따라서 이미지를 감싸는 ap 태그가 왜 떠 다니기 때문에 문제가 될 수 있는지 알 수 있습니다.
Dwayne Charrington

1

Soska는 한 가지 쉬운 방법을 제공했습니다.

그러나 내가하는 일은 내용에서 이미지를 추출하여 별도로 표시하는 것입니다.


나는 이것도 고려했으며 여전히 옵션입니다. 그러나 모든 번거 로움을 저장하는 이미지는 하나뿐이므로 추천 게시물 축소판을 대신 사용하여 이미지 표시 방법을 제어 할 수 있습니다.
Dwayne Charrington

또한 당신은 엄지 이미지와 같은 게시물 / 페이지에 사용자 정의 필드를 추가하고 그 값으로 이미지 경로를 저장할 수 있습니다 ...
Avinash

1

이 게시물은 조금 오래되었지만 훨씬 간단한 솔루션이 있으며 CSS를 제한합니다.

div에 img 태그를 감싸면 거의 부정적인 영향을 미치지 않습니다.


1

이 정확한 문제를 해결하는 플러그인을 개발했습니다 : http://wordpress.org/extend/plugins/unwrap-images/

jQuery의 기본 언 랩핑 기능을 사용하여 p 태그의 모든 이미지를 언 랩핑하기 때문에 코드를 엉망으로 만들고 싶지 않은 사람들을 위해 여백을 설정하거나 Wordpress 코드로 바로 뛰어 들어가는 것이 좋습니다.

이것이 누군가를 돕기를 바랍니다! 건배, 브라이언


분명히 여전히 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

나는 전문가가 아니지만 구멍 태그를 p 태그로 감싼 de img를 해결하려고 애썼으며 이것은 나를 위해 일했습니다.

워드 프레스 기반 테마로 작업하고 있으며이를 functions.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를 따로 따로 작업 할 수 있습니다.

다음을 사용하여 img가 다른 클래스 arround를 가진 div를 추가 할 수도 있습니다.

$(document).ready(function (){

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

이 마지막은 p 태그를 display : none;으로 만들고 싶기 때문에 문제를 해결하지 못했습니다. 그래서 나는 그 이미지를 꺼내야했습니다.


3
당신은 정말 따옴표를 사용합니까? :)
fuxia

필자는이 접근법을 처음부터 다시 생각했지만 jQuery를 통한 불필요한 DOM 조작에 대한 생각은 까다로운 정규 표현식으로 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태그 피하기는 autopeeing 을. 파이프 |구분 기호를 참고하십시오 - 정규식 구문입니다!

그게 다야, 행복한 Wordpressing!

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.