PHP / CSS: шорткод отображается некорректно и отображается в заголовке (перед содержимым) на каждой странице
Попытка создать шорткод для реализации во всплывающем окне. Я пытаюсь отобразить четыре изображения в сетке 2×2 в центре страницы.
Проблема в том, что этот шорткод теперь перемещает все, что осталось, и изображения отображаются вертикально друг над другом вместо 2х2 в центре страницы.
Кроме того, содержимое, отображаемое в верхней части каждой страницы (до содержимого страницы), когда я внедряю шорткод во всплывающем окне, не отображается во всплывающем окне.
Я пробовал:
ob_start();
return ob_get_clean();
Это мешает отображаться в заголовке каждой страницы, но ничего другого не выводит.
Что я делаю неправильно?
Здесь добавлена моя функция шорткода и CSS для макета сетки 2х2.
Функция шорткода:
<?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' );
?>
CSS для макета 2×2 frid:
.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; }
Решение
Привет! Похоже, это проблема закрытия и открытия бита класса grid2X2.
Можете ли вы попробовать следующий код и посмотреть, работает ли он. Также мой редактор показывает синтаксическую ошибку, когда я копирую вставленный код (лишний пробел возле тега img). Просто чтобы сообщить, что я не тестировал код, поэтому нет гарантии, что он будет работать.
<?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 );
$i=0;
ob_start();
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$image = get_field('my_image_field');
$size = 'medium';
?>
<?php if($i==0 || $i ==2): ?>
<div class="grid2x2">
<?php endif;?>
<div class="thegridbox">
<div>
<a href="<?php the_field('my_image_link'); ?> ">
<img src="<?php wp_get_attachment_image( $image, $size ); ?>" />
</a>
</div>
</div>
<?php if($i==1 || $i ==3): ?>
</div>
<?php endif; ?>
<?php
$i++;
}
} else {
echo 'Oops! Nothing found.';
}
wp_reset_postdata();
return ob_get_clean();
}
add_shortcode( 'my_shortcode', 'my_function' );
?>
Другие решения
Это потому, что вы использовали функцию add_shortcode () неправильно. пожалуйста, проверьте этот.
«Обратите внимание, что функция, вызываемая шорткодом, никогда не должна генерировать какой-либо вывод. Функции шорткода должны возвращать текст, который должен использоваться для замены шорткода. Непосредственное получение вывода приведет к неожиданным результатам. Это похоже на способ фильтрации функции должны вести себя так, что они не должны вызывать ожидаемых побочных эффектов от вызова, поскольку вы не можете контролировать, когда и откуда они вызываются ».
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' );
detector