Поддержка Проблемы и решения Верстка навигации (не срабатывают классы)

  • Приветствую, форумчане!
    Всё никак не получается сверстать постраничную навигацию на сайте. В связке HTML+CSS — всё отлично работает и отображается, никак не могу подогнать под WP движок всё.
    Само меню:

    
     <nav>
                        <ul class="pagination blog-pagination">
                          <li>
                            <a href="#" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
                          <li><a href="#">1</a></li>
                          <li><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li>
                            <a href="#" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>

    Всё делаю через functions.php:

    function advanced_page_navigation($args = false) {
      global $wp_rewrite, $wp_query;
      if ($wp_query->max_num_pages == 1 || $wp_query->max_num_pages == 0) return; // Если страница единственная, навигацию скрываем.
      $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1; // Определение текущей страницы
      $default_args = array( // Массив параметров по умолчанию.
        'base' => @add_query_arg('page','%#%'),
        'format' => '',
        'total' => $wp_query->max_num_pages, // Максимальное количество страниц. В данном случае - все страницы.
        'current' => $current, // Текущая страница.
        'show_all' => false, // true - показывает ссылки на все страницы (без сокращений). false - выводит ссылки в соответствии с параметрами max_size, mid_size, end_size.
        'max_size' => 10, // Максимальное количество ссылок на страницы.
        'mid_size' => 1, // Количество ссылок на страницы слева и справа от текущей.
        'end_size' => 1, // Количество ссылок на страницы от начала и от конца списка (включая первую и последнюю).
        'type' => 'ul', // plain - функция возвращает ссылки разделенные символом новой строки. list - ссылки на страницы представлены как немаркированный список (ul). array - возвращает ссылки в виде массива php.
        'prev_text' => '<li>'.'<aria-label="Previous">'.'<span aria-hidden="true">'.'&laquo;'.'</span>'.'</li>', // Текст кнопки "предыдущая страница"
        'next_text' => '>', // Текст кнопки "следующая страница"
        'echo' => false // 1 (true) - выводит результат на экран. 0 (false) - возвращает результат для последующей обработки в php
      );
      $args = wp_parse_args($args, $default_args);
      if ( $args['max_size'] >= $wp_query->max_num_pages ) $args['show_all'] = true; else $args['show_all'] = false;
      if( $wp_rewrite->using_permalinks() ) // Если включены постоянные ссылки
        $args['base'] = user_trailingslashit( trailingslashit( remove_query_arg('s',get_pagenum_link(1) ) ) . 'page/%#%/', 'paged');
      if( !empty($wp_query->query_vars['s']) ) // Если постоянные ссылки отключены
        $args['add_args'] = array('s'=>get_query_var('s'));
      $args['echo'] = false; // На всякий случай
      echo "<ul class=\"pagination blog-pagination\">$current {$wp_query->max_num_pages}  " . paginate_links($args) .'</ul>'.PHP_EOL;
    }
    
    

    Прописываю в prev_text стили — они не отображаются, сама стрелка появилась. Из-за чего так? И то же самое с самим body навигации. То есть, не отображаются стили pagination blog-pagination, прописал их в echo, в самом низу функции.

    Скриншот

Просмотр 10 ответов — с 1 по 10 (всего 10)
  • Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

    Прописываю в prev_text стили — они не отображаются

    Какие именно? Стили обычно прописывают в style.css или в недавно добавленном блоке «Дополнительные CSS» в интерфейсе настройки темы, а не в параметрах функций.

    Дело в том, что в стилях всё прописано, чуть ниже ( на скрине, в первом посте ) всё работает. В шаблоне прописал :

    
    <div class="pagination blog-pagination">
                          <?php advanced_page_navigation($args); ?>
                        </div>
    
    • Ответ изменён 5 лет, 3 месяца назад пользователем Acme1994.

    А сама навигация в HTML+CSS виде выглядит так:

    <ul class="pagination blog-pagination">
                          <li>
                            <a href="#" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
                          <li><a href="#">1</a></li>
                          <li><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li>
                            <a href="#" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>

    И всё отлично работает на странице. Подскажите, пожалуйста

    • Ответ изменён 5 лет, 3 месяца назад пользователем Acme1994.

    Нет ни у кого больше идей, почему когда я оборачиваю в див функцию, она не подсоединяет стили?

    Никто тоже не знает, как прописать стили? 🙁

    вам уже сказали — стили прописываются либо в style.css, либо в пользовательском CSS в настройщике. а куда вы их запихнули из вышесказанного совершенно неясно.

    и да — prev и next используется для текста, а не для html-разметки.

    • Ответ изменён 5 лет, 3 месяца назад пользователем Flector.

    Дело в том, что стили прописаны в style.css . От чего и возник вопрос — почему они не срабатывают?
    Скриншоты:
    Выключен стиль:
    off
    включен стиль:
    ON

    Прописываю в стилях

    .blog-pagination{
        color: brown;
    
    }

    срабатывает. Почему не срабатывают эти условия:

    .blog-pagination > li > a,
    .blog-pagination > li > span {	
    	padding: 8px 18px;
    	-webkit-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	transition: all 0.5s;
    }
    .blog-pagination > li > a:hover,
    .blog-pagination > li > span:hover,
    .blog-pagination > li > a:focus,
    .blog-pagination > li > span:focus{
    	color: #fff;
    }

    и остальные? Они так-же прописаны в том же файле.

    Модератор Юрий

    (@yube)

    
    <ul class="pagination blog-pagination">
                          <li>
                            <a href="#" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
    

    нет таких элементов:

    
    .blog-pagination > li > span
    

    зато есть такие:

    
    .blog-pagination > li > a > span
    

    Разобрался. Тема более неактуальна.

Просмотр 10 ответов — с 1 по 10 (всего 10)
  • Тема «Верстка навигации (не срабатывают классы)» закрыта для новых ответов.