问题
我正在尝试调整要插入的YouTube视频的大小, 并获得了一些可正常使用的CSS来设置其样式, 但是WordPress不断在视频, 图像和iframe标签周围添加<
P>
标签的事实破坏了我的代码。我只是想从博客内容部分(而不是边栏, 小部件, 页脚等)中的元素(视频/ 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/
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中删除自动p标签
- http://justlearnwp.com/remove-p-tag-around-wordpress-images/
- 如何从源代码中删除WordPress帖子中图像周围的P标签
- https://www.daddydesign.com/wordpress/how-to-remove-the-paragraph-tag-from-images-inside-the-wordpress-post-content/
- https://ahmadawais.com/remove-the-p-paragraph-tags-from-author-description-in-wordpress/
- https://firstsiteguide.com/stop-adding-paragraphs-automatically/#comment-424246
- https://codex.wordpress.org/Function_Reference/wpautop
- http://micahjon.com/2016/removing-wrapping-p-paragraph-tags-around-images-wordpress/
- 如何从WordPress删除p标签
- 如何从WordPress中的iframe, 视频和图像标签中删除< p> 标签?我过去两年(或更早)找到的方法似乎无效。
- 我的代码有什么问题?为什么删除wpautop过滤器在我的functions.php中不起作用?
- WP版本4.8-4.9是否进行了某些更改, 从而使这些筛选器黑客不再起作用?
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
*
* @since1.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;
}
#1 【在WordPress 4.9中去除图片,视频,iframe周围的自动P标签】在这里, 我正在发送用于从图像脚本和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' );
好心检查。
#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;
}
#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 );
#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 = http://www.srcmini.com/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放入其中。通过使用此方法, 你可以添加这些样式, 然后缩放iframe以填充100%的宽度, 并保持设置的长宽比%。
推荐阅读
- 基于类别的样式发布存档博客预览
- WordPress生成中站点标题,站点内部和站点脚注问题的结构和布局style.css
- WP奇怪的永久链接问题
- WP在网页上粘贴元素(子菜单)
- wp-content之前缺少斜杠&某些上传的图像未显示()
- WP有时会显示未登录用户的页面
- WordPress主题的大小
- 在首页WordPress中显示某个分类的最新博客文章
- 0基础linux运维教程 常见问题