Блог Андрія Огороднікова Хто з мечем до нас прийде, від меча й загине.

CSS для wp_link_pages

16.04.2017, 02:39

Продолжаем доколупываться до вордпресса. Есть такая неплохая штука, как пост, состоящий из множества страниц. Для этого достаточно в текстовом редакторе в нужном месте вставить разрыв сколько угодно раз (но без фанатизма, к чему нам тысячи страниц?)

<!--nextpage-->

Случаются ситуации, когда это удобно. Я сам несколько раз на блоге делал такие штуковины, когда материала было много, а упрятывание его =под кат= дела не решало, потому что с главной-то множественность спрятана, а если посетитель загрузит отдельный пост — она возьмет и выпадет целиком вся до последней копейки. Понятно, что нужно разбивать. Можно на несколько постов, а можно в одном посте постранично.

Казалось бы, в чем проблема? А в том, что стандартными средствами рядочек со ссылками не кастомизировался стилями css.

wp_link_pages custom css

Сколько я ни встречал разных, даже очень продвинутых тем, вот такие унылые строчки со ссылками маячили на многостраничной записи. В том числе и у меня. Я этим особо не заморачивался, потому что, как я уже сказал, пользовался всего несколько раз на многие сотни постов. Но тут мне стало просто интересно, как кастомизировать.

wp_link_pages custom css

В стандартном случае мы имеем ряд ссылок, обернутых в параграф <p>. Самое простое задать ему класс, а потом задать стили ссылкам в пределах этого класса.

.p-link a {blah: 12345px;}

Но мы тут же упираемся в то, что номер страницы, на которой мы находимся, без ссылки и ни во что не обернут, и стиль ему задать невозможно. И такая прореха вызывает даже большее раздражение, чем этот рядок совсем без стилей.

На эту тему в интернете множество завываний, как кастомизировать каррентную страницу??? каккаккакакак?!?!?!?!

А официальную документацию никто не читает… … … А там есть конкретная рекомендация, с которой можно уже работать и сделать все, как хочется:

<?php wp_link_pages( array(
	'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>',
	'after'       => '</div>',
	'link_before' => '<span>',
	'link_after'  => '</span>',
	) );
?>

wp_link_pages custom css, success

Текст — и простой, и в пределах ссылки — теперь оборачивается в span. Последнему можно задать класс. И делать различия для «текста» и «ссылок» в пределах одинаковой основы. Вот и все, проще не бывает.

.page-links span.page-links-span {background: #111; ...}

.page-links a span.page-links-span {background: #999; ...}

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