更新：2018-09-05

Question

问题

我正在尝试调整要插入的YouTube视频的大小，并获得了一些可以正常使用的CSS样式，但是WordPress不断在我的视频，图像和iframe标签周围添加

标签的事实正在中断我的代码。我只是想从博客内容部分（而不是边栏，小部件，页脚等）中的元素（视频/ img / iframe）中删除段落标签换行

客户端网站：

此网站是针对客户的，因此代码必须尽可能不引人注目。例如，一个好的解决方案是自定义短代码，或者使我可以使用CSS样式规则定位视频的

。

以下是相关网站上的博客文章： http://ehepperle.com/in-progress/feelheal/11/how-to-create-125-px-ad-banner-gimp/

我的系统

WordPress： 4.9.6
主题：店面
网站： http://ehepperle.com/in-progress/feelheal/11/how-to-create-125-px-ad-banner-gimp/

我的密码

由于这是特定于WordPress过滤器而不是一般的编码概念，因此我还没有找到一个很好的演示示例的方法，但是下面的代码片段展示了我的尝试：

functions.php-版本1

// Remove P Tags Around Images 
// From: http://justlearnwp.com/remove-p-tag-around-wordpress-images/
function filter_ptags_on_images($content){
    return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_images');

functions.php-版本2

// https://stackoverflow.com/questions/44539888/remove-automatic-p-tag-in-wordpress#answer-44540531
function reformat_auto_p_tags($content) {
    $new_content = '';
    $pattern_full = '{(\[raw\].*?\[/raw\])}is';
    $pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
    $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
    foreach ($pieces as $piece) {
        if (preg_match($pattern_contents, $piece, $matches)) {
            $new_content .= $matches[1];
        } else {
            $new_content .= wptexturize(wpautop($piece));
        }
    }

    return $new_content;
}

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'reformat_auto_p_tags', 99);
add_filter('widget_text', 'reformat_auto_p_tags', 99);

我在发布之前已查看过的链接

我尝试了将这些不同的可能解决方案拼凑而成的解决方案，但无济于事。

我的问题

以下问题实际上是同一主要问题的多个方面，可以从各个角度收集最完整的理解。

如何从WordPress的iframe，视频和图像标签中删除
标签？我过去两年（或更早）找到的方法似乎无效。
我的代码有什么问题？为什么删除wpautop过滤器无法在我的functions.php中使用？
WP版本4.8-4.9是否进行了某些更改，从而使这些筛选器hack不再起作用？

更新：2018-09-05

我正在添加完整的functions.php文件，以防有人可以帮助您识别引起冲突的内容。我什么都没看到，但也许您会看到我想念的东西。

functions.php（完整）

<?php
add_action( 'wp_enqueue_scripts', function() {
    //* Parent CSS
    wp_enqueue_style( 'storefront', 
      get_template_directory_uri() . '/style.css' );

    //* Child CSS
    wp_enqueue_style( 'storefront-ehw-1', 
      get_stylesheet_directory_uri() . '/style.css', [ 'storefront' ] );
} );

/* Adds search box to top nav menu
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
    $items .= '<li class="widget widget_search">' . get_search_form( false ) . '</li>';
    return $items;
}
*/

/* Hide categories from WordPress category widget
NOTE: 59 is the id of .Test-Posts category. This hides that from users.*/
function exclude_widget_categories($args){
    $exclude = "59";
    $args["exclude"] = $exclude;
    return $args;
}
add_filter("widget_categories_args","exclude_widget_categories");

/* Add Google fonts */
function wpb_add_google_fonts() {

wp_enqueue_style( 'wpb-google-fonts', 'http://fonts.googleapis.com/css?family=Aguafina Script|Neucha|The Girl Next Door|Quintessential|Open Sans|Raleway', false ); 
}

add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );


/**
 * Display the theme credit
 *
 * @since  1.0.0
 * @return void
 */
