Hentikan Membungkus Gambar Wordpress Dengan Tag “P”

Saya telah mencari tinggi dan rendah untuk solusi sederhana untuk ini, tetapi tidak berhasil. Wordpress terus membungkus gambar saya dalam tag p dan karena sifat tata letak eksentrik untuk situs yang saya kerjakan, ini sangat menjengkelkan.

Saya telah membuat solusi jQuery untuk membuka gambar, tetapi tidak terlalu bagus. Tertunda karena memuat hal-hal lain pada halaman dan perubahan lambat untuk dilakukan. Apakah ada cara untuk mencegah Wordpress membungkus hanya gambar dengan tag p? Sebuah kait atau filter mungkin bisa dijalankan.

Ini terjadi ketika mengunggah gambar dan kemudian memasukkannya ke editor WYSIWYG. Masuk ke tampilan kode secara manual dan menghapus tag p bukanlah suatu pilihan karena klien tidak kompeten secara teknis.

Saya mengerti bahwa gambar sejajar, tetapi cara saya memiliki situs kode gambar berada di dalam divs dan diatur untuk diblokir, jadi mereka adalah kode yang valid.

Inilah yang kami lakukan kemarin di situs klien yang mengalami masalah tepat dengan ... Saya membuat filter cepat sebagai plugin dan mengaktifkannya.

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

Jika Anda memasukkannya ke file php di folder / wp-content / plugins Anda dan kemudian mengaktifkannya, itu akan menghapus tag p dari para para yang hanya berisi gambar.

Saya tidak yakin seberapa kuat regexp dalam hal apakah akan gagal dengan output dari editor lain - misalnya jika tag img ditutup hanya dengan itu akan gagal. Jika ada yang punya sesuatu yang lebih kuat, itu akan sangat membantu.

Tepuk tangan,

James

--- Filter yang ditingkatkan ---

Untuk bekerja dengan gambar yang terbungkus tautan, ia menyimpan tautan dalam output dan menghapus tag p.

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

Pada dasarnya Anda perlu membuat WordPress memperlakukan img seperti elemen blok-tingkat untuk tujuan pemformatan. Unsur-unsur seperti itu di- hardcodewpautop() dan daftar sayangnya tidak difilter.

Apa yang akan saya lakukan adalah:

1. Fork wpautop()dengan nama berbeda.
2. Tambahkan imgke regexp dalam $allblocksvariabel.
3. Hapus wpautopdari the_contentfilter.
4. Tambahkan versi bercabang Anda ke the_content.
5. Anda mungkin perlu bermain dengan prioritas dan mungkin menghapus dan menambahkan kembali filter lain jika ada yang rusak karena perubahan urutan pemrosesan.

mungkin ini akan membantu

remove_filter('the_content', 'wpautop')

Tetapi kemudian Anda akan menambahkan paragraf untuk semua yang lain secara manual.

Soska telah memberikan satu / cara mudah.

Tapi yang saya lakukan adalah, mengekstrak gambar dari konten dan menampilkannya secara terpisah.

Posting ini agak lama, tetapi ada solusi yang jauh lebih sederhana, kecuali CSS.

Membungkus tag img dalam div memiliki sedikit efek negatif.

Saya mengembangkan sebuah plugin yang memperbaiki masalah ini: http://wordpress.org/extend/plugins/unwrap-images/

Ini lebih baik daripada mengatur margin, atau menyelam langsung ke dalam kode Wordpress bagi mereka yang tidak ingin mengacaukan kode karena menggunakan fungsi membuka asli jQuery untuk membuka semua gambar dari tag p mereka.

Semoga ini bisa membantu seseorang! Cheers, Brian

Jawaban yang diterima membantu saya hanya dengan gambar tetapi kode yang direvisi tidak menangani gambar yang tertaut dengan baik di situs saya. Posting blog ini memiliki kode yang berfungsi dengan sempurna.

Ini kodenya:

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

Tepuk tangan!

Saya bukan seorang ahli tetapi hanya menghabiskan lubang sore mencoba memecahkan de img terbungkus tag p dan ini bekerja untuk saya.

Saya sedang mengerjakan tema berbasis wordpress dan baru saja menambahkan ini ke file functions.js

Fungsi jquery membuka

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

sekarang saya bisa bekerja p dan img secara terpisah.

Juga dapat menambahkan div dengan kelas yang berbeda di sekitar img menggunakan ini:

$(document).ready(function (){

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

yang terakhir ini tidak menyelesaikan masalah saya karena saya ingin membuat tag p dengan tampilan: tidak ada; jadi saya benar-benar harus mengambil img itu dari sana.

Bergantung pada posnya, solusi lain bisa menggunakan plugin WP Unformatted untuk menonaktifkan fungsi auto-p pada basis per posting.

Jika seseorang mencari cara cepat dan kotor untuk memperbaikinya untuk tag apa pun, inilah yang saya lakukan:

1. pergi ke wp-content / formatting.php
2. temukan fungsi wpautop. (Jika Anda melewatkannya, ini WP-AUTO-P , mengerti?)
3. sirip variabel "semua blok", harus seperti $allblocks = '(?:table|thead|tfoot|capti...
4. di akhir menambahkan blok Anda ingin omit - img, a, dll ... misalnya jika berakhir di (...)menu|summary)';perubahan (...)menu|summary|a)';untuk menambahkan atag dan menghindari autopeeing itu. Perhatikan |pemisah pipa - itu sintaks regex !

Itu dia, senang Wordpressing!