Wordpress: отображение блога на передней статической странице.

Question

Мне еще здесь не удалось найти этот конкретный вопрос, поэтому я подумал, что могу опубликовать его здесь и посмотреть, могу ли я получить поддержку или помощь.

Мне нужен этот блог, чтобы быть отзывчивым и показывать только столько сообщений и определенный размер экрана. Я предполагаю, что мне нужно сделать это в PHP-коде. Я бы хотел, чтобы в блоге у меня была петля на первой странице, чтобы отобразить 3 блогов с 800PX и вверх (ширина экрана), 2 блогов отображают 450px-800px и 1 блог-дисплей на 300 пикселей. Грубо. Я нахожу это простым в использовании простым html и css, но я новичок в этом кодировании кодирования/php-кодировании с помощью wordpress и считаю, что это путает. Я предполагаю, что мне нужно объявить что-то вроде «если это так, а затем сделать это» в php-коде?

На моей простой демонстрационной странице html Я сделал это хорошо, но это совершенно новая игра в мяч. Here is my demo site. Прокрутите вниз и уменьшите размер экрана, чтобы увидеть, что я имею в виду.

Here is the actual Div site. Прямо сейчас у меня есть это отзывчивое, поскольку оно будет изменяться, но оно становится слишком неряшливым, поскольку оно становится меньше и будет визуально контурным, чтобы отображать только 2, когда экран становится меньше, а затем 1 для мобильного.

Вот PHP и код цикла. Может ли один из вас удивительных людей, которые действительно знают, что вы делаете, указывают мне в правильном направлении? Тогда, можете ли вы дать мне совет по книге или что-то, что я могу прочитать, чтобы поправиться с этим материалом, чтобы я не приходил сюда, постоянно беспокоя вас.

<!-- BEGIN BLOG CALL-OUT SECTION --> 
 
     <div id="blog_section" class="clearfix"> 
 
      <div class="blog_posts_container"> 
 

 
        
 
        <?php 
 
$rp_query = new WP_Query('showposts=3'); 
 
if (have_posts()) : while ($rp_query->have_posts()) : $rp_query->the_post(); ?> 
 
        
 
        <div class="post-wrapping-div"> 
 
         <!-- Blog Thumbnail--> 
 
         <div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div> 
 
        
 
         <!-- Blog Post Date/time--> 
 
         <p class="post wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6s"> 
 
         <span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br /> 
 
         </p> 
 
        
 
         <!-- Blog Title--> 
 
         <p class="home_blog_title_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6.5s"> 
 
         <span class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span><br /> 
 
         </p> 
 
           
 
         <!-- Blog Content--> 
 
         <div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s"> 
 
         <?php the_excerpt(); ?> 
 
         <a href="<?php the_permalink(); ?>">Read More</a></li> 
 
         </div> 
 
        </div> 
 
        <img class="blog_divider" src="wp-content/themes/CloudPoint_Technology/img/blog_divider.png" class="image"> 
 

 

 
         <?php endwhile; ?> </div> 
 
         <? endif; ?> 
 
         <?php wp_reset_postdata(); ?>   
 
       
 
     </div> 
 
<!-- END BLOG CALL-OUT SECTION-->

Answer 1

1. Откройте пост страницу блога в Google Chrome или Firefox. Щелкните правой кнопкой мыши на одной из сообщений в блоге и нажмите «Осмотреть элемент» (может быть, немного отличается в Firefox, но такая же идея). Это покажет вам правила CSS, которые применяются к этому конкретному элементу.

2. Убедитесь, что у вас есть все сообщение, указанное в инспекторе. Вы можете сделать это, найдя элемент с классом «post» в HTML, отображаемом в окне inspecor. С правой стороны (используя Chrome, и если окно инспектора находится внизу, а не сторона), вы должны увидеть все правила CSS, применяемые к этому элементу. Один из них будет классом «пост». Это правила CSS, которые вы хотите сначала изменить.

3. Предположим, вы хотите, чтобы 3 сообщения отображались бок о бок в строке при просмотре на рабочем столе 1024px. Вы можете установить следующие правила при .post {:

   .post { display: inline-block; width: 300px; }

Обратите внимание, что вы можете сделать эти изменения непосредственно в окне инспектора Chrome или Firefox,. Они фактически не изменят ваш сайт, и при обновлении страницы все будет сброшено, но это поможет вам протестировать различные правила CSS, прежде чем делать «постоянные» изменения в ваших CSS-файлах.

Теперь, поскольку 3 x 300px меньше 1024px, вы должны увидеть три сообщения, отображаемые бок о бок на экране рабочего стола, затем три на следующей строке и т. Д. Если вы измените размер окна своего браузера, чтобы уменьшить его, вы должны заметить, что при ширине около 900px, третий столбец будет опускаться ко второй строке.Если вы измените размер до 600px в ширину, вы увидите, что вторая позиция опустится во вторую строку.

Как только у вас есть эта основная концепция, вы можете начать делать более сложные вещи, но это основная идея. В примере, который я дал, даже не требуется использовать медиа-запросы, просто базовый CSS. Вы также можете использовать такие вещи, как «max-width» и pixels/percentages, чтобы выполнить «отклика» без необходимости в медиа-запросах.

Также важно отметить, что, выполнив то, что я упомянул в шаге 2, , вы должны иметь возможность легко определить, какой файл CSS вам нужно изменить, так как имя файла должно быть справа от селектор CSS. Так что ищите что-то вроде «style.css» - все, что содержится в файле «.css» рядом с этим элементом, - это то, что вам нужно изменить.

Answer 2

Вот окончательный рабочий код (минус очевидный CSS, который мне нужно добавить, чтобы он работал).

<!-- BEGIN BLOG CALL-OUT SECTION --> 
 
     <div id="blog_section" class="clearfix"> 
 
      <div class="blog_posts_container"> 
 

 
       <?php $rp_query = new WP_Query('showposts=3'); ?> 
 

 
\t \t <?php $post_counter = 0; //Set an initial counter to 0 before the loop ?> 
 

 
\t \t <?php if (have_posts()) : while ($rp_query->have_posts()) : $rp_query->the_post(); ?> 
 

 
\t \t \t <?php $post_counter++; ?> 
 

 
\t \t \t <div class="post-wrapping-div <?php echo 'post-'.$post_counter; ?>"> 
 

 
         <!-- Blog Thumbnail--> 
 
         <div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div> 
 
        
 
         <!-- Blog Post Date/time--> 
 
         <p class="post wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6s"> 
 
         <span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br /> 
 
         </p> 
 
        
 
         <!-- Blog Title--> 
 
         <p class="home_blog_title_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6.5s"> 
 
         <span class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span><br /> 
 
         </p> 
 
           
 
         <!-- Blog Content--> 
 
         <div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s"> 
 
         <?php the_excerpt(); ?> 
 
         <a href="<?php the_permalink(); ?>">Read More</a></li> 
 
         </div> 
 
        </div> 
 

 
        <img class="blog_divider" src="wp-content/themes/CloudPoint_Technology/img/blog_divider.png" class="image"> 
 

 

 
         <?php endwhile; ?> </div> 
 
         <? endif; ?> 
 
         <?php wp_reset_postdata(); ?>   
 
       
 
     </div> 
 
<!-- END BLOG CALL-OUT SECTION-->