创建全宽WordPress页面

时间:2019-06-06 作者:Amsterdam_020

谢谢你阅读我的问题。

我似乎想不出一种方法来让这一页全宽(或几乎全宽)。当我在平板电脑和手机上时,它几乎完全填满了屏幕。是否有人建议从哪里开始定制这些设置?

非常感谢。

<?php
/**
 * Template Name: Full Width
 *
 */

get_header(); ?>

<div class="row">

<div id="primary" class="content-area">

    <div class="large-12 columns">

        <main id="main" class="site-main" role="main">

            <?php while ( have_posts() ) : the_post(); ?>

                <?php get_template_part( \'template-parts/content\', \'page\' ); ?>

                <?php
                    // If comments are open or we have at least one comment, load up the comment template
                    if ( comments_open() || get_comments_number() ) :
                        comments_template();
                    endif;
                ?>

            <?php endwhile; // end of the loop. ?>

        </main><!-- #main -->

    </div><!-- .large-12 -->

</div><!-- #primary -->

</div><!-- .row -->

<?php get_footer(); ?>
我使用我网站主页上显示的模板。

https://www.tuberadar.nl

2 个回复
最合适的回答,由SO网友:Faye 整理而成

This is more of a CSS question than a template question.

“row”类添加的最大宽度为75rem 在模板上。

在inspector中显示如下:

.row {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 75rem;
}
来自此样式表:https://tuberadar.nl/wp-content/themes/gateway/app.css?ver=5.1.1

如果不深入了解网关主题本身,我无法告诉您在管理面板中是否有特定的位置可以更改此主题。如果你的主题有设置,只需查看显示为75rem或75的内容,看看是否可以更改。它可能在“容器宽度”这样的标签下。

如果没有成功,并且如果您已经在文件中搜索,那么有几种方法可以处理此问题:

Option 1.

从上面发布的全宽模板中删除类“Row”。如果没有更深入的了解,我无法告诉你这是否是推荐的,但当我用inspector删除它时,主页上没有任何内容损坏,因此它可能不会影响任何东西。

Option 2. Recommended.

向模板添加另一个类,例如<div class="row full-width-row"> 然后在主题文件中添加一些css。

.full-width-row { 
   max-width: 100%;
}
这将摆脱目前设定的75雷姆。

如果你不熟悉css,或者你的主题是编译sass/less,那么你可以通过WordPress管理员添加这些代码。转到外观>编辑器以使用样式表。但我确实建议,如果可能的话,找一位能够帮助您将代码正确添加到主题中的开发人员。

SO网友:eweber

我经常遇到这个问题。我不确定您是否使用了像Visual Composer这样的页面生成器,但如果您使用了Visual Composer,则必须在生成器中使用全角元素,并将页面模板更改为全角模板。