Question

我正在创办一家新创业公司，并且正在使用Wordpress和Woothemes作为我最初的MVP。我使用Hustle主题，一切看起来都很华丽。我有点迂腐，想要在“主页”上显示全宽度的某些图像，而其他部分则保持在99em宽度。

最好的方法是什么？我不擅长PHP，但想要做得对。更改CSS代码是最有效的方法来做到这一点，然后我如何只隔离一个部分并使其全宽？

这是我要制作全宽度的一个部分的CSS i.o.w它应该覆盖它的块：

.home-section#intro-message {
  width: 
  margin-top: -6.854em;
  padding: 6.854em 0;
  border-bottom: 5px solid #e5e5e5;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

PHP文件：

<?php
// File Security Check
if ( ! function_exists( 'wp' ) && ! empty( $_SERVER['SCRIPT_FILENAME'] ) && basename( __FILE__ ) == basename( $_SERVER['SCRIPT_FILENAME'] ) ) {
    die ( 'You do not have sufficient permissions to access this page!' );
}
?><?php
/**
 * Index Template
 *
 * Here we setup all logic and XHTML that is required for the index template, used as both the homepage
 * and as a fallback template, if a more appropriate template file doesn't exist for a specific context.
 *
 * @package WooFramework
 * @subpackage Template
 */
    get_header();
    global $woo_options;

    $settings = array(
                'homepage_enable_intro_message' => 'true', 
                'homepage_enable_blog_posts' => 'true', 
                'homepage_enable_promotion' => 'true', 
                'homepage_enable_featured_products' => 'true',
                'homepage_enable_features' => 'true',
                'homepage_enable_testimonials' => 'true',
                'homepage_number_of_features' => 3, 
                'homepage_number_of_testimonials' => 3, 
                'homepage_features_area_title' => '', 
                'homepage_testimonials_area_title' => ''
                );

    $settings = woo_get_dynamic_values( $settings );

?>

    <div id="content" class="col-full">

        <?php woo_main_before(); ?>

        <section id="main" class="col-full fullwidth">      
        <?php if ( is_home() && ! dynamic_sidebar( 'homepage' ) ) {
            if ( 'true' == $settings['homepage_enable_intro_message'] ) {
                get_template_part( 'includes/intro-message' );
            }

            if ( is_woocommerce_activated() && 'true' == $settings['homepage_enable_featured_products'] ) {
                get_template_part( 'includes/featured-products' );
            }

            if ( 'true' == $settings['homepage_enable_features'] ) {
                $args = array( 'title' => $settings['homepage_features_area_title'], 'size' => 235, 'per_row' => 3, 'limit' => $settings['homepage_number_of_features'] );
                $args['before'] = '<section id="features" class="home-section widget_woothemes_features">';
                $args['after'] = '</section>';
                $args['before_title'] = '<header class="block"><h1>';
                $args['after_title'] = '</h1></header>';

                do_action( 'woothemes_features', $args );
            }       

            // Featured Slider.
            woo_featured_slider_loader();

            if ( 'true' == $settings['homepage_enable_testimonials'] ) {
                $args = array( 'title' => $settings['homepage_testimonials_area_title'], 'size' => 80, 'per_row' => 3, 'limit' => $settings['homepage_number_of_testimonials'] );
                $args['before'] = '<section id="testimonials" class="home-section widget_woothemes_testimonials">';
                $args['after'] = '</section>';
                $args['before_title'] = '<header class="block"><h1>';
                $args['after_title'] = '</h1></header>';

                do_action( 'woothemes_testimonials', $args );
            }

            if ( 'true' == $settings['homepage_enable_blog_posts'] ) {
                get_template_part( 'includes/blog-posts' );
            }

            if ( 'true' == $settings['homepage_enable_promotion'] ) {
                get_template_part( 'includes/promotion' );
            }

        ?>
        <?php } ?>    
        </section><!-- /#main -->

        <?php woo_main_after(); ?>

    </div><!-- /#content -->

<?php get_footer(); ?>

由于

埃林

Answer 1

如果代码太少，我们就无法给出正确答案。

如果整个网站都是容器中的包装器，并且您只想要1个部分是全宽度，那么您可以考虑，更改该页面的html结构，a.k.a

绝对：

<div class="container">
    <div class="row">

    </div>
    <div class="row">

    </div>
</div>

应该成为：

<div class="row">
    <div class="container">

    </div>
</div>
<div class="row">
    <div class="container">

    </div>
</div>

（我考虑到容器和那个部分之间可能还有其他元素，你不能用所有部分关闭容器，而不需要为你需要重新打开的所有部分调整css）如果容器在header.php中被定位，您可以在标题中关闭它（仅适用于此模板/页面）并在页面/模板中创建一个新的并使用上面的结构。

也有JS解决方案，但为什么会让事情变得简单。

如何在我的Wordpress主页上使某些部分/行图像全宽？

1 个答案: