页面模板更改时的挂钩

时间:2015-05-28 作者:Lyphiix

我知道您可以删除页面编辑器页面(:/)的编辑器部分,具体取决于使用add_action( \'load-page.php\', \'hide_editor_function\' ); (当然具有适当的功能)。但是,正如您应该知道的那样,问题是这只会在页面加载/重新加载时起作用。模板一旦更改,就不会立即更改。

据我所知,这方面没有具体的挂钩。所以我的问题是,当用户在管理面板中更改页面模板时,是否有一个钩子?如果没有,什么是“即时”隐藏/显示编辑器(并添加自定义元框)的最佳方式?

谢谢你的时间Lyphiix

2 个回复
最合适的回答,由SO网友:TheDeadMedic 整理而成

如果要“动态”切换编辑器,则需要恢复到纯JavaScript解决方案,并且只“可视化”隐藏它(而不是在服务器端删除它):

function wpse_189693_hide_on_template_toggle() {
    $screen = get_current_screen();
    if ( $screen && $screen->id === \'page\' ) :
        ?>

<script>
    jQuery( "#page_template" ).change(
        function() {
            jQuery( "#postdivrich" ).toggle( jQuery( this ).val() === "my-template.php" );
        }
    ).trigger( "change" );
</script>

<?php
    endif;
}

add_action( \'admin_print_footer_scripts\', \'wpse_189693_hide_on_template_toggle\' );
你不能保持hide_editor_function 是的,虽然这将用于最初隐藏编辑器,但一旦用户保存并重新加载页面,编辑器将不再位于源代码中以进行“切换”。所以它总是在那里,即使它只是隐藏着。

SO网友:James Cushing

对于任何使用古腾堡编辑器的人来说,我发现(除了我对公认答案的评论之外)这里还有更多的工作需要做。

古腾堡给儿童注射.block-editor__container 因此,仅仅修改选择器来捕捉更改事件是不够的,您必须注意插入的元素是否正确。使用MutationObserver (因为这是一种更好的实践,它取代了很快被弃用的DOM突变事件,并且full browser support), 这就是我如何完成捕获模板更改的过程:

$ = $ || jQuery; // Allow non-conflicting use of \'$\'

$(function(){

    // Create an observer to watch for Gutenberg editor changes
    const observer = new MutationObserver( function( mutationsList, observer ){

        // Template select box element
        let $templateField = $( \'.editor-page-attributes__template select\' );

        // Once we have the select in the DOM...
        if( $templateField.length ){

            // ...add the handler, then...
            $templateField.on( \'change\', function(){

                // ...do your on-change work here
                console.log( \'The template was changed to \' + $( this ).val() );

            });
            observer.disconnect();

        }

    });
    // Trigger the observer on the nearest parent that exists at \'DOMReady\' time
    observer.observe( document.getElementsByClassName( \'block-editor__container\' )[0], {
        childList: true, // One of the required-to-be-true attributes (throws error if not set)
        subtree: true // Watches for the target element\'s subtree (where the select lives)
    });

});
希望这对别人有帮助!

结束

相关推荐

Hooks for Links Box

Possible Duplicate:Getting archive pages in WP's AJAX internal link finder? 新的有挂钩吗internal links box 创建于WP 3.1? 我正在尝试在插件中修改它。