drake
  • 0
Учитель

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

  • 0

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

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

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

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

Share
  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.