前端Css之rem相对单位

为什么要使用rem


之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。

例如以屏幕320像素为CSSCSS基准,设置1,那屏幕375像素就是375/320=1.18以此类推。

但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊。

Px是相对固定单位,字号大小直接被定死,所以用户无法根据自己设置的浏览器字号而缩放,em和rem虽然都是相对单位,但em是相对于它的父元素的font-size,页面层级越深,em的换算就越复杂,而rem是直接相对于根元素,这就避开了很多层级关系。移动端新型浏览器对rem的兼容很好,可以放心使用。

通用换算和一些坑


有时我们会看到有些使用rem的页面里会先给页面根元素一个样式:

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

为什么是62.5%?

大多数浏览器的默认字号是16px,因此1rem=16px,这样不方便我们px和rem的换算,假设1rem=10px,那么100px=10rem,25px=0.25rem。这样就好换算很多,于是就有了上面的10/16。

如果是640的设计稿,需要除以2转化为和iphone5屏幕等宽的320。所以设计稿px单位/2/10转为rem。之后再媒体查询设置每个屏幕大小的font-size百分比,页面会根据上面设置的根font-size适配。

看到这里是不是觉得一切很完美?然而,这里面有两个深坑:

1.我看了网上很多关于rem的资料,基本都说浏览器的默认字号就是16px,然后直接定义font-size:62.5%。但是,rem属于css3的属性,有些浏览器的早期版本和一些国内浏览器的默认字号并不是16px,那么上面的10/16换算就不成立,直接给html定义font-size: 62.5%不成立。

2.chrome强制字体最小值为12px,低于12px按12px处理,那上面的1rem=10px就变成1rem=12px,出现偏差(下面给demo)。

解决方案: 将1rem=10px换为1rem=100px(或者其它容易换算的比例值);不要在pc端使用rem。

那么上面的页面根元素样式要改为:

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

再用本工厂总结得出的各分辨率媒体查询换算:

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 843.75%; }
}

至此,坑填完。设计稿px换算直接/100即可得到rem值。

更精准健壮的换算


然而,上面的625%大法除了有兼容性问题,也无法很好地根据不同设计稿精准适配,不是我们的最佳选择。网易和淘宝分别有自己的一套适配方法,适配性也很完美。

  • 网易手机端:技术分享技术分享技术分享基准值: 可以看到,无论页面以哪种手机比例缩放,body的width都是7.5rem。很明显,目前网易的手机端设计稿是基于iPhone6,750(设计师给的设计稿是物理分辨率,会是我们写样式的逻辑分辨率的两倍,如果给的设计稿是640,那么是基于iPhone5,320),且基准值是100px(750/7.5=100)。这个基准值很关键,后面的css换算,都和这个基准值有关。动态font-size: 我们看到图1、图2、图3的font-size都有根据屏幕大小而动态改变,可以推算出公式:

    屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)

    获取到这个值,再赋给html元素的style:

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘;
    

    这样就设置好了每个页面的根fonts-size,因为rem单位是基于根font-size,因此只要确定一种设计稿对应手机的换算,其余屏幕尺寸均可自动适配。

    上面我们得出设计稿换算rem的基准值是100,因此只需要把设计稿上的px值除以100即为我们要的rem值。

    > Px/100=rem,所以100px=1rem,25px=0.25rem
    
  • 淘宝手机端:  大名鼎鼎的Flexible

    资料引用

    大漠:使用Flexible实现手淘H5页面的终端适配

    齐神:flexible解读及应用

     

    很多大神包括我们公司同事都有对此适配方案做了解析,所以我这边简单综述:

    引入: 直接引用阿里的CDN文件(或下载到本地引入)

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    

    设定: 页面不要设定 。Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr。

    换算: 假设拿到的设计稿和上述网易的一样都是750,Flexible会把设计稿分为10份,可以理解为页面width=10rem,即1rem=75px,所以根font-size(基准值)=75px。

之后的css换算rem公式为:

px/75=rem,所以100px=100/75=1.33rem,50px=50/75=0.66rem

