如何在WordPress中创建全宽页面

2020-07-24
WordPress行业动态

您要在WordPress中创建全宽页面吗？许多WordPress主题已经带有内置的全角页面模板，您可以使用它。但是，某些主题没有该功能。在本文中，我们将向您展示如何轻松地在WordPress中创建全宽页面。

方法1：在WordPress主题中使用内置的全宽模板

如果您的主题已经带有全角页面模板，则建议使用此方法。

首先，您需要通过访问页面»添加新页面来编辑页面或创建新页面。

在页面编辑屏幕上，在页面属性元框下选择全角作为模板。

选择全角模板后，您需要保存页面。您可以继续编辑页面以添加更多内容，或单击预览按钮以查看其实际效果。

如果页面编辑屏幕上没有全角模板选项，那么这意味着您的主题没有全角页面模板。

不用担心，我们将向您展示如何轻松创建全角页面而不更改WordPress主题。

方法2：手动创建全角页面模板

此方法要求您编辑WordPress主题文件，并对PHP，CSS和HTML 有一些基本了解。如果您以前没有做过，请查看我们的指南，了解如何在WordPress中复制/粘贴代码。

在继续进行任何操作之前，您应该创建一个WordPress备份或至少一个当前主题的备份。如果出现问题，这将帮助您轻松恢复站点。

首先，您需要打开一个纯文本编辑器（如记事本），并将以下代码粘贴到空白文件中：

<?php/**Template Name: Full-Width*/get_header(); ?>

现在，您需要将此文件另存为full-width.php计算机上的文件。

此代码仅定义模板文件的名称，并要求WordPress提取标头模板。

接下来，您将需要代码的内容部分。使用FTP客户端（或cPanel中的文件管理器）连接到您的网站，然后转到/ wp-content / themes / your-theme-folder /。

现在，您需要找到名为page.php的文件。这是您主题的默认页面模板文件。

复制所有内容get_header()，并将其粘贴到计算机上的full-width.php文件中。

现在，您需要查看full-width.php文件并删除以下代码行：

<?php get_sidebar(); ?>

该行仅获取侧边栏并将其显示在主题中。删除它会阻止您的主题在使用全角模板时显示侧边栏。

您可能会看到该行在主题中多次出现。如果您的主题有多个补充工具栏（页脚小部件区域也称为补充工具栏），那么您将在代码中看到每个引用一次的补充工具栏。您需要确定要保留的侧边栏。

如果您的主题不在页面上显示侧边栏，则您可能在文件中找不到此代码。

这是完成更改后我们的full-width.php代码的外观。您的代码可能看起来略有不同，具体取决于您的主题。

<?php/**Template Name: Full-Width*/get_header(); ?><div id="primary"class="content-area">    <main id="main"class="site-main"role="main">        <?php        // Start the loop.        while( have_posts() ) : the_post();
            // Include the page content template.            get_template_part( 'template-parts/content', 'page');
            // If comments are open or we have at least one comment, load up the comment template.            if( comments_open() || get_comments_number() ) {                comments_template();            }
            // End of the loop.        endwhile;        ?>
    </main></div><?php get_footer(); ?>

接下来，您需要使用FTP客户端将full-width.php文件上传到主题文件夹。

您已经成功创建了自定义全角页面模板并将其上传到主题。下一步是使用此模板创建全角页面。

转到WordPress管理区域并编辑或创建新页面。

在页面编辑屏幕上，查找页面属性元框，然后单击“模板”选项下的下拉菜单。

您将可以在那里看到您的全角模板。继续选择它并保存/更新页面。

现在，您可以访问您的网站，您会看到侧边栏消失了，并且页面显示为单列。它可能还没有全角，但是现在您可以使用其他样式了。

您将需要使用Inspect工具来查找主题定义内容区域所使用的CSS类。

之后，您可以使用CSS将其宽度调整为100％。我们在测试站点中使用了以下CSS代码：

.page-template-full-width .content-area { width: 100%; margin: 0px; border: 0px; padding: 0px;}
.page-template-full-width .site {margin:0px;}