function storefront_credit() {
    ?>
    <div class="site-info">
        <?php echo esc_html( apply_filters( 'storefront_copyright_text', $content = 'Copyright &copy; ' . date( 'Y' ) . ' ' . get_bloginfo( 'name' ) ) ); ?>
        <?php if ( apply_filters( 'storefront_credit_link', true ) ) { ?>

        <br />

        <?php echo '<a href="https://erichepperle.com" target="_blank" title="' . esc_attr__( 'Eric Hepperle Designs - Affordable eCommerce WordPress websites for small business', 'storefront-ehw-1' ) . '" rel="author">' . esc_html__( 'Designed by: Eric Hepperle Designs', 'storefront-ehw-1' ) . '</a>' ?>
        <?php } ?>
    </div><!-- .site-info -->/*<?php
}


/* **** VARIOUS ATTEMPTS TO REMOVE P-TAGS FROM YOUTUBE VIDEO THUMBNAILS ****

// Remove P Tags Around Images 
// From: http://justlearnwp.com/remove-p-tag-around-wordpress-images/
function filter_ptags_on_images($content){
    return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_images');

// Remove P Tags Around videos 
function filter_ptags_on_vids($content){
    return preg_replace('/<video>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/video>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_vids');

// https://stackoverflow.com/questions/44539888/remove-automatic-p-tag-in-wordpress#answer-44540531
function reformat_auto_p_tags($content) {
    $new_content = '';
    $pattern_full = '{(\[raw\].*?\[/raw\])}is';
    $pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
    $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
    foreach ($pieces as $piece) {
        if (preg_match($pattern_contents, $piece, $matches)) {
            $new_content .= $matches[1];
        } else {
            $new_content .= wptexturize(wpautop($piece));
        }
    }

    return $new_content;
}

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'reformat_auto_p_tags', 99);
add_filter('widget_text', 'reformat_auto_p_tags', 99);

// ------------ FROM STACK OVERFLOW ------------------------
// 
// Remove p tags from images, scripts, and iframes.
function remove_some_ptags( $content ) {
$content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
$content = preg_replace('/<p>\s*(<script.*>*.<\/script>)\s*<\/p>/iU', '\1', $content);
$content = preg_replace('/<p>\s*(<iframe.*>*.<\/iframe>)\s*<\/p>/iU', '\1', $content);
return $content;
}
add_filter( 'the_content', 'remove_some_ptags' );

*/

// Add the filter to manage the p tags
add_filter( 'the_content', 'jb_remove_autop_for_image', 0 );

function jb_remove_autop_for_image( $content )
{
    global $post;

     // Here you can write condition as per your requirement.
     // i have added example for your idea
    if ( is_single() && $post->post_type == 'image' )
        remove_filter('the_content', 'wpautop');

    return $content;
}

Answer 1

在这里，我正在发送用于从图像脚本和iframe中删除p标签的代码。

// Remove p tags from images, scripts, and iframes.
function remove_some_ptags( $content ) {
$content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
$content = preg_replace('/<p>\s*(<script.*>*.<\/script>)\s*<\/p>/iU', '\1', $content);
$content = preg_replace('/<p>\s*(<iframe.*>*.<\/iframe>)\s*<\/p>/iU', '\1', $content);
return $content;
}
add_filter( 'the_content', 'remove_some_ptags' );

请检查。

Answer 2

请尝试以下代码。

// Add the filter to manage the p tags
add_filter( 'the_content', 'jb_remove_autop_for_image', 0 );

function jb_remove_autop_for_image( $content )
{
    global $post;

     // Here you can write condition as per your requirement.
     // i have added example for your idea
    if ( is_single() && $post->post_type == 'image' )
        remove_filter('the_content', 'wpautop');

    return $content;
}

Answer 3

您可以将嵌入式iframe，图像，视频等包装在自己的包装中。 WP然后不会添加<p>标签。使用“ oembed_dataparse”过滤器。

// Wrap iframe for embedded video in <div> with custom class.
// Add class-modifier if aspect ratio is 4/3. 
function wrap_oembed_dataparse($return, $data, $url) {

    $mod = '';

    if  (   ( $data->type == 'video' ) &&
            ( isset($data->width) ) && ( isset($data->height) ) &&
            ( round($data->height/$data->width, 2) == round( 3/4, 2) )
        )
    {
        $mod = 'embed-responsive--4-3';
    }

    return '<div class="embed-responsive ' . $mod . '">' . $return . '</div>';
}

add_filter( 'oembed_dataparse', 'wrap_oembed_dataparse', 99, 4 );

Answer 4

此Vanilla-JS函数搜索所有iframe，并将其移到其父级之外：

moveIframesOutOfPtags() {
  let iframes = document.querySelectorAll( 'iframe' );

  let before = "<div class="iframe-container">";
  let after = "</div>";

  Object.entries( iframes ).forEach( entry => {
    let value = entry[1];

    if( value.parentNode.nodeName === 'P' || value.parentNode.nodeName === 'p' ){
      value.parentNode.outerHTML = before + value.parentNode.innerHTML + after;
    }
  });
}

经过测试可以正常工作。

我正在Vue应用程序中使用它，因此已将其放在已安装的部分中。如果您不使用vue，则必须将函数放在<script中，然后在某些window.onload(() => { ... });

中运行

根据您对页面上脚本的控制方式，应将其放在此处，放在函数文件中（好），或者直接放在页脚中（坏）。

奖励信息

我还添加了一个container-div（.iframe-container）来放置iframe。通过使用this method，您可以添加这些样式，然后缩放iframe以填充100％的宽度，并保持设置的宽高比％。

在WordPress 4.9中的图像，视频，iframe周围剥离自动P标签

问题

客户端网站：

我的系统

我的密码

functions.php-版本1

functions.php-版本2

我在发布之前已查看过的链接

我的问题

更新：2018-09-05

functions.php（完整）

4 个答案: