Previous and Next button помогает пользователям переходить к новым сообщениям с текущей страницы. Это одна из наиболее часто используемых функций в WordPress . WordPress предоставляет множество хуков и API, с помощью которых мы можем настраивать наши темы различными способами.
В этом уроке мы расскажем, как добавить классную кнопку « Предыдущая / Следующая» на each post вашего блога.
Навигация WordPress : вы заметили новое Previous / Next Кнопка навигации включена Crunchify.com ? Я говорю об этих ниже кнопках.
Посмотрите на скриншот ниже
Решение очень простое.
Шаг 1
Откройте тему WordPress style.css файл и вставьте ниже код:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
.arrowLeft a {
положение : исправлено ;
z-индекс : 100 ;
слева : -5px ;
верх : 45% ;
набивка : 15px 10 пикселей ;
-webkit-transition : .2s непринужденность ;
-моз-переход : .2s непринужденность ;
-опереход : .2s непринужденность ;
переход : .2s непринужденность ;
}
.arrowLeft a: hover {
слева : 0 ;
-webkit-transition : .2s непринужденность ;
-моз-переход : .2s непринужденность ;
-опереход : .2s непринужденность ;
переход : .2s непринужденность ;
цвет : #fff ;
}
.arrowRight a {
положение : исправлено ;
z-индекс : 100 ;
правильно : -5px ;
верх : 45% ;
набивка : 15px 10 пикселей ;
-webkit-transition : .2s непринужденность ;
-моз-переход : .2s непринужденность ;
-опереход : .2s непринужденность ;
переход : .2s непринужденность ;
}
.arrowRight a: hover {
правильно : 0 ;
-webkit-transition : .2s непринужденность ;
-моз-переход : .2s непринужденность ;
-опереход : .2s непринужденность ;
переход : .2s непринужденность ;
цвет : #fff ;
}
.arrowNav a {
фон : # 225773 ;
цвет : #fff ;
текстовое оформление : нет ;
размер шрифта : 16 пикселей ;
}
|
Шаг 2
Откройте свою тему functions.php файл и поместите ниже код в конце файла:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
функция crunchify_post_navigation ( ) {
?>
< div class = arrowNav >
< div class = arrowLeft >
previous_post_link ( '% link' , '& # 8606;' , ЛОЖЬ ) ; ?>
< / div >
< div class = arrowRight >
next_post_link ( '% link' , '& # 8608;' , ЛОЖЬ ) ; ?>
< / div >
< / div >
}
add_action ( 'wp_footer' , 'crunchify_post_navigation' ) ;
|
Если вы используете Font-awesome шрифты, такие как я, в Crunchify, попробуйте использовать этот код:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
функция crunchify_post_navigation ( ) {
? >
< div class = arrowNav >
< div class = arrowLeft >
previous_post_link ( '% link' , ' ' , ЛОЖЬ ) ; ?>
< / div >
< div class = arrowRight >
next_post_link ( '% link' , ' ' , ЛОЖЬ ) ; ?>
< / div >
< / div >
< ? PHP
}
add_action ( 'wp_footer' , 'crunchify_post_navigation' ) ;
|
Здесь мы используем wp_footer хук, который добавляет приведенный выше код в колонтитул вашей темы .
После внесения вышеуказанных изменений просто очистите кеш блога, и вы сможете увидеть стрелки навигации в своем блоге. Дайте мне знать, если увидите какие-либо проблемы с этим.
0.00 (0%) 0 votes