换算工具


显然,可以看出px与rem的换算因为基准值的不同而有些复杂,甚至需要借助计算器的辅助。在这里推荐一个换算神器:cssrem

安装好之后,做一些设置

px_to_rem – px转rem的单位比例,假设拿到设计稿750,基准值是75,此处就设75

max_rem_fraction_length – px转rem的小数部分的最大长度。默认为6。

available_file_types – 启用此插件的文件类型。[“.css”, “.less”, “.sass”, “.scss”]。技术分享

上述三种换算方案的步骤和优劣


  • 通用方案

1、设置根font-size:625%(或其它自定的值,但换算规则1rem不能小于12px)

2、通过媒体查询分别设置每个屏幕的根font-size

3、css直接除以2再除以100即可换算为rem。

优:有一定适用性,换算也较为简单。

劣:有兼容性的坑,对不同手机适配不是非常精准;需要设置多个媒体查询来适应不同手机,单某款手机尺寸不在设置范围之内,会导致无法适配。

  • 网易方案

1、拿到设计稿除以100,得到宽度rem值

2、通过给html的style设置font-size,把1里面得到的宽度rem值代入x  document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px‘;

3、设计稿px/100即可换算为rem

优:通过动态根font-size来做适配,基本无兼容性问题,适配较为精准,换算简便。

劣:无viewport缩放,且针对iPhone的Retina屏没有做适配,导致对一些手机的适配不是很到位。

 

网易rem方案:

 

前提:

 

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

 

优势:

不用管DPR,只需知设计稿宽度

 

已知:

假设现有iPhone6设计稿,宽750px,其中一元素宽150px;

根据DPR值,iPhone6的DPR值为2,我们可得其中该元素的显示尺寸:

真实显示CSS值:

 

现在我们用网易方案来解决这个问题:

首先我们取1rem = 100px为参考值(这个值可以随便取,为何取这个值容后解答)

可知body的宽度:

又因为body的宽度为7.5rem,由“网易公式”可得:

Html的font-size为:

Dw为deviceWidth,即设备宽度,这是整个方案里唯一动态改变的值

现我们已知设计稿为iPhone6,又知iPhone6的设备宽为375px,

这时候我们再回头看:

html当前设备的font-size:

且:

可知,无形中这步已帮我们作了DPR换算;750px的设计稿,显示在375px的屏幕要怎样转换。

前面我们取了1rem = 100px,可得该元素宽:150px = 1.5rem,

又知rem为其他元素相对根元素(html)的大小

所以可得当前元素宽度的真实css显示值为:1.5rem*50px = 75px;(这里的75px就跟我们前面理想得到的75px不谋而合了)。

这边我们把这个运算再拆解来看:

现再回头看:就可以知道为什么当时要取100px为参考值,取这个值的意义就是为了方便运算。

 

 

总结:

我们只需以iPhone6的设计稿(当前主导的机型),750px宽完成一套页面,当去到其他设备时,因为我们用的都是rem值,只需要通过JS动态获得当前的dw,再通过动态获取的dw改变html的font-size值,页面的其他元素也会因为html的改变而进行等比例缩放。

 

 

步骤:

 1.根据设计稿尺寸完成页面;

  2.设置meta,控制视口宽度,让页面以1:1比例渲染页面

  3.动态设置html的font-size;

  4.把各元素的px值除以100转换为rem(字体除外)

 

网易方案关键代码:

设置视口: 

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

  动态设置html的font-size:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
  • 手淘方案

1、拿到设计稿除以10,得到font-size基准值

2、引入flexible

3、不要设置meta的viewport缩放值

4、设计稿px/ font-size基准值,即可换算为rem

优:通过动态根font-size、viewpor、dpr来做适配,无兼容性问题,适配精准。

劣:需要根据设计稿进行基准值换算,在不使用sublime text编辑器插件开发时,单位计算复杂。

Demo


下面看看demo

设计稿:基于iPhone5,宽度640。

那么在开发模式,iphone5是320,所有数值均是设计稿一半大小。

