当前位置: 首页 > news >正文

WordPress中借助Table of Contents Plus+Widget Options插件,实现仅在文章侧边栏显示文章目录的功能

本文转自博主的个人博客:https://blog.zhumengmeng.work,欢迎大家前往查看。
原文链接:点我访问

在这里插入图片描述

序言:今天心血来潮,写了一篇文章,忽然发现自己的文章极少有目录,这对于长文章的阅读来说是十分不利的,故出此下策。

一、介绍

Table of Contents Plus:

一个功能强大且用户友好的插件,可以自动为长页面(和自定义帖子类型)创建上下文特定的索引或目录(TOC)。 该插件不仅仅是一个目录插件,还可以输出一个站点地图,列出整个站点的页面和/或类别。

Widget Options:

小部件选项为您提供超级权力来控制网站的侧边栏小部件以及页面和帖子上的所有古腾堡块。

👉 超过 2,700,000 次以上下载
👉 平均评级为 ⭐⭐⭐⭐⭐ 4.9 颗星
👉 现在古腾堡块已启用

小部件选项通过功能丰富的选项扩展了小部件和古腾堡块设置,以便您可以完全管理和控制它们的可见性、外观和行为。根据用户角色、设备、日期、URL 等显示或隐藏内容!

二、安装

在线安装:可前往WordPress后台点击插件-安装新插件-在搜索栏输入对应的插件名称进行安装并启用。

离线安装:可前往WordPress后台点击插件-安装新插件-点击上方的上传插件,将插件本体(.zip)进行上传安装并启用。

三、如何设置?

3.1 Table of Contents Plus的设置

安装完毕后在后台的设置中会出现新的选项-【目录】,如下图所示。

在这里插入图片描述

点进来以后是Table of Contents Plus插件的相关设置,其实保持默认设置足以,将设置拉到最下边我们会发现这个插件可以通过简码进行使用,如下图所示我们使用简码[ez-toc],虽然下边的[ez-toc-widger-sticky]一样是简码,但效果不如人意。

在这里插入图片描述

3.2 在侧边栏中添加相应简码

这里以我的博客为例,我选择将简码添加在我的侧边栏中,对目录进行利用,添加完页面效果如下。

在这里插入图片描述

3.3 Widget Options的设置

侧边栏添加完目录简码后我们发现一个问题,既主页仍会显示错误的目录内容,如下图所示为我主页的效果。

在这里插入图片描述

接下来我们就要借助Widget Options插件来解决这个问题。

首先我们需要确保Widget Options插件已经安装并启用!确认后点击外观-小工具,会发现插件将我们的小工具UI进行了重构,不过不用急,大部分功能并不受影响,我的页面效果如下图所示。

在这里插入图片描述

因为我们的目录简码放在了侧边栏,故点开边栏,并选择对应的区块。

在这里插入图片描述

会发现下边的Hide/Show有两个选项,分别对应在勾选的选项中隐藏/在勾选的选项中显示。

在这里插入图片描述

我们选择默认的在勾选的选项中隐藏,并勾选下边的Home/Front选项,点击保存按钮即可主页进行隐藏。

在这里插入图片描述

四、效果

此时我们分别点击主页和任意一篇文章进行查看

主页效果(无目录):

在这里插入图片描述

文章效果(有目录):

在这里插入图片描述

相关文章:

  • Ubuntu server 24 (Linux) IPtables 双网卡 共享上网NAT 安装配置DHCP
  • Lambda 表达式练习
  • iOS hitTest 机制用处之二-----使用pointInside方法
  • Flutter 中的 SliverCrossAxisExpanded 小部件:全面指南
  • 零基础入门篇①⑥ Python可变序列类型--字典
  • Webrtc支持HEVC之FFMPEG支持HEVC编解码(一)
  • 【Python如何将EXCEL拆分】
  • 精准检测,安全无忧:安全阀检测实践指南
  • 单片机控制语音芯片的录放音系统的设计
  • C语言之旅:探索单链表
  • TalkingData数据统计:洞察数字世界的关键工具
  • Shell编程之条件语句
  • adb的常见操作和命令
  • OpenAI 再次刷新认知边界:GPT-4 颠覆语音助手市场,流畅度直逼真人互动?
  • 革新风暴来袭:报事报修系统小程序如何重塑报事报修体验?
  • CentOS学习笔记 - 12. Nginx搭建Centos7.5远程repo
  • chrome扩展demo1-小时钟
  • CSS中外联样式表代表的含义
  • Django 博客开发教程 8 - 博客文章详情页
  • JavaScript DOM 10 - 滚动
  • JavaScript类型识别
  • js正则,这点儿就够用了
  • laravel 用artisan创建自己的模板
  • Linux快速复制或删除大量小文件
  • Odoo domain写法及运用
  • ReactNativeweexDeviceOne对比
  • underscore源码剖析之整体架构
  • Vim Clutch | 面向脚踏板编程……
  • Vue全家桶实现一个Web App
  • 前端攻城师
  • 十年未变!安全,谁之责?(下)
  • 什么软件可以剪辑音乐?
  • 实习面试笔记
  • 使用阿里云发布分布式网站,开发时候应该注意什么?
  • 【云吞铺子】性能抖动剖析(二)
  • 智能情侣枕Pillow Talk,倾听彼此的心跳
  • ​LeetCode解法汇总1276. 不浪费原料的汉堡制作方案
  • ​LeetCode解法汇总2696. 删除子串后的字符串最小长度
  • # 日期待t_最值得等的SUV奥迪Q9:空间比MPV还大,或搭4.0T,香
  • (4)Elastix图像配准:3D图像
  • (4)事件处理——(7)简单事件(Simple events)
  • (day 2)JavaScript学习笔记(基础之变量、常量和注释)
  • (差分)胡桃爱原石
  • (动手学习深度学习)第13章 计算机视觉---图像增广与微调
  • (二)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (附源码)spring boot车辆管理系统 毕业设计 031034
  • (一)Docker基本介绍
  • (转)Sublime Text3配置Lua运行环境
  • (转载)Linux网络编程入门
  • **PHP二维数组遍历时同时赋值
  • .net core使用EPPlus设置Excel的页眉和页脚
  • .NET 指南:抽象化实现的基类
  • .net6Api后台+uniapp导出Excel
  • .NET的微型Web框架 Nancy
  • // an array of int