Здравствуйте фрилансер Михаил Пачулли!

Предлагаю вам поработать над переносом указанного мной шаблона Wordpress на профессиональную платформу для создания сайтов. Вот скриншот главной страницы с демонстрационного сайта того шаблона:

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

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

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

Задание 1: страница 404

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

• 404.php - страница "ошибка 404"
• header.php - верхняя часть страницы
• footer.php - нижняя часть

Эквивалентами этих макетов в портированном шаблоне станут следующие файлы:

• missing_template.htm - страница "ошибка 404"
• modules/header.htm - верхняя часть страницы
• modules/footer.htm - нижняя часть

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

Предыстория

Речь в начале моего поста шла о сайтовом шаблоне, который создал частный вебмастер, вебпрограммист и разработчик Ричард Табор из Атланты, штат Джорджия. С апреля 2019 года он занимает должность старшего менеджера по продукту "WordPress Experience" в компании GoDaddy. До того времени был основателем и руководителем следующих небольших проектов в интернете:

• CoBlocks - открывшаяся в 2018 году коллекция строительных страничных блоков и инструментов для нового блочного редактора Gutenberg в скрипте Wordpress.
• WPBlockGallery - выпущенный к концу 2018 года пакет блоков галереи, созданных специально для редактора Gutenberg в скрипте Wordpress.
• ThemeBeans - частная вебстудия, образованная в 2012 году с целью разрабатывать красивые темы для WordPress и продавать их на площадке ThemeForest.

В начале 2019 года все 3 проекта были проданы американскому провайдеру услуг в сфере доменных имён и хостинга сайтов GoDaddy. Ричард в своём блоговом посте от 9 апреля описывает это событие так:

Кстати, и на самом сайте вебстудии всё ещё представлены все 18 шаблонов, которые были разработаны за годы существования ThemeBeans. Соответствующий раздел студийного сайта рассказывает о данных разработках так:

Из всего их списка мне приглянулась следующая тема, которую автор охарактеризовал на своём сайте так:

Живое WP демо demo.themebeans.com/trim

Экспертизу в вопросах Wordpress я имею отличную. Макет 404 сделал, проверяйте. Врят ли найдете кто сделает лучше.

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

Тогда приготовьтесь потратиться. И не только на оптимизацию всех макетов.

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

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

Нюансы сборки

1 Блоки страницы, которые вероятнее всего будут использоваться в том же виде и в других макетах, вынесены как модули в папку modules. Такими блоками являются шапка сайта и подвал - это файлы footer.htm и header.htm.

2 В ту же папку модулей шаблона помещён модуль языков - это файл languages.htm, где определён пока один язык: EN - английский. Каждый вебмастер, использующий данный портированный шаблон, сможет перечислить здесь список языков создаваемого сайта.

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

4 Так как строковые настройки блога и настройки темы вероятнее всего тоже подлежат переводу, то они были перенесены в базу полиглота в виде отдельных "записей" и получили следующие псевдоимена:

• bloginfo['name'] именуется теперь [!-- string: Blog info name --]

• bloginfo['description'] именуется теперь [!-- string: Blog info description --]

• get_theme_mod('error_text') именуется теперь [!-- html: 404 error text --]

• get_theme_mod('footer_copyright') именуется теперь [!-- html: Footer copyright --]

Что представляет собой отдельная "запись" в базе полиглота? Вот показан пример первый, где определено некое псевдоимя для использования в шаблоне сайта и даны переводы такой интерфейсной строки на английский, русский и украинский языки.

<dfn>
    [!-- string: Page not found --]
    <hr class="en"> Page not found
    <hr class="ru"> Страница не найдена
    <hr class="uk"> Сторiнку не знайдено
</dfn>

{polyglot}
    [!-- string: Page not found --]
{/polyglot}

<dfn>
    Page not found
    <hr class="ru"> Страница не найдена
    <hr class="uk"> Сторiнку не знайдено
</dfn>

{polyglot}
    Page not found
{/polyglot}

{polyglot}
    Page not found
    <hr class="ru"> Страница не найдена
    <hr class="uk"> Сторiнку не знайдено
{/polyglot}

5 Логика показа блоков, появляющихся в шапке сайта и подвале в зависимости от типа страницы, обеспечена теперь установкой или сбросом класса тега <body>. Этот оптимизационный приём позволил избавиться от увесистых проверочных Wordpress-конструкций в теле шаблона.

