Создание-темы(подготовка)

Что нужно знать перед созданием темы WordPress

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


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

Недостатки шаблонов с каталога wordpress.org

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

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

Для примера расскажу вам свою историю. Раньше на моем блоге стоял так же бесплатный шаблон. Количество запросов к базе данных составляло 85 для главной страницы, после того как я поработал с кодом это число уменьшилось до 25! Больше чем в 3 раза, вы себе можете это представить? Сайт стал грузиться в 2 раза быстрее, и это заняло у меня всего один вечер. Я думаю это стоит того чтобы сделать необходимые корректировки.




Что бы сильно не затягивать давайте подведем небольшой итог:

  1. Бесплатные, не оптимизированные темы много весят.
  2. Большое количество ненужных функций и фильтров.
  3. Функционал большой, скорость обработки данных и загрузки сайта низкая.
  4. Чрезмерное количество запросов к базе данных.

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

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

Я наверное вас запутал. Теперь объясню чуток проще, на примере WordPress. Огромное количество встроенных функций это превосходно, но это не значит что их нужно тыкать везде где нужно и не нужно. К примеру возьмем главное навигационное меню, популярный элемент сайдбара «Категории», название сайта, вывод автора статьи ну пожалуй и хватит. Эти элементы генерируют большое количество запросов к БД (в данном случае кеширование не учитываем).

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

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

Миф об уникальности шаблонов сайта

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

Структура подавляющего большинства сайтов такова:

struktura-sayta

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

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

Мало того, классы назначаемые для блоков имеют одинаковые названия, а при использовании встроенных в WordPress, то вообще идентичны.

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

Давайте рассмотрим самые популярные сайты:

  • Google исповедует минимализм. Минимум верстки, тут вообще ничего нет кроме текста и картинок.
  • Яндекс — простенький дизайн в котором можно поменять только задний фон. Никаких заморочек и выпендрежа.
  • Вконтакте — тут вообще все до ужаса напоминает картинку выше. Шапка, левый сайдбар, контент и подвал.

Все самые популярные сайты в мире ничем не отличаются внешне, только расцветка и ширина блоков. Это практично и правильно.

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

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

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

Подготовка к созданию темы для сайта на WordPress

После столь большого отступления (я почему-то думал, что втиснусь в меньший объем) перейдем к первым шагам построения темы.

И тут мы доходим до того что вы, наверное искали с первых строк статьи, создаем файлы и папки. Тут я не буду долго тянуть резину. Скачиваем, у кого нет, Nodepad++, он доступен и бесплатен.

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

После того как вы проделали все установки и настройки переходим в следующую директорию:

C:\WebServers\home\localhost\www\ваше название папки\wp-content\themes.

Тут создаем папку, назовите ее как хотите, в английском регистре к примеру MyFirstThemes.

После того как папка была создана заходим в нее и создаем стандартный блокнот и переименовываем его в index.php, таким же макаром создаем следующие файлы:

  1. style.css;
  2. functions.php;
  3. category.php;
  4. header.php;
  5. footer.php;
  6. page.php;
  7. sidebar.php;
  8. single.php;
  9. search.php;
  10. comments.php;
  11. tag.php;
  12. 404.php.

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

Таким образом у вас в папке MyFirstThemes должно быть 12 файлов в формате PHP, один CSS и папка где будут храниться картинки.

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

4 Комментария

    • Если вам так удобнее, я исправил) хотя это абсолютно ни на что не влияет…

      • Спасибо. Мне нравится ваша статья — интересная, содержательная, вот только одно слово «слух резало». На читаемость влияет. Так что это просто пожелание к улучшению. )

Добавь свой комментарий

Your email address will not be published.


*