Как стилизовать номер текущей страницы (wp_link_pages)?

Question

Как стилизовать номер текущей страницы (wp_link_pages)?

10 апр. 2011 г., 14:43:03

Просмотры: 13.2K

Голосов: 1

Когда пост разбивается на несколько страниц, тема TwentyTen использует встроенную функцию wp_link_pages для отображения навигационной панели в конце поста.

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

Я предполагаю, что мне нужно переопределить функцию wp_link_pages, но я только изучаю основы программирования для WordPress.

Можете ли вы помочь определить шаги для решения этой проблемы?

Drake

1.43K

функции пагинация wp link pages

Все ответы на вопрос

Комментарии

Привет @toscho, большое спасибо, сейчас я на работе, но в ближайшие дни обязательно попробую твой плагин. Как ты думаешь, лучше использовать его как плагин или лучше реализовать эти функции в functions.php моей темы?

Drake

11 апр. 2011 г. 11:00:30

@Drake Я использую его как часть фреймворка моей темы. Поскольку ты, вероятно, никогда не оставляешь его без стилей, можно безопасно использовать его в своей теме.

fuxia

11 апр. 2011 г. 14:39:02

Я тестирую код, на который ты дал ссылку, реализуя различные функции в functions.php. Сейчас при отладке я вижу, что $GLOBALS['wp_query'] установлен, но $GLOBALS['wp_query']->max_num_pages всегда возвращает 0. Есть ли у тебя идеи, что может быть не так?

Drake

13 апр. 2011 г. 14:25:11

@Drake Мне очень жаль; я неправильно понял ваш вопрос. Мой первый плагин работает только для архивов. Я выпустил обновление с другой функцией, чтобы решить вашу проблему.

fuxia

13 апр. 2011 г. 20:25:12

Простой способ, который я использую сейчас, — это использование 'link_before' и 'link_after' в качестве части аргументов wp_link_pages. Затем можно обернуть каждую цифру, включая активную, в тег и стилизовать по своему усмотрению.

Seb

41

16 февр. 2012 г. 20:05:50

Я согласен с seb; лучший способ - использовать link_before и link_after. Чтобы развернуть этот подход, используйте, например, 'link_before' => '<span class="page-link-number">', 'link_after' => '</span>'

Тогда вы получите следующий вывод:

<p class="page-links"><span class="before">Страницы:</span> 
<a href="http://myurl.com/page-blah/1/"><span class="page-link-number">1</span></a> 
<span class="page-link-number">2</span> 
<a href="http://myurl.com/page-blah/3/"><span class="page-link-number">3</span></a>
</p>

где мы находимся на второй странице.

ЗАТЕМ вы можете стилизовать, находится ли класс "page-link-number" внутри ссылки или нет.

.page-links a {
    color: #004c98;
    text-decoration: none;
}

.page-links .page-link-number { /* это стандартное состояние "текущей" страницы */
    background: #e5e5e5;
    display: inline-block;
    margin: 4px;
    padding: 4px 6px;
}

.page-links a .page-link-number { /* если внутри ссылки, меняем цвет фона */
    background: #fff;
}

.page-links a .page-link-number:hover { /* состояние при наведении */
   background: #e0f0ff;
}

Vicki Farmer

31

7 авг. 2013 г. 17:41:59

Сначала необходимо указать CSS-класс для стилизации, что можно сделать с помощью аргументов функции wp_link_pages():

wp_link_pages( 'before=<p class="link-pages">Страница: ' );

Теперь просто стилизуйте класс .link-pages. Вот пример, который я использую:

.link-pages {
    clear:both;
    font-size:10pt;
    text-align:center;
}
.link-pages a {
    margin: 0px 3px 0px 3px;
    padding: 0px 3px 0px 3px;
}

Конечно, стилизуйте под свои нужды.

Chip Bennett

55.1K

10 апр. 2011 г. 16:00:36

@toscho спасибо за пост, он очень помог! Я пошёл немного дальше и добавил теги элементов списка к обоим выводам, чтобы было проще стилизовать.

Вставляю этот хак в ваш код, возможно, он кому-то поможет.

$output .= _wp_link_page( $i ) . "<li>{$link_before}{$j}{$link_after}</a></li>"

