css - WordPress中按字母分组的分类术语链接

Question

在我的网站中，我创建了一个名为的自定义分类术语。该术语的所有链接都出现在此处的同一页面中。我设法使它们出现在该页面中的组中，通过字母表的第一个字母和字母导航，同时能够使用functions.php和custom.css文件中的以下自定义，用箭头从每个字母的列表中跳回来。

我有两个问题：

1. 页面顶部的字母表没有响应。
2. 当我选择一封信时，我不会跳到这封信列表的顶部，而是跳到最后。当我画出返回字母表的箭头时，我没有到达那里，而是在第一个字母列表的顶部。

关于如何解决这两个问题的任何想法？

// Taxonomy term links grouped by alphabets
function sk_alphabetical_archives( $atts ) {

    // Pull in shortcode attributes and set defaults
    $atts = shortcode_atts( array(
        'taxonomy' => 'post_tag'
    ), $atts, 'alphabetical-archives' );

    // https://codex.wordpress.org/Function_Reference/sanitize_key
    $taxonomy = sanitize_key( $atts['taxonomy'] );

    $jump_links = '';
    $list = '';

    // get all the terms and store in $terms variable
    $terms = get_terms( $taxonomy );

    $groups = array();

    if ( $terms && is_array( $terms ) ) {

        // for each term
        foreach( $terms as $term ) {
            // obtain the first letter and store it in $first_letter variable
            $first_letter = mb_strtoupper( mb_substr( $term->name, 0, 1 ) );

            // set the key of $groups array to the first letter and its corresponding value as the term. Remember array has key => value pairs.
            $groups[ $first_letter ][] = $term;
        }

        if ( ! empty( $groups ) ) {

            $list .= '<div class="term-groups">';

            foreach( $groups as $letter => $terms ) {
                $jump_links .=  '<a href="#'. $atts['taxonomy'] . '-' . $letter .'">' . $letter . '</a>';

                $list .= '<div class="terms-group" id="'. $atts['taxonomy'] . '-' . $letter .'"><h4>' . apply_filters( 'the_title', $letter ) . '<span class="to-top"><a href="#'. $taxonomy .'_top" title="back to top"><i class="icon ion-ios-arrow-thin-up"></i></a></span></h4>';

                $list .= '<ul>';
                    foreach( $terms as $term ) {
                        $list .= '<li><a href="' . esc_url( get_term_link( $term ) ) . '" alt="' . esc_attr( sprintf( __( 'View all post filed under %s', 'my_localization_domain' ), $term->name ) ) . '">' . $term->name . '</a> <em>(' . $term->count. ')</em></li>';
                    }
                $list .= '</ul></div>';
            }

            $jump_links_html .= '<div class="alphabetical-terms"><div class="jump-links" id="'. $taxonomy .'_top">' . $jump_links . '</div>';

            $list .= '</div></div>';

        }
    }

    // else {
    //  $list .= '<p>Sorry, no items were found</p>';
    // }

    return $jump_links_html . $list;

}
add_shortcode( 'alphabetical-archives', 'sk_alphabetical_archives' );

CSS

/* Taxonomy term links grouped by alphabets */

.alphabetical-terms a {
    color: #101010;}
.alphabetical-terms a:hover {
    color: #488bca;}
.alphabetical-terms a:visited {
    color: #202020;}
.jump-links {
    padding: 5px 0;}
.jump-links a {
    padding: 7px 10px;
    margin-right: 5px;
    border: 1px solid #202020;}
.jump-links a:hover {
    background: #488bca;
    color: #fff;
    border: 1px solid #202020;}
.terms-group {
    overflow: hidden;
    border-bottom: 1px solid #eee;       padding: 20px 0 10px; 
    margin: 0 0 10px;}
.terms-group:last-child {
    border-bottom:none;}
.jump-links:focus,
.terms-group:focus {
    outline: none;}
.terms-group h4 {
    color: #202020;}
.terms-group ul {
    margin: 0; }
.terms-group ul li {
margin: 0 1.5% 5px 0; list-style-type: none; text-overflow: ellipsis; white-space: nowrap; overflow:hidden; position: relative;
    right: 17px;}
.terms-group em {
font-size: 14px; font-style:normal;}

@media only screen and (min-width: 501px) {

    .terms-group ul {
        -moz-column-count: 3;
        -moz-column-gap: 15px;
        -webkit-column-count: 3;
        -webkit-column-gap: 15px;
        column-count: 3;
        column-gap: 15px;}

}

.terms-group ul > li {
    list-style-type: none;}

.terms-group ul li:before {
    content: '\2022'; /* 'î “' */
    margin: 0 6px 0 -8px;}

.to-top {
    float: right;}
.to-top a {
    padding: 10px 20px;}
.to-top a:visited {
    color: #202020;}

标签： cssfunctiontaxonomy-termsalphabet