Создание плагина навигационных ссылок для WordPress
Для данной задачи можно и не писать дополнительный плагин, так как все функции, выполняющие отображение ссылок «Следующая» и «Предыдущая» уже есть в WordPress, и вот они соответственно:
|
1 2 3 |
1. next_post_link( $format, $link, $in_same_term = false, $excluded_terms = '', $taxonomy = 'category' ); 2. previous_post_link( $format, $link, $in_same_term = false, $excluded_terms = '', $taxonomy = 'category' ); |
Но для красоты кода решение с плагином является выигрышным. Для начала назовем плагин: wp-nav-side-links – название плагина должно быть уникальным. Создадим папку wp-nav-side-links в папке plugins wordpress и создадим файл wp-nav-side-links.php. Данный файл будет содержать основной код. Также понадобится файл стилей wpnavsidelinks.css, файл javascript wpnavsidelinks.js и папка images для хранения изображений к стилям.
Заголовок плагина, обозначим следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * @package WP-Nav-Side-Links */ /* Plugin Name: WP-Nav-Side-Links Plugin URI: https://webproggi.com/ Description: A simple navigation links plugin for wordpress. Version: 1.0.0 Author: Webproggi.ru Author URI: https://webproggi.com/ License: GPLv2 or later */ |
Сам код плагина с функциями регистрации стилей, скрипта и определения функций next_post_link() и previous_post_link(), выглядит следующим образом:
|
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 |
/** Install Folder */ define('WNSL_FOLDER', '/' . dirname( plugin_basename(__FILE__))); /** Path for front-end links */ define('WNSL_URL', WP_PLUGIN_URL . WNSL_FOLDER); // =================== // ** Setup the style and script // =================== add_action( 'init', 'wp_add_nav_side_links_style' ); add_action( 'init', 'wp_add_nav_side_links_script' ); function wp_add_nav_side_links_style(){ wp_register_style('wpnavsidelinks.css', WNSL_URL . '/wpnavsidelinks.css'); wp_enqueue_style('wpnavsidelinks.css'); } function wp_add_nav_side_links_script(){ wp_register_script( 'wpnavsidelinks.js', WNSL_URL . '/wpnavsidelinks.js'); wp_enqueue_script( 'wpnavsidelinks.js' ); } function wpnavsidelinks_shortcodenew() { $display = ''; $display .= previous_post_link('<div id="left_pos_prev_link" class="left_pos_prev_link">%link</div>', '<div class="left_pos_prev_cont"></div><div class="left_pos_prev_title"><div class="left_text"><table><tr><td><div class="left_arrow"></div></td><td class="first_td">%title</td></tr></table></div></div>'); $display .= next_post_link('<div id="right_pos_next_link" class="right_pos_next_link">%link</div>', '<div class="right_pos_next_cont"></div><div class="right_pos_next_title"><div class="right_text"><table><tr><td class="first_td">%title</td><td><div class="right_arrow"></div></td></tr></table></div></div>'); echo $display; } |
Для установки указателей на страницу записи, будет достаточно прописать в single.php функцию wpnavsidelinks_shortcodenew(), которая будет выводить сразу две ссылки по бокам страницы.
Для установки указателей на середину высоты экрана применим следующий javascript код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
window.onload = function() { // определяем высоту var myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myHeight = window.innerHeight; } else if( document.documentElement && document.documentElement.clientHeight) { //IE 6+ in 'standards compliant mode' myHeight = document.documentElement.clientHeight; } else if( document.body && document.body.clientHeight) { //IE 4 compatible myHeight = document.body.clientHeight; } var halfHeight = myHeight/2; document.getElementById("left_pos_prev_link").style.top = halfHeight-36 + 'px'; document.getElementById("right_pos_next_link").style.top = halfHeight-36 + 'px'; }; |
Осталось установить стили. Результат работы плагина выглядит следующим образом:
Все файлы с плагином упакованы в архив, который можете скачать здесь: