我创建了一个短代码来在列表中显示自定义帖子类型的提交。短代码完美地显示了列表。但问题是在列表下面，它显示了列表底部的帖子的内容，我不希望显示这些内容。我只想显示列表。下面是我的代码来创建短代码
add_shortcode( 'property-list', 'slidermy' );
function slidermy( $atts ) {
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$query = new WP_Query( array(
'posts_per_page' => 5,
'paged' => $paged,
'post_type' => 'joelsa_realestates',
'color' => 'blue',
'order' => 'ASC',
) );
if ( $query->have_posts() ) {
ob_start();
?>
<style>
*{
color:#333333;
}
.feed-list{
width:100%;
display: flex;
margin-top:20px;
justify-content: stretch;
}
.left-block{
flex:1;
position: relative;
overflow:hidden;
margin:0;
border:1px solid #c1c1c1;
border-radius:10px 0 0 0;
}
.right-block{
flex:1;
padding:5px 10px;
display: flex;
flex-direction:column;
align-items: flex-start;
border:1px solid #c1c1c1;
border-radius:0 10px 0 0;
position:relative;
}
.left-block a{
display: flex;
justify-content: center;
align-items:center;
font-size:20px;
font-weight:700;
}
.img-slider{
display: flex;
height: 100%;
flex-flow:row nowrap;
translate: 0;
transition:1s ease;
border:none;
}
.img-slider img{
flex:1;
object-fit:cover;
}
.left-arrow{
position:absolute;
left:10px;
top:40%;
width:35px;
height:15%;
background-color:rgba(0,0,0,0.5);
color:white;
border:1px solid #333333;
border-radius:2px;
}
.right-arrow{
position:absolute;
right:10px;
top:40%;
width:35px;
height:15%;
background-color:rgba(0,0,0,0.5);
color:white;
border:1px solid #333333;
border-radius:2px;
}
.just-added{
padding:2px 6px;
background-color:orange;
color:white;
font-size:15px;
border-radius:5px;
font-weight:bold;
}
.top-2-row{
width:100%;
display: flex;
justify-content: space-between;
margin-top:15px;
margin-bottom:15px;
}
.icons-div span{
margin-right:15px;
color:#333333;
font-size:18px;
font-weight:500;
}
.icons-div span img{
margin-right:5px;
}
.sale-price{
color:#333333;
font-size: 22px;
}
.title{
font-weight:700;
font-size:medium;
}
.location{
color:#222222;
margin-bottom:10px;
}
.listed-on{
margin-top:20px;
font-size:small;
}
.agent-row{
width:100%;
padding:5px;
position:absolute;
left:0;
bottom:0;
border-top:1px solid #c1c1c1;
display: flex;
justify-content: space-between;
align-items:center;
}
.agent-logo img{
width:75px;
}
</style>
<?php
while ( $query->have_posts() ) : $query->the_post();
$pid= get_the_ID();
$publishedat= get_the_date('j F Y', get_the_ID());
$banner_img = get_post_meta(get_the_ID(), 'post_banner_img', true);
$banner_img = explode(',', $banner_img);
$value = get_post_meta( get_the_ID(), '_wporg_meta_key', true );
$rent = get_post_meta( get_the_ID(), '_joelsa_re_rent', true );
$sale_pricesuffix = get_post_meta( get_the_ID(), '_joelsare_salepricesuffix', true );
$sale_price = get_post_meta( get_the_ID(), '_joelsare_saleprice', true );
$property_contact_email = get_post_meta( get_the_ID(), '_joelsare_contactemail', true );
$joelsare_contacttele = get_post_meta( get_the_ID(), '_joelsare_contactphone', true );
$location = get_post_meta( get_the_ID(), '_joelsare_location', true );
$bed_rooms= get_post_meta( get_the_ID(), '_joelsare_bedrooms', true );
$bath_rooms= get_post_meta( get_the_ID(), '_joelsare_bathrooms', true );
$reception_rooms= get_post_meta( get_the_ID(), '_joelsare_receptions', true );
$agentlogo= get_post_meta(get_the_ID(), '_joelsare_agent_logo', true);
?>
<div class="feed-list">
<div class="left-block" onmouseenter="displayArrows(<?=$pid?>)" onmouseleave="hideArrows(<?=$pid?>)">
<div class="img-slider" id="<?php echo 'img-slider'.$pid?>">
<?php
if(!empty($banner_img)) {
$counter = 0;
foreach ($banner_img as $attachment_id) {
$counter++;
if(wp_get_attachment_url( $attachment_id )==null)
{?>
<div style="width:100%;height:100%;background-color:grey;color:white;" onmouseenter="hideArrows(<?=$pid?>)">
<?php echo "No Images";?>
</div>
<?php
}
else{
?>
<img src="<?php echo wp_get_attachment_url( $attachment_id );?>">
<?php
}}}
?>
</div>
<a href="javascript:void();" id="<?php echo 'left-arrow'.$pid?>" class="left-arrow" style="display:none;" onclick="minusDivs(<?=$pid?>,<?=$counter?>)"><</a>
<a href="javascript:void();" id="<?php echo 'right-arrow'.$pid?>" class="right-arrow" style="display:none;" onclick="plusDivs(<?=$pid?>,<?=$counter?>)">></a>
</div>
<div class="right-block">
<div class="top-1-row">
<div class="just-added">just added</div>
</div>
<div class="top-2-row">
<div class="sale-price">
<div><?=$sale_pricesuffix?></div>
<div> £ <?=$sale_price?></div>
</div>
<div class="icons-div">
<span><img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . 'includes/images/bedrooms.png'; ?>" alt="" width="25px;height:auto;"><?=$bed_rooms?></span>
<span><img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . 'includes/images/bathrooms.png'; ?>" alt="" width="25px;height:auto;"><?=$bath_rooms?></span>
<span><img src="<?php echo plugin_dir_url( dirname( __FILE__ ) ) . 'includes/images/receptions.png'; ?>" alt="" width="25px;height:auto;"><?=$reception_rooms?></span>
</div>
</div>
<div class="title"><?php the_title(); ?></div>
<div class="location"><?=$location?></div>
<div class="short-desc"><?php the_excerpt(); ?></div>
<div class="listed-on">Listed on <?=$publishedat?></div>
<div class="agent-row">
<div class="agent-logo"><img src="<?php echo wp_get_attachment_url( $agentlogo );?>"></div>
<div class="agent-email"><?=$property_contact_email?></div>
<div class="agent-tele"><?=$joelsare_contacttele?></div>
</div>
</div>
</div>
<script>
var transLateIndex = 0;
function minusDivs(div_id,counter) {
var mintranslateIndex = (-100 * (counter-1));
var b = '<?php echo 'img-slider'?>'+ div_id;
var leftarrow = '<?php echo 'left-arrow'?>'+ div_id;
var rightarrow = '<?php echo 'right-arrow'?>'+ div_id;
var n = -100 ;
if(transLateIndex > mintranslateIndex){
transLateDiv(transLateIndex += n,b);
document.getElementById(`${rightarrow}`).style.display = "flex";
}
if(transLateIndex ==mintranslateIndex){
document.getElementById(`${leftarrow}`).style.display = "none";
}
}
function plusDivs(div_id,counter) {
var mintranslateIndex = (100 * (counter-1));
var b = '<?php echo 'img-slider'?>'+ div_id;
var rightarrow = '<?php echo 'right-arrow'?>'+ div_id;
var n = 100 ;
if(transLateIndex < 0){
transLateDiv(transLateIndex += n,b);
}
if(transLateIndex ==0){
document.getElementById(`${rightarrow}`).style.display = "none";
document.getElementById(`${leftarrow}`).style.display = "flex";
}
}
function displayArrows(div_id){
var b = '<?php echo 'img-slider'?>'+ div_id;
var rightarrow = '<?php echo 'right-arrow'?>'+ div_id;
var leftarrow = '<?php echo 'left-arrow'?>'+ div_id;
if(transLateIndex ==0){
document.getElementById(`${leftarrow}`).style.display = "flex";
}
if(transLateIndex <0){
document.getElementById(`${leftarrow}`).style.display = "flex";
document.getElementById(`${rightarrow}`).style.display = "flex";
}
}
function hideleftArrows(la){
document.getElementById(`${la}`).style.display = "hide";
}
function hideArrows(div_id){
var rightarrow = '<?php echo 'right-arrow'?>'+ div_id;
var leftarrow = '<?php echo 'left-arrow'?>'+ div_id;
document.getElementById(`${leftarrow}`).style.display = "none";
document.getElementById(`${rightarrow}`).style.display = "none";
}
function transLateDiv(n,b)
{
document.getElementById(`${b}`).style.translate = `${transLateIndex}%`;
}
</script>
<?php endwhile;
wp_reset_postdata(); ?>
<?php
$GLOBALS['wp_query'] = $query;
the_posts_pagination(
array(
'mid_size' => '2',
'prev_text' => 'Previous',
'next_text' => 'Next',
'screen_reader_text' => ' '
)
);
?>
<?php $myvariable = ob_get_clean();
return $myvariable;
}
}对不起我的代码有点乱，因为它不是最终的。在前端，当我把短代码[property-list] short code in block这是它如何显示在前端。enter image description here
我很感激有人能找出问题所在，因为我看不出问题所在
1条答案
按热度按时间c3frrgcw1#
我找到了原因，那是因为我把ob_start（）放在哪里;错误。请查看下面的正确代码