Домой Сетевое оборудование Вордпресс без плагинов. Как сделать простую контактную форму для блогов на WordPress без использования плагинов

Вордпресс без плагинов. Как сделать простую контактную форму для блогов на WordPress без использования плагинов

У меня сейчас новое увлечение – оптимизировать блог на движке wordpress «Сетевой Путь» таким образом, чтобы и функционал сохранить, и при этом обойтись без плагинов

Нелюбовь к плагинам возникла не на пустом месте. Как-то по осени я решила, что возможностей моего хостера становится маловато и переехала на другой . А чтобы уж совсем было хорошо (как я себе подумала) – на виртуальный выделенный сервер

Бедный мой блог. Сколько уже на нем было проведено экспериментов! Другой уже бы просто накрылся медным тазом и не гугукал. В общем и целом, переезд оказался стратегической ошибкой. Денег выделенка стоила в разы больше, но при каждом наплыве народа стабильно показывалась ошибка 503 – терпение сервера лопнуло! Сервер не мог загрузить мой блог.

Ошибка 503
Каждому аккаунту на сервере выделено определенное количество процессов, обрабытывающих запросы пользователей. Запросы поступают на сервер и становятся в очередь. Легкие запросы обрабатываются быстро, а тяжёлые проблемные - медленно, тормозя продвижение очереди. Когда длина очереди достигает определенной величины, сервер перестает принимать новые запросы, возвращая ошибку 503 (Service Temporarily Unavailable, сервис временно недоступен)

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

Я со своей стороны писала хостеру, просила, ругалась.

Служба поддержки хостинга очень старалась со своей стороны что-то решать, но все было бесполезно – блог мой в поиске стремительно падал в ноль . Трафик с поиска осенью и трафиком-то назвать было нельзя. Не трафик, а слезы.

К декабрю наши отношения со службой поддержки из конструктивно-терпимых уже плавно перетекали на стадию разборок: кто виноват и что делать. И как-то, посреди этих разборок, прозвучала мысль, что многовастенько у меня плагинов наставлено (на ту пору их было 37) .

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

Но мысль посеянная свои всходы дала. Поразбиравшись немного с вопросами внутренней оптимизации и ускорения загрузки блога, я пришла к выводу, что плагины – далеко не всегда польза! При всем их удобстве.

Они создают дополнительные запросы к базе данных, дополнительную нагрузку на сервер и тем самым тормозят работу движка. Скорость и без того медлительного вордпресса падает и вездесущий Гугл начинает намекать, что Ваш блог, мол, медленнее других, а потому уступите дорогу в выдаче более шустрым. И это в лучшем случае! В моем случае, он мне жестко и твердо сказал:

Т.ч. отказ от плагинов начался, как вынужденная мера. Новые веяния требуют новых решений. Надо было искать альтернативные решения. WordPress без плагинов!

Чтобы разогнать вордпресс по максимуму, имеет смысл в нем покопаться и найти решение класса: «и волки сыты, и овцы целы» - сохранить привычный функционал и обойтись без плагинов. Ну, по крайней мере, без большинства плагинов.

Плагин – это небольшая программка вспомогательного типа. Она предназначена для расширения функционала основной программы (в нашем случае, WordPress), дополняя ее и улучшая в определенных моментах. При этом, основная программа включает в себя механизм исполнения плагина, то есть вордпресс может работать со вспомогательными программами.

Плюсы плагинов

  1. Плагины могут выполнять совершенно разные функции – начиная от решения простых задач и заканчивая сложными комплексными решениями (форумами, модулями интернет коммерции и т.п.)
  2. Установить их может даже новичок
  3. Не обязательно разбираться в php и css, чтобы усилить функционал блога

