wordpress标签页的制作

How Do I Get Back My Boyfriend

最近开始迷恋上豆瓣网,在用标签来搜索豆瓣的电影的时候很方便,并且豆瓣电影有一个单独的标签页,可以列出所有的标签,我觉得这对于用户来说是很方便的。于是我就想,这么有利于用户体验的功能为什么不给自己的网站也做个呢?

wordpress可以使用wp_tag_cloud()函数输出标签云,你可以先看看实际的演示效果:

查看演示

wp_tag_cloud()函数的参数解说

在sidebar.php模板文件中找到了标签云的输出代码:



这是上面代码输出的标签云效果:

wordpress标签页云效果

同志们可能也注意到了上面代码中包含的参数,下面我对wp_tag_cloud()函数的参数做个简单的说明:

unit

(字符)型,设定标签字体的大小使用的单位,可以是CSS的任何长度单位,例如:px、pt、em、%(默认是pt);

smallest

(数值)型,设定标签字体的大小的最小值,就是使用次数最少的标签的字体大小(默认是8);

largest

(数值)型,设定标签字体的大小的最大值,就是使用次数最多的标签的字体大小(默认是22);

number

(数值)型,设定标签显示多少个数(为0时是显示所有的标签);

orderby

(字符)型,设定标签是按照什么顺序来排列:name(默认) 是按照标签名称来排序,count 是按照标签使用的次数来排序;

format

(字符)型,设定标签是按照什么格式来显示:flat(默认) 标签用空格分隔,list 标签用无序列表(ul+li的结构)的格式输出,array 标签保存在数值中;

order

(字符)型,设定标签的排序次序:ASC(默认) 升序,DESC 降序,需要注意的是,这个参数的值都必须大写;

exclude

(数值)型,排除某个或多个标签,例如:exclude=5,27就是排除标签ID为5和27的这两个标签,要排除的ID用逗号分割,默认不排除标签;

include

(数值)型,只显示某个或多个标签,例如:ixclude=5,27就是只显示标签ID为5和27的这两个标签,要显示的ID用逗号分割,默认显示所有标签;

这些都是wp_tag_cloud()函数的常用参数,还有些参数没有一一列出来,因为用得比较少,如果你想了解更详细的函数说明,你可以去看看官方的说明文档。

添加标签页面

看了上面简单的wp_tag_cloud()函数的参数说明,相信你对它有了一定的了解,接下来将添加一个标签页面。

新建一个tags的模板页面,至于如何新建不是该文所讨论的范畴,你也可以复制模板文件夹下的links.php文件,然后将文件名改为tags.php,在tags.php适当的位置添加如下代码:



term paper help

添加好代码后,将tags.php文件复制到模板文件夹的根目录(和links.php同级),然后登录wordpress的后台,选择新建页面->输入页面标题->选择模板:

wordpress新建页面的模板选择

这里选择的就是刚刚新建的tags.php,好了,标签页面添加完毕了。但是现在的页面显示结果比较简单,就是一个标签名称,如果要显示该标签包含有多少篇文章,还得修改下核心文件。

修改核心文件

修改核心文件之前建议先给该文件做个备份,如果以后升级wordpress还得再次修改下这一段代码。找到wp-includes/category-template.php这个文件,你会发现这段代码:

foreach ( $tags as $key => $tag ) {
        $count = $counts[ $key ];
        $real_count = $real_counts[ $key ];
        $tag_link = '#' != $tag->link ? esc_url( $tag->link ) : '#';
        $tag_id = isset($tags[ $key ]->id) ? $tags[ $key ]->id : $key;
        $tag_name = $tags[ $key ]->name;
        $a[] = "$tag_name";
    }

    switch ( $format ) :
            case 'array' :
            $return =& $a;
            break;
        case 'list' :
            $return = "

    \n\t
      * ";
            $return .= join( "
    \n\t
      * ", $a );
            $return .= "
    \n\n";
            break;
        default :
            $return = join( $separator, $a );
            break;
    endswitch;

要修改的是变量$a[]的这一段代码,由于侧边栏的标签云和标签页都共用了$a[]这个变量,如果在原来的基础上修改势必会影响到标签云的显示结果,为了不影响,这里可以再添加一个变量$a2[],然后将修改过的代码赋值给新变量$a2[],这样就不会影响原来的结构又达到了修改的目的:

$a2[] = "$tag_name($real_count)";

添加了变量,还得将下面的判断语句修改下:

case 'list' :
        $return = "

    \n\t
      * ";
        $return .= join( "
    \n\t
      * ", $a2 ); //将原来的$a改成新增的$a2
        $return .= "
    \n\n";
        break;

到这一步,标签页就制作完成了。我还增加了一段CSS代码让原本一列布局的标签变成了三列布局,这样排列会更漂亮:

.wp-tap-cloud{ width:626px;overflow:hidden}
    .wp-tag-cloud li{width:156px; float:left}
    .wp-tag-cloud li span{color:#777;font-size:14px}

Chrome 81 正式发布 !消灭混合内容最后一步~

Chrome 81 于前天正式发布了,这个版本其实最初是计划在 3 月 17 号 发布的,但由于冠状病毒(COVID-19)爆发而导致推迟到了现在。Chrome 81 的延迟也扰乱了 Google 正常的六周发布时间表。因此 Google 此前也宣布,下一个版本将直接跳过 Chrome 82 ,直接发布 Chrome 83。 下面我就来带大家看看 Chrome 81 有哪些重要的更新。

发布于:1月以前  |  130次阅读  |  详细内容 »

当浏览器全面禁用三方 Cookie

苹果公司前不久对 Safari 浏览器进行一次重大更新,这次更新完全禁用了第三方 Cookie,这意味着,默认情况下,各大广告商或网站将无法对你的个人隐私进行追踪。而微软和 Mozilla 等也纷纷采取了措施禁用第三方 Cookie,但是由于这些浏览器市场份额较小,并没有给市场带来巨大的冲击。

发布于:1月以前  |  112次阅读  |  详细内容 »

H5 直播的疯狂点赞动画是如何实现的?

直播有一个很重要的互动:点赞。 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞 直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出来(广播用户使用websocket消息)

发布于:1月以前  |  107次阅读  |  详细内容 »

探索 Serverless 中的前端开发模式

最近关于 Serverless 的讨论越来越多。看似与前端关系不大的 Serverless,其实早已和前端有了渊源,并且将对前端开发模式产生变革性的影响。本文主要就根据个人理解和总结,从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面,与大家探讨 Serverless 中的前端开发模式。本人也有幸在 QCon2019 分享了这一主题。

发布于:1月以前  |  137次阅读  |  详细内容 »

前端需要了解的9种设计模式

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。

发布于:1月以前  |  118次阅读  |  详细内容 »

为什么你的网页需要 CSP?

内容安全策略(CSP)是一个 HTTP Header,CSP 通过告诉浏览器一系列规则,严格规定页面中哪些资源允许有哪些来源, 不在指定范围内的统统拒绝。

发布于:1月以前  |  110次阅读  |  详细内容 »

10 种跨域解决方案(附终极方案)

嗯。又来了,又说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了解底层啊,不是很简单吗。但是最近在开发一个 「vscode 插件」 发现,当你刚入门一样东西的时候,你不会想这么多,因为你对他不熟悉,当你遇到不会的东西,你就是想先找到解决方案,然后通过这个解决方案再去深入理解。

发布于:1月以前  |  179次阅读  |  详细内容 »

移动 Web 最佳实践(干货长文,建议收藏)

笔者在公司用 web 技术开发移动端应用已经有一年多的时间了,开始主要以 vue 技术栈配合 native 为主,目前演进成 vue + react native 技术架构,vue 主要负责开发 OA 业务,比如报销、出差、crm 等等,react native 主要负责即时通信部分,是在 mattermost-mobile的基础上修改的(mattermost 是一个开源的即时通讯方案)。

发布于:1月以前  |  125次阅读  |  详细内容 »

不可错过的实用前端工具

给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏、教程、社区网站和博客,以及一些资源网站,希望可以帮助到大家!

发布于:1月以前  |  119次阅读  |  详细内容 »

理解 WebView

我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览器阅读本文!虽然浏览器对于访问互联网内容的任务来说非常流行,它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。

发布于:1月以前  |  122次阅读  |  详细内容 »

Facebook 前端技术栈重构分享

当我们考虑如何构建一个新的网络应用—一个为现代浏览器设计的、具有用户对Facebook(我们已知的)所有期望的功能,我们现有的技术栈无法支持我们所需要的类似于桌面应用的感觉和性能。

发布于:1月以前  |  119次阅读  |  详细内容 »

最多阅读

为Electron程序添加运行时日志 1年以前  |  4938次阅读
初探 React 组件 1年以前  |  2188次阅读
wordpress标签页的制作 1年以前  |  2078次阅读
Node.js下通过配置host访问URL 1年以前  |  2026次阅读
js动态创建类和实例化 1年以前  |  2011次阅读
500行PHP代码搞定富文本安全过滤 1年以前  |  1977次阅读
22个HTML5的初级技巧 1年以前  |  1926次阅读
使用 SRI 增强 localStorage 代码安全 1年以前  |  1915次阅读
浅谈浏览器的原生拖拽事件 1年以前  |  1889次阅读
第三版主题上线 1年以前  |  1888次阅读
CSS清除浮动 1年以前  |  1881次阅读
2014年度总结 1年以前  |  1824次阅读
【译】V8 团队眼中的 ES6、ES7及未来 1年以前  |  1819次阅读
利用服务器返回header来传输数据 1年以前  |  1808次阅读
获取元素的计算的样式 1年以前  |  1804次阅读