Редизайн, аякс и ребрендинг – продолжаем мутировать из блога в журнал
05.11.2019“я на твоём блоге в интерфейсе подзапуталась(”
Следующий апгрейд планировался на лето 2020, но невинная фраза из эпиграфа заставила сдвинуть сроки на пол-годика влево. Медитирование над дизайном выявило, что главная страница выглядит не совсем логично из-за переменного количества колонок с однотипным оформлением. Ну а дальше одно за другое… По сравнению с предыдущим апгрейдом от 2018 работы оказалось мало-мало – денька три неторопливого ковыряния под настроение.
Тема оформления
Задача выглядела вроде бы просто: выделить верхний блок с новыми постами поярче. На практике подкрашивание вышло не очень, другого дизайна бесплатная версия темы не предлагает (можно использовать сторонние решения, но не хочется ловить проблемы с сопряжением всего зоопарка), поэтому принято волевое решение заменить. Но совсем радикализма не хотелось, поэтому на родственную тему от этого же разработчика: было ColorMag, стало ColorNews. Отличий внешне не сказать что много (в современном минималистичном оформлении вообще с отличиями туго))), для меня критичным был слайдер для верхнего блока, но не абы какой, а обязательно с миниатюрами.
Если делать труЪ, то надо делать с нуля свой шаблон со всеми потребными свистоперделками… моей квалификации на это хватает, это даже не столько сложно, сколько муторно. Однако, во-первых дизайн и вёрстка это не моя основная специализация, во-вторых при наличии огромного количества бесплатных или дешёвых готовых шаблонов практический смысл не просматривается. Возможно я займусь этим, если начну более-менее массово клепать сайты на вордпрессе.
Сайдбар
Кроме смены темы, пересмотрена концепция сайдбара – он вернулся на все страницы блога, причём в двух вариантах: везде кроме главной есть виджет с новыми постами.
Поскольку коммунизм так и не наступил, то в сайдбаре первый виджет рекламит мои услуги по разработке сайтов. Ну а шо, просто хочется ЖРАТ и не макарошки. Технически потребовалось выключить виджет на странице куда он ведёт.
Логика показа виджетов сделана при помощи плагина Widget logic, на морду условие !is_home(), на рекламу !is_page('website-development') ещё мне захотелось странного – кастомной админской менюшки взамен отключенного сайдбара сверху, сделал через условие current_user_can('level_10').
Вернулось облако тегов выкинутое где-то в районе 2014… ностальгия, да. Виджет от плагина Simple tags. Осталось не забывать корректно ставить теги)))
Из подвала вбок переехали твиттер и инстаграм, это во многом связано с внедрением ajax – до подвала можно и не добраться. А вниз уехали всякие контакты, рекламко и пузомерки.
Шрифты
Чот взгрустнулось и я решил поиграться: воткнул на заголовки шрифт Philosopher – весьма себе противоположный основному шрифту текста Exo 2. Оба два через google fonts.
Логотип и лёгкий ребрендинг
Phantom Falcon обзавёлся текстовой частью. Важным (нет) новшеством стала смена девиза с “Мир, как я его вижу…” на “Журнал обо всём”. Причина очевидна и банальна – статьи на блоге стали куда более тяжеловесными, исчезли сиськи-письки, зато появилась развёрнутая аналитика. Структура переделана в журнальную ещё при прошлом рефакторинге. Ну и вот…
Шапка
На старом шаблоне красивые картинки в шапке на мобилах я просто попрятал через display: none;, чтобы сэкономить место. В этот раз сделал как на grushinka.ru – логотип, название и девиз наложил сверху. Попробовав разные варианты, включая всякую экзотику, остановился на прямоугольной разноцветной подложке в стиле дизайна темы, ключевые вехи творческого поиска выглядели так:
Всего в шапке аж десять разных картинок выводящихся рандомно при каждом переходе на новую страницу. В будущем возможно увеличу, а может быть сокращу, а может изменю, а может быть ворона, а может быть корова, а может это страус злой!:)
favicon.ico
Иконка сайта, которая давно уже не ico размером 16x16px, а png размером 512x512px и файл может обзываться как угодно. Обновил, под общий стиль, правда результат мне всё равно не нравится – логотип с обилием мелких элементов фигово масштабируется и выглядит чёрной кляксой на владках. Решается новым лого, но старому больше двух десятков лет (больше половины моей жизни) и такой ребрендинг это слишком!
Если немного покопаться, то можно узнать что проблема имеет менее радикальное и более правильное решение: стандарты позволяют объявить разные файлы для разных разрешений. Белый и пушистый подкрался откуда не ждали… разные браузеры под разными платформами хотят разного, по беглым прикидкам получается десятка два-три иконок. Пока что обошёлся плагином Favicon от RealFaviconGenerator, который хотя бы корректно сгенерил одну под все хотелки. Плотно займусь вопросом в следующий раз.
Галереи
После применения хака на размер миниатюр (скопипащено с прошлой темы) пришлось немного подшаманить: внезапно выяснилось, что вёрстка выполнена на float, из-за чего текст норовил отформатироваться сбоку от последней неполной строки… непорядок! Решается заменой на flex:
.gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
width: 100%;
}
.gallery .gallery-item {
flex: 1 1 auto;
}
.gallery .gallery-item .gallery-caption {
font-size: 90%;
}
Языки и переводы
Тема оказалась нерусской, в смысле без перевода, поэтому пришлось доставить плагин Loco Translate и немного самому. Разумеется не везде, а лишь там где бросается в глаза обычным читателям.
Под нож пошёл плагин GTranslate, который средствами гугла переводил на всякие языки. Фишка прикольная, но места в обновлённой шапке не нашлось, а в сайдбаре он при мобильном просмотре уезжает куда-то в середину страницы…
AJAX
Смысл
Это такая технология, при помощи которой контент загружается без перезагрузки страницы. Необходимость давно назрела и перезрела, потому что молодое поколение пользователей интернета воспринимает такое поведение интерфейса как должное, а обычные сайты как устаревшие. Не нюхали они диалапа!
Реализация
Прикручено при помощи плагина Ajax Load More и дочерней темы (подробности о том что это такое и с чем это едят читайте в codex wordpress). Искаропки плагин позволяет при помощи шорткода с хреновой тучей параметров вывести материалы в существующих постах/страницах/етц. Чтобы вывести как надо придётся использовать функцию do_shortcode ([bla-bla]); предварительно разобравшись с внутренним устройством темы оформления. POEHALI!
А унутре у ей неонка
Для начала нужно научить плагин отображать посты так как это задумано в шаблоне. В ColorNews за вывод постов отвечает следующий кусок кода из файла archive.php:
<?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php /* * Include the Post-Format-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ get_template_part( 'template-parts/content', get_post_format() ); ?> <?php endwhile; ?>
Разработчики темы здесь нам очень помогли – вынесли оформление вывода постов в отдельный файл, поэтому значима только строка get_template_part( 'template-parts/content', get_post_format() ); – которую нужно засунуть в раздел Ajax Load More: Repeater Templates.
Shortcode
Далее нам нужно сформировать шорткод, который будет делать то что нам хочется. Простейший вариант [аjax_load_more] выведет последние десять постов и при прокрутке будет подгружать более старые. Мне же захотелось реализовать следующую логику и функционал:
- первые десять постов грузятся стандартно через php, а не через ajax;
- загрузка идёт по нажатию, а не автоматически;
- вывод прогресса загрузки;
- отображение счётчика всего/загруженных.
Кроме последнего пункта всё натыкивается в разделе Ajax Load More: Shortcode Builder – все хотелки удалось реализовать. Счётчик количества постов пришлось делать средствами функций движка, он же использован в условии отображения кнопки, чтобы не выводить когда нечего подгружать. Счётчик отображённых постов требует знания явы, с которой у меня чот неоч.
category.php
Шаблон отвечающий за вывод рубрик, в теме отсутствует, надо создать из archive.php и подправить. Значимая часть кода:
$cat = get_category( get_query_var( 'cat' ) );
$cat_count = $cat->category_count;
if ($cat_count>10) {
$cat_slug = $cat->slug;
echo do_shortcode('[аjax_load_more id="2822953644" loading_style="grey" post_type="post" posts_per_page="10" category="'.$cat_slug.'" offset="10" pause="true" scroll="false" progress_bar="true" progress_bar_color="aa0000" button_label="Загрузить ещё" button_loading_label="Загрузка..."]');
};
echo ("Всего постов в рубрике: ".$cat_count);
tag.php
Шаблон отвечающий за метки, аналогично предыдущему. Значимая часть кода:
$tag = get_queried_object();
$tag_count = $tag->count;
if ($tag_count>10) {
$tag_slug = $tag->slug;
echo do_shortcode('[аjax_load_more id="3425591871" loading_style="grey" post_type="post" posts_per_page="10" tag="'.$tag_slug.'" offset="10" pause="true" scroll="false" progress_bar="true" progress_bar_color="aa0000" button_label="Загрузить ещё" button_loading_label="Загрузка..."]');
};
echo ("Всего постов с тегом: ".$tag_count);
search.php
Тут мне пришла пора обломаться, потому что для поиска идёт отдельный шаблон вывода с подсветкой искомого, а плагин нахаляву даёт возможность использовать только один шаблон… Ну и ладно, ну и не очень то и хотелось, ограничился выводом количества результатов в заголовке:
<h1 class="page-title"><?php printf( esc_html__( 'Найдено '.$wp_query->found_posts.' cо строкой: %s', 'colornews' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
и ещё сделал вывод 20 записей вместо 10 добавив в function.php:
function custom_posts_per_page($query){
if(is_search()){
$query->set('posts_per_page',20);
}
}
add_action('pre_get_posts','custom_posts_per_page');
Прочее
Суммарно допилы по CSS не ограничились галереей и обошлись в сотню строк в меру кривого кода. Когда я сказал серверу “а ну ка регенерируй мне миниатюры всех картинок прям с 2008 по 2019” он ответил мне… ничего он не ответил, ушёл по-английски. Пожалуй есть смысл что-то покрутить с хостингом.
Пора валить
Как-то окончательно меня задолбал суверенный интернет, пожалуй что пора на tld вне юрисдикции РФ и хостера тоже, с дата-центром подальше. Заодно и “blog” в названии сменить на “journal” – это будет окончанием мутации. Принципиальное решение принято, осталась сущая мелочь – изучить мировой рынок хостеров!????????