Минусы плагинов

  1. Избыточное число запросов к веб-серверу
  2. Запросы к базе данных могут быть очень тяжелыми, что накладывает повышенную нагрузку на сервер
  3. ПО времени обновления плагины могут не совпадать с обновлением самого движка и в результате перестают работать
  4. Чтобы запретить обновления, новички ставят дополнительные плагины
  5. Не каждый хостинг сможет выдержать больше 50 плагинов (в моем случае, он уже не адекватно себя вел с 37 плагинами)
  6. При переезде на новый хостинг могут возникнуть непредвиденные проблемы. Начиная с банальной перенастройки плагинов, кончая конфликтами и несовместимостью, а то и неработоспособностью отдельных плагинов. Буквально на днях мне пришлось решать проблему с плагином FacebookShare для одного партнера – некорректно работала кодировка

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

На Сетевом Пути активны 14 плагинов, из них стандартно-общепринятых только 4. Думаю, что это до тех пор, пока я не разберусь, как их заменить кусочком кода.

Вот что теперь на моем блоге работает прекрасно и без плагинов:

  1. Антиспам в комментариях
  2. Карта сайта
  3. Популярные записи в сайдбаре с картинками
  4. Похожие записи под постами (с выводом картинок) – как же на этот плагин все время ругался PageSpeed, его java скрипты и css таблицы даже после оптимизации и сжатия создавали неслабую нагрузку
  5. Хлебные крошки
  6. Постраничная навигация
  7. Топ комментаторов
  8. Кнопки рекомендаций Google+ и

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

Преимущества обратной связи wordpress без плагина

  • на сайте не подгружается лишний яваскрипт и CSS код - становится более легким;
  • форма обратная связь WordPress без плагина менее подвержена спаму, при условии что ваш код уникальный;
  • можно настроить вывод по своему вкусу, сделать форму любой сложности.

Для того, чтоб создать форму обратная связь WordPress, без использования плагинов нам потребуется минимум знаний пхп, просто скопируйте код в нужное место.

Код для создания обратная связь WordPress без плагина

Приступим!

Открываем файл functions.php вашей темы и забрасываем туда вот такой код:

function myform_action_callback() { global $wpdb; global $mail; $nonce=$_POST["nonce"]; $rtr=""; if (!wp_verify_nonce($nonce, "myform_action-nonce"))wp_die("{"error":"Error. Spam"}"); $message=""; $to="vash_mail@сайт"; // заменить на свою почту $headers = "Content-type: text/html; charset=utf-8 \r\n"; $headers.= "From: [email protected] \r\n"; // заменить на другой ящик $subject="Сообщение с сайта ".$_SERVER["SERVER_NAME"]; do_action("plugins_loaded"); // не обязательно включать в новых ВП, возможно потребуется отключить if (!empty($_POST["name"]) && !empty($_POST["mess"]) && !empty($_POST["email"])){ $message.="Имя: ".$_POST["name"]; $message.="
E-mail: ".$_POST["email"]; $message.="
Сообщение:
".nl2br($_POST["mess"]); if(wp_mail($to, $subject, $message, $headers)){ $rtr="{"work":"Сообщение отправлено!","error":""}"; }else{ $rtr="{"error":"Ошибка сервера."}"; } }else{ $rtr="{"error":"Все поля обязательны к заполнению!"}"; } echo $rtr; exit; } add_action("wp_ajax_nopriv_myform_send_action", "myform_action_callback"); add_action("wp_ajax_myform_send_action", "myform_action_callback"); function myform_stylesheet(){ wp_enqueue_style("myform_style_templ",get_bloginfo("stylesheet_directory")."/css/styleform.css","0.1.2",true); wp_enqueue_script("myform_script_temp",get_bloginfo("stylesheet_directory")."/js/scriptform.js",array("jquery"),"0.1.2",true); wp_localize_script("myform_script_temp", "myform_Ajax", array("ajaxurl" => admin_url("admin-ajax.php"), "nonce" => wp_create_nonce("myform_action-nonce"))); } add_action("wp_enqueue_scripts", "myform_stylesheet"); function formZak() { $rty="

"; $rty.="
"; $rty.="
"; $rty.="
"; $rty.="
"; $rty.="
"; return $rty; } add_shortcode("formZak", "formZak");

В первой функции "myform_action_callback" нужно $to="vash_mail@сайт"; - заменить на свою почту. Также, возможно, у вас возникнуть проблемы со строчкой do_action("plugins_loaded"); - на новых версиях ВП можно обойтись без неё. Больше ничего менять не нужно, пример рабочий и обратная связь wordpress без плагина тестировалась на версии WP 4.2 и 4.9.1.

Следуя из этого кода, вам нужно создать в теме 2 папки: "css" и "js". Если эти директории уже присутствуют в вашей теме то создавать не нужно. Закидываем в директорию "css" файл стилей "styleform.css" - и при желании записываем туда стили формы. Я этого делать не буду, так как для работы примера стили не нужны.

В директорию "js" закидываем файл "scriptform.js" и туда записываем вот такой простой код:

function myform_ajax_send(name,email,mess){
jQuery.ajax({
type: "POST",
url: myform_Ajax.ajaxurl,
dataType:"json",
data:{
"name":jQuery(name).val(),
"email":jQuery(email).val(),
"mess":jQuery(mess).val(),
"nonce": myform_Ajax.nonce,
"action":"myform_send_action"
},
success: function (data) {
if(data.error==""){
alert(data.work);
}else{
alert(data.error);
}
},
error: function () {
alert("Ошибка соединения");
}
});
}

Не забываем закачать эти файлы к себе на сервер.

Все готово! - для того чтоб вывести форму достаточно вставить шорткод в пост или страницу своего сайта.

Если нужно вызвать форму из пхп, например в низу страницы воспользуйтесь вызовом шорткодов:

Вы можете скопировать этот код к себе на сайт и попробовать затестировать, все должно работать, я специально проверял этот пример у себя. Вот такой ответ должен прийти на почту:

Как вы поняли, вот так просто делается без плагина. Дальше я попробую немножко рассказать что значит этот код, если конечно это вам интерестно.

Описание обратной связи для wordpress без плагина

myform_action_callback() - функция для отправки сообщения с формы обратной связи вам на почту.

add_action("wp_ajax_nopriv_myform_send_action", "myform_action_callback");
add_action("wp_ajax_myform_send_action", "myform_action_callback");

подключают нашу функцию отправки к аякс запросу. Важный момент в том, что от сюда "myform_send_action" должна совпадать с вот этой строчкой в вашем яваскрипт файле: "action":"myform_send_action"

myform_stylesheet() - функция для подключения файла стилей, яваскрипта и создания переменной яваскрипт myform_Ajax, которая в себя включает myform_Ajax.ajaxurl - сылка на обработчик аякс запроса и myform_Ajax.nonce - уникальная проверка на то, что отправка формы шла именно с вашего сайта (нужна для предотвращения спама и взлома сайта).

formZak() - функция, где формируется код формы. Тут мы можем добавлять или убирать нужные поля.

Последняя строчка функций: add_shortcode("formZak", "formZak"); регистрирует шорткод, чтоб нам было удобно работать с нашей формой обратной связи для wordpress без плагина.

Решил создать маленькую табличку, чтоб структурировать файлы которые вы должны создать или в которые нужно забросить код для того, чтоб работала обратная связь wordpress без плагина. Их не много думаю сможете разобраться.

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

Скачать этот пример увы не получится, так как не могу давать в вашу тему свой файл functions.php , он банально не подойдет:(.

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

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

На самом деле обе группы вебмастеров правы, и обе не правы, одновременно. WordPress без плагина вполне возможен, но не полностью.

Рассмотрим же этот вопрос подробнее.

Зачем нужен WordPress без плагина

Каждый плагин на WordPress нагружает сервер. Таким образом, при каждой загрузке сайта, сервер хостинга получает определённую нагрузку, и эта нагрузка возрастает с увеличением количества плагинов. Нагрузка будет расти в геометрической прогрессии с увеличением посетителей, ведь каждый человек будет нагружать сервер.

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

Отсюда и возникает мысль сделать WordPress без плагинов.

Возможно ли сделать WordPress без плагинов

Большинство функций, которые воспроизводятся на сайте под WordPress, можно реализовать и без плагинов. Однако это не так-то просто, как кажется. Чтобы сделать, например, без плагина, потребуется написать нужный код, в нужное место, нужного файла. Этот код можно не сочинять, и легко найти в интернете, но ставить его в нужное место вам придётся самому. И если ошибиться, то, в лучшем случае, функция не будет работать. В худшем – работать не будет весь сайт. И тогда вам придётся восстанавливать его. Хорошо, если вы помните в какой файл и в какое его место внесли изменения. А если нет, то придётся делать это из бэкапа.

Говоря простыми словами, чтобы сделать свой WordPress без плагина, потребуются знания и опыт. А они есть не у всех. И потом, WordPress всё-таки был создан для того, что бы делать сайт на нём мог каждый, без особых знаний и опыта.

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

Нужен ли WordPress без плагинов

После сказано выше ответ очевиден – нет, не надо делать WordPress без плагина, по крайней мере полностью. На одной чаше весов нагрузка на сервер, на другой – долгие часы редактирования кода. Выбор очевиден. Тем более что если вы пользуетесь хорошим хостингом, нагрузки вы не ощутите.

Однако некоторые простые функции можно всё-таки попробовать реализовать без плагина на WordPress. Это позволит обрести бесценный опыт.

На главной странице, а так же на страницах рубрик, архивов и в результатах поисках, как правило нужна постраничная навигация (так же известная как пагинация). Блоги на WordPress не являются исключением, они так же используют пагинацию, когда результаты вывода информации разбиваются на несколько страниц.

Ранее для реализации этой возможности использовались сторонние плагины, либо специальные функции, которые размещались в файле functions.php . Однако с выходом WordPress версии 4.1 функция пагинации была встроена в ядро CMS, и теперь для реализации постраничной навигации достаточно внутренних функций WordPress и нет никакой необходимости добавлять сторонний код или плагины.

Я писал ранее о подобном улучшении со стороны WordPress в отношении тега TITLE — https://aboutwordpress.ru/post/wordpress-title/ .

Что такое пагинация

Пагинация — это разбиение информации на страницы. Также под этим понятием подразумевают порядковую нумерацию страниц, обозначаемых цифрами, располагаемыми внизу, вверху или сбоку страницы.

WP-PageNavi — плагин пагинации WordPress

Самым популярным плагином пагинации для WordPress является WP-PageNavi . По-совести говоря, он настолько хорошо справляется с поставленной задачей пагинации, что обсуждать и сравнивать остальные плагины нет никакого смысла.

Пагинация WordPress - плагин WP-PageNavi

Пагинация wordpress без плагина

Для того чтобы сделать пагинацию на сайте без плагинов мы воспользуемся встроенной WordPress функцией the_posts_pagination(). В нужном нам месте необходимо вставить следующий код (как правило это файлы index.php , category.php и им подобные):

Результатом работы функции the_posts_pagination() будет примерно такой HTML код:

Удаляем заголовок H2 из пагинации

Сразу бросается в глаза H2-заголовок «Навигация по записям». Которому в большинстве случаев не место на сайте. Чтобы от него избавиться добавим следующий код в файл functions.php :

/* Удаляем H2 из пагинации */ add_filter("navigation_markup_template", "my_navigation_template", 10, 2); function my_navigation_template($template, $class){ return "

"; }

Настраиваем страницы пагинации

По умолчанию the_posts_pagination() отображает первую и последнюю страницу, а также по одной странице вокруг текущей. Все остальные заменяются многоточием. Это поведение можно изменить с помощью аргументов:

  • show_all - показывать все страницы
  • end_size - количество страниц в начале и конце списка
  • mid_size - количество страниц слева и справа от текущей страницы

Например так:

2, "end_size" => 2,)); ?>

Стили пагинации CSS

Page-numbers { padding: 1% 2%; box-shadow: 0 0 10px #ccc; margin: 0 1% 0 0; background: #fff; border-radius: 3px; }

Выглядеть ссылки на страницы пагинации при таких стилях будут следующим образом:

В данной статье я хочу показать вам, как добавить числовую пагинацию в WordPress к вашему блогу без каких-либо плагинов.

Числовая пагинация, которую я собираюсь реализовать, используется на данном сайте (если вы перейдете в раздел блога и прокрутите в самый низ, то вы поймете, о чем я веду речь; примечание переводчика – примерно такая же реализация используется и на данном блоге, только через плагин).

Я написал этот пост, поскольку я считаю, что людям обычно трудно добавить постраничное разбиение (пагинацию) к существующему сайту.

Я регулярно сталкиваюсь с темами на форумах WordPress.org, где пользователи задают похожие вопросы: «Как мне добавить пагинацию к моей странице блога? », «Как мне добавить эти циферки в самом низу страницы, чтобы пользователи могли перемещаться по записям? » или «Как мне разбить мой блог на многочисленные страницы? »

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

Базовая пагинация с помощью двух ссылок «Следующая страница» и «Предыдущая страница» достаточно просто реализуется, о чем прекрасно написано в кодексе, однако эта навигация не является самой удобной.

Представьте себе, что пользователь пришел на ваш сайт, добрался до 8 страницы с нужной записью и ушел. Затем он вернулся обратно и решил получить тот же пост на 8 странице – для этого ему понадобится пролистать кучу страниц. Представьте себе, насколько это раздражающее действие. Это говорит о плохом юзабилити, и такого подхода желательно избегать, если вы не хотите, чтобы пользователи больше к вам не возвращались.

Базовая настройка

Произвольный запрос WP_Query

Первый – и самый важный – шаг создания пагинации заключается в корректной настройке WP_Query. Нужно убедиться в том, что запрос возвращает данные записи. Вот базовый пример выполняемого запроса:

$paged = (get_query_var("paged")) ? get_query_var("paged") : 1

$args = array(
"posts_per_page" => 6,
"paged" => $paged
);

$custom_query = new WP_Query($args);

while($custom_query->have_posts()) :
$custom_query->the_post();
?>




  • " rel="bookmark">


    Written by: /author/"> on #comments ">


      ">










Примечание: код выше используется для примера. Если вы просто скопируете его и вставите в свой файл, то все стили будут нарушены. При необходимости код можно скорректировать, чтобы он отвечал вашим требованиям. Также обратите внимание на переменную, которую мы используем для хранения нашего запроса, $custom_query, поскольку она будет использоваться, чтобы вывести на экран пагинацию для данного конкретного запроса.

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

Стили пагинации

Следующие стили помещаются непосредственно в основной файл.CSS вашей темы. Эти стили определяют способ вывода на экран пагинации вашего сайта.

/* Pagination */
.pagination {
clear:both;
position:relative;
font-size:11px; /* Pagination text size */
line-height:13px;
float:right; /* Pagination float direction */
}

Pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff; /* Pagination text color */
background: #555; /* Pagination non-active background color */
-webkit-transition: background .15s ease-in-out;
-moz-transition: background .15s ease-in-out;
-ms-transition: background .15s ease-in-out;
-o-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}

Pagination a:hover{
color:#fff;
background: #6AAC70; /* Pagination background on hover */
}

Pagination .current{
padding:6px 9px 5px 9px;
background: #6AAC70; /* Current page background */
color:#fff;
}

Функция Pagination

Код ниже – это весь код, который требуется нам для того, чтобы пагинация корректно работала. Именно здесь обрабатываются возвращенные данные запроса и формируется наша красивая пагинация. Скопируйте и вставьте этот код в ваш файл functions.php. Никаких изменений совершать не нужно:

// numbered pagination
function pagination($pages = "", $range = 4)
{
$showitems = ($range * 2)+1;

global $paged;
if(empty($paged)) $paged = 1;

if($pages == "")
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}

if(1 != $pages)
{
echo "

n";
}
}
?>

Вывод числовой пагинации в WordPress

Теперь, когда все настроено, мы можем вывести пагинацию на сайте. Добавьте следующий блок кода напрямую в свою тему или шаблон (в зависимости от того, где именно нужно вывести пагинацию).

pagination($custom_query->max_num_pages);
} ?>

Ваша пагинация в WordPress будет иметь следующий вид:

Удачи! Пишите комментарии!

Новое на сайте

>

Самое популярное