$output .= "<li><$highlight>{$link_before}{$j}{$link_after}</$highlight></li>"

Камило

Camilo Delvasto

21

19 янв. 2012 г. 20:25:11

Можно отметить текущую страницу с помощью фильтра WP. Фильтр wp_link_pages_link, используемый в wp_link_pages(), получает элемент ссылки, который представляет собой просто число для текущей страницы и якорь для других страниц. Таким образом, мы можем проверить, является ли элемент числом, и обернуть его в span:

/**
 * Фильтр wp_link_pages для оборачивания текущей страницы в span.
 *
 * @param $link
 * @return string
 */
function elliot_link_pages( $link ) {
    if ( ctype_digit( $link ) ) {
        return '<span class="current">' . $link . '</span>';
    }
    return $link;
}
add_filter( 'wp_link_pages_link', 'elliot_link_pages' );

Конечно, при условии, что вы еще не фильтруете ссылки таким образом, что текущая страница больше не является просто числом. Затем вы можете стилизовать её с помощью класса current.

Elio

261

22 апр. 2014 г. 03:36:02

fuxia 107K · Accepted Answer · 2011-04-11T07:08:24Z

К сожалению, нет возможности сделать это только с помощью нативных функций WordPress: WP не зависит от типа запроса и всегда генерирует ссылки на текущую страницу (навигационные меню, списки страниц и т.д.).

Также нельзя использовать фильтр, потому что функция wp_link_pages() не имеет подходящего фильтра.

В своих темах я использую собственную функцию, основанную на этом коде. Вероятно, он слишком длинный, чтобы публиковать его здесь, поэтому я выложил его как плагин на GitHub: Logical Page Links.
Вы можете использовать плагин как есть или скопировать код в свою тему.

Результирующая разметка будет выглядеть так:

<p class="pager"> 
  <b title='Вы находитесь здесь.'>1</b>  
  <a class=number href='http://example.com/page/2/'>2</a> 
</p>

Тег <b> отмечает текущую страницу, вы можете стилизовать его следующим образом:

.pager b
{
    color:      #fff;
    background: #111;
}

Дополнительные возможности описаны в readme плагина.

Обновление

Я неправильно понял вопрос. Я думал, что вам нужна такая функция для архивов. Извините.

Вот переработанная версия wp_link_pages() в виде плагина. Полагаю, вы добавите её в свою тему.

<?php # -*- coding: utf-8 -*-
/*
Plugin Name: Numbered In-Page Links
Description: Замена для wp_link_pages с нумерацией. Используйте do_action( 'numbered_in_page_links' );
Version:     1.0
Required:    3.1
Author:      Thomas Scholz
Author URI:  http://toscho.de
License:     GPL v2
*/
! defined( 'ABSPATH' ) and exit;

add_action( 'numbered_in_page_links', 'numbered_in_page_links', 10, 1 );

/**
 * Модификация wp_link_pages() с дополнительным элементом для выделения текущей страницы.
 *
 * @param  array $args
 * @return void
 */
function numbered_in_page_links( $args = array () )
{
    $defaults = array(
        'before'      => '<p>' . __('Страницы:')
    ,   'after'       => '</p>'
    ,   'link_before' => ''
    ,   'link_after'  => ''
    ,   'pagelink'    => '%'
    ,   'echo'        => 1
        // элемент для текущей страницы
    ,   'highlight'   => 'b'
    );

    $r = wp_parse_args( $args, $defaults );
    $r = apply_filters( 'wp_link_pages_args', $r );
    extract( $r, EXTR_SKIP );

    global $page, $numpages, $multipage, $more, $pagenow;

    if ( ! $multipage )
    {
        return;
    }

    $output = $before;

    for ( $i = 1; $i < ( $numpages + 1 ); $i++ )
    {
        $j       = str_replace( '%', $i, $pagelink );
        $output .= ' ';

        if ( $i != $page || ( ! $more && 1 == $page ) )
        {
            $output .= _wp_link_page( $i ) . "{$link_before}{$j}{$link_after}</a>";
        }
        else
        {   // выделяем текущую страницу
            // не уверен, нужны ли здесь $link_before и $link_after
            $output .= "<$highlight>{$link_before}{$j}{$link_after}</$highlight>";
        }
    }

    print $output . $after;
}