停止 WordPress PHP/JavaScript 函数添加 skip-link 代码

Question

在 wp-includes/block-template.php, the_block_template_skip_link() 中添加一个脚本和样式，在每个页面上创建一个 skip-link。我想停止添加。

我明白为什么 skip-link 很重要。我没有删除它；我正在替换它，因为我需要将它包装在 div 中并将 link 文本更改为标题大小写：

add_action( 'wp_body_open', 'custom_skip_link' );

function custom_skip_link() {
    echo '
    <div class="skip-link-container">
        <a class="skip-link screen-reader-text" href="#content">Skip to Content</a>
    </div>
  ';
}

the_block_template_skip_link()

function the_block_template_skip_link() {
    global $_wp_current_template_content;
 
    // Early exit if not a block theme.
    if ( ! current_theme_supports( 'block-templates' ) ) {
        return;
    }
 
    // Early exit if not a block template.
    if ( ! $_wp_current_template_content ) {
        return;
    }
    ?>
 
    <?php
    /**
     * Print the skip-link styles.
     */
    ?>
    <style id="skip-link-styles">
        .skip-link.screen-reader-text {
            border: 0;
            clip: rect(1px,1px,1px,1px);
            clip-path: inset(50%);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute !important;
            width: 1px;
            word-wrap: normal !important;
        }
 
        .skip-link.screen-reader-text:focus {
            background-color: #eee;
            clip: auto !important;
            clip-path: none;
            color: #444;
            display: block;
            font-size: 1em;
            height: auto;
            left: 5px;
            line-height: normal;
            padding: 15px 23px 14px;
            text-decoration: none;
            top: 5px;
            width: auto;
            z-index: 100000;
        }
    </style>
    <?php
    /**
     * Print the skip-link script.
     */
    ?>
    <script>
    ( function() {
        var skipLinkTarget = document.querySelector( 'main' ),
            sibling,
            skipLinkTargetID,
            skipLink;
 
        // Early exit if a skip-link target can't be located.
        if ( ! skipLinkTarget ) {
            return;
        }
 
        // Get the site wrapper.
        // The skip-link will be injected in the beginning of it.
        sibling = document.querySelector( '.wp-site-blocks' );
 
        // Early exit if the root element was not found.
        if ( ! sibling ) {
            return;
        }
 
        // Get the skip-link target's ID, and generate one if it doesn't exist.
        skipLinkTargetID = skipLinkTarget.id;
        if ( ! skipLinkTargetID ) {
            skipLinkTargetID = 'wp--skip-link--target';
            skipLinkTarget.id = skipLinkTargetID;
        }
 
        // Create the skip link.
        skipLink = document.createElement( 'a' );
        skipLink.classList.add( 'skip-link', 'screen-reader-text' );
        skipLink.href = '#' + skipLinkTargetID;
        skipLink.innerHTML = '<?php esc_html_e( 'Skip to content' ); ?>';
 
        // Inject the skip link.
        sibling.parentElement.insertBefore( skipLink, sibling );
    }() );
    </script>
    <?php
}

我试过的

在 functions.php 中，我尝试了以下方法无济于事：

// Attempt 1
remove_action( 'wp_body_open', 'gutenberg_the_skip_link' );

//Attempt 2
remove_action( 'init', 'gutenberg_the_skip_link' );

// Attempt 3
remove_action( 'wp_body_open', 'the_block_template_skip_link' );

// Attempt 4
remove_action( 'init', 'the_block_template_skip_link' );

我知道我可以使用 jQuery 删除 skip-link，但我更愿意使用 PHP 停止添加它。

(function($) {
    $(document).ready(function() {
        $("a.skip-link, style#skip-link-styles").remove();
    })
})(jQuery);

Answer 1

这个有效：

// Attempt 5
remove_action( 'wp_footer', 'the_block_template_skip_link' );

我没有考虑从 wp_footer(). I incorrectly assumed the_block_template_skip_link() was being applied to wp_body_open() 中删除操作，因为 skip-link 在页面中的位置。

我现在可以看到 skip-link 的位置是使用 JavaScript:

相对于站点包装器确定的

// Get the site wrapper.
// The skip-link will be injected in the beginning of it.
sibling = document.querySelector( '.wp-site-blocks' );

[...]

// Inject the skip link.
sibling.parentElement.insertBefore( skipLink, sibling );

停止 WordPress PHP/JavaScript 函数添加 skip-link 代码

Stop WordPress PHP/JavaScript function adding skip-link code

javascript

php

wordpress

accessibility

the_block_template_skip_link()

我试过的