Форум

Shuhlya · #1 (**permalink**) 18.08.2016, 11:31

Нужен код для открытия 6-ти постов при нажатии на кнопку, а также при повторном нажатии еще 6 постов и так до бесконечности. Помогите пожалуйста.

laimas · #2 (**permalink**) 18.08.2016, 11:38

И где "посты" находятся?

Shuhlya · #3 (**permalink**) 18.08.2016, 11:44

Посты создаются через вордпрес

laimas · #4 (**permalink**) 18.08.2016, 11:45

Сообщение от Shuhlya

Посты создаются через вордпрес

Я не об этом. Что значит показать 6, потом 6, ..., получать порциями с сервера или они все N штук сразу загружаются?

Shuhlya · #5 (**permalink**) 18.08.2016, 11:55

Они все загружаются сразу, но с помощью js скрываются и показываются только 6. Я хочу добавить кнопку вниз и при нажатии выдавались порциями статьи по 6 штук

laimas · #6 (**permalink**) 18.08.2016, 12:26

Ну так html-код (части, а то не дай бог километровую портянку...) нужно показывать.

Shuhlya · #7 (**permalink**) 18.08.2016, 12:51

<article id="post-<?php the_ID(); ?>" <?php post_class( 'push-bottom-large' ); ?>>
<?php do_action('layers_before_list_post_title'); ?>
<header class="section-title large">
<?php do_action('layers_before_list_title'); ?>
<h1 class="heading"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php do_action('layers_after_list_title'); ?>
</header>
<?php do_action('layers_after_list_post_title'); ?>

<?php /**
* Display the Featured Thumbnail
*/
echo layers_post_featured_media( array( 'postid' => get_the_ID(), 'wrap_class' => 'thumbnail push-bottom', 'size' => 'large' ) ); ?>

<?php if( '' != get_the_excerpt() || '' != get_the_content() ) { ?>
<?php do_action('layers_before_list_post_content'); ?>
<?php do_action('layers_list_post_content'); ?>
<?php do_action('layers_after_list_post_content'); ?>
<?php } ?>

<?php do_action('layers_before_list_post_meta'); ?>
<?php /**
* Display the Post Meta
*/
layers_post_meta( get_the_ID(), NULL, 'footer', 'meta-info push-bottom' ); ?>
<?php do_action('layers_after_list_post_meta'); ?>

<?php do_action('layers_before_list_read_more'); ?>
<?php do_action('layers_list_read_more'); ?>
<?php do_action('layers_after_list_read_more'); ?>
</article>

laimas · #8 (**permalink**) 18.08.2016, 13:01

Это не HTML, это РНР код формирующий страницу, а коли вы задаете вопрос как это сделать на стороне клиента, значит показывать нужно результирующий html-код страницы.

Царь Леонид · #9 (**permalink**) 18.08.2016, 13:14

Нуно сделать вывод постов по 6 штук на главной
сделать вывод только кнопки next page, вот тут вроде можно доку глянуть
http://wp-kama.ru/function/wp_link_pages
потом нужно при нажатии отменять переход и делать аякс запрос, при получении результата аттачить его к странице, вот где можно про запросы посмотреть
https://learn.javascript.ru/fetch
Также надо подгружать каждый раз кнопку далее
Это в общих чертах

рони · #10 (**permalink**) 18.08.2016, 13:23

Shuhlya,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hide ~ li{
    display: none
  }

  </style>
  <script>
  window.addEventListener('DOMContentLoaded', function() {
    var node = document.querySelectorAll('li'), num = 5, len = node.length-1,
    but = document.querySelector('.but');
    but.addEventListener('click', function() {
    document.querySelector('.hide').classList.remove('hide');
    num += 6;
    if(num < len) node[num].classList.add("hide");
    else but.parentNode.removeChild(but);
        });
      });
  </script>
</head>

<body>
<ul>
    <li >1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li class="hide">6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
    <li>36</li>
</ul>
<input class="but" name="" type="button" value="more">
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript