在我的单页博客文章中，wordpress 正在创建这个随机的空(我认为是一个)div。这可能是我制作帖子循环的方式吗？不确定为什么会发生这种行为。如果有人想要一个链接以亲自查看，请发表评论。我正在我的本地机器上构建主题，但如果需要，我可以将它放在实时站点上。
PHP:
<?php /* Template Name: Single Blog Page */ ?>
<?php get_header(); ?>
<div id="page-content">
<?php
if( have_posts() ):
while( have_posts() ): the_post(); ?>
<div class="single-post">
<h3><?php the_title(); ?></h3>
<small>Posted On: <?php the_time( 'F j, Y' ); ?> in <?php the_category(); ?></small>
<p><?php the_content(); ?></p>
</div>
<hr>
</div>
<?php endwhile;
endif;
?>
<?php get_footer(); ?>
CSS:
.single-post {
padding: 1em;
border: 0.1em solid black;
}
呈现的 HTML:
<!-- Links -->
<link rel="stylesheet" type="text/css" href="http://localhost:8888/wp-content/themes/ericshio/style.css" />
<link rel="shortcut icon" href="" />
<!-- Meta -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Title -->
<title>Eric Shio</title>
<!-- WP Head -->
<meta name='robots' content='noindex,follow' />
<link rel="alternate" type="application/rss+xml" title="Eric Shio » Test Comments Feed" href="http://localhost:8888/2016/08/04/test/feed/" />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/localhost:8888\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.5.3"}};
!function(a,b,c){function d(a){var c,d,e,f=b.createElement("canvas"),g=f.getContext&&f.getContext("2d"),h=Stri ng.fromCharCode;if(!g||!g.fillText)return!1;switch(g.textBaseline="top",g.f ont="600 32px Arial",a){case"flag":return g.fillText(h(55356,56806,55356,56826),0,0),f.toDataURL().length>3e3;case"di versity":return g.fillText(h(55356,57221),0,0),c=g.getImageData(16,16,1,1).data,d=c[0]+","+ c[1]+","+c[2]+","+c[3],g.fillText(h(55356,57221,55356,57343),0,0),c=g.getIm ageData(16,16,1,1).data,e=c[0]+","+c[1]+","+c[2]+","+c[3],d!==e;case"simple":return g.fillText(h(55357,56835),0,0),0!==g.getImageData(16,16,1,1).data[0];case"unicode8":return g.fillText(h(55356,57135),0,0),0!==g.getImageData(16,16,1,1).data[0]}return!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='open-sans-css' href='https://fonts.googleapis.com/css? family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.5.3' type='text/css' media='all' />
<link rel='stylesheet' id='dashicons-css' href='http://localhost:8888/wp-includes/css/dashicons.min.css?ver=4.5.3' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://localhost:8888/wp-includes/css/admin-bar.min.css?ver=4.5.3' type='text/css' media='all' />
<link rel='stylesheet' id='ericshiostyle-css' href='http://localhost:8888/wp-content/themes/ericshio/style.css?ver=4.5.3' type='text/css' media='all' />
<link rel='https://api.w.org/' href='http://localhost:8888/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/wp-includes/wlwmanifest.xml" />
<link rel='prev' title='Hello world!' href='http://localhost:8888/2016/08/02/hello-world/' />
<meta name="generator" content="WordPress 4.5.3" />
<link rel="canonical" href="http://localhost:8888/2016/08/04/test/" />
<link rel='shortlink' href='http://localhost:8888/?p=48' />
<link rel="alternate" type="application/json+oembed" href="http://localhost:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8888%2F2016%2F08%2F04%2Ftest%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8888%2F2016%2F08%2F04%2Ftest%2F&format=xml" />
<style type="text/css" media="print">#wpadminbar { display:none; } </style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>
</head>
<!-- Body -->
<body class="single single-post postid-48 single-format-standard logged-in admin-bar no-customize-support wp-custom-logo">
<!-- Site Header -->
<header class="site-header">
<a href="http://localhost:8888/" class="custom-logo-link" rel="home" itemprop="url"><img width="257" height="239" src="http://localhost:8888/wp-content/uploads/2016/08/TEXT-FILM-STRIP.png" class="site-branding" alt="TEXT FILM STRIP" itemprop="logo" /></a> <div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="main-navigation"><li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://localhost:8888/">Overview</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://localhost:8888/expeditions/">Expeditions</a>
<ul class="sub-menu">
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost:8888/expeditions/vancouver/">Vancouver</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost:8888/expeditions/seattle/">Seattle</a></li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-27"><a href="http://localhost:8888/blog/">Blog</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://localhost:8888/about/">About</a> </li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost:8888/contact/">Contact</a></li>
</ul></div> </header>
<!-- /Site Header -->
<!-- Container -->
<div class="container">
<!-- Site Content -->
<div id="page-content">
</div>
<!-- /Site Content -->
</div>
<!-- /Container -->
<div id="page-content">
<div class="single-post">
<h3>Test</h3>
<small>Posted On: August 4, 2016 in <ul class="post-categories">
<li><a href="http://localhost:8888/category/uncategorized/" rel="category tag">Uncategorized</a></li></ul></small>
<p><p>Stuff</p>
</p>
</div>
<hr>
</div>
<!-- Footer -->
<footer class="site-footer">
<p><a href="mailto:hello@ericshio.com">hello@ericshio.com</a> © Eric Shiozaki</p>
<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
</div>
<div id="footer-sidebar2">
</div>
<div id="footer-sidebar3">
</div>
</div>
</footer>
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/admin-bar.min.js?ver=4.5.3'></script>
<script type='text/javascript' src='http://localhost:8888/wp-content/themes/ericshio/js/ericshio.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/wp-embed.min.js?ver=4.5.3'></script>
<script type="text/javascript">
(function() {
var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
request = true;
b[c] = b[c].replace( rcs, ' ' );
b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
}());
</script>
<div id="wpadminbar" class="nojq nojs">
<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Toolbar" tabindex="0">
<ul id="wp-admin-bar-root-default" class="ab-top-menu">
<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/about.php"><span class="ab-icon"></span><span class="screen-reader-text">About WordPress</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
<li id="wp-admin-bar-about"><a class="ab-item" href="http://localhost:8888/wp-admin/about.php">About WordPress</a> </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
<li id="wp-admin-bar-wporg"><a class="ab-item" href="https://wordpress.org/">WordPress.org</a> </li>
<li id="wp-admin-bar-documentation"><a class="ab-item" href="https://codex.wordpress.org/">Documentation</a> </li>
<li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://wordpress.org/support/">Support Forums</a> </li>
<li id="wp-admin-bar-feedback"><a class="ab-item" href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a> </li></ul></div> </li>
<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/">Eric Shio</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
<li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://localhost:8888/wp-admin/">Dashboard</a> </li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
<li id="wp-admin-bar-themes"><a class="ab-item" href="http://localhost:8888/wp-admin/themes.php">Themes</a> </li>
<li id="wp-admin-bar-widgets"><a class="ab-item" href="http://localhost:8888/wp-admin/widgets.php">Widgets</a> </li>
<li id="wp-admin-bar-menus"><a class="ab-item" href="http://localhost:8888/wp-admin/nav-menus.php">Menus</a> </li>
<li id="wp-admin-bar-background" class="hide-if-customize"><a class="ab-item" href="http://localhost:8888/wp-admin/themes.php?page=custom-background">Background</a> </li>
<li id="wp-admin-bar-header" class="hide-if-customize"><a class="ab-item" href="http://localhost:8888/wp-admin/themes.php?page=custom-header">Header</a> </li></ul></div> </li>
<li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item" href="http://localhost:8888/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2F2016%2F08%2F04%2Ftest%2F">Customize</a> </li>
<li id="wp-admin-bar-comments"><a class="ab-item" href="http://localhost:8888/wp-admin/edit-comments.php"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0" aria-hidden="true">0</span><span class="screen-reader-text">0 comments awaiting moderation</span></a> </li>
<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/post-new.php"><span class="ab-icon"></span><span class="ab-label">New</span></a>
<div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
<li id="wp-admin-bar-new-post"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php">Post</a> </li>
<li id="wp-admin-bar-new-media"><a class="ab-item" href="http://localhost:8888/wp-admin/media-new.php">Media</a> </li>
<li id="wp-admin-bar-new-page"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php?post_type=page">Page</a> </li>
<li id="wp-admin-bar-new-user"><a class="ab-item" href="http://localhost:8888/wp-admin/user-new.php">User</a> </li></ul> </div> </li>
<li id="wp-admin-bar-edit"><a class="ab-item" href="http://localhost:8888/wp-admin/post.php?post=48&action=edit">Edit Post</a> </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
<li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://localhost:8888/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><label for="adminbar-search" class="screen-reader-text">Search</label><input type="submit" class="adminbar-button" value="Search"/></form></div> </li>
<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/profile.php">Howdy, @eshiozaki<img alt='' src='http://1.gravatar.com/avatar/dda9d12be8829bad13acdbde559319b0?s=26&d=mm&r=g' srcset='http://1.gravatar.com/avatar/dda9d12be8829bad13acdbde559319b0?s=52&d=mm&r=g 2x' class='avatar avatar-26 photo' height='26' width='26' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class="ab-submenu">
<li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://localhost:8888/wp-admin/profile.php"><img alt='' src='http://1.gravatar.com/avatar/dda9d12be8829bad13acdbde559319b0?s=64&d=mm&r=g' srcset='http://1.gravatar.com/avatar/dda9d12be8829bad13acdbde559319b0?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>@eshiozaki</span></a> </li>
<li id="wp-admin-bar-edit-profile"><a class="ab-item" href="http://localhost:8888/wp-admin/profile.php">Edit My Profile</a> </li>
<li id="wp-admin-bar-logout"><a class="ab-item" href="http://localhost:8888/wp-login.php?action=logout&_wpnonce=cc2d8b5dfd">Log Out</a> </li></ul></div> </li></ul> </div>
<a class="screen-reader-shortcut" href="http://localhost:8888/wp-login.php?action=logout&_wpnonce=cc2d8b5dfd">Log Out</a>
</div>
</body>
</html>
最佳答案
是的，关闭的 div 位置不太对。给你!
<?php endwhile;
endif;
?>
</div>
<?php get_footer(); ?>
关于php - Wordpress 循环在页面循环开始时创建空白空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38774875/