也是一个很久之前网友想要的功用,不断没什么时间静下心来写,最近两天抽了点时间写下这篇文章希望可以协助到同样需求这个功用的朋友。这个功用是DUX4.0版本开端参加的,当然网上也有一些其他教程,原理大致一样。前端显现效果如下:
下面来说一下详细完成方式:
首先我们需求获取WordPress后台的标题及分类描绘,获取代码如下:
single_cat_title() //获取当前分类标题 $description = trim(strip_tags(category_description())); //获取当前分类描绘
明白了当前分类页面的标题及描绘的获取方式,其他WordPress主题也就能够简单完成这个功用了。下面我们能够参照 DUX 主题该功用的完成方式来设置本人主题该功用的完成。值得阐明的是 DUX 主题还获取了当前分类页面的页码,完成方式如下:
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $pagedtext = ''; if( $paged && $paged > 1 ){ $pagedtext = ' <small>第'.$paged.'页</small>'; }
值得留意的是 $paged 是定义在了主题的 index.php 文件中的,由于主题有多个中央调用这个变量。后面的 $pagedtext 变量是控制页码显现及显现方式的。
好了,晓得了元数据的获取方式,下面我们只需求将其显现出来即可。
echo '<div class="catleader"><h1>', single_cat_title(), $pagedtext.'</h1>'.'<div class="catleader-desc">'.$description.'</div></div>';
运用上面这段代码交换掉主题原有的如下代码(大约在 category.php 文件中的70行左右的位置)即可:
echo '<div class="pagetitle"><h1>', single_cat_title(), '</h1>'.$pagedtext.'</div>';
如此一来前端即可显现当前分类的标题及描绘,添加如下款式美化一下即可。
.catleader{background-color:#fff;border:1px solid #eaeaea;border-radius:4px;margin-bottom:15px;padding:15px 20px;} .catleader h1{font-size:22px;margin:0;padding:0;line-height:1;border-left:5px solid #45B6F7;padding-left:10px;} .catleader h1 small{color:#999;font-size:14px;position:relative;top:-2px;margin-left:5px;} .catleader-desc{font-size:14px;color:#999;margin-top:10px;} @media (max-width:640px){ .catleader{padding: 12px 15px 10px;margin-bottom: 5px;border: none;} .catleader h1{font-size: 14px;font-weight: bold;} .catleader-desc{margin-top: 5px;font-size: 12px;} }
代码来源于大前端 DUX 主题,感激原作者提供的代码。
感谢您的来访,获取更多精彩文章请收藏本站。
![](https://www.gyzsq.com/wp-content/uploads/2022/07/9259adea4619.gif)
© 版权声明
本站网络名称:
孤勇者社区
本站永久网址:
https://www.gyzsq.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ324470778删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
喜欢就支持一下吧
相关推荐
评论 抢沙发
![头像](/wp-content/themes/zibll/img/avatar-default.png)
欢迎您留下宝贵的见解!