Компьютерная грамотность

Вордпресс без плагинов. Внутренняя оптимизация: 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 простую контактную форму без плагинов.

Казалось бы ну зачем мучиться, если можно поставить самый обыкновенный плагин, который сам создаёт эту контактную форму:-) Например плагин Contact Form 7. Да, не спорю, отличный плагин, собственно он и у меня стоял. И Вы наверное спросите, зачем же я его убрал? А всё потому что он, оказывается, сильно грузит сервер (хостинг), таким образом и весь сайт не быстро загружается. Я честно не знаю почему из за него возникает нагрузка, но факт остаётся фактом.

Форма контактной связи для WordPress без плагинов

И так, теперь давайте начинать.

contact.php

Чтобы Вам было понятнее нам нужно создать файл contact.php . Для начала создайте обычный текстовый документ на рабочем столе. Создали? Ок:-) Теперь нужно зайти в админку Вашего блога в внешний вид, затем в редактор и выбрать шаблон страницы (page.php).

Теперь Вам нужно немного отредактировать тот код который находится в текстовом документе. Нужно найти вот эту строчку: и вместо её вставить Вот этот код:

/sendmail.php" method="post">

Это сама наша контактная форма, которая будет отображаться на странице.

Теперь посмотрите, что у меня получилось с новым contact.php:

< ?php /* Template Name: Contact */ ?> < ?php get_header(); ?>

< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>

< ?php the_title(); ?>

/sendmail.php" method="post">

< ?php endwhile; else: ?>

< ?php _e("Sorry, no posts matched your criteria."); ?>

< ?php endif; ?>
< ?php get_sidebar(); ?> < ?php get_footer(); ?>

Вставили код? Поздравляю. Теперь ещё раз сохраняемся и переименовываем текстовый документ на contact.php.

sendmail.php

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

Сейчас нужно опять создать текстовый документ и затем вставить в него вот этот код:

< ?php if (isset($_POST["name"])) {$name = $_POST["name"];} if (isset($_POST["email"])) {$email = $_POST["email"];} if (isset($_POST["sub"])) {$sub = $_POST["sub"];} if (isset($_POST["body"])) {$body = $_POST["body"];} $address = "[email protected]"; $mes = "Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body"; $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email"); if ($send == "true") { echo "Спасибо, Ваше сообщение отправлено"; } else { echo "Сообщение не отправлено! Что то не так.."; } ?>

Данный код будет отправлять сообщения на Ваш почтовый ящик, главное не забудьте в строке $address = «[email protected]»; вставить Ваш почтовый ящик.

Не забываем переименовать наш текстовый документ на sendmail.php

Установка

После вышеперечисленных действий у нас получились 2 файла, это sendmail.php и contact.php. А вот теперь нам нужно их скинуть в папку с шаблонов блога WordPress. Это можно сделать через Ваш хостинг аккаунт или через файловый менеджер через ftp, как Вам будет удобно.

Подробнее заходим в корневую папку хостинга, далее в wp-content, затем в themes, ищем название нашего шаблона, открываем и скидываем туда файлы формы.

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

Тут как обычно вводим заголовок, например «Контакты». Теперь переводим глаза в правую сторону монитора и ищим блок под названием «Атрибуты страницы»

И в поле «Шаблон» выбираем Contact.

Мы зададим ей простые стили CSS, чтобы немного преобразовать её.

CSS

Чтобы контактная форма стала красивее, скопируйте вот этот код в стили Вашего шаблона:

/* Контактная форма */ #contact label { display:block; padding:5px 0; } #contact input, #contact textarea { border:1px solid #ddd; padding:8px; width:300px; margin-bottom:10px; -moz-border-radius:4px; -webkit-border-radius:4px; } #contact textarea { width:560px; font-family:Arial, Helvetica, sans-serif; font-size:13px; } #contact input.submit{ border:none; width:160px; margin-top:10px; cursor:pointer; color:#333; border-radius:5px; border-bottom:2px solid #ccc; font-size:13px; color:#777; background: #ebebeb; margin:3px; padding:5px 5px 7px; -moz-transition: all 0.2s 0.01s ease-in; -o-transition: all 0.2s 0.01s ease-in; -webkit-transition: all 0.2s 0.01s ease-in; } #contact input.submit:hover{ color:#fff; background-color:#FF6766; border-bottom:2px solid #999; }

