Здравствуйте, дорогие друзья и читатели — Sozdaiblog.ru!
Сегодня я расскажу, как на WordPress осуществитьзагрузку контента без перезагрузки всей страницы сайта.
Для начала, давайте разберёмся, что это значит.
Моим примером будет социальная сеть В контакте.
До недавнего времени, мне было безразлично, как загружается данный сайт. Но, после того, как один из моих читателей показал пример и спросил – « Как сделать, чтобы на сайте осуществлялась загрузка контента без перезагрузки страницы? », я начал копать.
Моё внимание привлекла социальная сеть В контакте. Если, у Вас есть там аккаунт, то зайдите на свою страничку и покликайте по ссылкам навигации (Моя страница, Мои друзья, Мои фотографии и т. д.).
Обратите внимание, как осуществляется перезагрузка страницы.
Догадались? Нет?
Смотрите, обновляется только контент, а шапка сайта и панель навигации остаются на месте.
Интересно, правда?
А теперь, представьте, как такое обновление страницы без перезагрузки влияет на скорость сайта . Да он просто летает!
При таком раскладе нагрузка на сервер минимальная, потому что количество запросов к базе данных во много раз меньше.
Но и это ещё не всё. Представьте, как улучшится юзабилити Вашего ресурса, если к нему прикрутить такую штуку. Да, да, все страницы будут открываться на лету, что не даст читателю возможность закрыть сайт и уйти к конкуренту.
Надеюсь, что Вы отметили для себя все плюсы и теперь, мы переходим к главному.
Как сделать загрузку контента без перезагрузки страницы.
Чтобы сделать загрузку контента без перезагрузки страницы сайта, нужно открыть файл header.php , который находится в папке с активной темой оформления и перед закрывающим тегом < /head> , вставить следующий скрипт:
Извините, друзья, но воспользоваться скриптом могут только подписчики блога.
Чтобы стать одним из них, нужно заполнить наипростейшую форму подписки, указав имя и адрес электронной почты. Затем, на указанный Вами адрес, придёт письмо с подтверждением подписки на рассылку. После её подтверждения, тут же поступит новое письмо, в котором будет находиться ссылка на скачивание архива с исходным кодом скрипта.
Подписавшись на рассылку, Вы сможете без ограничений получить любой материал блога, все скрипты, коды, а так же всю полезную информацию, которая поможет любому пользователю Интернета создать собственный блог или сайт, раскрутить его и заработать.
На сегодня, это всё. До новых встреч…
С уважением, Денис Черников!
-
Как добавить видео на сайт или блог?
-
Покупка Вечных ссылок для сайта на бирже RotaPost!
- Кейс это в бизнесе простыми словами
-
Внимание! 2 месяца работаю фрилансером за 1000 рублей!
- Маркетплейс что это такое простыми словами и как
- Фриланс что это такое простыми
- Как установить плагин в WordPress: пошаговая инструкция
-
Как продвинуть блог: советы и стратегии
-
Как проверить Траст сайта?
- Заголовок Last Modified в WordPress: значение и способы добавления
Денис очень интересный момент. Надо попробовать на своем сайте. Действительно ли страницы загружаются быстро? Спасибо за очередное новшество. Я уже подписался хочу попробовать в деле. Успехов тебе в дальнейшем улучшении и продвижении своего сайта.
Спасибо,Сергей!Да, страницы загружаются быстро, но нужно учитывать структуру сайта. Я не зря про контакт рассказывал!
Сижу вот трескаю мандарины и знакомлюсь с твоей статьей Денис. Это отличный способ ускорить работу блога в несколько раз, вот только он подходит не всем темам для WordPress. Нужно будет провести эксперимент и узнать насколько он увеличит скорость загрузки блога. Заранее спасибо! =)
Привет, Александр!
Угости боевого товарища, с прошлого нового года не кушал мандарины.)
Подходит он всем, просто темы нужно подстроить под него. К примеру перенести навигацию в видимую часть монитора и убрать по возможности верхний отступ у шапки. Посмотри пример контакта.
Нет проблем, тебе почтой выслать или может в гости в Харьков приедешь? =)Кстати, а скрипт сам писал или где-то нашел?
Лучше бандеролькой, но боюсь испортятся!Скрипт нарыл!
Я буду пробовать)) Написал статью как разделить статью на части, данный скрипт был бы дополнением к статье)))
Пожалуйста, пробуйте!
А если у меня сайт сидит на движке Instant Cms можно ли этот скрипт туда впихнуть и будет ли он работать?
Не могу знать, я не работал с этим движком.
У меня только шапка с верхним меню на месте стоит, сайтбар обновляется по старому. И шаблон чуток вниз съехал, но это ерунда, поправил в css. Пока оставлю, посмотрю как будет работать. Спасибо Денис.
Пожалуйста, Сергей! Будьте внимательны и осторожны с вёрсткой, а то весь сайт уплывёт!))
Зря пыхтел с css, оказывается в скрипте не заметил лишнюю запятую, сам виноват, случайно видимо нажал. Еще раз спасибо.
Это ничего, я раз 10 сайт ломал при вставке различных скриптов, потом ночами искал то запятую, то скобку.
Денис, а чего себе не поставил скрипт?
Он со слайдером не дружит! А слайдер жалко!
попробовал у себя. что-то ноль реакции вообще. Что можно поправить в теме? куда хоть капать?
Я у Вас был, всё работало, при переключении по пунктам меню шапка стоит на месте! Приглядитесь к контакту и Вы поймёте принцип его работы!
Денис, ты что-то путаешь. Во-первых я пробовал на тестовом домене, а во-вторых страница полностью перезагружается
Я с двух компьютеров заходил, от жены и со своего! У Вас шапка на месте!
Спасибо. Значительно увеличилась скорость загрузки, над остальным придется еще поработать.
Пожалуйста! А что Вы ещё хотите доработать?
Подойдет ли этот скрипт моему блогу? (ссылка в профиле, тема создана в Artisteer 4).
Сомневаюсь, но попробовать стоит!
Что то не пойму, работает скрипт или нет. ссылка в профиле.
Работает, но у Вас сама по себе так долго грузится страничка, что не успеваешь понять. Попробуйте увеличить скорость своего ресурса применив материал с моего блога.
А кто подписан, тому как? Снова подписываться? Что-то я не нашёл форму входа
Так же заполните форму регистрации и получите ссылку на скачивание! Это займёт пару минут!)
Отличная статья, некоторую полезную информацию я извлек для себя, из этого материала.
Рад, что Вы нашли для себя полезное! Заходите ещё!
Денис, а если у меня на главной стоит слайдер, то этот скрипт будет работать?
Сомневаюсь, у меня из-за слайдера не хочет! Но попробовать стоит!
Вопрос по размещению кода. Обязательно в хедере или можно в футер запихнуть?
Код запихивается перед тем, что Вы хотите динамично обновлять!
Сегодня поставил себе этот скрипт. Вроде функционирует все нормально. Протестировав его, стали заметно быстрее грузится странички. Круто, мне аж понравилось! Спасибо.
Пожалуйста! Рад, что ты остался доволен. Про мандарины не забудь!)))
Очередная полезная информация, спасибо, Денис! Буду пробовать, если опять не возникнет конфликта с темой((
пожалуйста, Татьяна! Пробуйте аккуратно!
Денис, может быть вы знаете ответ на схожий вопрос:как сделать, чтобы после внесения изменений на обычную html страницу, посетителям сайта не приходилось нажимать f5? Ведь если они уже были на этом сайте, то страничка у них закэшировалась, и изменений они не видят (((
У меня есть статья, как автоматически обновлять css на стороне пользователя! Посмотрите через карту блога!
Не получилось ничего. Все равно грузится вся страница целиком, пробовал и так — getElementById ('contentBody'); заменил на getElementById ('content');, т.к. у меня . Подскажите что не так?
Со слайдерами это не работает!
Может быть есть какие-нибудь другие варианты? Подскажите пожалуйста
К сожалению других решений пока ещё не встречал!
function showContent (link) {
var cont = document.getElementById ('contentBody');
var loading = document.getElementById ('loading');
cont.innerHTML = loading.innerHTML;
var http = createRequestObject ();
if ( http )
{
http.open ('get', link);
http.onreadystatechange = function ()
{
if (http.readyState == 4)
{
cont.innerHTML = http.responseText;
}
}
http.send (null);
}
else
{
document.location = link;
}
}
// создание ajax объекта
function createRequestObject ()
{
try { return new XMLHttpRequest () }
catch (e)
{
try { return new ActiveXObject ('Msxml2.XMLHTTP') }
catch (e)
{
try { return new ActiveXObject ('Microsoft.XMLHTTP') }
catch (e) { return null; }
}
}
}
Вы это пробовали?
Для этого кода, как я понимаю необходимо создать событие OnClick на пунктах меню с функцией ShowContent, но в таком случае, получается открывается вся страница целиком внутри Content зоны. Как выдергивать в ВордПрессе чистые страницы/записи не задевая шапки и подвала?
Дмитрий, нужно эти шапки и подвалы отключить от страниц которые будут подгружаться.У меня тоже проблема проблем если кто решил этот момент откройте мне глаза, дело в том что при подгрузки страницы в ее содержимом разом отрубает всё что связано с js как это исправить?
Спасибо Денис! Не зря заглянул к Вам на блог. Скорость загрузки страниц значительно возросла!
Пожалуйста, Александр! Скорость, это один из существенных факторов ранжирования.
У меня такакая хрень , то есть не header файл а просто меню в отдельном файле , и оно выводиться через PHP на главной … И я вставил после Но все ровно не подгружает , так же как и было обновляет страницу ( Подскажете что делать ? ) Я не менял скрипт просто скопировал и вставил …
На словах я не смогу Вам подсказать. Если У Вас вся структура сайта работает по другому принципу, то нужно и делать по-другому. Для этого нужно копаться в коде, тестировать и смотреть, как и что будет получаться. На словах этого не сделать.
У меня не особо получается. Не пойму, чем нужно заменить contentBody и loading. Подскажите, пожалуйста.
С чего Вы взяли, что их вообще нужно изменять?
Потому что, когда я использовала скрипт, который высчитывал высоту блока с содержимым и высоту сайдбара и делал их одинаковой высоты, то в нем в аналогичном месте я вписывала имена моих блоков, а именно content и right.
Иногда, когда я кликаю по какому-либо пункту меню, содержимое обновляется без перезагрузки всей страницы, но далеко не каждый раз.
Это у многих так бывает!
А разве в этой статье, что-то подобное написано?
Я имею ввиду строки
var cont = document.getElementById ('contentBody');
var loading = document.getElementById ('loading');
В скрипте, про который я говорю, изначально было так:
var b1 = document.getElementById ('block-one');
var b2 = document.getElementById ('block-two');
И вот вместо 'block-one' и 'block-two' я вписывала 'content' и 'right'.
Я подумала, что в скрипте, который вы описываете, нужно сделать аналогично.
Надежда, если это нужно было бы сделать разве я бы не написал про это!
Если скрипт не работает, значит он не подходит к моей теме?
Надежда, там много причин и одна из них несовместимость с темой.
Поставил скрипт на свой сайт. НО ничего не работает. По-прежнему вся страница загружается.
Видимо, дело в теме. Она у меня переделанная.Не подскажете, как скрипт под тему подогнать?
Спасибо!
У Вас очень своеобразный сайт, здесь этот скрипт не поможет! Должно быть как В контакте без шапок, слайдеров и всего остального!
А что такого у меня в шапке? По сути она одинаковая на всех страницах…Слайдер убирал — не помогло
Откройте сайт контакта и посмотрите их структуру шаблона! К примеру, у меня этот скрипт тоже не работает, но стоит убрать слайдер и сразу случается чудо!
Ну и где скрипт??? Я подписался иииИИИИ???
Должно придти письмо на почту!
У меня все работает (нет перезагрузки страницы) только при переходе на главную страницу меню (wordpress), при переходе на другие пункты меню перегружается вся страница.
У Вас сайт похож на VK?
Да, меню (организовано в виде страниц инструментом wordpress). Задача в том, чтобы при переключении по элементам меню не выполнялась перезагрузка страницы. Причем, при переключении на главную страницу (http: //wordpress/), перезагрузка не происходит. Главная представлена не как страница, а как ссылка. Есть элементы меню, которые тоже представлены не как страницы, а как ссылки. И при переключении на них/с них явление перезагрузки — случайно. Пока не поняла логику работы скрипта, т.к. то работает, то нет…
Визуально это не всегда заметно!
Я пока не понимаю о чём мы говорим, если я даже сайт Ваш не вижу!
Я его еще не разместила, упражняюсь с denwer (ом). Дело в том, что в wordpress, если организацию меню делать через страницы, то данный скрипт работать не будет. Если сделать ссылки на страницы, то вроде как пока все работает. Как выложу сайт на хостинг, кину ссылочку. Спасибо!
Пожалуйста! Дело не в страницах, а в структуре шаблона!
контент не скачивается
В смысле?
а как сделать на сайте который сделан с нуля?
Почти так же, просто скрипты по другому подключать!
а как? напиши статью или видео сделай как и куда что подключать
Пока нет времени, там всё по аналогии!
в итоге снижается, а пользовательский опыт улучшается. Этот метод называется AJAX (асинхронный JavaScript и XML) и он позволяет динамически обновлять контент на странице без перезагрузки всей страницы. Для реализации такого функционала на WordPress можно использовать различные плагины или написать собственный код. А вам удалось реализовать загрузку контента без перезагрузки на вашем сайте?