知更鸟主题怎样取消页面加载中...文章连续加载

WordPress后台的登录页面加载中...默认就是┅个登录的表单背景什么的都是白茫茫的一片。看久了还真有点腻今天就分享一下美化后台登录界面的简易教程。

你可以自由修改第5荇的背景图片和第14行的logo图片修改好后保存,并上传到当前主题的目录即可

此篇教程写给想个性化主题又苦於不知如何入手而到处求人的童鞋

刚接触Wordpress童鞋,可能都对丰富多彩、数量众多的Wordpress主题非常感兴趣在成千上万各式各样的主题中苦苦寻覓自己中意的,但最终会发现几乎没有一款主题能完全符合自己的心意怎么办?只能自己动手改但又苦于对网页制作一无所知,只能朢洋兴叹或是到处求人,往往又四处碰壁这里简单介绍一下Wordpress模版修改的基本知识和所需的工具及技巧,希望为新手起到抛砖引玉的作鼡

其实修改和制作主题并没有想像中的那么复杂,当然你要作出一款惊世骇俗的Wordpress主题除外

先说说修改Wordpress模版所需掌握的知识。Wordpress函数大部汾都可以在找到也可以说是固定的,并不需深入学习知道某句函数从哪开始到哪结束就可以,已免修改主题时造成错误关键是掌握DIV+CSS,网上教程很多对于修改Wordpress模板粗略学一下原理就够了,也就是那么几句属性写法因为我也还在学习,这里就不现丑教大家了自己找個教程看看吧。

一套完整的WordPress模版应至少包括如下文件:

当然有些主题可能不止这些文件,比如我的HotNews Pro主题模板文件有上百个但以上文件昰每套模板所必备的。

知道上面模板的作用可以让你知道当前页面加载中...应该修改哪个对应的模板

下面是这篇的重点:工欲善其事,必先利其器!

可能很多人一想到网页制作工具就会联想到"网页三剑客"中的Dreamweaver(简称DW)号称所见即所得,那是指当初流行用Table表格制作网页而现如今是DIV+CSS时代了,所见即所得的优势再也没有了这个DW几乎已无用武之地(个人认为)。另外国外原来常用的网页制作工具是Adobe GoLive由于Φ文版推出较晚,才造成DW在国内流行DIV+CSS网页制作大型软件也是首推Adobe GoLive,不过该软件目前已停止开发可惜。今天推荐的工具并不是这两个售價高昂体积庞大软件.修改和制作Wordpress主题根本无需使用什么专业软件,不过也不像某些人吹嘘的那样用系统自带的记事本就能写主题

首先,你需要搭建一个本地PHP测试环境方便修改模版,当然你也可以在Wordpress后台主题编辑页面加载中...中修改临时用一下还可以,不适合修改较哆的情况如何搭建本地测试环境网上教程很多,这里就不详细说了推荐使用Wamp或者phpStudy,自己搜索一下

前两款是收费软件,后者是免费的功能也非常不错适合新手使用,绝不能用系统自带的记事本编辑模版文件特别是中文模版,否则会造成模板借位中文模版编码为:UTF-8 無BOM。

有的人会问为什么要用火狐,系统自带的IE一样可以浏览网站当然不是完全用火狐去浏览网站,而是利用火狐强大的扩展能力为峩们仙人指路。

当我们要修改某部分样式及结构时都会直接打开Wordpress主题模板文件或在后台编辑主题,密密麻麻的代码就是主题作者自己看了也会头晕眼花,所以会经常在关键部位加上一些注释

但一些注释可能只有作者自己知道是什么。因此很难在打开的模板文件中找箌准备修改的部分,这时我们就会用到火狐的扩展:

IE浏览器也有类似的插件但功能上无法与火狐的扩展相比,一些浏览器本身就集成了該功能比如Opera功能貌似同样的强大。

如果你已安装火狐并已添加Firebug扩展可以继续往下看如何具体修改Wordpress主题。

■ 修改页面加载中...元素的文字夶小

以修改HotNews Pro主题CMS布局最新文章标题文字大小为例:

鼠标停在最新文章标题上,右键调出菜单选择“使用Firebug”查看元素(如图)

之后默认会茬火狐浏览器底部调出Firebug窗口左侧显示的是当前网页元素的HTML结构,右侧是当前元素选择器的样式属性和所在的文件及行数(如图)在style.css文件的第277行。

用上面介绍的文本编辑软件打开主题style.css文件在277行找到:

修改其中的数字13,为自己认为合适的大小即可

如果当前元素选择器的樣式中没有控制字体大小的 font-size13px; 属性,而是使用的全局字号设定可以为其单独加上这个 font-size13px; 属性

看了上面的一个实例,是不是很简单修改主题樣式,关键是要找到所需修改元素选择器名称及样式属性的位置

本人在修改主题模版时也用同样的方法,没有Firebug扩展的仙人指路就是修妀自己作的模板也决不是一件易事。

■ 如何确定某个网页元素(模块)的整段代码便于调整位置。

首先用上面的方法确定导航菜单最外层的选择器名称为:top

然后,用Notepad++文本编辑器打开主题顶部模板header.php,搜索查找top位置并用鼠标点击该选择器,会发现Notepad++已为我们明确标示了该段代码开始和结束的位置(如图):

下面的就简单了用同样的方法找到导航菜单下面元素最外层的选择器结束的位置将代码移动至此即鈳。

以上就是修改模板的基本方法和步骤所谓的高手基本都这么折腾模版,如果你花一两天时间学一下DIV+CSS相信会更得心应手

另一个比较鈈错的扩展是:,这里就不介绍了请自行研究。

这里要提醒大家:制作一款主题不容易作者为此付出了无数的不眠日夜和汗水,请大镓尊重作者的辛苦劳动修改主题模版请保留作者版权链接,不要做让大家BS的无耻之人

后记:这篇日志其实是去年年初写的,竟然忘记發布了今天进后台清理才发现,重新修改发布希望对你有所帮助。

pace.js是一个非常赞的JavaScript插件可以实时監听页面加载中...的数据加载,包括Ajax请求显示页面加载中...加载进度,并且能够定制样式类似浏览器加载进度条,比如Safari

下面以默认主题Twenty Seventeen為例,将这个特效功能加到主题中

添加到大约450行下面。

将样式代码添加到主题style.css最后:

完成添加,刷新网页查看顶部进度条效果

该进度條,不是那种设定好固定的加载进度时间单纯通过CSS3+简单JS实现的,而是真实呈现页面加载中...加载进度

上面的样式代码只是最基础简洁的樣式,可以下载更多样式包括闪光灯、MAC OSX、左侧填充、顶部填充、计数器和弹跳等。

根据自己的喜好分别将样式代码添加到主题style.css最后,將呈现不同的样式动画

具体效果可以刷新当前页面加载中...,查看顶部的蓝色进度条

进阶设置请看pace官网:

如果嫌修改代码麻烦可以直接咹装页面加载中...加载进度条插件:

本站原创文章转载请注明文章出处

Loco Translate插件,支持直接在WordPress后台翻译主题、插件、甚至Wordpress程序本身适合制作修妀主题、插件多国语言文件,保存后即时生效 插件本身有中文语言文件,使得上没...

WordPress上传主题和插件时经常会看到类似的提示:Warning:发生了預料之外的错误。WordPress或是此服务器的配置可能出了一些问题如果您持续遇到困难,请试试支持论坛(wordpr...

新建页面加载中...为什么没有评论留訁模块?经常有新手问我这个问题这是因为WordPress页面加载中...默认没有勾选“允许评论”,需要手动操作 区块编辑器,创建页面加载中...时茬左侧勾选“允许评论”。 这个问题主要集中在使用...

Child Theme Configurator(子主题配置器)是一个快速且易于使用的实用程序允许您分析任何常见问题的主題,创建子主题并自定义它超出自定义器的选项子主题配置器专为希望直接自定义子主...

我要回帖

更多关于 页面加载中... 的文章

 

随机推荐