Натяжка html шаблона на сайт wordpress

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

Содержание:

• Вам не надо читать этот текст если…
• Идём путём наименьшего сопротивления
• А какие у нас вообще начальные условия?
• Редизайн под себя
• Основная фишка дочерней темы
• Как разобраться в этом css?
• Пишу велосипед или пара слов о структуре
• Злой файл content.php
• Менюшка, футор, сайдбар, кнопка наверх, кукисы
• Дизайн, изображения, иконки и оптимизация
• Послесловие

Вам не надо читать этот текст если…

Наверное вы мечтаете о своём крутом сайте и уже радостно поставили вордпресс? Возможно вы даже классный it-спец(программист, дизайнер, копирайтер, маркетолог и т.д.), но непосредственно с веб-отраслью не связаны и однажды у вас возникла мысль «хм… а не создать ли мне свой сайт»? Так вот, если я угадала, то скорее всего вы сейчас стоите перед выбором, либо читать дальше и с головой погрузиться в веб-разработку или купить готовый wordpress-шаблон. То, что перед вами вообще стоит такая дилемма, это повод задуматься и я бы рекомендовала не скупиться и заплатив денежку купить готовое решение. Займитесь своим любимым делом, не надо пополнять ряды веб-мастеров самоучек, нас итак много)

Но если перед вами вопроса такого не стоит и вы уже давно нырнули в бескрайний омут веб-разработки, а это уже не первое руководство которое вы листаете/смотрите, то милости прошу читать далее. Хотела бы правда донести до вас одну мысль: это не инструкция как это у нас любят делать, это отчёт, поэтому я не несу ответственность за ваше потерянное время, истрёпанные нервы и то почему у вас что-то там не вышло. Помните пожалуйста об этом и не стоит кидаться в меня гневными фразами типа «да не работает онож!» или «кто так вообще делает?», у меня вот видите заработало и я довольна. В случае чего, пишите мне в вк, помогу по мере своих скромных(не преуменьшаю, так оно и есть) знаний в вордпрессе.

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

Идём путём наименьшего сопротивления

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

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

В сети есть такая замечательная команда разработчиков как Pixelarity. У них оформляешь подписку и тебе на сколько там доступно около 70 их шаблонов. Поскольку я ещё недавно занималась вёрсткой, то у меня в заначке как раз лежал купленный у них шаблон «faction». И в то же время я немного разбираюсь в вордпрессовском движке, поэтому возникла идея совместить первое и второе.

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

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

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

А какие у нас вообще начальные условия?

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

Посудите сами, вот то, что я имела на руках перед началом разработки:

• Сервак с VDS и настроенным LAMP
• Домен и бесплатный SSL «Let’s encrypt»
• Установленную и настроенную тему basic от wp-puzzle
• Настроенный набор плагинов для дальнейшего использования
• Честно купленный html-шаблон faction
• Одна рабочая тема от знакомого, там было много полезного кода
• Ещё одна рабочая дочерняя тема от того же знакомого, тут наоборот всё было по минимуму

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

Редизайн под себя

Вот как html-шаблон выглядит в самом начале и как я его переделала под себя(по клику откроется полная версия):

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

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

Вот список цветов которые у меня были записаны в текстовый файл, по ходу подбора:

А вот палитры откуда я всё это тащила:

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

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

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

Основная фишка дочерней темы

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

Итак для создания дочерней темы берём и в папке «themes», создаём папку с именем нашей дочки. Например для себя самой я создала папку «parnas», можно было написать через тере два слова, например «parnas-tmp». В эту папку кладём style.css с комментарием вначале который будет рассматриваться вордпрессом как манифест будущей темы. Строчки «Template» и «Theme Name» обязательны, все остальные опциональны.

Вот начало моего style.css на момент написания этой статьи:
/*
Theme Name: Parnasova Template
Template: basic
Theme URI: http://{название сайта}
Description: Дочерняя тема на основе темы basic для личного блога
Author: Anastasiya Parnasova
Author URI: http://{название сайта}/about/
Version: 0.12
*/

Далее создаём в той же папке файл functions.php(обратите внимание, что на конце есть буква «S» иначе долго будете искать что же пошло не так) и рисунок screenshot.jpg. Первый создан для хранения главных настроек темы и грузится вместо оригинального functions.php родительской темы. Рисунок, это та картинка, которая видна из админки вордпресса, когда выбираешь там тему. Скриншот должен быть в разрешении 880×660

