Реверс-инжиниринг WordPress: как воспроизвести сайт WordPress

Этот сайт выглядит так хорошо. Хотел бы я иметь такой сайт.

Это звучит знакомо?

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

Я несколько раз попадал в одну и ту же ситуацию и знал, что нужно что-то делать. Итак, я пошел вперед и провел свое исследование.

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

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

Но Шафи, почему WordPress? Вы можете спросить.

Причина довольно проста. WordPress — одна из самых популярных систем управления контентом, на которой работает 28,6% всех веб-сайтов в Интернете.

Удивительно, но каждый день запускается еще 50 000 сайтов WordPress ( источник ), а популярные сайты, такие как TechCrunch, Disney, Sony и т. д., используют WordPress для запуска своего сайта ( источник ) .

Я надеюсь, что это отвечает на ваш запрос.

[click_to_tweet tweet=»Каждый день запускается 50 000 блогов WordPress, и становится важно иметь отличный дизайн и функциональность. Вот 5 шагов, чтобы скопировать любой блог WordPress. #WordPress #OceanWP #WordPressFacts» quote = «Знаете ли вы, что каждый день запускается 50 000 новых блогов WordPress. #WordPressFacts”]

Готовы бросить? Давайте начнем.

Шаг 0: Убедитесь, что сайт использует WordPress

Вы это предвидели, не так ли?

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

Чтобы проверить, какая система управления контентом (CMS) поддерживает веб-сайт, мы будем использовать WhatCMS.org — бесплатный онлайн-инструмент.

Использовать инструмент просто: скопируйте тестируемый веб-сайт, введите его в соответствующее поле веб-сайта и нажмите Enter.

Инструмент будет запускать наборы алгоритмов и предоставлять результат, показывающий, какая CMS используется веб-сайтом.

Шаг 1: Копирование дизайна

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

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

Чтобы проверить, какая тема WordPress используется, вы можете использовать WPThemeDetector.com — еще один бесплатный инструмент.

Инструмент является продвинутым и легко определяет тему или базовую структуру (даже если она скрыта), что невозможно с другими подобными инструментами, такими как WhatWPThemeIsThat.com.

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

Что делать, если на сайте используется пользовательская тема?

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

Но не теряйте надежды, вы можете создать тот же дизайн веб-сайта, используя комбинацию темы OceanWP и конструкторов страниц, таких как Elementor.

OceanWP — это, пожалуй, самая настраиваемая тема, с которой вы сталкивались и которую можно было объединить с конструктором страниц, столь же интуитивно понятным и простым в использовании, как Elementor, дает всю мощь в ваших руках.

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

Шаг 2: Получите функциональные возможности правильно!

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

Средний сайт WordPress работает как минимум с 10 различными плагинами, каждый из которых обеспечивает уникальную функциональность.

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

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

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

Шаг 3: Не забывайте об опыте чтения

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

В приведенном выше эксперименте первая группа людей (с легко читаемым шрифтом) оценила, что задание займет 8,2 минуты. Принимая во внимание, что вторая группа (с трудночитаемым шрифтом) оценила колоссальные 15,1 минуты.

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

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

Установите расширение, зайдите на сайт (желательно на страницу статьи), нажмите кнопку расширения WhatFont (доступна в правом верхнем углу экрана) и наведите указатель мыши на текст.

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

Шаг 4: Кто-то сказал цвет?

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

Согласно Kissmetrics , цвета влияют на покупательское поведение, и в зависимости от типа аудитории вы должны выбрать правильную цветовую схему.

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

У ColorCombos.com есть онлайн-инструмент, который может захватывать цветовые палитры, используемые веб-страницей. Вам просто нужно ввести URL-адрес страницы и нажать Enter.

Через несколько секунд вы получите список всех часто используемых на сайте цветовых палитр с шестнадцатеричным кодом и возможностью скачать цветовую схему.

Шаг 5: Скорость сайта

Я вполне уверен, что первое хорошее впечатление о сайте у вас сложилось из-за скорости загрузки. Независимо от того, насколько хорош дизайн или пользовательский интерфейс, если он загружается за 3-4 секунды или более, вы бы закрыли вкладку и больше не возвращались.

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

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

Без этого инструмента я бы никогда не узнал, что OceanWP.org размещен на облачной платформе Google, объединенной с CloudFlare CDN (это объясняет сверхбыстрое время загрузки).

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

Вывод

Ну вот!

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

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

У вас есть какой-нибудь секретный инструмент, который вы используете для репликации веб-сайта WordPress? Я хотел бы услышать об этом. Оставьте комментарий, и мы можем обсудить это. Не забудьте поделиться этой статьей со своими друзьями-любителями WordPress, которым она может оказаться полезной.