期望效果:在iPhone5中,box1宽高50px,box2宽高125px,字体15px。其他屏幕终端自动适配。

技术分享

1、62.5%方案

可以看出,基于chrome iPhone5的调试,box1宽高是60,box2宽高是150。出现了误差,就是上文提到字号最小值强制12px的原因。

2、625%方案

比例正常。

3、网易方案

比例正常。

4、手淘方案

比例正常(Retina屏做了缩放)。

到底用哪种换算方案呢?


每个人评判的标准不同。但个人更倾向flexible,动态计算viewport和针对iphone手机的dpr缩放使得页面适配更加精确,而且手淘页面用户访问量比网易页面大很多。

移动端有用px的时候吗?


有。当你的页面图片或者某一元素比例要固定,不想进行任何缩放时,rem就不适合了,这时候用px单位,能保证该元素不会因缩放而失真模糊。

 

 

 

 

首先,先说一个常识,浏览器的默认字体高都是16px。步入正题—–〉

  • 兼容性:

目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。

就算对不支持的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

  • 使用%单位方便使用
css中的body中先全局声明font-size=62.5%,这里的%的算法和rem一样。
因为100%=16px,1px=6.25%,所以10px=62.5%,
这是的1rem=10px,所以12px=1.2rem。px与rem的转换通过10就可以得来,很方便了吧!
  •  使用方法

注意,rem是只相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可;

例子:

1 /*16px * 312.5% = 50px;*/
2 html{font-size: 312.5%;}
1 /*50px * 0.5 = 25px;*/
2 body{
3     font-size: 0.5rem;
4     font-size\0:25px;
5 }

一般情况下,是这样子使用的

1 html{font-size:62.5%;} 
2 body{font-size:12px;font-size:1.2rem ;} 
3 p{font-size:14px;font-size:1.4rem;}
  • 优点

用一个东西肯定要知道它的好处啦,由于其他字体大小都是基于html的,所以在移动端做适配的时候,可以使用这样的方法

复制代码
复制代码
 1 @media only screen and (min-width: 320px){
 2   html {
 3     font-size: 62.5% !important;
 4   }
 5 }
 6 @media only screen and (min-width: 640px){
 7   html {
 8     font-size: 125% !important;
 9   }
10 }
11 @media only screen and (min-width: 750px){
12   html {
13     font-size: 150% !important;
14   }
15 }
16 @media only screen and (min-width: 1242px){
17   html {
18     font-size: 187.5% !important;
19   }
20 }
复制代码
复制代码

这样子就能做到仅仅改变html的字体大小,让其他字体具有“响应式”啦。

又是午睡时间,如果本文有不正确的地方,请指出^_^

从零开始学习Vuejs前端框架(二)

今天开始学习vueJs第二天,主要是学习使用vuejs做一个TODO的列表,使用了v-model,

v-model是一个指令,限制在<input>、<select>、<textarea>、components中使用

官方的说法是:

 

我则是直接把他当成是html里面的input的一个name,不过有区别的是这个通过v-model使用的这个值inputValue,直接可以取出他所包含的值。

以下的程序则是将input框里输入的值,直接以列表的形式显示出来。

通过handleBtnClickh函数对按钮进行监听,将input里面的值打印到列表里。

使用的list数组则是用来接收inputValue的值。

<!DOCTYPE html>
<html>
<head>
	<title>TODOLIST</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="inputValue">
		<button v-on:click="handleBtnClick">提交</button>

		<ul>
			<li v-for="item in list">{{item}}</li>

		</ul>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				list: [],
				inputValue: ''
			},
			methods: {
				handleBtnClick: function(){
					this.list.push(this.inputValue);
					this.inputValue = '';
					//alert(this.inputValue)
				}
			}
		})
	</script>
</body>
</html>

 

从零开始学习Vuejs前端框架(一)

