Тотальный апгрейд блога в журнал

Раз в пару лет я занимаюсь переделкой блога, чтобы идти в ногу со временем. Обычно это совпадает с доработкой какого-нибудь очередного проекта, глядя на который я говорю «что-то в этом есть…» и через некоторое время сажусь прикручивать. В прошлый раз источником вдохновения послужил блог талантливого саратовского музыканта, в этот так и не взлетевший краснодарский городской портал.

Журнальная тема ColorMag

Собсна, потыкав крутую журнальную тему за много денег я подумал что мне это тоже надо. Это виделось логичным развитием используемой ранее «presentation page» (в терминологии темы Tempera от замечательных ребят Cryout Creations) для главной страницы.

Тратить пол-сотни, а то и сотню убитых енотов на крутую журнальную тему мне не позволило склизкое домашнее животное:) Пробежавшись по обзорам и потыкав поиск мой выбор практически безальтернативно пал на ColorMag — толково, красиво, без заскоков, даже какая-никакая документация есть. Тема имеет платную версию и в честь этого регулярно обновляется, что приятно, чертовски приятно, ведь отпадает необходимость следить за всякой кроссбраузерностью!

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

Стили изображений

Эти настройки админу видны только в части трёх дефолтных стилей, а вот что там добавляет тема и плагины — знать как бы и не надо. Оно может быть и действительно не надо, вот только в вордпрессе создание всех используемых размеров изображения происходит ПРИ ЗАГРУЗКЕ, соответственно работает только с новыми записями. Засада подстава чувак!

Так бы я во всё это и не думал лезть ибо выглядело нормально, если бы не один неприятный момент — разработчики темы почему-то решили, что в вывод галерей нужно грузить миниатюры(!) их собственного размера 800x445px(!!), разумеется обрезанные(!!!), что меня категорически не устроило ни по траффику ни по внешнему виду.

Идём в плагины и доставляем simple image style — он как Городецкий — выводит настройки всех стилей в явное. Ну и регенерацию запускать умеет. По нажатию страшной кнопки «Get the PHP for the theme» я получил следующее:

add_image_size( 'medium_large', '1200', '1200', false );
add_image_size( 'colormag-highlighted-post', '392', '272', true );
add_image_size( 'colormag-featured-post-medium', '390', '205', true );
add_image_size( 'colormag-featured-post-small', '130', '90', true );
add_image_size( 'colormag-featured-image', '800', '445', true );
add_image_size( 'medium_large', '1200', '1200', false );
add_image_size( 'rpwe-thumbnail', '45', '45', true );

Почему-то дублируется medium_large, затесался rpwe-thumbnail от отключенного плагина, ну в целом небольшой нестрашный бардак. В этот бардак я добавил свой стиль 240x240px без обрезки, нажав на страшную кнопку «Add new size of thumbnail» обозвав его bthumb. Дальше расставить галочки и «Regenerate thumbnail» — это надолго, а если уж делать миниатюры под тему — сильно надолго, поэтому запускать лучше ночью, ибо кушает ресурсы.

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

Дочерняя тема

Механизм дочерних тем создан для того чтобы вы могли реализовать свои извращённые фантазии о грязных хаках не ломая механизм обновлений. О том чего куда лучше почитать в кодексе — на удивление не страшно. Нет, серьёзно, толковая документация для самых маленьких!

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

function colormag_gallery_atts1( $out, $pairs, $atts ) {
$atts = shortcode_atts( array(
'size' => 'bthumb',
), $atts );
$out['size'] = $atts['size'];
return $out;
}

Ключевое здесь bthumb — название моего стиля.

Галереи (уберите слабонервных от экранов)

О том как подкрался толстый и пушистый я подробно описал два года назад в заметке о предыдущем крупном обновлении, приведу выдержку:

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

Поскольку журнальная тема вся работает на featured image вариантов не осталось. Итог: перезаливка 236 галерей и более четырёх тысяч фоток. Опупея ратянулась на три недели субъективного времени, но дала результаты — блог выглядит единообразно.

Рубрики aka категории

Журнальная тема ВНЕЗАПНО требует журнальной структуры. Нет, разумеется работать можно с любой, но чтобы выглядело красиво и было удобно в использовании придётся переосмысливать структуру. Тут всё сложно. Сама задача категоризации материалов не имеет общего решения. В добавок со временем часть задач уходит, вместо них встают новые…

