Wordpress教程 2024年11月7日
0 收藏 0 点赞 50 浏览 15012 个字

此教程实现标签按拼音字母(A、B、C 等字母)层级排序,并在页面上添加一个侧边竖向字母导航

<?php
/*
Template Name: Tags
*/
?>

<?php
global $options, $wp_query, $paged;
$term_id = get_queried_object_id();
$tpl = get_term_meta( $term_id, 'wpcom_tpl', true );
$sidebar = wpcom_get_sidebar();
$banner = get_term_meta( $term_id, 'wpcom_banner', true );
if ( ! ($tpl && locate_template('templates/loop-' . $tpl . '.php') != '' ) ) {
    $tpl = 'default';
}

$hide_date = ($tpl === 'list' || $tpl === 'card') ? get_term_meta( $term_id, 'wpcom_hide_date', true ) : 0;

$cols = 0;
if(in_array($tpl, array('masonry', 'card', 'image'))) {
    $cols = get_term_meta($term_id, 'wpcom_cols', true);
    $cols = $cols ?: ($sidebar ? 3 : 4);
}
$content_width = wpcom_get_content_width();
$class = $content_width ? 'main main-' . $content_width : 'main';
get_header();
if($banner){
    $banner_height = get_term_meta( $term_id, 'wpcom_banner_height', true );
    $text_color = get_term_meta( $term_id, 'wpcom_text_color', true );
    $bHeight = intval($banner_height ?: 300);
    $bColor = ($text_color ?: 0) ? ' banner-white' : '';
    $description = term_description(); ?>
    <div <?php echo wpcom_lazybg($banner, 'banner'.$bColor, 'height:'.$bHeight.'px;');?>>
        <div class="banner-inner container">
            <h1><?php single_cat_title(); ?></h1>
            <?php if($description!=='') { ?><div class="page-description"><?php echo $description;?></div><?php } ?>
        </div>
    </div>
<?php } ?>
    <div class="container wrap page-template-brands">
        <?php if( isset($options['breadcrumb']) && $options['breadcrumb']=='1' ) {
            $breadcrumb_class = $content_width ? 'breadcrumb breadcrumb-' . $content_width : 'breadcrumb';
            wpcom_breadcrumb($breadcrumb_class);
        } ?>
        <main class="<?php echo esc_attr($class);?>">
            <?php do_action('category_before_list');?>
            <section class="sec-panel sec-panel-<?php echo esc_attr($tpl);?>">
                <?php if($banner==''){ ?>
                    <div class="sec-panel-head">
                        <h1><span><?php the_title(); ?></span></h1>
                    </div>
                <?php } ?>
                <div class="sec-panel-body">
                
					
				
					<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="wp-block-search__button-outside wp-block-search__icon-button wp-block-search">
    <label class="wp-block-search__label screen-reader-text" for="wp-block-search__input-1">搜索</label>
    <div class="wp-block-search__inside-wrapper" style="width: 100%">
        <input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="搜索......" value="<?php echo get_search_query(); ?>" type="search" name="s" required="">
        <button aria-label="搜索" class="wp-block-search__button has-icon wp-element-button" type="submit">
            <svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
                <path d="M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"></path>
            </svg>
        </button>
    </div>
</form>
					

    
       <div class="initials">
    <li><a href="#A" rel="external nofollow" >A</a></li>
    <li><a href="#B" rel="external nofollow" >B</a></li>
    <li><a href="#C" rel="external nofollow" >C</a></li>
    <li><a href="#D" rel="external nofollow" >D</a></li>
    <li><a href="#E" rel="external nofollow" >E</a></li>
    <li><a href="#F" rel="external nofollow" >F</a></li>
    <li><a href="#G" rel="external nofollow" >G</a></li>
    <li><a href="#H" rel="external nofollow" >H</a></li>
    <li><a href="#I" rel="external nofollow" >I</a></li>
    <li><a href="#J" rel="external nofollow" >J</a></li>
    <li><a href="#K" rel="external nofollow" >K</a></li>
    <li><a href="#L" rel="external nofollow" >L</a></li>
    <li><a href="#M" rel="external nofollow" >M</a></li>
    <li><a href="#N" rel="external nofollow" >N</a></li>
    <li><a href="#O" rel="external nofollow" >O</a></li>
    <li><a href="#P" rel="external nofollow" >P</a></li>
    <li><a href="#Q" rel="external nofollow" >Q</a></li>
    <li><a href="#R" rel="external nofollow" >R</a></li>
    <li><a href="#S" rel="external nofollow" >S</a></li>
    <li><a href="#T" rel="external nofollow" >T</a></li>
    <li><a href="#U" rel="external nofollow" >U</a></li>
    <li><a href="#V" rel="external nofollow" >V</a></li>
    <li><a href="#W" rel="external nofollow" >W</a></li>
    <li><a href="#X" rel="external nofollow" >X</a></li>
    <li><a href="#Y" rel="external nofollow" >Y</a></li>
    <li><a href="#Z" rel="external nofollow" >Z</a></li>
    <li><a href="#hash" rel="external nofollow" >#</a></li>
