如何设置当前页码(Wp_Link_Ages)的样式?

时间:2011-04-10 作者:Drake

当一篇文章被拆分到多个页面上时,使用本机函数wp_link_pages 在文章末尾显示导航页面栏。

我试图为我的主题设置这些元素的样式,但不幸的是,当前的页码似乎无法设置样式。

我想我应该重写wp_link_pages 但我仍在学习WP编程的基本知识。

你能帮我确定解决这个问题要遵循的步骤吗?

6 个回复
最合适的回答,由SO网友:fuxia 整理而成

不幸的是,仅仅使用本机函数无法做到这一点:WP是……请求不可知的,并且总是生成指向当前页面的链接(nav manus,list pages…)。

此外,您不能使用筛选器,因为wp_link_pages() 没有合适的过滤器。

在我的主题中,我使用自己的函数,基于this code. 这篇文章可能太长了,所以我把它作为一个插件放在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>
The<b> 标记当前页面,您可以通过以下方式设置其样式:

.pager b
{
    color:      #fff;
    background: #111;
}
插件的自述中列出了更多功能。

更新我误解了这个问题。我以为你需要这样的档案功能。很抱歉

以下是的重写版本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;
}

SO网友:Seb

我现在使用的一种简单方法是使用“link\\u before”和“link\\u after”作为wp\\u link\\u页面参数的一部分。然后,可以将每个数字(包括活动数字)包装在标记中,然后适当设置样式。

SO网友:Vicki Farmer

我同意seb;方法是在前面使用link\\u,在后面使用link\\u。要对此进行扩展,请使用,例如,\'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 link number”是否为链接的子级来设置样式。

.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;
}

SO网友:Chip Bennett

首先,您需要向target提供一个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;
}
当然,要根据你的需要来设计风格。

SO网友:Camilo Delvasto

@toscho感谢您的帖子,它帮助了很多!我更进一步,在两个输出中都添加了列表项标记,因此可以更轻松地设置样式。

我正在将此黑客程序粘贴到你的代码中,因为它可以帮助别人。

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

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

SO网友:Elio

可以使用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

结束

相关推荐

获取在Functions.php中设置的变量,并在我的Custom Post模板中回显它们

在我的函数中设置了以下函数。php文件,以允许我的自定义帖子类型“Slideshow”工作。add_action( \'the_post\', \'paginate_slide\' ); function paginate_slide( $post ) { global $pages, $multipage, $numpages; if( is_single() && get_post_type() == \'lom_s