【问题标题】:Full Width template for Wordpress themeWordpress 主题的全宽模板
【发布时间】:2015-06-24 01:23:11
【问题描述】:

我在一个 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;
}

对我做错了什么有什么想法吗?谢谢!

【问题讨论】:

  • 我在 .full-width 类中添加了width:100%!important;,并将全角类添加到 PHP 中的 #primary 和 #content 中。还是不行。谢谢! &lt;div id="primary" class="content-area full-width"&gt; &lt;div id="content" class="site-content full-width" role="main"&gt;

标签: php css wordpress


【解决方案1】:

将此添加到您的 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

【讨论】:

  • 谢谢@Sparrow。不幸的是,这没有用。我还尝试将您的代码应用于浏览器中这些 div 的所有容器,但没有任何效果。它似乎仍在为侧边栏节省空间。
  • 你在使用 cloudflare 吗?然后打开“开发模式”删除浏览器缓存。我使用了“检查元素”,效果很好!看来你改变了你的主题。如果你改变了你的主题,那么最好关闭这个问题。
  • 谢谢。我没有改变主题。还是二十三岁。我正在使用 Chrome 检查元素。
  • 删除类.full-width第645行,添加一个类到全宽子内容,.page-template-fullwidth .sidebar .entry-header {max-width:100%!important;}这里是截图:imgur.com/FzvXtI2
猜你喜欢
  • 2019-02-21
  • 1970-01-01
  • 2015-05-17
  • 2012-08-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多