</div>

   


          
          
            <div class="entry-inner sort_box">
             
              <?php
              $d = array(
                array("a",-20319),
                array("ai",-20317),
                array("an",-20304),
                array("ang",-20295),
                array("ao",-20292),
                array("ba",-20283),
                array("bai",-20265),
                array("ban",-20257),
                array("bang",-20242),
                array("bao",-20230),
                array("bei",-20051),
                array("ben",-20036),
                array("beng",-20032),
                array("bi",-20026),
                array("bian",-20002),
                array("biao",-19990),
                array("bie",-19986),
                array("bin",-19982),
                array("bing",-19976),
                array("bo",-19805),
                array("bu",-19784),
                array("ca",-19775),
                array("cai",-19774),
                array("can",-19763),
                array("cang",-19756),
                array("cao",-19751),
                array("ce",-19746),
                array("ceng",-19741),
                array("cha",-19739),
                array("chai",-19728),
                array("chan",-19725),
                array("chang",-19715),
                array("chao",-19540),
                array("che",-19531),
                array("chen",-19525),
                array("cheng",-19515),
                array("chi",-19500),
                array("chong",-19484),
                array("chou",-19479),
                array("chu",-19467),
                array("chuai",-19289),
                array("chuan",-19288),
                array("chuang",-19281),
                array("chui",-19275),
                array("chun",-19270),
                array("chuo",-19263),
                array("ci",-19261),
                array("cong",-19249),
                array("cou",-19243),
                array("cu",-19242),
                array("cuan",-19238),
                array("cui",-19235),
                array("cun",-19227),
                array("cuo",-19224),
                array("da",-19218),
                array("dai",-19212),
                array("dan",-19038),
                array("dang",-19023),
                array("dao",-19018),
                array("de",-19006),
                array("deng",-19003),
                array("di",-18996),
                array("dian",-18977),
                array("diao",-18961),
                array("die",-18952),
                array("ding",-18783),
                array("diu",-18774),
                array("dong",-18773),
                array("dou",-18763),
                array("du",-18756),
                array("duan",-18741),
                array("dui",-18735),
                array("dun",-18731),
                array("duo",-18722),
                array("e",-18710),
                array("en",-18697),
                array("er",-18696),
                array("fa",-18526),
                array("fan",-18518),
                array("fang",-18501),
                array("fei",-18490),
                array("fen",-18478),
                array("feng",-18463),
                array("fo",-18448),
                array("fou",-18447),
                array("fu",-18446),
                array("ga",-18239),
                array("gai",-18237),
                array("gan",-18231),
                array("gang",-18220),
                array("gao",-18211),
                array("ge",-18201),
                array("gei",-18184),
                array("gen",-18183),
                array("geng",-18181),
                array("gong",-18012),
                array("gou",-17997),
                array("gu",-17988),
                array("gua",-17970),
                array("guai",-17964),
                array("guan",-17961),
                array("guang",-17950),
                array("gui",-17947),
                array("gun",-17931),
                array("guo",-17928),
                array("ha",-17922),
                array("hai",-17759),
                array("han",-17752),
                array("hang",-17733),
                array("hao",-17730),
                array("he",-17721),
                array("hei",-17703),
                array("hen",-17701),
                array("heng",-17697),
                array("hong",-17692),
                array("hou",-17683),
                array("hu",-17676),
                array("hua",-17496),
                array("huai",-17487),
                array("huan",-17482),
                array("huang",-17468),
                array("hui",-17454),
                array("hun",-17433),
                array("huo",-17427),
                array("ji",-17417),
                array("jia",-17202),
                array("jian",-17185),
                array("jiang",-16983),
                array("jiao",-16970),
                array("jie",-16942),
                array("jin",-16915),
                array("jing",-16733),
                array("jiong",-16708),
                array("jiu",-16706),
                array("ju",-16689),
                array("juan",-16664),
                array("jue",-16657),
                array("jun",-16647),
                array("ka",-16474),
                array("kai",-16470),
                array("kan",-16465),
                array("kang",-16459),
                array("kao",-16452),
                array("ke",-16448),
                array("ken",-16433),
                array("keng",-16429),
                array("kong",-16427),
                array("kou",-16423),
                array("ku",-16419),
                array("kua",-16412),
                array("kuai",-16407),
                array("kuan",-16403),
                array("kuang",-16401),
                array("kui",-16393),
                array("kun",-16220),
                array("kuo",-16216),
                array("la",-16212),
                array("lai",-16205),
                array("lan",-16202),
                array("lang",-16187),
                array("lao",-16180),
                array("le",-16171),
                array("lei",-16169),
                array("leng",-16158),
                array("li",-16155),
                array("lia",-15959),
                array("lian",-15958),
                array("liang",-15944),
                array("liao",-15933),
                array("lie",-15920),
                array("lin",-15915),
                array("ling",-15903),
                array("liu",-15889),
                array("long",-15878),
                array("lou",-15707),
                array("lu",-15701),
                array("lv",-15681),
                array("luan",-15667),
                array("lue",-15661),
                array("lun",-15659),
                array("luo",-15652),
                array("ma",-15640),
                array("mai",-15631),
                array("man",-15625),
                array("mang",-15454),
                array("mao",-15448),
                array("me",-15436),
                array("mei",-15435),
                array("men",-15419),
                array("meng",-15416),
                array("mi",-15408),
                array("mian",-15394),
                array("miao",-15385),
                array("mie",-15377),
                array("min",-15375),
                array("ming",-15369),
                array("miu",-15363),
                array("mo",-15362),
                array("mou",-15183),
                array("mu",-15180),
                array("na",-15165),
                array("nai",-15158),
                array("nan",-15153),
                array("nang",-15150),
                array("nao",-15149),
                array("ne",-15144),
                array("nei",-15143),
                array("nen",-15141),
                array("neng",-15140),
                array("ni",-15139),
                array("nian",-15128),
                array("niang",-15121),
                array("niao",-15119),
                array("nie",-15117),
                array("nin",-15110),
                array("ning",-15109),
                array("niu",-14941),
                array("nong",-14937),
                array("nu",-14933),
                array("nv",-14930),
                array("nuan",-14929),
                array("nue",-14928),
                array("nuo",-14926),
                array("o",-14922),
                array("ou",-14921),
                array("pa",-14914),
                array("pai",-14908),
                array("pan",-14902),
                array("pang",-14894),
                array("pao",-14889),
                array("pei",-14882),
                array("pen",-14873),
                array("peng",-14871),
                array("pi",-14857),
                array("pian",-14678),
                array("piao",-14674),
                array("pie",-14670),
                array("pin",-14668),
                array("ping",-14663),
                array("po",-14654),
                array("pu",-14645),
                array("qi",-14630),
                array("qia",-14594),
                array("qian",-14429),
                array("qiang",-14407),
                array("qiao",-14399),
                array("qie",-14384),
                array("qin",-14379),
                array("qing",-14368),
                array("qiong",-14355),
                array("qiu",-14353),
                array("qu",-14345),
                array("quan",-14170),
                array("que",-14159),
                array("qun",-14151),
                array("ran",-14149),
                array("rang",-14145),
                array("rao",-14140),
                array("re",-14137),
                array("ren",-14135),
                array("reng",-14125),
                array("ri",-14123),
                array("rong",-14122),
                array("rou",-14112),
                array("ru",-14109),
                array("ruan",-14099),
                array("rui",-14097),
                array("run",-14094),
                array("ruo",-14092),
                array("sa",-14090),
                array("sai",-14087),
                array("san",-14083),
                array("sang",-13917),
                array("sao",-13914),
                array("se",-13910),
                array("sen",-13907),
                array("seng",-13906),
                array("sha",-13905),
                array("shai",-13896),
                array("shan",-13894),
                array("shang",-13878),
                array("shao",-13870),
                array("she",-13859),
                array("shen",-13847),
                array("sheng",-13831),
                array("shi",-13658),
                array("shou",-13611),
                array("shu",-13601),
                array("shua",-13406),
                array("shuai",-13404),
                array("shuan",-13400),
                array("shuang",-13398),
                array("shui",-13395),
                array("shun",-13391),
                array("shuo",-13387),
                array("si",-13383),
                array("song",-13367),
                array("sou",-13359),
                array("su",-13356),
                array("suan",-13343),
                array("sui",-13340),
                array("sun",-13329),
                array("suo",-13326),
                array("ta",-13318),
                array("tai",-13147),
                array("tan",-13138),
                array("tang",-13120),
                array("tao",-13107),
                array("te",-13096),
                array("teng",-13095),
                array("ti",-13091),
                array("tian",-13076),
                array("tiao",-13068),
                array("tie",-13063),
                array("ting",-13060),
                array("tong",-12888),
                array("tou",-12875),
                array("tu",-12871),
                array("tuan",-12860),
                array("tui",-12858),
                array("tun",-12852),
                array("tuo",-12849),
                array("wa",-12838),
                array("wai",-12831),
                array("wan",-12829),
                array("wang",-12812),
                array("wei",-12802),
                array("wen",-12607),
                array("weng",-12597),
                array("wo",-12594),
                array("wu",-12585),
                array("xi",-12556),
                array("xia",-12359),
                array("xian",-12346),
                array("xiang",-12320),
                array("xiao",-12300),
                array("xie",-12120),
                array("xin",-12099),
                array("xing",-12089),
                array("xiong",-12074),
                array("xiu",-12067),
                array("xu",-12058),
                array("xuan",-12039),
                array("xue",-11867),
                array("xun",-11861),
                array("ya",-11847),
                array("yan",-11831),
                array("yang",-11798),
                array("yao",-11781),
                array("ye",-11604),
                array("yi",-11589),
                array("yin",-11536),
                array("ying",-11358),
                array("yo",-11340),
                array("yong",-11339),
                array("you",-11324),
                array("yu",-11303),
                array("yuan",-11097),
                array("yue",-11077),
                array("yun",-11067),
                array("za",-11055),
                array("zai",-11052),
                array("zan",-11045),
                array("zang",-11041),
                array("zao",-11038),
                array("ze",-11024),
                array("zei",-11020),
                array("zen",-11019),
                array("zeng",-11018),
                array("zha",-11014),
                array("zhai",-10838),
                array("zhan",-10832),
                array("zhang",-10815),
                array("zhao",-10800),
                array("zhe",-10790),
                array("zhen",-10780),
                array("zheng",-10764),
                array("zhi",-10587),
                array("zhong",-10544),
                array("zhou",-10533),
                array("zhu",-10519),
                array("zhua",-10331),
                array("zhuai",-10329),
                array("zhuan",-10328),
                array("zhuang",-10322),
                array("zhui",-10315),
                array("zhun",-10309),
                array("zhuo",-10307),
                array("zi",-10296),
                array("zong",-10281),
                array("zou",-10274),
                array("zu",-10270),
                array("zuan",-10262),
                array("zui",-10260),
                array("zun",-10256),
                array("zuo",-10254)
                );
                ?>

<?php
function g($num){
    global $d;
    if ($num > 0 && $num < 160) {
        return chr($num);
    } elseif ($num < -20319 || $num > -10247) {
        return "";
    } else {
        for ($i = count($d) - 1; $i >= 0; $i--) {
            if ($d[$i][1] <= $num) break;
        }
        return $d[$i][0];
    }
}

function c($str){
    $ret = "";
    for ($i = 0; $i < strlen($str); $i++) {
        $p = ord(substr($str, $i, 1));
        if ($p > 160) {
            $q = ord(substr($str, ++$i, 1));
            $p = $p * 256 + $q - 65536;
        }
        $ret .= g($p);
    }
    return $ret;
}

// Generate the HTML for the letters
$letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
$lehtml = "<ul class='all-tags'>";
foreach (str_split($letters) as $letter) {
    $lehtml .= "<li id='" . $letter . "'><h3 class='sort_letter'>" . $letter . "</h3></li>";
}
$lehtml .= "</ul>";
echo $lehtml;

// Generate the tag data
$html = '[';
foreach (get_tags(array('number' => 2000, 'orderby' => 'name', 'order' => 'DESC', 'hide_empty' => true)) as $tag) {
    $tag_link = get_tag_link($tag->term_id);
    $firstLetter = substr(c(iconv("UTF-8", "GB2312", $tag->name)), 0, 1);
    $html .= '{"firstL":"'.$firstLetter.'","tagName":"'.$tag->name.'<i>('.$tag->count.')</i>","tagUrl":"'.$tag_link.'"},';
}
$html = rtrim($html, ',');
$html .= ']';

