WordPress — изменить значение счетчика с размером экрана с переполнением стека
Я загружаю WordPress контент на внешней странице. Я отображаю содержание в 3 столбцах. Я создал счетчик, чтобы сделать это. Это работает отлично, за исключением того, что я хочу сделать его отзывчивым. Это работает для миниатюр, но не для столбцов. Как изменить значение 3 столбца на 1 в PHP, если размер экрана или браузера меньше 1024 пикселей? Вот мой код, я ценю вашу помощь.
<?php
$compteur=0;
echo "<table width='100%'><tr>";
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
foreach ($posts as $post)
{
setup_postdata( $post );
echo "<td width='30%'>";
echo "<br />";
if ( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
echo '<img width="100%" src="' . $image_src[0] . '">';
}
echo the_date();
echo "<br /><h1>";
echo the_title();
echo "</h1>";
echo the_excerpt();
echo "<td />";
$compteur++;
if ($compteur==3)
{
echo "<tr/><tr>";
$compteur=0;
}
}
echo "<tr /><table/>" ;
?>
Решение
Мой плохой, он полностью работает.
Вот код:
<div id="articles">
<?php
$compteur=0;
echo "<div width='100%'>";
echo '<div class="colonnes">';
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
foreach ($posts as $post)
{
setup_postdata( $post );
echo '<div class="col">' . "\n";
echo "<br />";
if ( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
echo '<img width="100%" src="' . $image_src[0] . '">';
}
echo the_date();
echo "<br /><h1>";
echo the_title();
echo "</h1>";
echo the_excerpt();
echo "</div>";
$compteur++;
if ($compteur==3)
{
echo "</div>";
echo '<div class="colonnes">';
$compteur=0;
}
}
echo "</div /></div>" ;
?>
</div>
и CSS:
.colonnes{
display:block;
width: 100%;
}
.colonnes:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.col {
border: 1px solid #999999;
float: left;
width: 30%;
}
@media (max-width: 1024px) {
.col {
width: 100%;
}
}
Спасибо за помощь.
Другие решения
Используйте медиа-запрос и стилизуйте ячейки как блоки:
@media (max-width: 1024px) {
td {
display: block;
}
}
На практике вы, вероятно, захотите присвоить таблице класс и использовать этот класс в правиле, чтобы не влиять на каждую таблицу.
Кроме того, как отмечалось в комментарии выше, использование div вместо ячеек таблицы было бы проще.
Пример:
$compteur=0;
echo "<div width='100%'>";
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
foreach ($posts as $post) {
setup_postdata( $post );
echo '<div class="col">' . "\n";
if ( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src(get_post_thumbnail_id(),’thumbnail’ );
echo '<img width="100%" src="' . $image_src[0] . '">';
}
echo the_date();
echo "\n<h1>";
echo the_title();
echo "</h1>";
echo the_excerpt();
echo "</div>";
$compteur++;
if ($compteur==3)
{
$compteur=0;
}
}
echo "</div>" ;
Затем, иметь CSS как:
.col {
width: 30%;
float: left;
}
@media (max-width: 1024px) {
.col {
width: 100%;
}
}
хорошо, это работает. Сейчас я пытаюсь отобразить сообщения на нескольких страницах. Я изменяю свой код и добавляю предыдущую / следующую навигацию. Когда я нажимаю «Далее», я получаю неправильную ссылку, страницу 404 моего реального сайта. Итак, что не так, пожалуйста?
<div class="navigation"><p><?php posts_nav_link(); ?></p></div>
<div id="articles">
<?php
$args = array( 'posts_per_page' => 3 );
$compteur=0;
echo '<div class="tableau">';
echo '<div class="colonnes">';
$posts = get_posts($args,'order=DESC&orderby=post_date');
foreach ($posts as $post)
{
setup_postdata( $post );
echo '<div class="col">' . "\n";
echo '<div class="img-crop">';
if ( has_post_thumbnail() ) {
echo '<a href='.post_permalink($ID).'>';
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
echo '<img src="' . $image_src[0] . '">';
}
echo '</a>';
echo '</div>';
echo '<br/>';
echo '<div class="date">';
echo the_time('j F Y');
echo "</div>";
echo '<div class="title">';
echo the_title();
echo "</div>";
echo '<div class="excerpt">';
echo the_excerpt();
echo "</div>";
echo "</div>";
$compteur++;
if ($compteur==3)
{
echo "</div>";
echo '<div class="colonnes">';
$compteur=0;
}
}
echo "</div /></div>" ;
?>
</div>