Home/ Questions/Q 84257
Next
Answered
drake
  • 0
Учитель
Asked: 2022-03-20T21:21:57+03:00 In:

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

  • 0

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

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

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

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

functionspaginationwp-link-pages
Share

    10 ответов

    1. Лучший ответ
      Гуру

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

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

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

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

      <p class="pager"> 
  <b title='You are here.'>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: Replacement for wp_link_pages with numbers. Use 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 );

/**
 * Modification of wp_link_pages() with an extra element to highlight the current page.
 *
 * @param  array $args
 * @return void
 */
function numbered_in_page_links( $args = array () )
{
    $defaults = array(
        'before'      => '<p>' . __('Pages:')
    ,   'after'       => '</p>'
    ,   'link_before' => ''
    ,   'link_after'  => ''
    ,   'pagelink'    => '%'
    ,   'echo'        => 1
        // element for the current page
    ,   '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
        {   // highlight the current page
            // not sure if we need $link_before and $link_after
            $output .= "<$highlight>{$link_before}{$j}{$link_after}</$highlight>";
        }
    }

    print $output . $after;
}
      • 0
    2. Новичок

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

      • 0
    3. Новичок

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

      Тогда у вас будет вывод:

      <p class="page-links"><span class="before">Pages:</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-links a {
    color: #004c98;
    text-decoration: none;
}

.page-links .page-link-number { /* this is the default "current" state */
    background: #e5e5e5;
    display: inline-block;
    margin: 4px;
    padding: 4px 6px;
}

.page-links a .page-link-number { /* if it's inside a link, change the background color */
    background: #fff;
}

.page-links a .page-link-number:hover { /* add a hover state */
   background: #e0f0ff;
}
      • 0
    4. Гуру

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

      wp_link_pages( 'before=<p class="link-pages">Page: ' );

      Теперь просто стилизуйте .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;
}

      Стиль в соответствии с вашими потребностями, конечно.

      • 0
    5. Новичок

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

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

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

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

      Камило

      • 0
    6. Новичок

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

      /**
 * Filter wp_link_pages to wrap current page in 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 класса.

      • 0

    Оставить ответ

    You must login to add an answer.

    Need An Account,