Когда эти файлы созданы тема уже может быть выбрана из админки. Файл стилей грузится также как и файл функций вместо оригинального файла стилей и поэтому если нам нужно подключить оригинальный, то мы это должны сделать из functions.php. Такая же логика подмены распространяется и на все остальные файлы. Создали например в нашей папке дочерней темы файл content.php, значит уже оригинальный контент не будет вызван.

На данный момент в моём проекте живут следующие файлы:

А вот так выглядит дерево проекта(фотку не выкладываю сюда, не просто так(((, ещё не добавила css-функционал к таким мелким картинкам)

А вот функция с подключением внешних ресурсов:

Но вообще в чём всё же главная фишка дочерний темы? А главная фишка в том, что сайт у вас работает почти сразу же, вы занимаетесь его дополнением, а не строительством с нуля. Вот как косячно выглядят у меня сейчас страницы 404 и поиск:

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

Как разобраться в этом css?

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

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

Возможно попозже я всё же разберусь с scss и переделаю весь файл стилей под себя, но пока остановилась на довольно простом решении. Основной файл стилей style.css с манифестом был заполнен моими правилами, а стили пикселарити я подгрузила отдельно в function.php. Выходит так, что мои стили загружаются после пиксовых стилей и перезаписывают их. А уже при написании своих стилей я руководствовалась стилями темы бейсик, только внимательно фильтруя их на пригодность к новым условиям.

На практике это выглядело так, что после внесения изменения в php файл с html структурами от бейсик, чтобы он имел те же классы и айдишники, что и у пиксов я вставляла в свой style.css стили от бейсик и смотрела, что выйдет. Чтобы жизнь мёдом не казалась, туда же прибавлялась щепотка стилей из тех уже написанных тем, что я имела на руках. В результате получалась адцкая мешанина, а моя задача была посмотрев её с помощью F12 в браузере и поэтапно убирать лишнее.

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

Теперь скажу несколько слов о структуре html файлов там и там, здесь тоже не всё гладко проходило, структура в общем-то одна и та же, но реализация разная.

Пишу велосипед или пара слов о структуре

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

У вордпресса на самом деле довольно простая структура файлов. Давайте для полноты картины, я сделаю отступление и немного в неё погружусь. Основными рабочими лошадками выступают следующие четыре файла: index.php, page.php, single.php, content.php. О последнем следует сказать особо, на него ложится львиная нагрузка по выдаче контента и на нём мы подробно остановимся в следующей части, а пока мельком пробегусь по правилам взаимодействия этих файлов между собой.

Когда мы заходим на сайт, то вордпресс показывает либо ленту, либо статическую страницу. Это меняется в настройках админки. Допустим зайдя на сайт мы видим ленту новостей. Это значит что отработали index.php и content.php, первый нужен, чтобы перебрать посты в ленте, второй показывает превью поста с помощью метода the_excerpt(). Шапка, подвал и сайдбар подгружаются также index-ом, поэтому в данном случае, когда показывается лента, content можно воспринимать как одну из частей index.php вынесенную в отдельный файл. Как можно сказать и наоборот, index.html для content.php всего-лишь обёртка.

Но вот допустим мы решили перейти на какую-нибудь отдельную страницу, что тогда? Только пожалуйста не путайте их с записями или постами в ленте, страница это именно отдельная страница не выводящаяся в ленте, например страница «обо мне» на этом сайте это отдельный пейдж. Страница или page.php, работает полностью в одиночку, она и функцию обёртки исполняет и выдачу информации организует через метод the_content() выводящий полностью весь текст статьи.

А теперь пройдём по ещё одной логической ветке, а именно предположим, что в ленте мы нажали кнопочку «читать далее». В данном случае отработают последовательно single.php и content.php. Первый как обёртка заботится об шапке, подвале, сайдбаре, а content.php отображает внутренне содержимое статьи, только на этот раз внутри контента вызывается метод the_content().

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

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

Злой файл content.php

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

Во-первых важная вещь о разделении вывода контента. В файле single.php можно встретить такую конструкцию: get_template_part( 'content', get_post_format() ); её назначение, возможность создать несколько разных файлов content.php, очень перспективная вещь, но я пока реализовала довольно простое разделение по категориям поста. Посты из категории «заметки» сразу выводятся в ленту и по умолчанию не должны содержать картинок. Посты же из других категорий идут по стандартному алгоритму.

Стандартный же алгоритм для single.php заключается в том, чтобы подгрузить либо миниатюру шириной в 300px для любых мобильных платформ, либо вывести обычную картинку с текстом.

Как определить, что мы на мобильной платформе? В самом начале файла у меня вставлена вот такая конструкция: $flag_mobile = (is_mobile()) ? true : false;
Сама функция is_mobile() лежит в functions.php и призвана понять, где же мы запущены, на десктопах или мобильниках. Функция не моя, а утащена у человека.

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

Перед всем этим идёт заголовок поста и там нужна дата, во-первых на мобильных хотелось бы иметь минималистичный заголовок, а во-вторых на десктопах русские названия в днях недели. Первое реализуется при помощи вышеназванном $flag_mobile, второе благодаря коду взятому отсюда: https://wp-kama.ru/function/the_date

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

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

Вот примеру как выглядит функция аналогичная the_excerpt() у меня:
//Вывод отрывка текста из статьи
//Удаление тега figure вместе со всем содержимым
//Используется в цикле
//$length - длинна цитаты в символах, если ноль, значит будет взята, цифра по умолчанию в 750 символов
//$more - учитывать ли more в посте?
//$auto_prg - сохранить переносы строк
//$rm_figure - можно оставить первую картинку и не удалять её, но по умолчанию удаляем
function the_mini_except($length = 750, $more = true, $auto_prg = true, $rm_figure = true)

Основная логическая часть этого файла выглядит у меня вот так(кликабельно):

Как видим здесь действительно нужно много сложного кода, конечно всё(а, точно всё, я вот даже не знаю?) можно реализовать с помощью плагинов, но это будет очень существенно тормозить сайт. В общем-то это и есть самое сложное место, всё остальное, что до, что после, представляет собой тривиальное знание движка и его особенностей.

Менюшка, футор, сайдбар, кнопка наверх, кукисы

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

Например моя реализация пиксового меню на основе готовой темы бейсек выглядит вот так(редактор отказался адекватно это воспринимать):

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

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

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

Последние три плюшки потребовали кодинга в js. Я не стала создавать отдельный файл а просто добавила свой код к коду пиксов, туда же пошёл и стандартный джи-эс код из темы бейсик.

Дизайн, изображения, иконки и оптимизация

Начну с фавикон. Делала я его вот в этом сервисе: https://realfavicongenerator.net

Чтобы вставить код прибавила вот такую конструкцию к урлам:
get_stylesheet_directory_uri();

Upd 22.09.21: это было совершенно лишнее телодвижение, пожалуйста не делайте так, а просто укажите стандартный код, а иконки киньте в корень.

А ещё запретила вордпрессу самому работать с иконкой:
remove_action('wp_head', 'wp_site_icon', 99 );

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

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

Отдельный пейдж и лента:

Что касается тех изображений которые идут в постах. То стандартно лента рассчитана всего на два формата в 770 и 330 по ширине. Первый формат для десктопа, второй для мобильников. Внутри статей как эта, может быть самое разное форматирование и очень разные изображения(это в теории так должно быть))). Короче с мелкими изображениями и конкретно с классами «align*» и «size-*» мне ещё предстоит поработать.

Вообще с изображениями и их хранении у вордпресса наблюдается некоторая расточительность, поэтому в планах изменить работу внутри движка с изображениями с помощью плагина «Kama Thumbnail», однако к этому нужна своеобразная подготовка кода.

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

Послесловие

Написав всё вышеперечисленное и оценив объём графики в статье я уже начала задумываться, а не добавить ли в прелоадер кроме условия is_home() ещё и условие is_category(«некая-категория-для-длиннопоста»), но пока повременю. Хотелось бы написать, что ещё обязательно нужно доработать, чтобы сайт стал действительно похож на человеческий. Просто перечислю списком, чтобы можно было прикинуть объёмы предстоящей работы.

Итак мне предстоит:

• Поправить перекошенные страницы поиска и 404
• Добавить счётчики
• Карта сайта
• Настроить СЕО плагин
• Проработать отношения с поисковиками
• font-awesome
• Выравнивание изображений внутри постов
• Мелкие изображения и отдельный класс в админке для них
• Плюс оттестить это выравнивание на мобилах
• Добавить VK-комментарии на сайт
• Добавить баннеры с рекламой
• Добавить кнопки соц-сетей
• Настроить более богатое разветвление категорий в content.php
• Синхронизирующийся слайдер в постах ленты
• Видео из ютюба в постах ленты с оптимизацией под мобилы
• Добавить и оформить категорию для лонгридов
• Провести минимизацию скриптов и стилей
• Добавить эффект lazy-load на изображениях
• Отключить стандартные миниатюры изображений
• Настроить миниатюры изображений с помощью Kama Thumbnail
• Настроить кеширование на серваке
• Собрать своё семантическое ядро под тему «игрострой»
• Редизайниуть сайт
• Переписать CSS и JS под себя
• Переделать прелоадер в стиль нового дизайна

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