Question

我将一个全宽度模板页面添加到Wordpress网站，以便在一个页面上使用：http://pjstagingdecorating.com/portfolio-testing2/#DTprettyPhoto

我在样式表中添加了一个新的PHP文件和CSS。模板确实显示为选项但内容未显示在页面的整个宽度上。下面是PHP和CSS。

<?php
/**
 * Template Name: Full Width
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that other
 * 'pages' on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

get_header(); ?>

    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">

            <?php /* The loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>

                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <header class="entry-header full-width">
                        <?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
                        <div class="entry-thumbnail">
                            <?php the_post_thumbnail(); ?>
                        </div>
                        <?php endif; ?>

                        <?php if (is_front_page()) : ?>
<?php else : ?>
<h1 class="entry-title full-width"><?php the_title(); ?></h1>
<?php endif; ?>
                    </header><!-- .entry-header -->

                    <div class="entry-content full-width">
                        <?php the_content(); ?>
                        <?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
                    </div><!-- .entry-content -->

                    <footer class="entry-meta">
                        <?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
                    </footer><!-- .entry-meta -->
                </article><!-- #post -->

            <?php endwhile; ?>

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

<?php get_footer(); ?>

CSS：

.full-width {
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto;
    padding-right: 1em !important;
}

对我做错了什么的想法？谢谢！

Answer 1

将此添加到ur css文件：

.page-template-fullwidth .div#primary, .page-template-fullwidth .hentry {max-width:100%!important;}

建议您创建Child theme以修改Wordpress主题，否则您的更改将在您更新主题时重置。以下是创建子主题的指南： http://variablez.com/wordpress/how-to-create-a-wordpress-child-theme

Wordpress主题的全宽模板

1 个答案: