/ Scripts & jquery / Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

HIT

14.11.2018

5951

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот метод можно применять.

Метод подгрузки

Еще раз привожу метод подгрузки отдельных блоков:

1. Создаем php-файл с выводом требуемого кода, вверху прописываем следующее:

<?php require_once("../../../wp-load.php"); ?>

2. Прописываем скрипт, чтобы при определенном событии в определенный контейнер (#container) подгружался код из файла созданного в шаге 1 (file.php).

$(document).ready(function() { 
	$("#container").load("/wp-content/themes/template-name/file.php");
});

Альтернативный способ: создать необходимый для подгрузки файл php в виде шаблона и назначить его какой-либо странице и в этом случае в скрипте при вызове функции нужно указать путь на страницу:

$(document).ready(function() { 
	$("#container").load("/page-file/");
});

Собственно все. Очень просто, но дает такой потенциал возможностей!

Области применения

Полный каталог (в основе это решение), если мы часть категорий держим в спойлере, то при нажатии кнопки мы можем и получать эти категории:

$(document).ready(function() { 
	$('.spoiler-title').click(function(){
		$(".full-catalog").load("/wp-content/themes/magazin/full-catalog.php");
	});	
});

Или подгружать содержимое одного из табов:

$(document).ready(function() { 
	$('#li-hit').click(function(){
		$("#tab-hit").load("/wp-content/themes/magazin-3.0/hits.php");
	});	
});

Еще одним востребованным местом применения будут лэндинги. Можно подгружать «на лету» целый блоки. Будем использовать решение viewportChecker.

1. У необходимого блока прописываем require_once(«../../../wp-load.php»);
2. В том месте где он вызывался прописываем div с идентификатором, вместо непосредственного вызова get_template_part( ‘promo’ );
3. Прописываем скрипт:

$(document).ready(function() { 
	jQuery("#promo").viewportChecker({
		callbackFunction: function(elem, action){
			$("#promo").load("/wp-content/themes/meinland/promo.php");
		}
	});
});
Попытаться подгрузить таким образом Contact Form 7
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Подгрузка постов «налету» I: Скроллинг

Подгрузка постов «налету» I: Скроллинг

Добавляем на сайт функционал подгрузки постов «налету». Данная технология применяется в соц. сетях, а также крупных интернет-магазинах. В funсtion.php // Добавляем подгрузку постов function true_loadmore_scripts() { wp_enqueue_script('jquery'); // скорее всего Читать далее »

Загрузка JavaScript динамически

Загрузка JavaScript динамически

Иногда требуется подгрузить скрипт на лету, в этом поможет технология Ajax. Обычный скрипт JavaScript динамически Создаем файл скрипта script-dinamic.js с содержимым // случайное число от 1 до 100 var rnd Читать далее »

Опросы на сайте без плагина

Опросы на сайте без плагина

Создадим функционал сбора информации (опросов) от посетителей без использования плагинов, дорабатывая нужные аспекты так как нам нужно. Как создать функционал опросов с помощью плагинов описано здесь. Создадим форму опроса для Читать далее »

Добавить комментарий

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6260

Пока нет комментариев. Будь первым!

Подгрузка отдельных блоков на странице
Ускорение работы сайта WP
Рекомендации для васУскорение работы сайта WPOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.