Вот и всё. Чтобы посмотреть наглядный пример, Вы можете зайти на мою .

Друзья, хочется сказать, что это самый простой вариант контактной формы для блогов 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. Напомню, что с целью настройки и ускорения индексации сайта необходимо для поисковых ботов.

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

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

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

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

Простой вариант sitemap в формате HTML

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

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

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

После того, как вы тем или иным способом получите доступ к удаленному серверу, где "живет" веб-сайт, с помощью блокнота-редактора Notepad++ откройте файл page.php вашей темы (этот шаблон обычно отвечает за вывод стандартной статической страницы блога Вордпресс). Ежели на вашем хостинге единственный сайт, то этот файл, скорее всего, можно найти следуя по пути:

«public_html» - «имя домена» - «wp-content» - «themes» - «название темы» - «page.php»

На его основе мы и будем делать нашу карту сайта WordPress. Прежде всего, вам нужно создать новый файлик в корневой папке темы, воспользовавшись тем же Нотепадом, и придумать для него подходящее название, которое бы в дальнейшем подсказало вам цель его создания, если вы вдруг ее запамятуете. Назвать свежеиспеченный объект можно, скажем, map.php.

Итак, после описанных действий оба файла будут находится на соседних вкладках Notepad++. В теме моего блога содержание page.php выглядит так (к сожалению, невозможно предоставить универсальный вариант на все случаи жизни, поскольку темы у всех разные):

>

Далее нужно скопировать содержание page.php и вставить его в map.php, после чего изменить последний соответствующим образом. Каким образом это сделать, мы сейчас и разберем на примере создания sitemap по выше представленному образцу. Имейте ввиду, что содержание вашего файлика page.php может различаться с вариантом, предложенным мною.

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

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

Рассматриваем далее наш пример. Оставляем те строчки, которые определяют основную HTML-разметку странички и будем менять только содержимое, находящееся между открывающим и закрывающим тегом article (16 - 19 строки). Первым делом обратите внимание на начало (16) и конец (19) цикла, которые определяют вид выводимого контента.

Мы их удалять не будем, поскольку для отображения ссылок на материалы, нужных нам, также работает циклическая функция. В данном случае внутри цикла находятся две строки (17 и 18):

Функцию вывода комментариев («comments_template») удаляем сразу, ведь это лишний контент для карты. А вот в отношении строки 17 («get_template_part») необходимо сделать пояснение, чтобы все было понятно. Дело в том, что во многих современных темах WordPress различные веб-страницы, в том числе статические, могут формироваться с помощью нескольких шаблонов.

Этот случай не исключение. Строка 17 как раз и содержит код вызова добавочного шаблона content-page.php , отвечающего за отображение некоторых составляющих страницы, в число которых входит и функция вывода заголовка, который вы прописываете в редакторе админки. Обычно она заключена в соответствующий тег:

Но ведь такая конструкция предназначена для автоматического формирования заглавия любой странички, которую вы создаете на своем блоге. В нашем случае мы пытаемся создать особый шаблон, где заголовок будет постоянным. Посему можно просто прописать его в формате HTML над строкой начала цикла (одновременно удалив «get_template_part»):

Итак, мы удалили содержимое цикла, выводящее контент обычной статической вебстраницы, но его надо чем-то заменить, иначе HTML-карта будет пуста. Так как содержание sitemap отличается наличием множества ссылок, которые ведут на посты блога, то вместо строк 17 и 18 вставляем код, который будет выводить эти самые линки на статьи:

">

Но это еще не все. Чтобы обеспечить возможность отображения материалов в виде вертикального списка, задать и красиво оформить все это дело через присвоение свойств классам и идентификаторам, заключим все пространство вывода ссылок в контейнер, определяемый :

>

Карта сайта

  • ">

