Продолжим наши уроки по созданию шаблона WordPress своими руками. Сегодня нашей темой для изучения будет информация, которую следует знать до начала разработки. Сформировать собственный шаблон может каждый, но потребуется время, чтобы разобраться во всех нюансах. В сети можно найти множество руководств, которые очень похожи друг на друга. Однако, они приводят в качестве примера сухой код, который нужно просто использовать. При этом к нему не прилагается подробных объяснений, а без них разработать свой собственный шаблон будет невозможно. Мы же будем разбирать каждую отдельную деталь, используемые в темах, будь то буква или функция.
Полезно: Шаблон WordPress своими руками. Урок 5. Работа с кодом
Общая информация
Данный урок будет посвящен общений информации, которая пригодится в последующей разработке. Мы уже разобрали, какие файлы используются, какие части сайта должны быть в шаблоне и даже изучили несколько функций. Сегодня же, мы немного отойдем от этой темы и поговорим о бесплатных темах. Найти в сети их можно в огромном количестве от самых разных разработчиков. Какие же преимущества и недостатки есть у этих шаблонов? И почему уникальность темы – это миф? Обо всем этом мы поговорим в нашей сегодняшней статье, а также займемся подготовкой к созданию собственного шаблона.
Полезно: Шаблон WordPress своими руками. Урок 1. Основы
Недостатки стандартных тем из каталога
В официальном каталоге wordpress.org можно найти немало бесплатных шаблонов, которые отлично оформлены и вполне неплохо написаны. У них хорошая функциональность и внешний вид, но есть главная проблема – они слишком «раздуты». Чем больше опций у темы, тем она становится тяжелее. Поэтому значительное количество функций, фильтров и других дополнений не всегда хорошо.
Проблема заключается в том, что если над таким шаблоном не провести значительную работу по оптимизации кода, то сайт будет грузиться в разы медленнее, чем это требуется.
Вины разработчиков в этом нет. Они стараются сделать так, чтобы их темы подходили по критериям как можно большему количеству пользователей. Для сайтов с низкой посещаемостью такие шаблоны будут вполне пригодными для использования. А вот если вы хотите выйти на более высокий уровень, то нужно обязательно позаботиться об оптимизации программного продукта.
Для примера давайте разберем конкретный случай. На блоге был установлен бесплатный шаблон. Количество запросов к БД для главной странички сайта изначально составляло 85. После оптимизации кода, это число сократилось до 25, то есть более чем в три раза. Соответственно сайт стал грузиться в два раза быстрее. По времени внесение корректировок заняло всего один вечер, а значит правки вносить определенно стоило.
Давайте вынесем итоги из рассказанного:
- бесплатные шаблоны обладают слишком большим весом из-за отсутствия оптимизации;
- в них содержится значительное количество лишних фильтров и опций;
- скорость работы с БД и загрузки сайта достаточно низкая из-за объемного функционала;
- темы генерируют избыточное количество запросов к БД.
Если вы хотите создать свою собственную тему, то стоит начать с главного вопроса: чем вам не подходит ваша тема? Возможно, исправить недочеты будет гораздо проще, чем начинать все с нуля. Хотя опыт показывает, что работать с чужим кодом достаточно сложно и нервно.
Полезно: Шаблон WordPress своими руками. Урок 3. Тег bloginfo ().
Динамические сайты
Еще одним важным моментом стоит отметить, что раньше все сайты были написаны на чистом HTML в сочетании с CSS. Из-за этого нельзя было быстро изменять общую структуру. Прогресс в веб-программировании привел к созданию более удобных динамичных сайтов, которые генерируют контент регулярно и автоматически. Это отличное достижение, но некоторые разработчики стали преувеличивать, разделяя сайт на слишком мелкие кусочки.
Принцип создания динамических сайтов говорит о том, что необходимо формировать такие файлы и функции, которые являются важными и нужными. Все подряд разделять на фрагменты не стоит. К сожалению, подобное встречается сплошь и рядом. Так проще, но такой подход подойдет далеко не для всех сайтов, поэтому лучше с ним бороться.
Давайте разберем этот пример немного иначе. Большой функционал шаблона определенно хорошо, но это не говорит о том, что нужно добавлять опции везде, где только можно. Возьмем главное меню, название сайта, вывод автора статьи и популярный элемент «Категории». Все эти элементы создают большое количество запросов к базе данных, без учета кеширования.
Каждый из них можно вывести на экран с помощью HTML-кода, что собственно является правильным. Вы же не часто добавляет новые рубрики или элементы навигации, да и название сайта вряд ли будет меняться на регулярной основе. Согласятся с таким утверждением далеко не все. Однако, если вы создаете шаблон для себя, то все эти детали можно брать из функционала.
В ходе наших уроков мы будем идти по двум разным линиям обучения. Одна будет предполагать оптимизацию шаблона под конкретный сайт, вторая будет включать в себя весь функционал WordPress. Какой из вариантов подойдет именно вам, решайте сами. Теперь давайте разберемся с главным вопросом – какие именно результаты вы ожидаете от собственного шаблона.
Полезно: Шаблон WordPress своими руками. Урок 2. Теги
Миф об уникальности
Вы часто можете увидеть требование, что для каждого сайта должен быть создан уникальный шаблон. Это не совсем верное высказывание. Вам нужно сгенерировать такой дизайн, который будет подходить именно для вашего ресурса, а уже потом говорить об уникальности.
Структура большинства сайтов состоит из пяти основных частей:
- header;
- left bar;
- content;
- right bar;
- footer.
Такая структура сохранится при любой верстке, будь она табличной или слоями. Разница будет в том, где и как вы разместите элементы. Некоторые из них можно и вовсе убрать. Например, слайдбар предусмотрен не на всех сайтах, хоть это и достаточно удобный в навигации инструмент. Слайдбор может отсутствовать, либо же его может быть несколько штук. Также количество колонок на вашем сайте зависит только от вашего желания. Получается, что вся уникальность шаблона состоит в ширине блоков и их дизайне. Внешний вид всегда можно поменять до неузнаваемости, при этом структура сайта всегда будет одной и той же.
Ширина блоков тоже далеко не сильно различается, учитывая, что размеры экранов стационарных устройств всегда варьируются в одинаковых диапазонах.
Если углубляться в вопрос уникальности дальше, то классы блоков в WordPress имеют одинаковые названия. Поэтому можно говорить, что уникальных шаблонов нет вовсе, учитывая их количество в свободном доступе. Если прогресс дойдет до трехмерных сайтов, то можно будет поговорить об уникализации шаблонов. Пока же все сайты представляют собой отдельные квадраты разного размера, разбросанные по страницам, и даже их порядок всегда схож между собой.
Для примера рассмотри наиболее популярные в интернете сайты:
- Яндекс обладает простым дизайном, в котором доступен для изменения только задний фон, без каких-либо лишних заморочек;
- Google поддерживает минимализм, а значит в нем нет ничего помимо текста и картинок, за счет чего сокращена верстка;
- ВК и вовсе напоминает рассмотренную нами выше структуру: шапка, левый сайдбар, контент и подвал.
Все наиболее популярные в сети сайты практически ничем не отличаются между собой, лишь шириной блоков и дизайном страниц. Это практично и удобно для большинства посетителей.
Тогда как же мы можем говорить об уникальности? Сайтом с огромными фоновыми изображениями, яркой анимацией и множеством выпадающих окон в интернете практически нет. А вот страниц с совершенно оригинальной структурой достаточно мало. Стоит лишь зайти на любой известный вам сайт и открыть его исходный код, чтобы убедиться в том, что он выполнен классическим для большинства ресурсов образом.
Из всего вышесказанного можно сделать вывод, что, имея представление о структуре сайта и его построении, вы сможете создать нужный вам шаблон. Дизайнерские детали и креативное оформление сделают его уникальным. Информационные ресурсы, интернет-магазины, соцсети и блоги используют классический набор деталей. Уникальный дизайн будет уместно применять на игровых сайтах, портфолио или сайтах веб-студий.
Вопрос состоит не в том, что сложно создать красивый фон и добавить анимационные элементы, а в практичности таких элементов. Рассмотренная выше структура является оптимальной для создания поведенческого фактора для пользователей ресурса. Все блоки будут находиться под рукой, а значит не нужно будет искать что-либо долгое время. Именно поэтому стандартный подход является самым лучшим.
Подготовка к созданию темы
Полезно: Шаблон WordPress своими руками. Урок 6. Файлы index.ph
Мы рассмотрели всю основную информацию, которую нужно знать перед началом разработки шаблона своими руками. Теперь можно переходить к первым шагам построения. Нам потребуется создать правильные файлы и папки. Для начала, скачиваем и устанавливаем бесплатную программу Nodepad++.
Следующим шагом будет установка денвера на локальной машине. Denwer представляет собой набор всех инструментов для разработки и отладки сайтов на персональном компьютере. Писать тему с нуля сразу в сети невозможно. Проверять все наработки, корректировки и дополнения можно только на локальной машине, уже после заливая их в сеть.
После установки денвера загружаем сам WordPress. Завершив все установки, переходим в директорию: Диск:\WebServers\home\localhost\www\название вашей папки\wp-content\themes.
Уже здесь можно создавать папку с собственным названием, например, MyFirstThemes. Далее переходим в нее и создаем стандартным блокнотом файл, который переименовываем в index.php. Аналогичным образом, через блокнот, генерируем и остальные файлы, без которых не обойдется ваша тема:
- style.css;
- functions.php;
- footer.php;
- page.php;
- sidebar.php;
- category.php;
- header.php;
- comments.php;
- tag.php;
- 404.php;
- single.php;
- search.php.
Этого набора будет достаточно, остальные документы можно будет добавлять по необходимости. Также можно сразу сформировать папку «images», в которой разместятся изображения для оформления темы. В итоге в папке «MyFirstThemes» у вас будет находиться 12 файлов формата PHP и один CSS, а также папка с картинками.
Заключение
В сети можно найти немало руководств по созданию собственной темы для WordPress с нуля. Мы же разделим все эти знания на несколько уроков, в которым будет подробно рассматриваться каждая отдельная строчка. Сегодня мы изучили общую информацию, необходимую для генерации шаблона и необходимости этого действия. Далее мы начнем работать с самим кодом, поэтому следите за нашими уроками, чтобы создать свой собственный шаблон, полностью удовлетворяющий всем потребностям.
