首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

WordPress主题开发基础:Body 类指南

您是一位有抱负WordPress主题设计师吗,正在寻找在主题中使用CSS新方法? 幸运是,WordPress会自动添加您可以在主题中使用CSS类。...这些CSS类中几个会自动添加到WordPress网站上每个页面的部分。 什么是WordPress Body类?...在文章编辑屏幕上,您会在右侧列中找到一个名为“文章类(Post Classes)”新元框。 单击以添加您自定义CSS类。您可以添加多个由空格分隔类。 完成后,您只需保存或发布您文章即可。...这将为您代码提供一组方便使用标签。 动态添加自定义body类其他示例 除了条件标签外,您还可以使用其他技术从WordPress数据库中获取信息并为body类创建自定义CSS类。...希望本文能帮助您学习如何在主题中使用WordPress body类,如果对于这篇文章有什么疑问,可以在下面留言讨论。

2K20

WordPress开发人员犯12个最严重错误

这就是为什么许多开发人员在他们变量和函数名前面加上了一些与插件本身相关独特东西。除了消除代码冲突之外,在启用了大量插件时,还可以更容易地发现问题。...3.不利用现有的WordPress核心功能来实现其真正潜力 由于WordPress附带了一套定期更新库,可以在我们插件和主题中调用,最好只是尽可能地利用现有的核心功能。...除了包装将会变得更大,并且需要更长时间以加载到网络上,您还必须确保所有第三方库都经常更新,这只是另一件需要处理事情。...10.不为WordPress插件和主题使用正确体系结构(代码组织) 根据于插件大小和性质(例如:一个独立插件或插件扩展,只有当一个插件被激活时才会起作用,比如WooCommerce),必须建立正确体系结构和代码组织...它检查无效UTF-8字符,将单个<字符转换为HTML实体,删除所有标签,删除换行符,制表符和额外空格和条形字节。

2.9K10
您找到你想要的搜索结果了吗?
是的
没有找到

如何用 WordPress 写出一篇“好看”文章

小标题包含在大标题中。分清楚小标题属于哪个大标题属于什么层次,不能把小标题和大标题层次混合。...见过很多文章会对一些并排性内容,手动编写诸如 1、2、3 之类编号,其实这是错误,应该使用有序列表, CSS 自动添加编号上去。...中文写作习惯是在文章段落开头,空开两个字符,这空开距离,并不应该使用空格来实现,而是使用 CSS 对段落标签增加属性 text-indent 来实现。...这个是主题设计者工作,如果你用主题并没有做这个,那就不会自动空开了,你只能自己修改 CSS 或者用空格模拟空出两字效果,但这是不合理。 那么空格究竟要用在什么地方呢?...具体对比效果如下图 在稍微重要关键词两边,我加了两个空格,稍稍加一点距离,对于英文单词,除了空格之外还对首字母进行大写,两条文字一对比效果很明显就可以看出来。

53520

使用 WordPress 子主题(Child Themes)功能快速制作自己主题

在了解子主题功能之前,先来看一下你在使用 WordPress 时候是否是这样:不会自己制作主题,只好从网上下载一个,这个主题整体风格比较适合,但是有些小地方不太好,自己只是有一点 CSS 基础,可以修改一些简单样式...在子主题中,一般有下面几个文件: style.css (这个必须有) functions.php (这个可以有) 其他模板文件 (这个可以有) 其他文件 (这个可以有) style.css 是必须 这是构建子主题中唯一必须有的文件...,因为 WordPress 根据主题中 style.css 头部信息来获取主题信息。...特别是子主题,除了像一般主题一样添加头部信息之外,还需要添加父主题名称,这样 WordPress 才能获取父主题资源文件。...注释,但会被 WordPress 识别,必须放在 style.css 最顶端。

1.1K21

如何删除渲染阻止JS 和 CSS以提高网站速度

虽然网站美感很重要,但它内容和加载速度会让人们回访。WordPress 为用户提供了一个复杂插件和主题工具箱,可以快速创建他们自己自定义网站。...image.png 但是,这些主题和插件需要 JavaScript (JS) 和级联样式表(CSS) 才能工作。WordPress 以脚本文件形式自动创建它们。它们通常优化不佳。...您应该最后调用对网页呈现不重要脚本以及需要时间复杂脚本。 2.缩小代码 缩小代码涉及重写它并删除不必要字符,例如空格、注释、逗号、换行符等。...这使代码更加简洁和紧凑,最终减小了脚本大小并增加了网页加载时间。 W3TC 之类插件和工具具有缩小主题中 JavaScript 和 CSS 模块。...在大多数情况下,您 WordPress 软件包已经提供了此插件。 Async Javascript:由 WordPress 提供开源插件。

3K20

WordPress中通过Ajax评论分页实现方法

就知道了自己问题所在。 说来惭愧,用了这么久wordpress了,竟然没注意过“WordPress 后台 – 设置 – 讨论,在“其他评论设置”中勾选分页显示评论”这一项。。。设置后竟然好了。...二.开启 WordPress 评论分页 打开 WordPress 后台 – 设置 – 讨论,在“其他评论设置”中勾选分页显示评论,设置一下评论数目,这里评论数目仅计算评论,回复评论不作计算。...在后台开启评论分页后,在 comments.php 中需要添加分页导航地方加入以下代码(如主题中有类似代码则无须再添加,另外代码中 nav 标签为 HTML5 标签,若主题没有使用 HTML5 则有...> 四.Ajax 评论分页 根据上文所述,现在主题中已经有评论分页了,要做到 Ajax 评论分页,只需 JavaScript 配合,不过在这之前首先要在评论列表前加入一个元素,用于在显示新一页评论列表时表示列表正在加载...(document.compatMode=="CSS1Compat"?

1.2K20

制作WordPress“带Gravatar头像评论”小工具(集成主题中、含选项)

最近在进一步折腾WordPress 主题开发,在侧边栏小工具那里想做一个可独立于主题、类似插件带头像评论小工具。...关于WordPress 中小工具开发,除了WordPress官方文档外,有一篇“阿叔工作室”文章也不错,点击查看。这里不多说了。...下面的代码得到“带Gravatar头像评论”小工具可以集成到主题中,小工具后台拥有相关选项。代码是从系统自带评论小工具中改进过来,兼容性良好。代码作者:陈杰斌,感谢原作者。 <?...要修改地方还挺多,要熟悉CSS、html以及一些WordPress 函数。...一些相关文章: 制作WordPress侧边栏“随机文章”小工具并集成在主题中方法 制作WordPress侧边栏“博客统计”小工具并集成在主题中方法 制作WordPress侧边栏“热门文章”小工具并集成在主题中方法

78360

制作WordPress“带Gravatar头像评论”小工具(集成主题中、含选项)

最近在进一步折腾WordPress 主题开发,在侧边栏小工具那里想做一个可独立于主题、类似插件带头像评论小工具。...关于WordPress 中小工具开发,除了WordPress官方文档外,有一篇“阿叔工作室”文章也不错,点击查看。这里不多说了。...下面的代码得到“带Gravatar头像评论”小工具可以集成到主题中,小工具后台拥有相关选项。代码是从系统自带评论小工具中改进过来,兼容性良好。代码作者:陈杰斌,感谢原作者。 <?...要修改地方还挺多,要熟悉CSS、html以及一些WordPress 函数。...一些相关文章: 制作WordPress侧边栏“随机文章”小工具并集成在主题中方法 制作WordPress侧边栏“博客统计”小工具并集成在主题中方法 制作WordPress侧边栏“热门文章”小工具并集成在主题中方法

62650

WordPress 主题教程 #1:介绍

li 开始和结束标签必须在 ul 开始和结束标签里面,这就是标签正确嵌套方式。 规则 #2:每个主题至少要有这两个文件 - style.css 和 index.php。...index.php 告诉主题中所有的元素如何布局,style.css 则告诉主题中所有的元素该如何展示,以及它们样式。...下面是一个完整主题含有的文件列表,现在我们不用详细了解这个列表每个文件意思,有个这样印象就可以了: style.css index.php home.php single.php page.php...每个主题是由多个模板文件组成,比如:index.php,style.css,sidebar.php 等等。...WordPress 主题层次结构: 下图就是 WordPress 层次结构,它简单向你展示,一旦你主题中某个文件丢失了,WordPress 主题系统将会使用其他什么模板文件来代替。

49120

WordPress子主题怎么保留修改代码来避免升级覆盖?

WordPress子主题怎么保留修改代码来避免升级覆盖?...2、将Ality主题样式文件style.csscss目录(因为Ality主题有部分样式文件和字体图标在这个CSS目录中)及图片目录img,一起复制到新建主题文件夹Ality-child中,也可以将之前修改过...3、打开复制过来style.css文件,在文件头部添加:Template:Ality 这个是关键,其中Ality名称必须与父主题文件夹名称相同,而且父主题Ality也必须与新建子主题同在WordPress...Template:AlityVersion: 0.2*/ 4、登录后台外观→主题中启用这个子主题Ality-child之后,就可以根据自己喜好修改其中样式。.../Ality/style.css”); 代码必须写在所有样式之前,也就是文件头后面,子主题样式文件中只需添加自己修改部分即可。

922110

检测CSS和JS改动自动刷新脚本

当我们在修改主题样式后,经常要做一个重复动作就是按F5刷新网页,今天介绍一款神奇小工具,可以检测CSS和JavaScript文件变化,并自动刷新网页JS脚本Live.js。...Live.js下载 将下载live.js放到主题目录中,并使用下面的方法加载到当前题中,以放到主题js目录中为例, 将下面代码加到主题footer.php中: <script type="text...如果认为添加上面的代码之后还要删除比较麻烦,也可以安装利用Live.js脚本制作<em>的</em><em>WordPress</em>插件。...插件名称:PBD Live.js for <em>WordPress</em> GitHub下载 百度网盘下载 该Live.js脚本不仅适用于<em>WordPress</em>主题,同样适合任何网页开发制作 。...另外,Live.js脚本纯粹是为网页开发而设计,没有必要让它一直保留在主<em>题中</em>,因为启用后网页每两秒钟 flashes”一次 ,会影响页面的正常加载。

2.9K20

WordPress 主题教程 #5d:Else,日志 ID,链接标题

,但是我们几乎可以在我每一个免费题中都能找到。...我们返回教程 #5 -- 循环,去解释你刚才上面输入是什么? 这里就是循环部分代码: <?...现在你知道什么是 else 了吧,当没有任何日志或者当找不到任何日志时候,告诉 WordPress 怎么处理,让 WordPress 显示错误信息 Not Found,或者其他任何你想要东西。...the_ID() 只是调用每篇日志 ID。 为什么使用它呢?这是用来定制个别的日志面貌。后面,当你使用 style.css 文件去告诉你主题日志将看起像怎么样。...如果通过给每篇日志附加唯一 ID,你就可以针对单独一篇日志进行样式化,使得它和其他日志看起来不一样。如果没有 ID,你将没有办法通过 style.css 文件使它和其他日志不一样。

27820

WordPress SEO 宝典:让你博客流量增长10倍

标题党也就是这个原因产生,虽然不鼓励大家做标题党,但是最基本优化还是要有的。对于标题优化有两点: 标题中包含文章关键字,1-2个关键字即可。...比如这篇文章:「WordPress SEO 宝典:让你博客流量增长10倍 - 我爱水煮鱼」,首先标题中有关键字「WordPress SEO」,然后可以在文章标题后面加上网站名称(我没有加,两个看你喜欢...语义化 语义化网页代码能更好地被搜索引擎爬虫识别,所以使用 XHTML 和 CSS 对网站进行重构,尽量将 CSS 和 Javascript 代码从 HTML 文件中分离出去。...除了设置 H1 标签之外,还要给文章内容中子标题按照要求设置 H2 H3 标签,这样除了更加文章内容更加清晰之外,语义化也更佳,对 SEO 有非常大帮助,Google 喜欢语义化内容。...如果文章子标题完全按照 H2 H3 格式设置,还可以使用 WPJAM Basic 「文章目录」在文章头部显示这篇文章目录,这样除了提高 SEO 效果之外,还能提高用户阅读体验。

69820

让人纠结首行缩进

具体原理见 http://neoear.com/2009/10/wordpress-indent/ 因为原作者文章是09年写,对增加wordpress按钮第一种方法已经失效,而第二种方法要根据不同对不同主题要适当改变一下...一,方法1: 对wordpress自带编辑器增加按钮,因为我用是CKEditor,这方法不实用。...PASS 二,方法2: 对CSS进行修改:原作者改法如下: 不同主题style.css可能有不同,这次以inove主题为例。...在WordPress后台,选择"外观"——"编辑",打开样式表(style.css),找到如下代码: .post .content p { margin-bottom:10px;...{ text-indent:2em; } 三,方法3 直接输入空格,如果是半角,得输入4个空格,全角那就输入2个空格,这方法挺不爽 综上所述,方法2是简单,而且效果最好

1.1K20

WordPress主题Siren二开美化版

主题前言 用 WordPress 来做博客程序完全是因为一款主题呢! 就是,由 蜜汁路易 二次修改发布 Siren 主题! 它前身就是由 Fuzzz 制作 Akina 主题。...首先感谢他们作品呢…… 因为博超喜欢单栏主题设计,还有 PJAX 加载,所以博一直就在打磨这款主题中…… (当然是根据自己喜欢口味来更改滴啦) 学长是个细节控,代码洁癖,某些强迫症集一身的人啦...修复“一言”无法使用问题 2018.08.01 评论框表情候选板添加更多表情包 2018.08.29 修复自定义 CSS 无法覆盖默认 CSS 问题 修复评论提交代码时,Prism 代码高亮不生效问题...) PJAX 重载功能 修复开启 PJAX 后,使用浏览器返回功能返回上一页时,N 个功能没有加载问题 2019.04.04 替换评论头像服务器,更换为 V2EX 主题已支持 WordPress 5.1.1...,修复该版本不能正常回复评论问题 2019.04.05 更新“高斯”配色文件,匹配 WordPress 后台主题商店与插件商店外观 2019.04.14 更新备案号域名 添加一个新页面滑动特效

3.9K30

腾讯云cdn对wordpress博客加速解决腾讯云564错误

WordPress博客加速可以说是老生常谈了,在这里我分享一下我博客分享技术。 我采用加速技术主要是wordpress缓存插件,动静分离和腾讯云CDN。...1.我安装wordpress缓存插件 Autoptimize 这个插件整合并压缩 CSS 和 JavaScript 代码,可以节约CSS和JS加载时间。...2.wordpress动静分离 – 单独加速静态资源 从本部分开始,建立在域名已经备案基础上。如果您站无法备案,可以单独准备一个备案网站用于静态资源加速,可以显著提高站打开速度。...3.站腾讯云CDN配置 第二部分介绍腾讯云CDN配置有些简略,在这里详细介绍。...白名单除了本站自己域名外,还应该有搜索引擎存在,保证搜索引擎正常索引。

19K90

隐藏 WordPress 系统,提高 WordPress 站点安全性

本文中方法适合有一定动手能力用户使用。下面我们就来看看怎么一步一步地把 WordPress 隐藏掉。...URL 重定向 WordPress 目录结构是最具特色,如果不经过处理,别人通过代码一眼就能看出来你网站是用 WordPress,我们首先需要做就是修改掉 WordPress 目录结构。...'style_loader_src' ); add_filters($tags, 'nowp_clean_urls'); } } 以上代码假设在你题中有.../assets/文件夹,如果你使用是 Apache 服务器,WordPress 会自动为你重建好重写需要.htacces文件,如果你使用是 Nginx,还需要手动添加重写规则到你主机配置文件中。...WordPress 信息,大大提高 WordPress 安全性,虽然高手还能通过一些手段看得出来,但是比什么都不做还是要好多了。