Стиль оформления вывода ссылок будет применен по тем свойствам, которые прописаны для селекторов ul и li вашей текущей темы в файле style.css. Если по каким-то причинам вас не устроит такой вид, то существует возможность заключить весь контент в и определить для него какой нибудь класс, например class="html_sitemap":

>

Карта сайта

  • ">

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

Вот теперь у нас готов простенький шаблон карты сайта для посетителей :

>

Карта сайта

  • ">

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

Далее из выпадающего меню «Шаблон» выбираем нужный вариант (в нашем примере «Карта»). Теперь файл map.php связан со страницей и WordPress будет знать, к какому шаблону следует обращаться для ее отображения в браузере:

Вот теперь все. На всякий случай даю набор свойств CSS для sitemap, возможно, они и подойдут:

Html_sitemap H1 {font-size:20px; margin-bottom:25px} .html_sitemap ul {list-style-type: circle; line-height: 1.5} .html_sitemap li a:hover {color:#fea02d} .html_sitemap li a {color: #984802; font-weight: bold; text-decoration:none}

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

Как создать полную HTML карту сайта для Вордпресс

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

Я когда-то находился в подобной ситуации и смотрел на php-файлы как баран на новые ворота. Но постепенно научился различать те или иные функции, отвечающие за определенные области применения. В этом очень помог и до сих пор помогает Codex WordPress . Я даже склоняюсь к мысли выделить отдельную рубрику на блоге для изучения основ PHP, поскольку начинающие вебмастера часто встречаются с серьезными трудностями при редактировании файлов темы.

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

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


Для начала откроем его в том же редакторе Нотепад плюс плюс (с этой целью подведите курсор к function.php, нажатием правой кнопки мышки вызовите контекстное меню и выберите из него «Просмотр/Правка»). Далее вставьте в него вот такой фрагмент:

Function sp_html_sitemap() { $category = true; // true - отображать блок с постами, false - нет $categoryExclude = ""; // ID категорий через запятую, которые надо исключить $categoryEmpty = true; // true - не показывать пустые категории, false - показывать $page = false; // true - отображать блок со страницами, false - нет $pageExclude = ""; // ID страниц через запятую, которые надо исключить $author = false; // true - показывать блок с авторами, false - нет $authorExcludeAdmin = false; // true - исключить пользователя с логином admin, false - нет $result = "

"; if ($page) { $result .= "

Страницы

    "; $result .= wp_list_pages(array("exclude" => $pageExclude, "title_li" => "", "echo" => false,)); $result .= "
"; } if ($category) { $cats = get_categories(array("orderby" => "name", "hierarchical" => false, "exclude" => $categoryExclude, "hide_empty" => $categoryEmpty,)); $result .= ""; foreach ($cats as $category) { $result .= "
  • cat_ID)."">".$category->name.""; $result .= "
      "; query_posts(array("cat" => $category->cat_ID,"showposts"=>1000)); while (have_posts()) { the_post(); $cat = get_the_category(); if ($cat->cat_ID == $category->cat_ID) { $result .= "
    • "; $result .= "".get_the_title().""; $result .= ($categoryDate)?" (".get_the_time("d.m.Y").")":""; $result .= "
    • "; } } $result .= "
  • "; } $result .= ""; } $result .= "
    "; wp_reset_query(); echo $result; }

    Преимущество HTML sitemap, реализованного при содействии замечательного файла function.php состоит в том, что мы получаем гибкий вариант. Гибкость его заключается в том, что вы можете в будущем настроить все по своему желанию. Самые верхние строчки и позволяют внести нужные изменения даже без базовых знаний языка PHP (комментарии, выделенные зеленым, по-моему, достаточно информативны и подскажут вам, что и как надо указать в том или ином случае).

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

    $categoryExclude = ""; $pageExclude = "2794, 4366, 12910";

    Скажем, логично будет исключить саму страницу «Карта», вебстраницу поиска на сайте (от Google или Yandex), чтобы читатели не любовались на пустое место в недоумении. Если такие странички отсутствуют, то оставьте все как есть.

    Заключаем ее вместе с заголовком в контейнер div с классом для возможности настройки стилей, в итоге получаем следующий код:

    >

    Карта сайта

    Ну и пример стилей CSS для полной карты вы также можете использовать:

    Smap h1 {font-size:20px; margin-bottom:25px} .html_sitemap ul li{list-style-type:circle; margin-left:25px; line-height:1.3; margin-bottom:5px} .html_sitemap li ul{margin:10px 0 20px 10px} .html_sitemap li a{color:#984802; font-weight:bold} .html_sitemap li ul a{font-weight:normal} .html_sitemap li a:hover{color:#fea02d}

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

    Желаете получать своевременно свежие актуальные и полезные статьи? Тогда можете подписаться:

    Еще статьи по данной теме:

    73 отзыва

    1. Ольга

      Спасибо за информащию! А как поставить кнопки сощ.сетей сбоку страницы сайта-как у вас?

    2. Алексей

      Заинтриговал... Изучать начал html и css. Теперь с помощью вашего поста доберусь и до карты. Раз карта можно сделать без плагина - сделаю. Так, что статья в тему

    3. Саня

      Очень кстати Ваша статейка. Установил тему, в которой предусмотрен файл карты сайта. Но я, как и Вы, тоже пытаюсь дорыться "до руды". После неоднократного редактирования темы карта сайта стала показывать кол-во статей, равное настройкам отображения статей на блоге (в админке).
      Долго ковырял, потом решил заглянуть на "умные блоги" (Ваш - первый в списке), и, о чудо, Ваша последняя статья именно об этом.
      Огромное СПАСИБО, теперь моя карта сайта приобрела нужную форму.

    4. Игорь

      Ольга, я отправил Вам на e-mail письмо со ссылкой. Хотя в скором времени я начну публикации о кнопках соц.сетей и там тоже собираюсь описать этот сервис.

    5. Игорь

      Хорошо, Алексей. Задавайте вопросы, если что-то непонятно.

    6. Игорь

      Спасибо, Саня, за качественные комментарии, которыми Вы наградили блог Goldbusinessnet. Я очень рад, что Вы нашли именно то, что искали. Честно говоря, это добавляет запала для продолжения выбранного направления.

    7. Василий

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

    8. Юрий

      Статья полезная и нужная! Я как раз избавляюсь от лишних плагинов. Теперь знаю, как избавиться еще от одного плагина.

    9. Ольга

      Да, очень интересно.
      У меня пока работает Dagon Design Sitemap Generator. Отлично, кстати, работает (не в пример некоторым плагинам). Но постепенно заменяю их кодами в шаблоне.
      Страшновато, конечно, ковыряться в кодах, получается не с первого раза. Чаще всего блог "слетает". Но надо. Скорость загрузки блога- показатель приоритетный.

    10. Игорь

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

    11. Игорь

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

    12. Ruson

      Здравствуйте Игорь, я так понял это не sitemap.xml имеется ли вариант создания карты.xml без плагинов?
      Cgfcb,j

    13. Игорь

      Нет, Ruson, это обычная карта. Версия xml более сложная, пока ее не выкладываю, потому что сам пока пользуюсь плагином.

    14. Ruson

      Ок спасибо Игорь.

    15. svargan

      Приветствую вас Игорь! Давненько не общались у меня сайдбар вниз слетает может, что с дивами не то. Есть ли возможность решить эту задачу?
      С ув. Дмитрий

    16. svargan

      Так решил задачу - див просто не там где нужно закрыл, забыл сайдбар в него включить, оно и понятно, что он вниз улетел после основного блока. Благодарю за информацию у меня минус еще один плагин и того из активный осталось 8) Кстати я all seo pack на обном блоге заменил php кодом при добавлении постов произвольными полями пользуюсь в них и задаю мета теги, тестирую время покажет.

    17. Игорь

      Приветствую, svargan. Рад снова пообщаться. All in One Seo Pack, безусловно, можно заменить кодом, как, в принципе, и все плагины. Но просто для SEO он реализует много функций, я придерживаюсь и в этом вопросе правила золотой середины, используя только те плагины, которые не несут большую нагрузку с одной стороны, и реализуют множество опций с другой. Хотя почему бы не протестировать, нам, вебмастерам, приходится это делать постоянно.

    18. svargan

      Я так же пользовался плагином platunum seo pack, в нем немного больше наворотов чем all seo, ну тут на любителя как говорится. Я еще хочу все категории и метки мета тэгами всеми упаковать (заголовки, описания и ключи), тоже тест провести интересно как раздача в посковиках будет на такие цацки. Игорь всегда рад пообщаться, до связи.

    19. Игорь

      Platinum у меня тоже стоял, однако он давно не обновлялся, поэтому я и перешел на All in One.

    20. svargan

      У меня еще вопрос. Игорь может вы в курсе возможно ли поменять плагин Ozh" Better Feed на код?

    21. Игорь

      Честно говоря, не слышал о таком плагине.

    22. svargan

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

    23. Игорь

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

    24. Alexander

      Здравствуйте. Воспользовался Вашей статьей для создания карты сайта, спасибо. Правда есть одна проблемка. Я пробовал применить эту карту на своем блоге на денвере - все получилось, попробовал применить на действующем блоге (адрес которого я указал в соответствующем поле) со стандартной темой вордпресса: все тоже самое только вот почему-о не отображаются русские символы в заголовках заключенных в теги h3. Может вы знаете в чем причина?

    25. Alexander

      Уже разобрался:) Я вставил Ваш код с 1-5 и с 11-50 строки (из последнего скриншота)в контейнер, который выводит контент в моей теме, и все:)

    26. Игорь

      Александр, значит все ОК и моя помощь не нужна?

    27. Alexander

      Да все ОК:) Ваша статья мне помогла, спасибо. Правда, как видите, в моем блога на странице "Карта сайта" перед рубриками стоят точки, обозначающие список, так вот мне бы хотелось чтобы они только перед постами стояли, вчера так и не нашел как это сделать, если подскажите как - буду признателен, если нет - мне и так сойдет:)

    28. Игорь

      Alexander, прежде всего, пропишите дополнительное правило стилей в файл style.css:

      Karta {list-style-type:none;}

        Все, значки списка напротив категорий и страниц должны исчезнуть. Отпишитесь потом, как все прошло.

      • Alexander

        Все верно! Спасибо за помощь:)

      • Anton

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

      • Роман Рей

        А если нет page.php? Тема Eino

      • Игорь

        Роман, если нет файла page.php, то следующим шаблоном, к которой обратится WordPress, будет index.php. Этот шаблон должен быть обязательно, делайте на его основе.

      • Роман Рей

        Понятно, спасибо. Будем через Индекс работать

      • Роман Рей

        Кстати Вы сейчас какую карту сами используете? На основе плагина, или ту что представлена в описании?

      • Игорь

        Ту, что представлена в описании.

      • Виктор

        Здравствуйте! Сделал карту сайта как у Вас написано. Все работает, но только почему-то у каждой категории выводится только по 5-ть последних постов, а мне нужно чтобы в карте сайта выводились все посты. Как мне это реализовать? Заранее спасибо.

      • Игорь

        Виктор, вообще-то, если Вы точно следовали моим инструкциям, такого быть не должно. Значит, где-то в function.php темы стоит ограничение на вывод количества постов. Конкретнее сказать, к сожалению, не берусь, ведь темы у всех разные.

      • я
      • Игорь

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

      • Игорь

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

      • Игорь Горнов

        Тезка, попробуйте таким образом. Найдите в коде полной карты сайта строку:

        Echo "

      • "."\n"."Рубрика: ".$cat->cat_name.""."\n";

        .$cat->cat_name.

        Вставьте:

        cat_ID)."">".$cat->cat_name."

        Вся строчка получится такого вида:

        Echo "

      • "."\n"."Рубрика: "cat_ID)."">".$cat->cat_name."""."\n";

      • Игорь
      • Игорь Горнов

        Странно... Игорь, а Вы корректно все сделали? А название рубрики правильно отображается?

      • Игорь

    Лучшие статьи по теме