Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Как создать разные классы в цикле вывода статей Wordpress?

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: разные классы в цикле
Поиск в теме | Версия для печати
August_II
Отправлено: 20 Июля, 2020 - 16:02:36
Post Id


Новичок


Покинул форум
Сообщений всего: 49
Дата рег-ции: Нояб. 2014  


Помог: 0 раз(а)
Сделал макет сайта, в выводе будет картинка и название.
Но проблема в том, что первые две новости в больших блоках, а остальные в маленьких.
В div-е есть основной класс и дополнительный block_news__elements_1, ...2, ...3
Как сделать чтобы при выводе статей каждой присваивался класс block_news__elements_$n?
На flexbox это так у меня получилось.

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div class="block_news">
  3.                                 <div class="container">
  4.                                         <div class="block_news__row">
  5.                                                 <div class="block_news__elements block_news__elements_1">
  6.                                                         <div class="block_news__content">
  7.                                                                 <picture>
  8.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  9.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  10.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  11.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  12.                                                                 </picture>
  13.                                                                 <div class="block_news__title">
  14.                                                                         Далеко-далеко за словесными горами в стране.
  15.                                                                 </div>
  16.                                                         </div>
  17.                                                 </div>
  18.                                                 <div class="block_news__elements block_news__elements_2">
  19.                                                         <div class="block_news__content">
  20.                                                                 <picture>
  21.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  22.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  23.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  24.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  25.                                                                 </picture>
  26.                                                                 <div class="block_news__title">
  27.                                                                         Lorem ipsum dolor sit amet.
  28.                                                                 </div>
  29.                                                         </div>
  30.                                                 </div>
  31.                                                 <div class="block_news__elements block_news__elements_3">
  32.                                                         <div class="block_news__content">
  33.                                                                 <picture>
  34.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  35.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  36.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  37.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  38.                                                                 </picture>
  39.                                                                 <div class="block_news__title">
  40.                                                                         Lorem ipsum dolor sit amet, consectetur adipisicing.
  41.                                                                 </div>
  42.                                                         </div>
  43.                                                 </div>
  44.                                                 <div class="block_news__elements block_news__elements_4">
  45.                                                         <div class="block_news__content">
  46.                                                                 <picture>
  47.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  48.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  49.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  50.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  51.                                                                 </picture>
  52.                                                                 <div class="block_news__title">
  53.                                                                         Lorem ipsum dolor sit amet, consectetur.
  54.                                                                 </div>
  55.                                                         </div>
  56.                                                 </div>
  57.                                                 <div class="block_news__elements block_news__elements_5">
  58.                                                         <div class="block_news__content">
  59.                                                                 <picture>
  60.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  61.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  62.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  63.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  64.                                                                 </picture>
  65.                                                                 <div class="block_news__title">
  66.                                                                         Lorem ipsum dolor sit amet, consectetur.
  67.                                                                 </div>
  68.                                                         </div>
  69.                                                 </div>
  70.                                                 <div class="block_news__elements block_news__elements_6">
  71.                                                         <div class="block_news__content">
  72.                                                                 <picture>
  73.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  74.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  75.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  76.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  77.                                                                 </picture>
  78.                                                                 <div class="block_news__title">
  79.                                                                         Lorem ipsum dolor sit amet, consectetur.
  80.                                                                 </div>
  81.                                                         </div>
  82.                                                 </div>
  83.                                                 <div class="block_news__elements block_news__elements_7">
  84.                                                         <div class="block_news__content">
  85.                                                                 <picture>
  86.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  87.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  88.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  89.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  90.                                                                 </picture>
  91.                                                                 <div class="block_news__title">
  92.                                                                         Lorem ipsum dolor sit amet, consectetur.
  93.                                                                 </div>
  94.                                                         </div>
  95.                                                 </div>
  96.                                                 <div class="block_news__elements block_news__elements_8">
  97.                                                         <div class="block_news__content">
  98.                                                                 <picture>
  99.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  100.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  101.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  102.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  103.                                                                 </picture>
  104.                                                                 <div class="block_news__title">
  105.                                                                         Lorem ipsum dolor sit amet, consectetur.
  106.                                                                 </div>
  107.                                                         </div>
  108.                                                 </div>
  109.                                         </div>
  110.                                 </div>
  111.                         </div>
  112.  


CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. /* BLOCK_NEWS */
  3. .block_news {
  4.         margin-top: 100px;
  5.         /*max-width: 780px;
  6.         margin:0 auto;
  7.         padding-bottom: 20px;*/ /* стоит container */
  8. }
  9. .block_news__row {
  10.         display: flex;
  11.         flex-wrap: wrap;
  12. }
  13. .block_news__elements {
  14.         border:5px solid #fff;
  15. }
  16. .block_news__elements_1 {
  17.         flex: 0 1 50%;
  18. }
  19. .block_news__elements_2 {
  20.         flex: 0 1 50%;
  21. }
  22. .block_news__elements_3,
  23. .block_news__elements_4,
  24. .block_news__elements_5,
  25. .block_news__elements_6,
  26. .block_news__elements_7,
  27. .block_news__elements_8 {
  28.         flex: 0 1 33.333%;
  29. }
  30. .block_news__content {
  31.         width: 100%;
  32.         position: relative; /* для картинки */
  33. }
  34. .block_news__title {
  35.         position: absolute;
  36.         bottom: 5px;
  37.         left: 0;
  38.         width: 100%;
  39.         color: #fff;
  40.         font-size: calc(18px + 12 * ((100vw - 320px) / (1280 - 320)));
  41.         background: rgb(0, 0, 0, 0.6);
  42.         padding: 10px;
  43. }
  44. .block_news__content img { /* адаптация картинки под родительский блок */
  45.         max-width: 100%;
  46. }
  47.  

Прикреплено изображение (Нажмите для увеличения)
2020-07-20_18-01-36.jpg
 
 Top
August_II
Отправлено: 23 Июля, 2020 - 09:17:21
Post Id


Новичок


Покинул форум
Сообщений всего: 49
Дата рег-ции: Нояб. 2014  


Помог: 0 раз(а)
Вопрос решён.

PHP:
скопировать код в буфер обмена
  1.  
  2. <?PHP get_header(); ?>
  3.  
  4. <!-- Здесь контент -->
  5.             <div class="block_news">
  6.                 <div class="container">
  7.                     <div class="block_news__row">
  8.                             <?PHP // Display blog posts on any page
  9.                             $temp = $wp_query; $wp_query= null;
  10.                             $wp_query = new WP_Query(); $wp_query->query('showposts=8' . '&paged='.$paged);
  11.                             $nn = 1;
  12.                             while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
  13.                         <div class="block_news__elements block_news__elements_<?= $nn++ ?>">
  14.                             <div class="block_news__content">
  15.                                 <a href="<?PHP the_permalink(); ?>"><?PHP the_post_thumbnail(); ?></a>
  16.                                 <div class="block_news__title">
  17.                                     <?PHP title_chars(35, '...'); ?>
  18.                                 </div>
  19.                             </div>
  20.                         </div>
  21.         <?PHP endwhile; ?>
  22.                     </div>
  23.                     <!-- END block_news__row -->
  24. <!-- Pangination -->
  25.                 <?PHP the_posts_pagination(); ?>
  26. <!-- END Pangination -->
  27.         <?PHP wp_reset_postdata(); ?>
  28. <!-- КОНЕЦ Вывод содержимого страницы в wp -->
  29.                 </div><!-- END Container -->
  30.             </div><!-- END block_news -->
  31. <!-- КОНЕЦ контент -->
  32. <?PHP get_footer(); ?>
  33.  
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Вопросы новичков »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB