Как в WordPress изменить сортировку в рубрике

Евгений
Автор статьи: Евгений
Веб-мастер, SEO-специалист. Занимаюсь созданием и продвижением сайтов с 2012 года.
опубликовал: 136 статей

Чтобы изменить сортировку в рубрике сайта на WordPress есть несколько способов. Я для этого, обычно, редактирую файлы category.php или archive.php.

Для простоты настройки я удаляю встроенный цикл WordPress и использую WP_Query{}. Что-то типа:

<ul>
<?php
$category_posts = new WP_Query($args);
   if($category_posts->have_posts()) : 
      while($category_posts->have_posts()) : 
         $category_posts->the_post();
?>
<li class="section">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>

В качестве аргументов мы задаём параметры сортировки:

По пользовательскому полю

Допустим каждому посту назначаем приоритет от 10 до 0 и прописываем в пользовательское поле mpm_post_priority. Тогда код будет выглядеть следующим образом:

$categoryID = get_query_var('cat'); // Получаем ID текущей категории
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; //для пагинации. Также в аргументах нужна строка 'paged' => $paged 
$args = array(
		'cat' => $current_cat,
		'paged' => $paged, // для пагинации в WP_Query
		'posts_per_page' => 8,	
		'meta_key' => 'mpm_post_priority',									
		'orderby' => 'meta_value_num',		
		'order'    => 'DESC'
	);

По значениям рейтинга плагина WP-PostRatings

$categoryID = get_query_var('cat'); // Получаем ID текущей категории
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; //для пагинации. Также в аргументах нужна строка 'paged' => $paged
$args = array(
	'cat' => $categoryID,
	'paged' => $paged, // для пагинации в WP_Query
	'posts_per_page' => 8,
	'post_type'  => 'any',
	'meta_key' => 'ratings_users',
	'orderby' => 'meta_value_num',
	'order' => 'DESC'  
	
);

Здесь сортировка по значению поля ratings_users плагина WP-PostRatings, т.е. в данном случае по количеству проголосовавших пользователей (допустим 219 проголосовавших). Вверху списка в рубрике будет запись, которую оценили самое большое количество пользователей.. Можно сортировать ещё и по значению среднему значению рейтинга - ratings_average (например 4.22). Можно также по полю ratings_score.

По рейтингу и дате

Для сортировки по двум различным значениям необходимо более сложные условия. Т.е. сначала все записи сортируются по параметру meta_query  (ratings_users), а уже потом по параметру date_query отсортировывает те, которые были изменены не более 90 дней назад:

$categoryID = get_query_var('cat'); // Получаем ID текущей категории
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; //для пагинации. Также в аргументах нужна строка 'paged' => $paged
$args = array(
	'cat' => $categoryID,
	'paged' => $paged, // для пагинации в WP_Query
	'posts_per_page' => 8,
	'post_type'  => 'any',
	'orderby' => 'meta_value_num',
	'order' => 'DESC',   
	'meta_query' => array(
		array(
            'key' => 'ratings_users',            
        )
	),	
	'date_query' => array(		
		array(
			'column' => 'post_modified', // фильтруем не по дате публикации, а по дате обновления поста
			'after'  => '90 day ago',
		)
	),
);

 

Как сделать адаптивный автобаннер Admitad

Евгений
Автор статьи: Евгений
Веб-мастер, SEO-специалист. Занимаюсь созданием и продвижением сайтов с 2012 года.
опубликовал: 136 статей

В партнёрской программе Admitad есть замечательный инструмент - автобаннер, т.е. ротатор который позволяет автоматически показывать несколько баннеров разных программ. К сожалению это ротатор не адаптивный. И даже техподдержка на вопрос о адаптивном автобаннере говорит что "К сожалению, на данный момент такой возможности нет."

Пришлось самостоятельно подобрать сили CSS, которые делают адаптивным это ротатор. Итак получаем код автобаннера в панели и оборачиваем в свой блок div с классом admitad-adaptive.

<div class="admitad-adaptive">
ТУТ КОД АВТОБАННЕРА
</div>

И прописываем соответствующие стили:

admitad-adaptive {
     margin:0 auto;
}
 .admitad-adaptive div div a img {
     display: block;
     max-width: 100%;
     height: auto;
}
 .admitad-adaptive div div {
     max-width: 100% !important;
}

Теперь Ваш автобаннер будет адаптивным!

Плагин — пакет хаков для Worpress

Евгений
Автор статьи: Евгений
Веб-мастер, SEO-специалист. Занимаюсь созданием и продвижением сайтов с 2012 года.
опубликовал: 136 статей
Лучшие хаки Wordpress

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

Но всё равно такие плагины не могут в достаточной степени оптимизировать движок WP  так как хотелось бы мне. А так как сайтов на WP у меня несколько и устанавливать там приходиться одно и тоже, возникла идея собрать все хаки в одном плагине и просто устанавливать такой плагин на каждый новый сайт. Итак представляю плагин All My Hack For WP (Все мои хаки для Worpress). Что может плагин:

  • Выводит изображения миниатюр записей в админке
  • Выводит миниатюры в RSS (удобно для автопостинга в соцсети)
  • Добавляет сообщение о политике конфиденциальности в форме комментария (и убирает дефолтное)
  • Отключаем srcset и sizes для картинок в WordPress (необходимо для работы плагинов Lazy Load)
  • Автоматически заполняет поле для атрибута alt изображения на основе заголовка при его загрузке вставке в контент поста.
  • Убираем значок wordpress и ссылку WP.org в верхнем баре админки

 

Скачать [версия 0.0.2]

 

 

Оптимизация сайта на WordPress для Google PageSpeed. Как нужно выполнять рекомендации сервисов?

Евгений
Автор статьи: Евгений
Веб-мастер, SEO-специалист. Занимаюсь созданием и продвижением сайтов с 2012 года.
опубликовал: 136 статей
Оптимизация сайта на WordPress для Google PageSpeed

В последнее время все помешались на ускорении сайтов и подгонке их под требования PageSpeed Insights. Особенно это актуально для WordPress, где сам движок и плагины создают множество проблем при загрузке. Я тоже занялся этим вопросом и вот моё мнение. В погоне за "зелёненькими" цифрами оптимизаторы забывают про элементарную логику. Есть цифры в сервисах тестирования, а есть реальная скорость загрузки сайта, измеряющаяся в секундах. Поэтому для тестирования сайта и оптимизации я смотрю три сервиса:

  1. Google PageSpeed (смотрим собственно цифры)
  2. GTmetrix (сайт 5 в 1, собраны все метрики в удобном виде)
  3. PingDom Tools (можно выбрать разные сервера для тестирования, показывает реальную скорость загрузки в секундах)

 

Что сделать для оптимизации WP?

Отключите граватары, Identicon или другие аватарки комментаторов

Проходим в Настройки - Обсуждение и отключаем аватарки полностью. У меня они давали плюс 2-3 секунды загрузки. Если же они Вам очень нужны, то ставим простую аватарку по-умолчанию. Это даст плюс 2-5 баллов. Если конечно у Вас есть комментарии на сайте.

Аватар по-умолчанию

Чтобы выставить пользовательский аватар для Администратора, можно установить плагин WP User Avatar, и загрузить необходимую картинку. Тогда она будет кешироваться плюс Вы не зависите от скорости загрузки со стороннего сервера.

Уберите или кешируйте скрипты Google Analitics или Яндекс.Метрики

Задайте правила эффективного использования кеша для статических объектов

Например сервис часто требует, чтобы Вы осуществляли кеширования Google Analitics. Я сравнивал. Если убрать аналитику скорость загрузки уменьшается на 1,7 с! А это немало. Т.е. проще совсем убрать аналитику от Google. Тоже самое касается Яндекс.Метрики.

Но если Вы хотите выполнить это требование, то самый просто способ это сделать - использовать плагины, которые сохраняют analitics.js локально у Вас на сервере, и автоматически обновляют:

  • Webcraftic Clearfy
  •  CAOS | Host Google Analytics Locally

А за кеширование этих файлов будет отвечать любой установленный у Вас плагин: WP Fastest Cache, W3 Total Cache и т.д. Это позволит сэкономить 0,5-0,6 с и получить несколько баллов.

Убираем поиск по сайту от Google или Яндекс

Сторонний поиск по сайту от Google или Яндекс конечно лучше, чем дефолтный WordPress, но это опять сторонние скрипты, которые задерживают загрузку страницы. Лучше оставить "родной" поиск, но расширить его с помощью плагина Relevanssi – A Better Search  или похожего. Можете даже попробовать реализовать отложенную загрузку, аналогично предыдущему пункту.

Оптимизация загрузки блоков Google Adsense или РСЯ

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

Но если у Вас есть блоки в конце статьи, то можно и нужно отложить их загрузку. Всё равно пользователь не скоро доскроллит до них и они могу загружаться уже после формирования страницы.. Сделать это можно несколькими способами. Самый простой - скрипт:

<div id="delayload">Загружается....</div>

<script> 
setTimeout(function(){  
  $.get("ads1.php", function(data) {
    $('#delayload').replaceWith($(data));
})
 },2280);
</script>

Блок с id "delayload" вставить там, где должна выводиться реклама.

Скрипт можно расположить там же, или в футере - это не важно. В папке с Вашей темой расположить файл ads1.php (кодировка UTF-8 без BOM) в который вставить код рекламы.

Важно! Значение 2280 в скрипте - это задержка в миллисекундах после которой начнёт загружаться реклама. Если у Вас страница "тяжёлая", то возможно придётся увеличить это значение до 4000 мс.

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

Загружаем шрифты со свойством font-display:swap

Для того чтобы решить проблему:

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

Нужно добавить следующее свойство:

font-display:swap;

Обычно бывает проблемно найти где именно происходит подключение шрифта. У меня это было в файле font-awesome.min.css, который подключался в function.php. Отредактировал таким образом:

Настройте показ всего текста во время загрузки веб-шрифтов

Это даёт всего +1 балл и 0,1-0,3 сек прироста скорости загрузки.

Загрузка изображений с помощью Lazy load

Многие плагины WordPress для Lazy load работают откровенно плохо. Многие не учитывают атрибуты  srcset и sizes, которые к изображениям добавляются автоматически. Поэтому после включения плагина сайт "плывёт". Могу посоветовать плагин lazysizes. Он корректно работает с этими атрибутами и там можно настроить исключения.

Самое главное - Lazy load нужно отключить для тех изображений, которые видны на первом экране. Обычно это картинки в шапке и превью статьи. Для этого добавляем классы этих изображений в исключения. Пример настроек (исключены классы nolazyload и post_thumbnail):

Настройка Lazy load для WordPress

 

Устраните ресурсы, блокирующие отображение

Обычно это файлы стилей и скриптов, генерируемые темой и плагинами, которые загружаются в header. И если с объединением внутренних файлов и скриптов и переносом в footer прекрасно справляется плагин типа Autooptimaze, то с внешними скриптами всегда будут проблемы:

Устраните ресурсы, блокирующие отображение - jquery

В данном случае PageSpeed требует чтобы мы устранили проблему с JQuery и даже говорит что так мы сэкономим 270 мс. Логичным было бы сохранить этот файл у себя на сервере в подпапке и подгружать локально. Сделать это несложно, но только (неожиданно) это вообще никак может не ускорить загрузку. Потому что файл этот всё равно должен загрузиться, а сервера Google могут оказаться более скоростными чем Ваш собственный shared hosting.

В моём случае сайт был расположен на серверах в USA и прирост всё-таки был. В итоге показатели Page Speed растут с 68/88 до 74/95, а по PingDom Tools время загрузки (Load time) улучшилось на 61 мс: с 1.04 с до 979 мс. Это конечно не 270 мс, но тоже неплохо.

Итак применяя 2 несложных приёма: сохранение у себя на сервере и кеширование Google Analitics и JQuery, мы легко добиваемся "зелёных" цифр для компьютеров. С мобильными уже всё обстоит немного иначе.

Оптимизация под мобильные устройства

Рассмотрим оптимизацию страницы блога типичного сеошника.

Оптимизация загрузки в Page speed

Как видим цифры красненькие. Но для данного блога сеотрафик неважен. У него основной трафик реферальный.

Однако, если задаться целью и начать оптимизацию, то Page Speed сам нам подсказывает, что нужно оптимизировать. Выделил на скриншоте первый экран. Именно эти элементы надо оптимизировать в первую очередь, чтобы получить "зелёненькие" цифры. Самый простой способ - убрать баннер в заголовке. Всё что находится ниже первого экрана - а там могут быть виде, картинки и прочее -намного меньше влияют на показатели. Ими можно заняться в последнюю очередь.

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

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

 

 

Буду информировать Вас о том что можно сделать в этом направлении.

Кавычки в заголовках статей: как ставить правильно

Евгений
Автор статьи: Евгений
Веб-мастер, SEO-специалист. Занимаюсь созданием и продвижением сайтов с 2012 года.
опубликовал: 136 статей

Раньше не задавался вопросом какие кавычки в заголовках статей на сайте можно ставить. Просто ставил любые. В итоге в некоторых были двойные кавычки  " ", а в других были ёлочки « ». Вы сами можете просмотреть как отображаются Title Вашего сайта через оператор site:site.ru. Вот и я проверил. И что мы видим:

А теперь смотрим как выглядят сниппеты если кавычки вида "":

Заголовок с кавычками

Вывод из этого простой: Кавычки-ёлочки в Google обрезают отображаемый заголовок, поэтому предпочтительно ставить обычные двойные кавычки "". Что я и сделал - массово поменял все.