一、WordPress设置类：

1.隐藏顶部工具栏

2.修改主页

3.添加樱花飘落的特效：

4.添加特效：点击鼠标浮出爱心和文字

5.添加菜单锚点

二、elementor使用：

1.修改段的边框形状

2.error：没有the_content函数

3.elementor设置视差效果

4.设置单页的背景

三、主题设置类：

1.隐藏illdy主题的footer widget area

四、分享一些设计网页时常用的网站：

我使用的是阿里云的轻量应用服务器---应用镜像---WordPress-4.8.1版，主要使用elementor编辑器-免费版来减少我这种小白的代码量（好像有Pro的破解版，但因为用的是云服务器的镜像，不好改，所以就放弃了）。下文的问题及方法都是在此环境上出现和提出的。

一、WordPress设置类：

1.隐藏顶部工具栏

在预览/查看自己设计的页面时，WordPress自带的顶部工具栏会一直吸顶，这就很难受了，

隐藏方法：用户-->我的个人资料-->取消勾选“工具栏”，然后更新个人资料。

2.修改主页

这里的修改主页其实并不是直接修改主页，而是自己做个页面然后把它设置为主页。如下，我们用elementor做好了一个页面，想要把它设置为主页：

方法一：外观-->自定义-->General Operations-->主页设置-->您的主页显示为-->一个静态页面--然后选择刚才做好的页面（有的主题没有General Operations这一选项，找到主页设置就行了）。

方法二：如图：

3.添加樱花飘落的特效：

比如江程训大佬的网站，有樱花飘落，很好看，

添加方法：外观-->Theme Editor-->选择要飘樱花的主题-->footer.php，添加以下代码：

<!-- 樱花特效 -->
<script src="https://down.cangshui.net/otherweb/JSCSS/yinghua.js"></script>

添加位置，和其他<script src></script>代码段平行就可以，如图：

js文件来源：沧水大佬的博客（有恶作剧，慎点）

4.添加特效：点击鼠标浮出爱心和文字

某些网站，点击鼠标浮现爱心和文字，很好看，

比如这样：

添加方法：添加如下两个代码块：


<!-- 爱心特效-->
<script type="text/javascript">!function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document);
</script>