На этот раз из-за смены концепции мягко переделать не получилось: под нож пошло почти всё, в новую структуру без изменений вошли лишь две категории из восьми, остальное частично или полностью новые. Фактически структура блога стала ближе к СМИ, судите сами что получилось (циферка это кол-во постов на момент сейчас):

• Наука и техника 83
• IT 139
• Культура и искусство 140
• Общество и государство 65
• Обзоры 71
• Туризм 131
• Панорамы 27
• Разное 99

А вот что было до:

Всё что нэвлэзло ушло в…

Метки aka теги

Скажем прямо, я не всегда аккуратно относился к заполнению тегов. Есть плагин simple tags который упрощает жизнь, но далеко не полностью. В тегах за десять лет образовался некоторый бардак-с, который пришлось долго и нудно разгребать руками. Не скажу что добился идеала, но структура явно стала стройнее. Ну как минимум погроханы кривые теги:)

Безопасность

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

Гав-гав

WP Cerber Security & Antispam — это в основном от долбилок. Много их развелось, пусть идут долбить в другое место. Суть простая: всякие попытки зайти напрямую обрубаются накорню, можно по ип, можно по маске /24 (в этом месте нужно мстительно погыгыкать).

В настройках всё относительно просто, поменять страничку входа, потыкать галочки по вкусу… или не тыкать, они и так нормально стоят. Из важного только один момент — заглянуть в антиспам и там выключить «Защита комментариев через определение ботов» — мне это сразу не понравилось и беглое гугление показало что прецизионный жопометр не подвёл — ложноположительные срабатывания. Рекапчу можно ставить, можно нет, я не стал, есть другие инструменты.

Кийя-кийя

NinjaFirewall (WP Edition) — это на случай если продолбят.  Решение не самое популярное, но так сложились звёзды что я трижды видел его в деле, из них два раза все обделались лёгким испугом, ну и один раз пришлось повозиться. Т.е. если на пол-года забить на сайт, то после взлома будет плохо, если не забывать обновлять — последствия минимальны и устраняются без углубленных знаний. Разумеется всё это работает если у вас синдром Неуловимого Джо, а если вас заказали, то потребуются совсем другие меры от профильных спецов.

Не забываем про бэкапы, именно они последний рубеж обороны, а не всякие там антивирусы и файрволы.

Тра-та-та-та-та

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

За всё время использования отстреляно ~172 000 комментариев.

Поисковое продвижение, сеонизм и сеорастия

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

All in one SEO

Это такой плагин, который а один клик должен сделать хорошо. Должен, но не обязан. У плагина есть свои дополнительные модули на которые необходимо обратить внимание.

Facebook и Open Graph и OG

Если вы это читаете, то вы знаете что такое opengraph. В комбайне для сео есть модуль, который надо активировать отдельно, который рисует теги og. Всё бы хорошо, но фейсбук, сука, не жрёт image. Так что отключайте нафиг этот модуль и ставьте плагин с названием OG — верх минимализма, никаких настроек, зато проставляет всё что надо и как надо и не только для fb.

Анализ что же не так выявил, что fb не хочет жрать картинку без og:image:height и og:image:width… хер знает от чего такое бредовое поведение, вк вообще жрёт без проблем.

sitemap.xml

Для этого также есть модуль… чой-та посмотрел я на то что оно генерит и… пригладив волосы вставшие дыбом на жопе поставил отдельный плагин Google XML Sitemaps.  Хотя, допускаю, что именно в том виде оно более правильно с точки зрения ИИ поисковых систем.

noindex, nofollow

В настройках по дефолту на архивы и категории. Ну на архивы в принципе понятно, но на категории борщ. И это типа для недопущения дублирования, хотя canonical то проставляется.

В целом

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

Yoast SEO

Альтернативный комбайн, умеет всякие интересные штуки типа анализа текста. Попробовал — тоже не понравилось.

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

Авторизация через соц.сети

Loginza

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

uLogin

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

Super Socializer

Адов комбайн, который якобы может всё, но на практике без плясок не может вообще ничего. Авторизация через соц.сети — создавай приложение в каждой. Ну допустим с ВК я разобрался меньше чем за пять минут, но дальше ФБ и… (длинный абзац сплошного мата)… понял что не хочу это настраивать. Могу, но не хочу.

Ради интереса посмотрел что там в функционале кнопочек «поделиться» — в целом вменяемо, но во-первых заметно хуже моего любимого UpToLike, во-вторых имеется баг с используемой темой. Вердикт — всё в туда же.

OneAll Social Login

Собственно плагин под названием Social Login и сервис OneAll.com. Как и в предыдущем случае придётся настраивать ручками, НО!!! есть мануалы в картинках! Фейсбук и здесь успел нагадить — они свой интерфейс успели поменять относительно комиксов по настройке.

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

Ещё одним важным плюсом является информирование по почте о проблемах (именно так вычислено время ниже — от неудачной попытки до удачной). Я настроил четыре варианта авторизации, расположу их по нарастанию сложности:

• vk — 4 минуты, очень быстро и очень просто
• google — 9 минут, не сложно, но интерфейс неочевиден
• twitter — 18 минут, как и раньше хер проссышь
• facebook — 31 минута, просто конченые, напрочь нечеловеческий интерфейс с собственной терминологией

Ещё была попытка настроить instagram — настроился он быстро и просто, всего 6 минут. Вот только приложение было создано в sanbox, что означает авторизацию ограниченного количества заранее заданных аккаунтов, а чтобы перевести в public нужно в том числе вот такое: «Provide a link to a video screencast showing the experience in your app. Please show how your integration uses all permissions you are requesting, any interface to moderate content or getting rights to media, and any Instagram login experience. Since your app may be in sandbox mode, you can use data from sandbox users to showcase the integration.» — ебанутые. Тут я вспомнил что инстаграм был куплен фейсбуком и… рептилоиды.

Попутно я выяснил что везде где была авторизация через фб она сломалась. И знаете что? А не буду я нигде чинить. Как разработчик голосую ногами. Прям по всем своим проектам.

Гора плагинов

Считается что создание сайта на вордпресс это «хуяк хуяк и в продакшн». Так то оно так, но лишь для самых простых сайтов, дело в том что для wp очень много плагинов — хороших и разных. Подбирать нужно хорошие, которых очень мало среди разных, что сжирает очень много времени.

Admin Bar Disabler

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

Advanced Database Cleaner

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

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

Automatic Featured Images from YouTube / Vimeo

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

Code Prettify

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

Cyrlitera

Ранее за транслитерацию отвечал Rus-To-Lat — хороший плагин, только обновлялся шесть лет назад и имеет версию 0.3. Новый умеет такие полезности как конвертация имён файлов и преобразование в нижний регистр.

Нужно ли транслитерировать имена файлов? Ну вообщем-то нет, сервера давно уже хавают разные языки, вот только при переездах можно огрести и, как выяснилось, я таки огрёб — десяток файлов того, пришлось шарить по архивам.

Decent comments

Был виджет NS Recent Comments, стал «Достойные комментарии» (можно было бы перевести ещё ржачнее: «приличные комментарии»)) — умеет отображать определённое количество слов/символов из комментария. С точки зрения удобства это плюс, с точки зрения глубины просмотра скорее минус.

GTranslate

Когда-то ставил, потом снёс, снова попался на глаза, посмотрел яндекс.метрику, опять поставил, воткнул переводы на топ5 стран откуда заходят. Переводит через гугл… корявенько, но пусть будет, как минимум добавляет представительности!:) У плагина есть платная версия, причём платёж не единоразовый, а подписка.

Native Emoji

Хотелось в начале поставить обычных колобков… потом подумалось, что как-то это не в ногу со временем. Пришлось выматериться и поставить мерзкие emoji. Сам плагин встал без напрягов, а настройках несколько галочек, умеет как фронтенд в камментах, так и бэкенд в посте. Но по сравнению с колобками всё равно ????!

No Category Base (WPML)

Вордпресс строит ссылки так: category/%categoryname% — что слегка нарушает гармонию вселенной, ибо phblog.ru/category/tourism смотрится куда хуже чем phblog.ru/tourism. Убрать слово «category» из адреса мне давно помог плагин WP Remove Category Base, но заменён так как три года не обновлялся.

Кстати можно и из тегов убрать, но это мне уже не нра. Хотя с точки зрения рефакторинга структуры в будущем может быть весьма полезно — при конвертации рубрик в метки и наоборот не потеряются ссылки и не потребуются 301 редиректы.

Recent Posts Widget With Thumbnails

Удобный плагин для отображения новых записей, умеет миниатюры и гибко настраивается. Отпахал два года без единого замечания, заменён виджетом темы. Рекомендую для простых сайтов взамен стандартного.

Relevanssi

Релевантный поиск, тобишь учитывает вес слов (коэфициенты настраиваются). Умеет камменты. Настроек много, но работает искаропки.