1.3K30

小文’s blog – WordPress自定义字体

,在里面找到body,找到font-family修改成我们需要字体,这样就完成了wordpress字体设置。...实际上,因为wordpress题中CSS样式文件有很大差别,设置也不是这么简单,我们需要找到各处font-size进行修改。...比较标准wordpress主题都会设置一个body字体样式,然后后面的字体样式都是按比例缩放,因此我们修改完body,然后可以查看博客显示,如果对某个地方字体样式不满意,可以点击右键查看网页源代码...,找到对应样式class,然后在css样式文件中进行修改。...本文列举了wordpress字体设置方法,对于html代码一点都不懂朋友可能修改起来比较困难,因此小文建议最好能够看一些html以及CSS样式相关书籍,修改起来就非常容易。

1.4K20

WordPress主题Mac osX 2.02

这是一款仿Mac osx外观Wordpress杂志型主题。首页可以添加自定义图片并显示日志摘要,主题包含两套主页面模板。通过主流浏览器测试。...作者:Zming 语言:中文 版本:2.02 类别:杂志型 演示:DEMO 所需插件: 1.wp-pagenavi(必须)注:删除或更名插件中pagenavi-css.css文件。...★侧边分类模块:是从zEUSIpple Ultra主题中直接复制过来,打开cat-posts.php文件,里面有详细使用方法,就不再说明。...★需要说明是,这款主题中Home-index.php、Home-header.php、Home.css三个文件是一个类似欢迎页面的模板文件,可以通过这套模板文件,创建一个具有最新日志列表及日志分类欢迎引导页面...PS:最近滑动门效果很流行,可以点击欢迎引导页面的红绿灯试试,也可以点击侧边模块顶部看看效果,还有一个隐藏看看是否能找到^_^。不过觉得这个东西除了"好看好玩"之外,没有任何用处。

1.1K10
领券