На Facebook, в группе разработчиков сайтов на Genesis, один товарищ спросил: а можно ли в конце поста вместо ссылок «Вперед/назад» поставить названия статей с их миниатюрами?
И добавил картинку, как он хочет, чтобы это выглядело:
Можно. Для этого нужно немного поправить код из поста, в котором рассказывалось про то, как добавить картинки в навигацию между статьями. И тогда мы получим вот такое:
Шаг 1
В файл functions.php
нашей дочерней темы нужно добавить вот это:
При этом нужно заменить
1 |
http://placeholdit.imgix.net/~text?txtsize=60&txt=Prev%20Image&w=220&h=220 |
и
1 |
http://placeholdit.imgix.net/~text?txtsize=60&txt=Next%20Image&w=220&h=220 |
на URL картинок, которые будут ставиться по умолчанию для тех постов, у которых нет своей картинки.
После этого нужно перестроить миниатюры.
Шаг 2
В файл 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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
.adjacent-entry-pagination { margin-bottom: 40px; } .adjacent-entry-pagination a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #333; text-decoration: none; } .adjacent-entry-pagination img { width: 110px; height: 110px; } .single .pagination-previous img { margin-right: 20px; } .previous-next { font-size: 15px; } .single .pagination-next .post-navigation-content { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .single .pagination-next img { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-left: 20px; } @media only screen and (max-width: 1200px) { .single .pagination-previous, .single .pagination-next { float: none; } .adjacent-entry-pagination .pagination-previous { margin-bottom: 40px; } .single .pagination-next .post-navigation-content { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .single .pagination-next img { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; margin-left: 0; margin-right: 20px; } .single .pagination-next.alignright { text-align: left; } } @media only screen and (max-width: 400px) { .post-navigation-content { padding: 20px 50px; } } |
Вуаля!
Добавить комментарий