Simple image style

Отвечает за стили изображений, также умеет регенерацию миниатюр. Если вам просто обновить миниатюрки, то лучше Regenerate Thumbnails, который стоял у меня ранее.

Интересно, что надо сделать, чтобы вордпресс научился правильно работать с изображениями?

TinyMCE Advanced

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

UpToLike

• убрал кнопку livejournal
• добавил telegram

Мы ведь понимаем куда сейчас мигрирует всё прогрессивное человечество;)

Небольшим костылём добавил надпись «поделиться», интересно, почему её нет в настройках? Не всё же человечество прогрессивное…

WP Sitemap Page

Ранее за отрисовку карты сайта отвечал плагин Dagon Design Sitemap Generator (не пытайтесь искать его в репозитарии), который последний раз обновлялся… барабанная дробь… 6 Июля 2009 года!!! После десяти лет службы отправлен на пенсию:)

WP Telegram

Благодаря пиару РКН не иметь своего канала в телеге как-то уже стыдно:) Настройка плагина простая, настройка телеграма сложнее — неочевидно куда жать. Секс с проксями на стороне сервера не нужен, оно всё само, что не может не радовать.

Et cetera…

И ещё где-то столько же не вошло в этот обзор.

Прочие допилы

Не плагинами едиными…

Phantom Falcon

Прошло всего навсего жалких двадцать лет и у меня дошли руки нормально отрисовать свою личную эмблему))) История рисунка начинается летом 1999 года, это одна из моих первых… мнэээ… работ, да, назовём это так. Falcon прямая отсылка к Millenium Falcon. На основе этой эмблемы в 2016 создан дизайн лагеря Dark Side.

Сжатие

С плагинами заморачиваться не стал, просто добавил в .htaccess немного тайных молитв Омниссии:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

HTTPS

В пять минут, у моего хостера (firstvds) есть мануал для самых тупеньких по настройке сертификатов в ispmanager, мозг не потребовался. Единственное что отвалилось это плагин Instagram feed, решилось пятью кликами, думать тоже не пришлось.

Mixed content aka смешанное содержимое aka небезопасное соединение

Если на сайте часть контента грузится по https, а часть по http, то бразуер ругается на незащищённый сайт. Здесь уже не пять минут, выловил в:

• настройки, общие, адрес сайта
• виджет rotating tweets брал адрес сайта указанный в профиле твиттера через хттп
• плагин карт яндекса грузил скрипт апи через хттп
• пузомерка pr-cy
• кто матерно сказал «абсолютные пути»?

  UPDATE `phblog`.`wp_posts` SET `post_content` = REPLACE(`post_content`, 'https://phbl.xyz', 'https://phbl.xyz') WHERE `post_content` LIKE '%https://phbl.xyz%'

В целом обошлось малой кровью, ожидал худшего.

Шрифты

Поскольку я ленивая жопа, то воспользовался сервисом fonts.google.com — просто, быстро и удобно. Но есть нюанс, который необходимо учесть — шрифт бывает прямым и курсивным, а также имеет девять вариаций толщины, что в сумме даёт 18 комбинаций. Браузеры умеют делать рендер самостоятельно, но результат либо не впечатляет, либо тааак впечатляет! Чтобы не сильно пугать юзверей нужно пробежаться по стилям и посмотреть какие варианты используются, в моём случае получилось стандартно:

@import url('https://fonts.googleapis.com/css?family=Exo+2:400,400i,700,700i&subset=cyrillic');

Вообще у меня использовался ещё и так называемый «semi-bold» — это толщина 600, но я его выпилил нафиг, чтобы грузить только четыре гарнитуры, а не шесть.

Потребовался маленький css-костыль для Code Prettify:

pre, code, pre span, code span {font-family: monospace !important;}

Рендер шрифтов

Если вы думаете, что загрузив все нужные варианты избавитесь от проблем кривого отображения — вы глубочайше заблуждаетесь. В моём случае проблемы с отрисовкой возникли на EDGE и IE, причём новое поделие мелкомягких даёт худший результат. Поскольку доля каждого за последний квартал согласно данным яндекс.метрике жалких 1.5% решено забить. Оно не совсем правильно, но пусть лучше сайт выглядит красиво для 97% чем средне для всех.

CSS

Кроме шрифтов пришлось ещё подшаманить с выводом blockquote и убрать лишние поля в отображении на мобилах.

В планах

Сколько не сделано, а сколько ещё предстоит не сделать!

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