web-dev-qa-db-ja.com

現在のページ番号（wp_link_pages）をスタイルするにはどうすればいいですか？

投稿が複数のページに分割されている場合、TwentyTenテーマはネイティブ関数wp_link_pagesを使用して投稿の最後にナビゲーションページバーを表示します。

私は自分のテーマに合わせてそれらの要素をスタイルしようとしていますが、残念ながら現在のページ番号はスタイルを設定できないようです。

私はwp_link_pages関数をオーバーライドすべきだと思いますが、私はまだWPプログラミングの基本を学んでいます。

この問題を解決するために従うべきステップを特定する手助けができますか？

functionspaginationwp-link-pages
1
Drake

残念ながら、これをネイティブ関数だけで行う方法はありません。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>

<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;
}
4
fuxia

私はsebに同意します。その方法は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>

現在2ページ目にあります。

これで、クラス "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;
}
3
Vicki Farmer

私が今使っている簡単な方法は、 'link_before'と 'link_after'をwp_link_pages引数の一部として使うことです。アクティブな番号も含めて各番号をタグで囲み、適切なスタイルにすることができます。

3
Seb

@ 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
Camilo Delvasto

まず、ターゲットとなる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
Chip Bennett

現在のページをWPフィルタを使ってマークすることができます。 wp_link_pages()で使用されるフィルタwp_link_pages_linkはリンクアイテムを受け取ります。これは現在のページのための単一の番号で、他のページのためのアンカーです。そのため、アイテムが数字かどうかを確認し、それをスパンでラップすることができます。

/**
 * 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
Elliot