html - 我正在将 HTML 转换为 Wordpress : Content on page non-cooporative

标签 html wordpress css custom-wordpress-pages

这是我为一家面包店做的第一个 HTML 到 Wordpress 的转换。我曾尝试使用 wordpress codex 和论坛进行故障排除,但回复不成功。

以下场景适用于全宽页面。我确定这很简单(我可能是错的)但我没有看到。

场景 1:当我单独输入文本时,对齐效果很好,但是段落之间的返回键不会像应该的那样分隔段落

场景 2:图片向右对齐仅移动图片旁边的 1 行句子,其余行在图片下方。

场景 3:插入图像或表格时,所有内容都移出指定容器 (div),并丢失为其设置的样式。

http://www.treunorth.com/pennycakes/about/

我是否需要添加一行代码到“page-full.php”或调整 css 才能使其正常工作?

page-full.php:

<?php /* Template Name: Page - Full Width */ ?>

<?php get_header(); ?>

<!-- Page Article -->

<div class="clear"></div> 

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<section id="story" class="container_16 clearfix">
    <div class="story-top grid_16"></div>

    <div class="story grid_16">
        <h1 class="meander"><?php the_title(); ?></h1>
        <p class="m500">
            <?php if (have_posts()) : while (have_posts()) : the_post();?>
            <?php the_content(); ?>
            <?php wp_link_pages(); ?>
            <?php edit_post_link( __( 'Edit', 'pennycakes' ), '<span class="edit-link">', '</span>' ); ?>
            <?php endwhile; endif; ?>
        </p><!-- .entry-content -->
    </div>
    <div class="story-bottom grid_16"></div>

</section>
</article><!-- #post-<?php the_ID(); ?> -->

<div class="clear"></div> 

<!-- //Page Article -->

<?php get_footer(); ?>

样式表:

.container_16 .grid_16 {
    width: 972px;
    }

/*--------------------------------
 9) STORY
--------------------------------*/
#story { margin-top: 30px; }
.story-top { background: url('../css/images/bg-full-top.png') no-repeat center top; height: 30px; }
.story { background: url('../css/images/bg-full.png') repeat-y center top;}
.story h1 { font-size: 64px; color: #BF4A72; text-align: center; padding: 15px 0;}
.story p { font-size: 13px; color: #73656e; line-height: 19px; padding: 0 42px 0 42px; }
.story p.signature { background-position: 0 -949px; font-size: 26px; line-height: 51px; margin-bottom: 20px; margin-left: 42px; margin-top: 24px;}
.story-bottom { background: url('../css/images/bg-full-bottom.png') no-repeat center top; height: 31px;}

最佳答案

表格没有宽度,其中也没有单元格。所以设计它并不容易......

段落标签也有一些样式。比如 19px f.x 等的行高。

此外,大多数样式不会从 div 继承到其中的表格。您还需要向表格添加一些样式。

关于html - 我正在将 HTML 转换为 Wordpress : Content on page non-cooporative,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12833274/

相关文章:

html - 如何在响应时重新排列此 div

javascript - 困惑 - html5 history api 和谷歌爬虫?

HTML5 getUserMedia - 禁用麦克风反馈

php - 在 WooCommerce 中确认付款后添加自定义元数据

css - 使用 Iframe 导致链接失效

css - 在 CSS 网格行内扩展卡片

java - 使用 CSS3 无法覆盖 JavaFX 8 上 SplitPane 分隔线的颜色和大小

html - 在知道组件字符串名称的 Angular 2 中动态插入组件

javascript - 如果子单元格包含特定值,则将类应用于父行

php - 在 WooCommerce 中为产品添加自定义设置选项卡,允许显示 iframe