Как на ВП сделать навигацию с кнопкой перейти?

Question

[aliasst]

Подскажите как сделать такую кнопку с инпутом для ввода номера страницы? Необходимо чтобы при вводе номера страницы, и последующем клике по кнопке перейти...перенаправляло на соответсвующую страницу постраничной навигации



страницы такие: domen.ru/page/2/ ,domen.ru/page/3/, domen.ru/page/4/, и т.д.

Answer 1

[Александр Соболев]

Лови
1. Создаем папку плагина, в ней файл my_custom_plugin.php

<?php
/*
Plugin Name: My Custom Pagination
Description: Плагин кастомной пагинации.
Author: Александр Соболев
Author URI: https://александрсоболев.рф
*/


// Подключение CSS - если захотите поменять стиль кнопочки и инпута
function cp_css_includer() {
  wp_enqueue_style( 'cp_css_includer', plugin_dir_url( __FILE__ ). '/css/cp_style.css', false ); 
}
add_action( 'wp_head', 'cp_css_includer' );

// Подключение JS
function cp_js_includer(){
	wp_enqueue_script('jquery');
	wp_enqueue_script('cp_js_functions', plugin_dir_url( __FILE__ ). '/js/cp_functions.js');
	wp_localize_script( 'cp_js_functions', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
}
add_action( 'wp_enqueue_scripts', 'cp_js_includer' );

// Создаем форму и шот-код
function cp_form(){
	return'<div class="cp"><form><input id="pc_input" type="text" placeholder="Куда пойдем ?"> <p id="pc_accept"></p></form></div>';
}
add_shortcode( 'cp_form', 'cp_form' );

?>

2. Создаем js-файл "/папка_плагина/js/cp_functions.js"

jQuery(document).ready(function() {
	jQuery("#pc_accept").on("click",function(){
		var _url_ =  jQuery('#pc_input').val();		
		var url = "http://domen.ru/page/"+ _url_; // <- Тут " поменять домен "
		window.location.href = url;
		
	});
});

3. Ну и создаем css файл: "папка_плагина/css/cp_style.css"

.cp {background: #f0fff6;}
.cp input {
  width: 100%;
  height: 42px;
  padding-left: 10px;
  border: 2px solid #7BA7AB;
  border-radius: 2px;
  outline: none;
  background: #f0fff6;;
  color: black;
}
.cp p {
  position: absolute; 
  top: 0;
  right: 0px;
  width: 42px;
  height: 42px;
  border: none;
  background: #7BA7AB;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
.cp p:before {
  padding-bottom: 4px;
  padding-left: 4px;
  content: "\f1b0";
  font-family: FontAwesome;
  font-size: 30px;
  color: white;
}

Сделаешь по инструкции - все будет работать) Подгонку "под себя" сделаешь, думаю.
Пользоваться просто:
Там где нужно исполняешь шот-код через
<?php echo do_shortcode('[cp_form]'); ?>
или просто пишешь [cp_form]

Comments

[aliasst]

отлично спасибо, работает! единственное что добавил чтобы то же самое происходило после нажатия enter, а не только по кнопке

$("#pagination-form").on("submit", function(){
	  event.preventDefault();
    var _url_ =  jQuery('#pc_input').val();	
    var url = "http://domen.ru/test/page/"+ _url_; // <- Тут " поменять домен "
    window.location.href = url;
})

Answer 2

[Евгений]

можно скриптом на js. При клике читать значение поля и переходить по ссылке подставляя страницу

Answer 3

[M1R0N]

Если речь идет непостредственно о навигации, то можно использовать get_pagenum_link() и в него подставлять значени е поля, опять зе с помощью JS.