700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > WordPress使用过程中的一些问题

WordPress使用过程中的一些问题

时间:2024-02-25 18:28:15

相关推荐

WordPress使用过程中的一些问题

目录

一、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="/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为,锚点名称为t1,则按钮中url为:/#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(/wp-content/uploads//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代码,调色盘

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。