[英]Php loop for displaying content
I've start meaking my own wordpress template, in first step I made sketch in HTML. 我已经开始制作自己的wordpress模板,第一步是用HTML制作草图。 It's look like this.
看起来像这样。
I was thinking about that, black rectangle is "Post Image", and I want 4 in one line. 我当时在想,黑色矩形是“ Post Image”,我想要一行4个。 That I should solve with for loop, in while loop(I guess).
我应该用for循环解决,而在while循环中(我猜)。 In my opinion it should look like this (It's loop from twenty eleven theme)
我认为它应该像这样(从二十一个主题开始循环)
<?php
get_header(); ?>
<div id="primary">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php for(i=0;i<8;i++)?>
{<?php get_template_part( 'content', 'page' ); ?>}
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div>
</div>
<?php get_footer(); ?>
But I have problem, how I should solve problem with positioning. 但是我有问题,我应该如何解决定位问题。 I guess it should be one class post.
我想这应该是一个班级职位。 Below I give you my codes.
下面我给你我的代码。 Please help.
请帮忙。
My html code: 我的html代码:
<div class="postbar">
<div class="post1">
<a href="index.html">
<div id="postOver"></div>
</a>
<div id="postText">text</div>
</div>
<div class="post2">
<a href="index.html">
<div id="postOver"></div>
</a>
<div id="postText">text</div>
</div>
<div class="post3">
<a href="index.html">
<div id="postOver"></div>
</a>
<div id="postText">text</div>
</div>
<div class="post4">
<a href="index.html">
<div id="postOver"></div>
</a>
<div id="postText">text</div>
</div>
</div>
<div class="postbar">
<div class="post1">
<a href="index.html">
<div id="postOver"></div>
</a>
<div id="postText">text</div>
</div>
<div class="post2">
<a href="index.html">
<div id="postOver"></div>
</a>
<div id="postText">text</div>
</div>
<div class="post3">
<a href="index.html">
<div id="postOver"></div>
</a>
<div id="postText">text</div>
</div>
<div class="post4">
<a href="index.html">
<div id="postOver"></div>
</a>
<div id="postText">text</div>
</div>
</div>
My CSS code: 我的CSS代码:
div.postbar{
position:relative; left:255px;
height:222px;
}
div.post1 {
margin-top:17px;
position:relative;
margin-left:1%;
padding-left:3px;
padding-right:3px;
width:222px;
height:222px;
}
div.post2 {
position:absolute; top:-1px; left:260px;
margin-left:1%;
width:222px;
height:222px;
}
div.post3 {
position:relative; top:-222px; left:520px;
margin-left:1%;
padding-left:3px;
padding-right:3px;
width:222px;
height:222px;
}
div.post4 {
position:relative; top:-444px; left:780px;
margin-left:1%;
padding-left:3px;
padding-right:3px;
width:222px;
height:222px;
}
div.postNext {
position:absolute; left:250px; top:-1px;
margin-left:1%;
padding-left:3px;
padding-right:3px;
width:222px;
height:222px;
}
#postOver{
width:222px;
height:222px;
background-image:url(img/arch.jpg);
box-shadow:0px 0px 3px #000000;
-webkit-transition:width 1s;
}
*:hover > #postOver{
width: 0;
}
#postText{
position:relative; top:-222px;
font-size:12px;
width:222px;
height:222px;
box-shadow:0px 0px 3px #000000;
color:black;
text-align:center;
z-index:-1;
}
Like Mr.TAMER said, would be better to search for an Answer in WordPress Exchange . 如TAMER先生所说,最好在WordPress Exchange中搜索答案。
Here is code that could be a possible solution for your problem: 这是可能是您的问题的解决方案的代码:
<style type="text/css">
.post { float:left; display:block; width:222px; height:222px; margin: 0 3px; }
.post.first { margin-left:0px; }
.post.last { margin-right:0px; }
/* Clear fix from http://css-tricks.com/snippets/css/clear-fix/ */
.clearfix:after { visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0; }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
</style>
<?php
$args = array( //Query variables take a look at http://codex.wordpress.org/Class_Reference/WP_Query
);
$query = new WP_Query( $args ); // Doing the Query
if( $query->have_posts() ) { // Checking if there is any posts with the arguments above
while( $query->have_posts() ) { // Looping throught the selected posts
$query->the_post(); // Selecting the next as the actual Post
?>
<div class="post<?php echo ( $current_post == 0 ? " first" : ( $current_post == $post_count ? " last" : "" ) ); ?>">
<a href="index.html">
<div id="postOver"></div>
</a>
<div id="postText">text</div>
</div>
<?php
if( $current_post == $post_count )
echo "<div class=\"clearfix\"></div>";
}
} else { // If there isn't any posts with the Arguments set above
}
wp_reset_postdata(); // Reseting the Post data so you can re-use the loop
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.