我创建了一个Wordpress主题,现在我正在为块编辑器创建一个编辑器样式表,以更好地反映该主题在编辑器中的外观。为此,我需要在那里解决不同的职位类型。
对于前端,存在body_class()
要在模板中使用的函数,该函数除其他外插入一个类,该类标识帖子类型,并且可以在组合选择器中使用,以仅在特定帖子类型中处理某些元素。
现在,后类型的类是在页面的主体标签,也是在编辑模式下,但显然编辑样式表CSS是一种“隔离”的方式的应用-其中含有类组合选择是在body标签在编辑器中将无法使用。
因此,我正在寻找在块编辑器中可用的类似内容,以便可以在仅适用于特定后置类型中某些元素的组合选择器中使用它。
任何想法如何做到这一点?
顺便说一句,我也尝试使用Javascript / jQuery检查帖子类型:
wp.domReady(function() {
var postType = jQuery('form.metabox-base-form input#post_type').attr('value');
if(postType == 'post'){
alert("It's a post!");//in real life some other action...
}
});
但是,尽管至少触发我放置在其中的警报是合乎逻辑的,但是当我加载帖子的编辑页面时,什么都没有发生,其中包含“ post”值的输入元素清晰可见。(?)
另外:尽我所能找到解决方法,我还尝试了该脚本以查看使用编辑器时是否可以检查body类:
jQuery(document).ready(function() {
if(jQuery('body').hasClass('post-type-page')) {
alert("It's a page!");
} else {
alert("It's not a page");
}
});
编辑器页面上的结果(即显示WP块编辑器的网页):完全没有警报!为什么???块编辑器Javascript是否阻止/阻止所有其他Javascript?
PS:我之前在StackExchange WordPress开发中发布了这个问题的第一部分,但没有任何反应,所以我在这里尝试...
我自己找到了一个解决方案(但是有@ JobiWon9178的提示-谢谢!!!)。不是纯CSS,而是涉及一些JS / jQuery。这是一个脚本,类似于我已经在问题中发布的脚本,并添加了必要的添加以动态地将类添加到相关的HTML元素中:
$(document).ready(function() {
if($('body').hasClass('post-type-page')) {
$('#editor').addClass('post-type-page');
} else if($('body').hasClass('post-type-post')) {
$('#editor').addClass('post-type-post');
}
});
这会将相关的post-type-xxxx
类添加到#editor
DIV中,该DIV是块编辑器的外部容器之一。违背了body
班,这个元素的类是相关的编辑内容,并可以在编辑器stylsheet组合选择使用。
(注意:最初,我试图将类添加到具有类的包装器DIV中edit-post-visual-editor editor-styles-wrapper
,但这是行不通的-根本没有添加post-type类。)
一个示例:编辑器样式表中的以下CSS规则现在将适用于编辑器中的所有段落块,但仅当post-type是页面时:
.post-type-page .wp-block-paragraph {
/* (CSS settings here) */
}
@ JobiWon9178在注释中指出了一个重要的细节:上面的jQuery脚本必须使用admin_enqueue_scripts添加,而不是与前端脚本一起添加。因此,我将该脚本放入一个名为的文件中,并将其放入admin_scripts.js
队列中,如下所示functions.php
:
function my_admin_scripts($hook) {
if ( 'post.php' != $hook ) {
return;
}
wp_register_script('adminscripts', get_template_directory_uri() . '/js/admin_scripts.js', '', null, true);
wp_enqueue_script('adminscripts');
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );
这就是我的工作解决方案。如果有人仍然想出一个纯CSS解决方案,我会很高兴,但是我想目前(即在Wordpress 5.3中)还没有仅CSS的方法。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句