Question

尝试创建要实施到弹出窗口的简码。我正在尝试在页面中心的2x2网格中显示四个图像。

问题在于，此短代码现在使所有内容都向左浮动，并且图像垂直显示在彼此的顶部，而不是页面中央的2x2。

此外，当我在弹出窗口中实现简码时，显示在每页顶部的内容（在页面内容之前），但不会在弹出窗口中显示。

我已经尝试过：

ob_start();
return ob_get_clean();

这会阻止它显示在每页的开头，但也不会输出其他任何内容。

我在做什么错了？

在此处添加我的简码功能，并在下面添加2x2网格布局的CSS。

简码功能：

<?php
function my_function() {

$args = array (
'post_type'              => 'my_cpt',
'nopaging'               => false,
'posts_per_page'         => '4',
'order'                  => 'ASC',
'orderby'                => 'rand',
);

$query = new WP_Query( $args );

if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
    $query->the_post();

$image = get_field('my_image_field');
$size = 'medium';?>

<div class="grid2x2">
    <div class="thegridbox">
    <div>'  
            ?><a href="<?php the_field('my_image_link'); ?> ">
                <img src="<?php wp_get_attachment_image( $image, $size ); ? 
>" />
            </a>                
    </div>  
</div>
</div>

<?php

}

} else {

echo 'Oops! Nothing found.';

}

wp_reset_postdata();    

}
add_shortcode( 'my_shortcode', 'my_function' );
?>

用于2x2 frid布局的CSS：

.grid2x2 {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 40px);  
  justify-content: center;
  flex-direction: column;
}
.grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.thegridbox { margin: 20px; }

Answer 1

您好，看来这是grid2X2类div的合上和打开位的问题。

您可以尝试以下代码，看看是否可行。当我复制粘贴的代码时，编辑器也会显示语法错误（img标签附近有多余的空格）。只是为了让您知道我还没有测试代码，所以不能保证它会工作。

function woocommerce_query_request( $queryArgs ) {
    if ( isset( $queryArgs['post_status'] ) && empty( $queryArgs['post_status'] ) ) {
        unset( $queryArgs['post_status'] );
    }
    return $queryArgs;
}
add_filter( 'request', 'woocommerce_query_request', 1, 1 );

Answer 2

这是因为您以错误的方式使用了add_shortcode（）函数。请检查this。

“请注意，由简码调用的函数绝不应产生任何形式的输出。简码函数应返回用于替换简码的文本。直接产生输出将导致意外的结果。这类似于过滤器函数的行为方式，因为它们不应在调用中产生预期的副作用，因为您无法控制从何时何地调用它们。”

function my_function() {
    $retVal = '<div>Lorem ipsum dolor sit amet</div>';
    return $retVal;
}
add_shortcode( 'my_shortcode', 'my_function' );

还有ob_start()/ob_get_clean()（PHP输出缓冲功能）的另一个技巧。在这种情况下，您必须使用ob_start（）;。在开始编写my_function（）并调用return之前，先进行ob_get_clean（）;在功能末尾。

<?php
function my_function() {
    ob_start(); ?>

    <div>Lorem ipsum dolor sit amet</div>
    <?php echo '<div>Another Lorem ipsum dolor sit amet</div>';?>

<?php
    return ob_get_clean();
}
add_shortcode( 'my_shortcode', 'my_function' );

PHP / CSS：短代码无法正确显示，并且在每个页面的头部（内容之前）显示

2 个答案: