当前位置:首页分享WordPress自定义全宽首页或页面模板

WordPress自定义全宽首页或页面模板

【效果如下图】介绍下自己的特征:懒b、懒b还是懒b,然后能力也一般。主要给新手或者不是很懂代码的人免费写一些嘴对嘴喂的解决方案;虽然我知道您能力很强,但您也许也能用到。
【用处1】可以将网站首页设置为您想要的静态页面(比如您从其他站扒下来的静态页面、下载的html静态模板等);省的您在首页模块设置自定义html代码,也省得在设置自定义代码同时还要适配一大堆的CSS。
【用处2】可以设置成为您的某个活动页面或者产品介绍页(就像大厂如网易的游戏平台,旗下游戏共用一个header)使用这个简易的解决方案也可以达到这样的效果
【用处3】如果您是制作js或者css效果展示的,也可以这样做,可以达到版权意识的展示效果
【用处…】当然还有很多用处,只要你的想得到,就一切可以

【注】:本站教程使用B2主题,其他主题原理相同一样可以

演示:https://www.devskyr.com/dlocke

(图片可以点击放大)

首先介绍下实现方式的原理我的方案是使用“iframe”嵌入到wordpress页面里;那么我们就要解决几个严重的问题。

问题一

wp的页面模板并没有全宽样式(可能你使用了某些其它的主题自带全宽等样式)我们就要解决这个问题,要适配顶部距离左右距离等问腿,需要将这些问题进行适配。

问题二

页面适配成功后再使用自定义html模块,你会发现内嵌的网页有左右很大的间距,如果想从跟修改这个问题,可能会很麻烦,甚至影响其他的css问题。

问题三

在把上面都做好了适配后你又会发现iframe的框架很小或者畸变,现在又要适配这个问题。

综上我想了好久,今天突然醒悟,原来有一种非常简单的办法我却一直傻傻的没想到。下面开始教程


首先你需要先准备【1套html静态模板】进行测试(可以去-php中文网-或者-模板王-进行下载,都是免费的且不限速);其次最好准备一个新的站点(有路径就可以,不必做页面,不必装系统)(当然不准备也行,一会你就知道了)

首先进入您的网站目录:/wp-content/themes/b2/pageTemplates

就是这样的,进入后你会看见一大堆php文件,这些文件就是页面模板文件,我们要做的就是创建一个全宽且要适配iframe的全屏方式的页面模板。方便从wp创建页面时直接调用。在这一步点击新建文件,并命名你能记得住的名字,我这里用qkp.php为大家做演示。我们创建后要在改文件里输入以下内容;(兄弟们新创业公司真的需要新用户的注册登录,如果您站的需要这个方案,麻烦登录或者注册一下吧!!!求求了!!!就是要登录或注册就行了,我们都不收费的!!!求求求了!!!)

如果以上代码你做完了,那么恭喜你!你已经成功创建成功了一个页面,且是有页面的页面了!!!但是现在要做的下一步就是;你会发现上述代码中的iframe属性里是空链接,这个时候你的静态页面就派上用场了。你可以像我一样创建一个新的站点,并把这个新的站点设置很多个下阶文件夹,不同的网页放在不同的文件夹就好了。当然你也可以放在你这个网站的二级目录下;这个要看你啦。然后以网址的方式把这个目录填在【src=”填在这里”】里面就好了,然后对文件进行保存。

接下来我们就要到wp的后台来了;请看下图。

进入自定义选项设置自定义css并输入下述代码(兄弟们新创业公司真的需要新用户的注册登录,如果您站的需要这个方案,麻烦登录或者注册一下吧!!!求求了!!!就是要登录或注册就行了,我们都不收费的!!!求求求了!!!)

上面的自定义额外CSS是为了设置刚刚自定义页面的页面适配。接下来我们要创建这个页面,把他展示出去。

这一步后你再访问这个页面,就会发现!你的自定义页面已经弄完了!!!,举一反三,你可以创建无数个这样的网站,缺点就是每次新建时都要折腾好几步,但这起码很简单,不用捣鼓自定义html的css适配,省的出现一大堆问题。

如果你不喜欢双层header菜单,可以在你的html删掉header那段代码。

你又会问:这也不是首页啊,他只是个页面啊!那么请看下面讲解,

众所周知Wordpress可以设置自定义页面为首页;

这回再去你的网站首页看一下就对啦!

如果看完还是不会的话可以评论留言;或者添加站长微信13766555693,站长免费帮您弄好。、

感谢您的登录与注册,在我们成功的道路上少不了您们每一位用户的支持与鼓励!

您也可以看本站底部的页脚上,有官方B站、微信公众号、抖音账号,均已蓝V认证!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
2 条回复 A文章作者 M管理员
  1. 小嘿

    👍

  2. caicai

    😁