web-dev-qa-db-ja.com

「P」タグで画像を折り返すWordpressを停止する

私はこれに対する簡単な解決策を高低で探求しましたが、役に立ちません。 Wordpressは私のイメージをpタグでラッピングし続けており、私が取り組んでいるサイトのレイアウトは偏心しているため、これは非常に面倒です。

画像のラップを解除するためのjQueryソリューションを作成しましたが、それほど素晴らしいものではありません。他のものがページにロードされているために遅れているので、変更は遅くなります。 Wordpressがpタグの付いた画像だけを折り返すのを防ぐ方法はありますか？フックやフィルタはおそらくそれを実行することができます。

これは、画像をアップロードしてからWYSIWYGエディタに挿入するときに発生します。クライアントは技術的に不適切ではないため、コードビューに手動でアクセスしてpタグを削除することはできません。

私はイメージがインラインであることを理解しています、しかし私がサイトでコード化されたイメージを持っている方法はdivの中にありブロックするように設定されているので、それらは有効なコードです。

postseditorcontentwysiwygthe-content
32
Dwayne Charrington

これが、昨日クライアントサイトで我々がこの問題を抱えていたことでした...プラグインとしてクイックフィルタを作成し、それを有効にしました。

<?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);
32
jamesc

基本的にあなたはフォーマットの目的のためにブロックレベル要素のように img をWordPressに扱わせる必要があります。そのような要素は wpautop() にハードコードされていて、リストは残念ながらフィルタリングされません）。

私がすることは：

  1. 別の名前でフォークwpautop()。
  2. $allblocks変数のregexpにimgを追加してください。
  3. the_contentフィルターからwpautopを削除します。
  4. フォークしたバージョンをthe_contentに追加してください。
  5. 処理の順番が変わったために何か問題が発生した場合は、他のフィルタを優先して削除し、再度追加する必要があります。
13
Rarst

多分これは役立つでしょう

remove_filter('the_content', 'wpautop')

しかし、それから他のすべての段落を手動で追加します。

2
Soska

受け入れられた答えはイメージだけで私を助けました、しかし修正されたコードは私のサイトでリンクされたイメージをうまく処理しません。 この ブログ記事には、完璧に機能するコードがあります。

これがコードです：

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
rlesko

私は専門家ではありませんが、午後の時間を使って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の周りに異なるクラスのdivを追加することもできます。

$(document).ready(function (){

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

私はdisplay付きのpタグを作りたかったので、最後の1つは私の問題を解決しませんでした。だから私は本当にそこからそれらのimgを取り除かなければなりませんでした。

1
M Joana

私はこの正確な問題を修正したプラグインを開発しました： http://wordpress.org/extend/plugins/unwrap-images/

JQueryのネイティブunwrap関数を使用して自分のpタグのすべての画像をアンラップするため、マージンを設定したり、コードを使用したくない人にはWordpressのコードに直接アクセスするよりも優れています。

これが誰かに役立つことを願っています！乾杯、ブライアン

1
gnzlz

Soskaは1つの簡単な方法を示しました。

しかし、私がやっていることは、コンテンツから画像を抽出し、それを別々に表示することです。

1
Avinash

この記事は少し古くなっていますが、CSSを使用しない方がはるかに単純な解決策があります。

Imgタグをdivでラップしても、悪影響はほとんどありません。

1
Laoshi Ma

anyタグのためにこれを修正するquick and dirty方法を探している人がいる場合は、次のようにします。

  1. wp-content/format.phpに行きます。
  2. wpautop関数を見つけます。 （あなたがそれを逃した場合は、それはWP-AUTO-Pです、それを入手しますか？）
  3. "all blocks"変数を決定します。$allblocks = '(?:table|thead|tfoot|capti...のようなものにします。
  4. 最後に、省略したいブロックを追加します - img、aなど。aタグを追加するために(...)menu|summary)';を(...)menu|summary|a)';に変更し、autopeeing itを避けます。パイプの|セパレータに注意してください - それは regex 構文です！

それはそれ、幸せなWordpressingです！

0
JDuarteDJ

投稿によっては、 WP Unformatted プラグインを使用して投稿ごとにauto-p機能を無効にする方法もあります。

0
Synetech