// Output the JavaScript for the tag data
echo "<script>var data = ".$html.";</script>";
?>

                <script>
                  jQuery(document).ready(function ($){
                   for(var i=0;i<data.length;i++){
                     var d = data[i];
                     $("#"+d.firstL.toUpperCase()).append("<a href='"+d.tagUrl+"'>"+d.tagName+"</a>");
                   }
                 })

					
					document.addEventListener("scroll", function() {
    const initialsElement = document.querySelector(".page-template-brands .initials");
    const scrollThreshold = 70; // 滚动超过 70px 时触发
    if (window.scrollY > scrollThreshold) {
        initialsElement.style.position = "fixed";
        initialsElement.style.top = "80px";
        initialsElement.style.zIndex = "99999";
        
    } else {
        // 恢复初始样式
        initialsElement.style.position = "absolute";
        initialsElement.style.top = "148px"; // 原始位置
        initialsElement.style.zIndex = "auto"; // 恢复默认层级
        initialsElement.style.marginLeft = "0";
    }
});
	
                </script>
              </div>
					
					
					
                </div>
            </section>
        </main>
        <?php get_sidebar();?>
    </div>
<?php get_footer();?>


 

css样式:

/*page-template-brands*/
.page-template-brands .post-body {
	position: relative
}

.page-template-brands .page-brands-title {
	font-size: 30px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #000;
	line-height: 40px;
	padding-bottom: 20px;
	border-bottom: 1px solid #999;
	margin-bottom: 20px
}

.page-template-brands .sort_box {
	margin-bottom: 80px
}

