Картинки в навигации между статьями
После прочтения одного из материалов на сайте, посетитель вполне может захотеть почитать что-то еще. Одна из возможностей помочь ему это сделать — ссылки «Следующий пост» или «Предыдущий пост». Но выглядят эти ссылки скучно.
Что, если вместо ссылок «Вперед/назад» мы поставим названия статей на фоне картинок из них — так, как на рисунке?
Для этого можно создать специальную функцию, основанную на on genesis_adjacent_entry_nav().
При этом на экранах 1200 пикселей и ниже они должны располагаться друг напротив друга:
Картинки в навигации между статьями на небольших экранах
Шаг 1
Создадим файл, допустим, singular.js, в директории js нашей дочерней темы. Этот файл должен содержать следующее:
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery(function( $ ){ var previousEntryImageURL = $( '.pagination-previous' ).attr( 'data-image' ); var nextEntryImageURL = $( '.pagination-next' ).attr( 'data-image' ); $( '.pagination-previous a' ).css( 'background-image', 'url(' + previousEntryImageURL + ')' ); $( '.pagination-next a' ).css( 'background-image', 'url(' + nextEntryImageURL + ')' ); }); |
Шаг 2
В файл functions.php нашей дочерней темы нужно добавить вот это:
|
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 |
add_action( 'genesis_after_entry', 'sk_adjacent_entry_nav' ); /** * Добавляем картинки в навигацию между статьями. * * @return null Return early if not singular. */ function sk_adjacent_entry_nav() { if ( ! is_singular() ) { return; } // http://codex.wordpress.org/Function_Reference/get_adjacent_post // get_adjacent_post( $in_same_term, $excluded_terms, $previous, $taxonomy ) $prev_post = get_adjacent_post( false, '', true ); $next_post = get_adjacent_post( false, '', false ); genesis_markup( array( 'html5' => ' ', 'xhtml' => ' 'context' => 'adjacent-entry-pagination', ) ); echo ' . wp_get_attachment_url( get_post_thumbnail_id( $prev_post->ID ) ) . '">'; previous_post_link( '%link', '' ); echo ' '; echo ' . wp_get_attachment_url( get_post_thumbnail_id( $next_post->ID ) ) . '">'; next_post_link( '%link', '' ); echo ' '; echo ' ';} // Enqueue js file on singular pages add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' ); function sk_enqueue_scripts() { if ( ! is_singular() ) { return; } wp_enqueue_script( 'singular', get_stylesheet_directory_uri() . '/js/singular.js', array( 'jquery' ), '', true ); } |
Шаг 3
В файл 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 |
.adjacent-entry-pagination { margin-bottom: 40px; } .single .pagination-previous, .single .pagination-next { text-align: center; color: #fff; } .single .pagination-previous { margin-bottom: 5%; } .single .pagination-previous a, .single .pagination-next a { display: block; color: #fff; text-decoration: none; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; } .single .pagination-previous a:before, .single .pagination-next a:before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: rgba(0,0,0,0.5); } .single .pagination-previous a:hover:before, .single .pagination-next a:hover:before { background: rgba(18, 93, 154, 0.5); } .post-navigation-content { position: relative; padding: 40px 100px; } .post-navigation-title { font-style: italic; } .previous-next { text-transform: lowercase; font-size: 15px; } @media only screen and (max-width: 1200px) { .single .pagination-previous, .single .pagination-next { float: none; } } @media only screen and (max-width: 400px) { .post-navigation-content { padding: 20px 50px; } } |
Готово!
Добавить комментарий