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

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

用处一:可以将网站首页设置为您想要的静态页面(比如您从其他站扒下来的静态页面、下载的html静态模板等);省的您在首页模块设置自定义html代码,也省得在设置自定义代码同时还要适配一大堆的CSS。

用处二:可以设置成为您的某个活动页面或者产品介绍页(就像大厂如网易的游戏平台,旗下游戏共用一个header)使用这个简易的解决方案也可以达到这样的效果

用处三:如果您是制作js或者css效果展示的,也可以这样做,可以达到版权意识的展示效果

用处…..:当然还有很多用处,只要你的想得到,就一切可以!

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

演示:大转盘 自定义大转盘 – 豆子园 (douzll.com)

(图片可以点击放大)

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

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

问题一

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

问题二:

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

问题三:

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

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


首先你需要先准备【1套html静态模板】进行测试(随便下载一个静态网页即可);其次最好准备一个新的站点(有路径就可以,不必做页面,不必装系统)(当然不准备也行,一会你就知道了)

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

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

就是这样的,进入后你会看见一大堆php文件,这些文件就是页面模板文件,我们要做的就是创建一个全宽且要适配iframe的全屏方式的页面模板。方便从wp创建页面时直接调用。在这一步点击新建文件,并命名你能记得住的名字,我这里用shabi.php为大家做演示。我们创建后要在改文件里输入以下内容;

<?php
/*
*
Template Name: 这里输入你想在wp创建页面显示的名字,直接填中文就行,英文也可以(把这些字直接删掉换成你的字就对了)
*/
get_header(); ?>
        <div id="primary-home" class="content-areaa">
<body>
<div id="preview">
<iframe id="preview-frame" class="preview-desktop" src="你的静态页面地址" frameborder="0"></iframe>
</div>
<style>
iframe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
::-webkit-scrollbar{  
   width:0px;  
   height:0px;  
}  
</style>
<script src="https://pdui.cdn.devskyr.com/unpublic@2.6.05.47/dsr_public_iframe/js/iframe_demo.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?187bfaafb5f82308c12b665c48fb42b2";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
        </div>

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

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

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

进入自定义选项设置自定义css并输入下述代码

WordPress自定义全宽首页或页面模板
/*全宽页CSS*/
.page-template-full-width .content-areaa {
        max-width:0;
	left: 0px;
        margin: 0px;
        border: 0px;
        padding: 0px;
}
 
.page-template-full-width .site {
        margin:0px;
}
.single .content-areaa,.page .content-areaa,.links-register .content-areaa {
                max-width: 100%;
                margin-top: -10px;
		margin-bottom: -66px;
                flex: 1;						
            }

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

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

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

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

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

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

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

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

如果看完还是不会的话可以评论留言;

实用

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

2024-7-6 16:07:56

实用

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

2024-7-6 16:07:56

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索