Показать пост в модальном окне в WordPress

Вы когда-нибудь хотели показать статью внутри другой статьи? Может быть, что-то вроде краткого введения или соответствующей статьи? В этом уроке мы создадим новый WordPress плагин, который будет создавать модальное окно и покажет статью, нажав на кнопку внутри другой статьи.

1. Основа плагина

Перед тем, как приступить к созданию функциональных возможностей, нам нужно подготовить наш плагин. Мы создадим новую папку внутри wp-content/plugin. Вы можете назвать ее как вы хотите.

После этого создайте файл в этой папке с тем же именем, но с расширением .php. Поместите этот код в этом файле:

<?php
/**
 * Plugin Name: AndreyEx Bootstrap Modal
 * Plugin URI:  https://andreyex.ru/blog-platforma-wordpress/pokazhite-modaln…-poste-wordpress/
 * Description: Show an article in a modal on the same page. 
 * Version:  1.0
 * Author: AndreyEx
 * Author URI: https://andreyex.ru
 * License: GPL2
 *
 *
 * 
*/

Сохраните файл и перейдите в админку WordPress и в меню Плагины и активируйте новый добавленный плагин. Теперь плагин активен, и мы можем начать вводить код 🙂

2. Добавим Bootstrap 3

Мы будем использовать Bootstrap 3, чтобы показать модальное окно. В случае, если Ваша тема не использует Bootstrap 3, мы можем легко добавить стиль, используя по умолчанию стиль в Bootstrap 3 или другой тематический стиль Bootstrap 3.

Для простоты мы будем использовать по умолчанию Bootstrap 3 из CDN. Лучше решение для этого было бы использовать только те части, которые необходимы для модальных окон. Если ваша тема WordPress использует Bootstrap 3 CSS и JS файлы, эта часть нашей статьи может быть пропущена.

Добавьте следующий код в файл:

function andreyex_add_style_and_script() {
	wp_enqueue_style( 'andreyex-bootstrap-css', "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" );
	wp_enqueue_script( 'andreyex-bootstrap-js', "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", array('jquery'), '1.0.0', true );
	
}

add_action( 'wp_enqueue_scripts', 'andreyex_add_style_and_script' );

С помощью функции enqueue_style и enqueue_script мы вызвали файлы Bootstrap 3 CSS и JavaScript из CDN, который был сделан возможным MaxCDN.

3. Bootstrap 3 Modal

Если мы хотим использовать Bootstrap 3 Modal нам нужно добавить модальность в нашей странице. В HTML будут добавлены в нижней части страницы, на которой функционирует wp_footer на момент вызова метода. Мы будем использовать WordPress фильтр wp_footer в WordPress. Так что давайте добавим этот код в нашем файле плагина:

<?php 
function andreyex_add_bootstrap_modal(){
	?>
	<!-- Modal -->
  <div class="modal fade" id="andreyexModal" tabindex="-1" role="dialog" aria-labelledby="andreyexLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Закрыть</span></button>
          <h4 class="modal-title" id="modalTitle">Модальный заголовок</h4>
        </div>
        <div class="modal-body" id="modalBody">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          
        </div>
      </div>
    </div>
  </div>
<?php
}
add_action('wp_footer','andreyex_add_bootstrap_modal');

Мы определили регулярную функцию, которая содержит HTML код для Bootstrap 3 modal, а затем мы добавили его в фильтр wp_footer .

4. Shortcode для отображения кнопки

В этом плагине, мы создадим небольшой шорткод, который будет отображаться кнопку в статьях. Это шорткод создаст гиперссылку, которая будет иметь Bootstrap 3-х классов, а также дополнительные атрибуты, которые могут быть использованы для изменения внешнего вида кнопки.

<?php
function andreyex_show_post_in_modal( $atts ) {
    $attributes = shortcode_atts( array(
        'id' => 0,
        'text' => "Открыть пост в modal",
        'class' => "btn btn-primary",
        'style' => ''
    ), $atts );
    $ajax_nonce = wp_create_nonce( "andreyex-bootstrap" );
    ?>
    <script>
    function andreyex_show_post_js(id){
  	 //Здесь мы будем создавать код JavaScript
    }
    </script>
			<a style="<?php echo $attributes["style"]; ?>" class="<?php echo $attributes["class"]; ?>" onClick='andreyex_show_post_js(<?php echo $attributes["id"]; ?>)'><?php echo $attributes["text"]; ?></a>
    <?php
}
add_shortcode( 'andreyex_post', 'andreyex_show_post_in_modal' );

На данный момент эта гиперссылка не выполняет никакой функции, и это ничего не будет отображать, пока мы не определим функцию JavaScript добавляемой в конце шорткода. Это то, что происходит сейчас:

• Передадим атрибуты в функцию
• Мы определяем атрибуты по умолчанию, которые будут перезаписаны переданными атрибутами
• После этого мы определяем ajax_nonce, которые будут проверены в интерфейсе вызова AJAX для проверки источника запроса.
• Затем определяется функция JavaScript (мы определим ее следующим)
• Последнее, что является гиперссылкой со всеми атрибутами

Мы зарегистрировали этот шорткод под названием andreyex_post, но вы можете назвать его как хотите. Просто убедитесь в замене других частей кода, где andreyex_post будет использоваться.

5. Функция Javascript

В приведенном выше примере кода мы определили функцию JavaScript без кода. Теперь вы можете заменить этим кодом:

<?php

function andreyex_show_post_js(id){
  jQuery.ajax({
	  url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
	  data: { id:  id, action: 'andreyex_show_post', security: '<?php echo $ajax_nonce; ?>'},
	    	
	  success: function(response){
	    if(response['error'] == '1'){
	      jQuery('#modalTitle').html("Ошибка");
	    	jQuery('#modalBody').html("Поста не найдено:(");
	    } else {
	    	jQuery('#modalTitle').html(response['post_title']);
	    	jQuery('#modalBody').html(response['post_content']);
	    		
	    }
	    jQuery('#andreyexModal').modal('show');
	    		
	    	}
	    });
}

В этой функции мы передаем идентификатор параметра, который является ID нашей статьи. Затем мы создаем вызов AJAX с JQuery. В этом вызове AJAX мы проверяем следующие параметры:

• URL – URL-адрес, на котором мы создаем запрос AJAX. При работе с WordPress, URL будет что-то вроде your-page.ru/wp-admin/wp-ajax.php. Так как мы не знаем, на какие сайты будет использоваться этот плагин, мы определяем URL динамически с функцией admin_url.
• data – все данные, которые мы посылаем. Теперь на стороне сервера мы можем получить доступ ко всем этим данным с глобальным переменным $ _GET.

Если вызов AJAX был успешным, и если мы получили запрашиваемую информацию, мы будем вставлять содержание модальный заголовок и тело. Если AJAX был успешен, но мы не получили никакой информации в статье (может быть, потому, что мы предоставили идентификатор, который не является статьей) мы будем оповещать пользователя с таким же Modal, но с другим постом. Мы читаем ответ JSON и проверка его можно показать сообщение об ошибке или содержание статьи.

6. Получение содержимого сообщения

Теперь, когда мы имеем шорткод, который вызывает функцию JavaScript с вызовом AJAX, нам нужно определить функцию, которая будет посылать ответ в формате JSON. Итак, давайте добавим этот код:

<?php
add_action('wp_ajax_nopriv_andreyex_show_post', 'andreyex_show_post');
add_action('wp_ajax_andreyex_show_post', 'andreyex_show_post');
function andreyex_show_post(){
	check_ajax_referer( 'andreyex-bootstrap', 'security' );
	$id = $_GET['id'];
	$post = get_post($id);
	if($post){
	  wp_send_json(array('post_title' => $post->post_title, 'post_content' => $post->post_content));
  } else {
	  wp_send_json(array('error' => '1'));
  }
	wp_die();
}

add_action ( «wp_ajax_our_action_name, 'server_function') ;

В конце концов, мы также вызвали wp_die (), так что запрос AJAX и réponse закончится после того, как наша функция завершит обработку.

7. Сокращенный виджет

По умолчанию шорткоды не могут быть обработаны в виджетах. Но, добавив этот код мы включим обработку:

<?php
add_filter('widget_text', 'do_shortcode');

8. Использование Shortcode

Вот некоторые примеры, как можно использовать наш вновь добавленный шорткод:

Только с идентификатором

[andreyex_post id=12412]

ID статьи с некоторыми другими классами Bootstrap 3

[andreyex_post id=12412 class="btn btn-warning"]

ID статьи и дополнительные стили

[andreyex_post id=12412 style="margin:0 auto;width:100%"]

Кнопка с другим текстом

[andreyex_post id=12412 text="Нажмите кнопку, чтобы показать статью"]

Вы можете использовать этот шорткод с каждым атрибутом, которые мы определили в функции SHORTCODE.
Вы также должны знать, что мы не передаем через фильтр the_content так что любой другой шорткод или подобного не будет показан как регулярный выход этого шорткода.

Вывод

С помощью этого модального мы можем легко показать содержание. Если мы хотим расширить функциональные возможности этого плагина можно добавить различные типы постовых вложений, и любой другой контент. Мы могли бы также создать регулярный WordPress виджет для отображения кнопки модальной внутри боковой панели или любой другой области, где мы можем поместить виджеты.

Вы когда-нибудь создавали нечто подобное, или нужно что-то подобное? Дайте нам знать о вашем опыте использования Bootstrap Modal в комментариях ниже!?