.page-template-brands .sort_box {
	display: flex;
	flex-wrap: wrap;
	padding-left: 8%;
}

.page-template-brands .sort_box .sort_letter {
	width: 100%;
	background-color: #efefef;
	padding: 10px 10px;
	margin: 20px 0;
	font-size: 16px;
}

.page-template-brands .sort_box a {
	margin-right: 16px;
	color: #000;
	font-size: 14px;
	margin-bottom: 8px
}

.page-template-brands .sort_box a:hover {
	color: #d05e1f
}

.page-template-brands .initials {
	position: fixed;
	top: 248px;
	z-index: 99999
}

.page-template-brands.body-fix .initials {
	top: 70px
}

.page-template-brands .initials ul li {
	font-size: 12px;
	cursor: pointer;
	margin-bottom: 4px;
	border: 1px solid #d05e1f;
	border-radius: 17px;
	text-align: center;
	width: 20px;
	height: 20px !important;
	display: block
}

.page-template-brands .initials ul li a {
	color: #000;
}


.page-template-brands .initials ul li a:hover {
	color: #666
}

.all-tags {
	margin: 0px;
	padding: 0px
}

.all-tags li {
	list-style: none;
}


.page-template-brands .sort_box a i {
	font-style: normal;
}


.initials {
	list-style: none;
	padding: 10px;
	background-color: #f8f9fa;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	max-width: 50px;
	/* 根据需要调整宽度 */
	margin: 0 auto;
	text-align: center;
	position: sticky;
	/* 悬浮效果 */
	top: 20px;
	/* 悬浮的垂直偏移 */
}

.initials li {
	margin: 0;
}

.initials li a {
	display: block;
	width: 100%;
	padding: 8px;
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	font-size: 14px;
	transition: all 0.3s ease;
	border-radius: 5px;
	background: #206be7;
	margin: 5px auto;
	padding: 5px;
}

.initials li a:hover {
	background-color: #007bff;
	color: #fff;
}


/* 针对手机屏幕的样式 */
@media (max-width: 768px) {
	.page-template-brands .sort_box {
		padding-left: 20%;
	}

	.page-template-brands .initials {
		position: fixed;
		top: 230px;
		z-index: 99999
	}
}

 

效果如下:

WordPress标签按拼音字母层级排序教程

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.mizhanw.com/blog/4967.html

下一篇:

已经没有下一篇了!

相关推荐
WordPress标签按拼音字母层级排序教程
此教程实现标签按拼音字母(A、B、C 等字母)层级排序,并在页面上添加一个侧边竖向字母导航 <?php /* Template Nam…
日期:2024-11-07 点赞:0 阅读:50
wordpress网站编辑器启隐藏的编辑器功能
如果开启WordPress隐藏的编辑器功能就够你用了,何必安装插件呢。 如何开启隐藏的编辑器功能 WordPress默认不支持TinyMCE…
日期:2024-10-29 点赞:0 阅读:61
在WooCommerce中添加“立即购买”按钮直接跳转到结算页面
add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after…
日期:2024-10-19 点赞:0 阅读:78
实现 WordPress 自动更新所有文章的发布日期为当天的日期
//二开自动更新文章日期为当天发布。 //设置宝塔面板中的定时任务,通过访问带有?update_posts=run的链接触发文章更新.如:c…
日期:2024-09-22 点赞:0 阅读:103
WooCommerce订单列表显示购买产品
// 为 Legacy CPT-based 订单添加自定义列 add_filter('manage_edit-shop_order_colu…
日期:2024-09-20 点赞:0 阅读:197
WooCommerce Order 类的所有Get方法,以面向对象的方法获取订单数据
在开发WooCommerce插件或者与第三方系统交互时,我们需要获取 WooCommerce 订单的数据,WooCommerce的 WC_O…
日期:2024-09-20 点赞:0 阅读:202
发表评论
暂无评论

还没有评论呢,快来抢沙发~