如何解决WordPress中按字母分组的分类术语链接
在我的网站中,我创建了一个自定义分类术语,称为。该术语的所有链接都显示在同一页面上。我使用在functions.php和custom.css文件中的以下自定义,通过按字母顺序导航的字母表中的第一个字母,同时又能够使用箭头从每个字母的列表中跳回,设法使它们以组的形式出现。
我有两个问题:
- 页面顶部的字母没有响应。
- 选择字母时,我不会跳到该字母列表的顶部,而是跳到最后。当我按下箭头以返回字母时,我没有到达那里,而是在第一个字母列表的顶部。
关于如何解决这两个问题的任何想法?
// 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,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;}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。