<!-- 文字特效，文字可以直接修改-->
<script type="text/javascript">var a_idx = 0;jQuery(document).ready(function($) {$("body").click(function(e) {var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");var $i = $("<span/>").text(a[a_idx]);a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 100000000,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "#ff6651"});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function() {$i.remove();});});});
</script>

添加位置：和上面的飘樱花一样，平行添加就行。

代码来源：小柒博客的两篇大佬博客：爱心特效，文字特效。

5.添加菜单锚点

菜单锚点相当于给elementor添加标记，如：单击一个按钮，页面滑动至指定位置。

使用方法：选定目标位置--元素--一般--菜单锚点--给锚点命名，如t1--选定按钮--添加url。

比如：按钮所在页面url为hahaha.com，锚点名称为t1，则按钮中url为：hahaha.com/#t1

二、elementor使用：

1.修改段的边框形状

有些网页的某部分看着很漂亮，比如江程训大佬的网站：

这个斜切的三角形看着很舒服，

制作方法：选择要编辑的页面-->启动elementor编辑器-->编辑段-->样式-->形状分割线，如图：

可以设置顶部/底部的分割线，分割线的类型也有很多，比如云、三角形、波浪形等等；以及多种自定义格式，如高度、宽度、翻转、反转等等等等。

2.error：没有the_content函数

在使用elementor编辑某个页面/新建一个页面时，可能会出现这种情况。原因一般是主题模板和elementor不兼容。

可能的解决方法：使用WordPress editor编辑器打开要修改的页面-->右边栏--页面属性-->把模板换成elementor画布/elementor全宽，之后就可以使用elementor编辑器修改了。

3.elementor设置视差效果

在浏览某些网页时，发现页面上的文字信息随着鼠标滚动而变化，但背景并不移动，感觉文字和背景属于两个不同的层。

设置方法：打开一个网页-->添加栏-->样式-->背景-->附件--选择“固定”，如图（可以添加间隔让图片显示出来）：

4.设置单页的背景

elementor不支持直接设置任意页面的背景，但是某些时候想要独自设置一个页面的背景，比如登录注册页面，

思路：获取页面的id，添加额外CSS

设置方法：页面--把鼠标放在需要的页面名称上，屏幕左下角会显示页面的post参数（即id），如图，注册页面的id是1014：

然后：外观-->自定义-->添加额外CSS，代码如下：

body.page-id-1014 {background-image: url(http://blogminisite.cn/wp-content/uploads/2019/04/%E6%B3%A8%E5%86%8C%E8%83%8C%E6%99%AF.png);background-position: center center;background-size: cover;
}

参数可以自己设置，url是要设置的背景图片的地址，更多设置可以参考：CSS3背景|菜鸟教程

三、主题设置类：

1.隐藏illdy主题的footer widget area

illdy这个主题很好看，而且也支持的功能也很多，但是下载的模板页脚有一些我们不愿意看到的东西，

隐藏方法：外观->自定义->General Operations ->footer-->show footer widget area，切换成off，如图：

四、分享一些设计网页时常用的网站：

1.DNF-官网-新闻中心，对，你没看错，就是DNF的新闻中心。DNF的很多活动网页都很漂亮，甚至惊艳，如阿拉德创世纪，许愿一个阿拉德，等等等。

2.颜色表及HTML代码，调色盘

WordPress使用过程中的一些问题相关推荐

最新、最全面的LAMP+wordpress安装过程！！
最新.最全面的LAMP+wordpress安装过程!! 前言:网上有好多关于LAMP+论坛.博客之类的帖子,但是写的都不是很全,而初学的用户经常为此而烦恼,因为好多版本使用的方法都有一些小的差别,导致 ...
wordpress去掉index.php,wordpress去掉url中index.php 创建分类目录404如何解决
wordpress主题是建设个人博客的首选,便利简洁.今天整理2个wp建站过程中常遇到的两个问题,整理了下来.相信很初用wp的伙伴都遇到这样的问题,url中包含index.php,这样的url很不美观 ...
用Dockerfile构建MySQL镜像并实现容器启动过程中MySQL数据库系统的初始化
前一段时间就在研究用Dockerfile构建MySQL镜像并实现容器启动过程中MySQL数据库系统的初始化,但被一些无关紧要的事儿给耽误了,经过查阅<dockerfile最佳实践>及MyS ...
探讨：在Mac新系统下安装新版XAMPP过程中遇到到的坑以及解决办法
探讨:在Mac新系统下安装新版XAMPP过程中遇到到的坑以及解决办法简介 XAMPP安装 XAMPP 是个啥? 安装XAMPP 新版问题:IP地址访问不再是localhost 操作问题:apache ...
网站搭建系列：云虚拟主机建站部署的过程中如何上传FTP？
在用云虚拟主机搭建网站的过程中,最常见的,就是用FTP上传我们的建站程序(WordPress. 米拓.织梦.帝国等)或者是网站的源代码,对于前期刚接触建站的我来说,用虚拟主机上传建站程序搭建网站是一个 ...
如何修复 WordPress 定制开发中登录重定向循环？
WordPress 登录重定向循环意味着什么.WordPress 无法对您进行身份验证并授予对 WordPress 仪表板的访问权限,身份验证过程中遇到的问题使WordPress 返回登录页面.那么如 ...
kali linux 支持什么编程语言_渗透过程中可能要用到的Kali工具小总结
渗透过程中可能要用到的Kali工具小总结写在最前面最近在搞渗透的时候,发现过程中有一些kali工具还是很适合使用的所以写一个渗透过程中可能用到的kali渗透工具的小小总结写的不对多多包涵各 ...
sftp工具都有哪些_建站工具篇：在首次建站过程中，我都用到了哪些建站工具？...
工欲善其事,必先利其器.在生活中.在工作中我们经常会使用到一些实用的工具,来帮助我们快速的完成任务,建站也是一样,我们需要利用一些工具来帮助我们快速便捷地搭建网站. 下面,跟大家聊聊在建站的过程中我都 ...
我在建站过程中的一点心得体会
原创文章请认准:主网站微笑涛声作者其他平台: CSDN 简书开源中国思否所有的努力,不是为了让别人觉得你了不起,而是为了能让自己打心里看得起自己,人生的奔跑,不在 ...

WordPress使用过程中的一些问题

一、WordPress设置类：

1.隐藏顶部工具栏

2.修改主页

3.添加樱花飘落的特效：

4.添加特效：点击鼠标浮出爱心和文字

5.添加菜单锚点

二、elementor使用：

1.修改段的边框形状

2.error：没有the_content函数

3.elementor设置视差效果

4.设置单页的背景

三、主题设置类：

1.隐藏illdy主题的footer widget area

四、分享一些设计网页时常用的网站：

WordPress使用过程中的一些问题相关推荐

最新文章

热门文章