Как оформить номер текущей страницы (страницы ссылок wp)?
Когда сообщение разделено на несколько страниц, тема TwentyTen использует встроенную функцию wp_link_pages для отображения панели страниц навигации в конце сообщения.
Я пытаюсь стилизовать эти элементы для своей темы, но, к сожалению, кажется, что текущий номер страницы не может быть стилизован.
Я полагаю, что мне следует переопределить функцию wp_link_pages, но я все еще изучаю основы программирования WP.
Можете ли вы помочь мне определить шаги, которые необходимо предпринять для решения этой проблемы проблема?
6 answers
К сожалению, нет способа сделать это только с помощью собственных функций: WP... не зависит от запросов и всегда создает ссылки на текущую страницу (навигатор, страницы списка...).
Кроме того, вы не можете использовать фильтр, потому что wp_link_pages() не имеет соответствующего фильтра.
В своих темах я использую собственную функцию, основанную на этом коде. Вероятно, это слишком долго, чтобы публиковать его здесь, поэтому я разместил его в качестве плагина на GitHub: Логические ссылки на страницы.
Вы можете использовать плагин как есть или скопировать введите код в свою тему.
Полученная разметка будет выглядеть следующим образом:
<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;
}
Дополнительные функции перечислены в файле чтения плагина.
Обновление
Я неправильно понял вопрос. Я думал, вам нужна такая функция для архивов. Извините.
Вот переписанная версия 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;
}
Простой способ, который я использую сейчас, - использовать "link_before" и "link_after" как часть аргументов wp_link_pages. Затем вы можете обернуть каждое число, включая активное, в тег, а затем соответствующим образом оформить.
Я согласен с 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>
Где мы сейчас находимся на второй странице.
ЗАТЕМ вы можете указать, является ли класс "номер страницы-ссылки" дочерним по отношению к ссылке или нет.
.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;
}
Во-первых, вам нужно предоставить класс 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;
}
Стиль в соответствии с вашими потребностями, конечно.
@toscho спасибо за пост, он очень помог! Я пошел немного дальше и добавил теги элементов списка к обоим выводам, чтобы мне было проще их стилизовать.
Я вставляю этот хак в ваш код, так как это может кому-то помочь.
$output .= _wp_link_page( $i ) . "<li>{$link_before}{$j}{$link_after}</a></li>"
$output .= "<li><$highlight>{$link_before}{$j}{$link_after}</$highlight></li>"
Камило
Текущую страницу можно пометить с помощью фильтра 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.