如何在WordPress中创建全宽页面和文章模板

在WordPress中创建了子主题后，就可以添加全宽页面模板和全宽文章模板了，创建方法也非常简单。

创建全宽页面模板

首先，从父主题中复制page.php文件到子主题文件夹下，重命名为page-full-width.php，并设置好访问权限。

以我的TwentySeventeen主题为例，用WordPress内置主题编辑器，将page-full-width.php中的

1
2
3

/**
 * The template for displaying all pages
 */

修改为

1
2
3

/**
 * Template Name: Full-Width-Page
 */

然后，在创建新页面的时候，就可以选择“Full-Width-Page”的页面模板了。

当然，这个时候的页面没有任何变化，需要从CSS中进行设置。

用Chrome打开已经设置为Full-Width-Page模板的页面，右键单击内容部分，点击‘检查’，找到最外层容器生效的width属性，然后复制到子主题的style.css文件中，将width属性修改为100%并保存。

由于子主题的CSS属性会覆盖父主题。现在刷新页面可以看到已经修改成功。

我的主题修改代码如下所示：

@media screen and (min-width: 48em) {
body.page-two-column:not(.archive) #primary .entry-header {
width: 100%;    /*标题部分调整为全宽*/
}
body.page-two-column:not(.archive) #primary .entry-content {
width: 100%;    /*内容部分调整为全宽*/
}
.wrap {
max-width: 1200px;   /*这里是为了增加页面宽度*/
}
}
body.page:not(.twentyseventeen-front-page) .entry-title {
font-size: 1.875rem;    /*增加标题字体大小*/
text-align: center;       /*标题居中显示*/
}

创建全宽文章模板

同理，创建文章模板需要将父主题中的single.php复制到子主题文件夹中，并重命名为single-full-post.php，当然这里的名字可以自己修改。

将single-full-post.php中的

1
2
3

/**
 * The template for displaying all single posts
 */

修改为：

/**
 * Template Name: Full-Width-Post
 * Template Post Type: post
 */

保存后，在创建文章时就可以选择名为“Full-Width-Post”的模板了。

同样采取调整属性的方式达到全宽的目的。为了不影响其他未使用全款模板的文章样式，我采用的方法是在模板文件的div层中，直接加入了style="width:100%"的样式。测试PC.手机端均显示正常。

由于我也是初学者，方法可能很粗糙，欢迎留言指导，感激不尽！

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。