• в макете 404 - класс сброшен до пустой строки
• в макете Under Construction - класс сброшен
• в остальных - класс установлен согласно типу макета

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

• data-poly для строк интерфейса, размещённых в базе полиглота
• data-image для заменяемых изображений интерфейса
• data-photo="{typeId}-{id}" для заменяемых изображений конкретного поста
• data-{typeId}="{id}" для идентификации поста конкретного типа

Благодарность

Михаил, спасибо за такое продуманное исполнение первого пункта работы. Это упростило и код шаблона, сделало его читабельным, и дало гибкость при локализации сайта.

По оплате

Что касается готовности к тратам, то к настоящему моменту среди вебразработчиков появилось достаточно людей, кто понял необходимость перейти от устаревших Wordpress-подобных практик к новому поколению шаблонов с оптимальным и ясным исходным кодом на виртуальном языке типа ShortCodes. Эти люди готовы, если нужно, потратиться ради создания хотя бы первого достойного примера новых тем, включая встроенный редактор на замену проверенного годами Classic Editor или недавней альтернативы - Guttenberg Editor.

Так что продолжайте выполнять задание. Давайте перейдём к макету чуточку сложнее предыдущего: различие в том, что к этому типу страниц может прилагаться собственный текстовый контент, в то время как страница 404 сопровождалась лишь определённой строкой из настроек блога (смотрите выше параметр "error text").

Задание 2: страница Under Construction

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

• template-underconstruction.php - страница "в процессе строительства"
• header.php - верхняя часть страницы
• footer.php - нижняя часть

Эквивалентами этих макетов в портированном шаблоне станут следующие файлы:

• abstract/under-construction.htm - страница "в процессе строительства"
• modules/header.htm - верхняя часть страницы
• modules/footer.htm - нижняя часть

Приступайте к выполнению. Оплату положил в сейф.

Это плохое решение расположить в абстрактных страницах темплейт under xonstruction. Он присваевается разрабатываемым страницам на время. Следовательно может использоваться на разных урл пока не отменим присвоение. Абстрактная страница существует на постоянном урл пока не удалим ее темплейт.

Разработчик проверйяте, я сделал задание 2.

Сергей ни какой проблемы не вижу. Я обернул тело абстрактного макета в условие {ifReferredToMe}. Так проверяю что в текущем посте выбран этот макет для рендера страницы. Иначе отправляю на макет ошибка 404.

Всё отлично! Вы молодец, Михаил, как всегда.

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

Нюансы сборки

1 Так как предполагается, что со страницей такого типа (впрочем как и любого другого типа) будет связан некий пост в базе данных сайта, то значит у этого поста теоретически могут быть как введены так и пропущены следующие текстовые поля: название, тайтл, мета описание, ключевые слова, текст поста. Чтобы предотвратить SEO конфликт и убедиться, что для всякого поста мета информация гарантированно будет существовать (пусть даже в пустом виде), - вот для такой цели и был придуман небольшой модуль fixes.htm.

2 Макет Under Construction предполагалось показывать напрямую по URL-у на демосайте - то есть по абстрактному адресу http://your.site/under-construction. А на настоящем сайте такой URL не должен отзываться. Ведь когда потребуется, контент-менеджер настоящего сайта привяжет макет к нужному посту и соответственно его URL-у. Чтобы обеспечить подобную логику работы, в макет установлено специальное условие, разрешающее прямой вызов макета на демосайте и непрямой вызов на обычном сайте.

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

Задание 3: главная страница

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

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

• index.php - главная страница
• header.php - верхняя часть страницы
• footer.php - нижняя часть
• loop-post.php - мини карточка поста
• inc/post-formats/content.php - контент обычного поста
• inc/post-formats/content-aside.php - дефолтный контент поста
• inc/post-formats/content-audio.php - контент аудио поста
• inc/post-formats/content-gallery.php - контент поста-галереи
• inc/post-formats/content-image.php - контент поста-фотографии
• inc/post-formats/content-link.php - контент поста-ссылки
• inc/post-formats/content-quote.php - контент поста-цитаты
• inc/post-formats/content-video.php - контент видео поста

Эквивалентами этих макетов в портированном шаблоне станут следующие файлы:

• index.tpl - главная страница
• modules/header.htm - верхняя часть страницы
• modules/footer.htm - нижняя часть
• modules/post.htm - мини карточка поста

Приступайте к выполнению этого задания. Оплата ждёт в сейфе.