一直以来,我的前端方面就比较弱,以前学习jQuery的时候,都是摸着石头过河,基本上都是学一样,然后又忘记一样。搞得每次用的时候狼狈不已。现在响应式的框架越来越多,最近在网上下载了VUE的视频教程,准备一个代码一个代码的敲点出来学习。这个博客现在就打算记录一下自己的学习步骤。话不多少,先上代码,至于vue的基础知识,网上就多得很了,我这里就不多说了。

纯粹为记录代码而生:首先还是从Hello World入手吧!

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Hello World</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">{{content}}</div>
	<script>
		var app = new Vue({
			el : '#app',
			data:{
				content: 'hello world1'
			}	
		})
		setTimeout(function(){
			app.$data.content = 'bye world'
		},2000)
	</script>
</body>
</html>

上面这段代码的功能主要是以下两点:

1、在id为app的Div里显示hello world

2、2秒之后把hello world变成bye world

挺简单的,一看也很明白。

只是用了vuejs之后呢,将数据与视图层分开后。只需要专注于数据的变化,而不需要去关注DOM元素了。因为是响应式的,所以当content的值有变化的时候,会直接在div层里面显示出来。根本不用刷新页面。

怎么用opendir访问本地根目录以外的目录

上周帮客户做了网站迁移,今天客户风风火火的找到我,说后台无法清除缓存。

我后台进入后一测试,果然如此。因为清除缓存其实就是删除目录里面的缓存文件,于是首先考虑到权限问题

但是是windows2018,不同于Linux权限那么复杂,基本上可以排除了。

于是我打开程序源码,查看信息

因为在网站后台是删除掉WEB和手机站的缓存信息,后台管理也是和WEB、WAP手机站分开的。这里相当于是跨站点删除目录了。

也就是说后台管理站并非删除自身站点里的目录,而是跨站删除。也就是突破了自身根目录。

在一般情况下,是可以直接访问的,除非PHP.ini做了限制

报错:open_basedir()无法opendir外部文件的错。

原因:站点根目录为public, 要访问上一级目录下的文件,需开启外部访问权限

1、检查nginx的配置文件fastcgi.conf 是否设置了open_basedir(一般在最后一行),fastcgi_param PHP_ADMIN_VALUE “open_basedir=$document_root:/tmp/:/proc/” ,其中$document_root是站点根目录,将这整行注释掉,或者改成“open_basedir=$document_root/../:/tmp/:/proc/”

2、php.ini是否设置了open_basedir配置,如果有改成正确配置

3、使用.user.ini文件设置:open_basedir=/home/wwwroot/yestar.whrango.cc:/tmp/:/proc/,注意要使用chattr +i .user.ini 将文件设置为不可修改;一个服务器使用多种php框架建议将1、2关闭,通过.user.ini设置,这样可以针对不同框架的站点进行设置,灵活性更强;如果一个服务器只有一种php框架,可以在fastcgi.conf 或者php.ini里面设置,一劳永逸

开启权限的方式有多种,最好的方式是在站点根目录下(public文件夹下)配置.user.ini文件,将“open_basedir = /home/wwwroot/xxx.com/public:/tmp/:/proc/”改成“open_basedir = /home/wwwroot/xxx.com:/tmp/:/proc/”

使用.user.ini最关键的步骤是:修改完要重启php-fpm,命令:service php-fpm restart

升级WordPress时提示”另一更新正在进行”的解决方法

WordPress在升级的过程中,如果你刷新页面或者关闭页面会造成Wordpress升级不成功,下次再进行升级时可能会遇到这样或者那样的问题。比如我前几天升级时刷新了页面,再次升级Wordpress时,一直提示”另一更新正在进行”。

这是由于在升级Wordpress的过程时,Wordpress会在数据库 wp_options 表中增加 core_updater.lock 记录。若中途打断Wordpress程序的升级,这个记录会保留在数据库中。当下次升级时,Wordpress检测到此记录的存在就会返回”另一更新正在进行”。

可通过以下两种方法解决:

方法一、通过MySQL数据库管理工具(比如 phpMyAdmin 或 navicat),在 wp_options 表中找到 core_updater.lock记录并将这一列数据并且删除。

方法二、通过终端登录数据库,假设表前缀是_wp,数据库是wordpress,使用以下命令进行操作:

mysql -u root -p
use wordpress;
select * from wp-options where options_name='core_updater.lock';

查询到的结果如下图:

然后使用如下命令删除 core_updater.lock 记录:

delete from wp_options where option_name='core_updater.lock';

最后,我们再去执行升级WordPress,就没有这个”另一更新正在进行”错误提示了,问题解决了。

Python之使用Editplus编辑器配置python运行程序

刚开始学习时在网上找到的一些零散的信息,现在目前我所用到的几种配置汇总整理一下,以便将来忘记时可以找到笔记,也希望对大家有用

一.运行Python代码配置

1.     打开editplus

        选择菜单栏 “工具” -》 选择“配置用户工具”

2.     修改工具组名称

        打开参数设置界面,点击右边的“组名”

弹出修改名称界面,输入新的组名,点击确认

3.     为执行工具组添加运行命令主体

         点击右边“添加工具” -》 选择“应用程序”

下面的菜单文字等变成可编辑的,在菜单文字里面输入命令描述(此处可根据个人喜好,我使用的是run python)

4.     选择调用的命令

       点击命令后面的选择项,弹出文件命令选择的窗口

找到你的python的安装目录,我这里的安装目录是D:\Python2.7\python.exe

5.     参数选择文件名,也可输入$(FileName)

       初始目录就选择文件目录,也可输入$(FileDir)

6.     动作输出,选择捕捉输出。

        选择捕捉输入,你的执行结果信息会在editplus的控制台输出

如果选择无,会弹出命令窗口,来显示执行结果

7.     点击菜单栏“工具”选择“用户工具组”点击刚刚添加的“python”

8.     新建个yy.py文件

        为顺利输出中文,需要在代码第一行加上# -*- coding: UTF-8code -*-

运行程序时可以使用相应命令快捷键(此处为 ctrl+1),也可 “工具” –》 点击对应的工具命令 (如下图)

二.   错误代码行定位配置

为方便快速通过编译错误提示信息定位到错误代码,需要进行以下设置,工具 –》配置用户工具 –》 用户工具

点击“输出模块”,在如下界面中取消勾选“使用默认输出模式”,并补充正则表达式以及其它标记

      配置完成后,当编译报错时点击错误提示信息便能很快定位到第67行代码,当多个文件相互调用时也可打开文件定位到错误位置

三.     语法加亮和自动完成配置

为实现语法高亮和自动完成功能,需要到如下地址下载附件

http://Http://www.editplus.com/files/pythonfiles.zip

压缩包中有3个文件,但只需要python.acp(自动完成文件)和python_extd.stx(语法加亮文件)

新建一个文件类型,命名为Python(如下图),扩展名填为py,语法文件栏选择python_extd.stx,勾选自动完成,并选择自动完成文件python.acp

配置结果如下图:

点击“函数模板”,填写正则表达 式  [\t]*def[\t].+:  并保存

 

四.    python模板配置

建立一个Python文件的模板来快速新建Python文件,内容自定,我使用的内容如下:

保存为template.py文件

工具 –》 配置用户工具 –》 模板,添加一个Python模板,文件路径选择template.py文件所在路径,此处我的路径是:D:\Program Files (x86)\EditPlus 3

配置完成后,然后保存

在Editplus主界面, “新建文件”下就会有一个python模板,点击后可快速新建一个python文件

Down

ThinkPHP关闭debug后,显示页面错误的解决办法

解决ThinkPHP项目上传到Linux服务器后,找不到模板的问题

今天将一个项目部署到centOS7.0后,关闭了app_debug.意外发现有些页面居然打不开,具体情况就是:


而我此时的函数方法则是:updatePW()

而寻找模板文件却成了 updatepw.html
为什么会出现这样的情况呢?
我觉得应该是在在函数大小写上面出了问题

根据ThinkPHP3.2.2的手册,需要设置

'URL_CASE_INSENSITIVE'  =>  false,  

在config文件里面添加了上面这一行代码
运行,问题依旧
说明此时还是没有达到效果

我突然想到删除一下Application目录下的Runtime目录试试

删除后发现
果然此时问题解决。模板错误提示也没有了。

这个给我的启示是:windows环境和Linux的环境区别比较大,开发的时候一定要慎重的根据手册来编写规则,一不留神就会进坑里。

所以,生产环境和开发环境,一定还是要多加熟悉!

如何实根据现用户id生成一个唯一邀请码

根据用户id生成与之对应的唯一邀请码,范围为‘0-9A-Z’。这个需求的重点在于加粗的部分,也就是要能够根据邀请码反推出用户ID,这样邀请码就不用入库了,在用户量很大的情况下,性能可以得到不小的提升。

错误思路

随机生成一个字符串,再将用户id拼接到字符串后面,但是这样id就太明显了,容易暴露,而且如果id很长的话,会导致邀请码很长,不利于用户使用。

所以可以将用户id插入到生成的字符串中,隔一个字符插入一个id的数字,这样id混合在字符串中,不容易暴露,但是长度问题并没有得到优化,于是把隔一个字符插入一个id的数字改为隔一个字符插入两个id的数字。然而长度好像并没有受到太大的影响。

邀请码保证了唯一性,并且长度不会太长,用户id也能够根据邀请码反推出来,但是有一点不好的是,别人也可以根据邀请码去反推出user_id,因此,我们需要做一些优化。

正解

function createCode($user_id)

{

    static $source_string = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    $num = $user_id;

    $code = '';

    while($num)

    {

        $mod = $num % 36; 

        $num = ($num - $mod) / 36;

        $code = $source_string[$mod].$code;

    }

    return $code;

}

优化

把0剔除,当做补位符号,比如小于四位的邀请码在高位补0,这样36进制就变成了35进制,然后把字符串顺序打乱,这样,在不知道$source_string的情况下,是没办法解出正确的user_id的。

代码如下:

function createCode($user_id) {

    static $source_string = 'E5FCDG3HQA4B1NOPIJ2RSTUV67MWX89KLYZ';

    $num = $user_id;

    $code = '';

    while ( $num > 0) {

        $mod = $num % 35;

        $num = ($num - $mod) / 35;

        $code = $source_string[$mod].$code;

    }

    if(empty($code[3]))

        $code = str_pad($code,4,'0',STR_PAD_LEFT);

    return $code;

}

这样,对应user_id的唯一邀请码就生成了,再附一个解码函数:

function decode($code) {

    static $source_string = 'E5FCDG3HQA4B1NOPIJ2RSTUV67MWX89KLYZ';

    if (strrpos($code, '0') !== false)

        $code = substr($code, strrpos($code, '0')+1);

    $len = strlen($code);

    $code = strrev($code);

    $num = 0;

    for ($i=0; $i < $len; $i++) {

        $num += strpos($source_string, $code[$i]) * pow(35, $i);

    }

    return $num;

}

来源:
https://www.php.cn/php-weizijiaocheng-388405.html

wordpress更改域名最简单的方法

旧的域名已经不能用了,wordpress后台也就当然进不去了。这时很是后悔没有提前把域名给更改过来。这时一般通过修改数据库来解决,但比较麻烦。不用着急,还是有比较简单的方法的。

最简单的方法就是更改wp-config.php,添加下面一行代码:

define('RELOCATE',TRUE);

然后就能登陆到后台地址了,手动更改后台博客地址就可以了,然后删除上面这段添加的代码就行了。

第二简单的方法还是修改wp-config.php,添加的代码是:define(‘wp_home’,’新网址’);

define('wp_siteurl','新网址');

然后登陆博客后台更新博客地址和安装地址,域名更新成功后记得删除上面的内容。

最后一种方法是修改博客主题内的functions.php,添加以下的代码:

update_option('siteurl','新网址'); 
update_option('home','新网址');

然后登陆后台更新博客地址和安装地址,成功后记得删除以上文件中添加的代码。

作者:超级飞鱼

链接:https://www.jianshu.com/p/175f6dab0780

来源:简书

简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。