Здравствуйте, здравствуйте, здравствуйте Уважаемые читатели блога Qbici.ru! Давненько я не писал на блог, но на то была довольно весомая причина: я разрабатывал новый шаблон!

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

Новый блог.

Однажды вечером ночью мне пришла в голову идея завести новый блог, посвященный одному виду спорта. В голове прокручивались варианты какие можно написать статьи, какие темы рассмотреть, что провести, ну и так далее. А если есть уже придуманная тема и домен с хостингом приобрести не проблема, то нужен новый дизайн! Почему именно новый? Думаю,  я уже вырос из шаблонных тем и сам вполне могу сверстать подходящий мне шаблон (эх, это я тогда так думал, но все таки…, хоть и было множество трудностей, думаю я справился).

Создать тему для WordPress: программа Artisteer.

Поисковые запросы: «Создать тему/шаблон wordpress», давали множество вариантов решения моей проблемы, и я остановился на одном из первых. Предлагалось сделать шаблон через программу Artisteer. Ну а раз есть еще и такая программа, которая шаблоны клепает, то почему бы не воспользоваться. Посмотрел я значит часовое видео (хотя мог бы и не смотреть — программа действительно очень простая), и принялся за дело. Буквально за пару часов новый шаблон был готов!  После сохранения я установил тему на сайт, который я только что создал на Денвере.

Версия программы оказалось триальной и поэтому все элементы, которые были выполнены картинками с завидной периодичностью красовалась надпись: Trial Trial Trial. «Не проблема» — подумал я, открою папочку /images и изменю все в Snagit или еще где, да хоть в Painte. Хорошо что я сразу не принялся за дело, а посмотрел что из себя представляет созданная тема. Сказать, что там был лишний код, значит ничего не сказать, одних только .php файлов программа насоздавала столько, что было трудно сказать какой за что отвечает.

В общем программа Artisteer плавненько ушла в топку…

Создать тему WordPress самому: лучшее решение.

После неудачи с Aristeer, на блоге Владимира мне встретилась ссылка на один очень любопытный ресурс, благодаря которому я успешно начал создавать тему, которую Вы сейчас видите перед собой. Кто-то в комментариях сказал что на сайте webformyself.com есть бесплатные видео уроки по созданию шаблона wordpress. Почему бы не попробовать? Зашел, подписался, получил ссылку на скрытый раздел сайта, где было выложено аж 8 уроков, продолжительностью порядка 7-8 часов.

Уроки просто отличные! Начинается все с фотошопа, где меня научили рисовать макет сайта. Правда я не полностью его нарисовал, думаю это совсем необязательно, но все таки очень желательно, чтобы наглядно представлять где, как и что должно располагаться. Затем началась непосредственно верстка — ничего сложного в этом нет, за день я сверстал примерный макетик сайта. И вот оно самое интересное: интеграция голой html странички со стилями css в движок wordpress.

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

Создание файла comments.php

На мой взгляд comments.php самый сложный файл из всех что встречаются в теме WordPress. Только над ним я бился около недели, но в конце концов он был создан, причем такой, каким его хотел видеть я. К сожалению, в интернете практически невозможно найти полного мануала по созданию комментариев на WordPress. Где-то есть одна информация, в другом источнике другая, в третьем… В общем по крупицам я кое-как сформировал комментарии.

Древовидные комментарии, плавающая форма написания и отправки комментария, смайлики и все все все что требовалось было заключено в два файла comments.php и function.php, ну и в стили конечно. В общем радости не было предела!

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

Еще немного из истории темы.

Обидно, что за короткий промежуток времени (день-два) полностью создать шаблон нельзя. А когда есть незаконченное дело, это негативно отражается на сне Мысли как реализовать то да это крутились в голове и редко давали заснуть. Просто пи.. капец, прямо как навязчивая идея.

Реализация «WordPress штучек» без плагинов.

С самого начала я не хотел привинчивать к теме плагины, и когда был сделан последний крайний штрих в css стилях,  на Локальном сайте не стояло ни одного плагина.

Навигация по страницам, стрелка наверх, хлебные крошки, табы, топ-комментаторов и т. д. — все было реализовано без вмешательства плагинов, благо на это есть скрипты и великий файл function.php

Как установить тему с Денвера.

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

Создаю zip архив, кидаю все файлы туда, иду в панель управления Qbici и загружаю тему, нажимаю предпросмотр и… Сразу в глаза бросается хороший кусок кода вместо поисковой формы, Съехавшее верхнее и нижнее меню и еще ряд косяков.

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

Раньше колонка контента была несколько шире, и я часто использовал картинки шириной 600px, нынешний же дизайн этого делать не позволял, поэтому картинки просто напросто сначала наезжали на правую стенку diva, а затем скрывались за ней и overflow:hidden не помогал, да если бы он и помог, все равно бы смотрелось некрасиво. Как говорится Исходный код спешит на помощь, узнав класс стандартных изображений задаю width:565px, и вот большие картинки становятся вполне смотрибельными. На этом и успокоился, но не надолго. Зашел в пост где есть маленькие картинки, и там все маленькие картиночки приняли ширину 565px, ну блин, пришлось дописывать еще три буквы: max-width:565px.

Все кроется в мелочах.

Мелочи, такие мелочи… Столько незначительных деталей, которые врядли заметит посетитель, но которые создают картину сайта в целом.  Без мелочей никуда, и я не имею ввиду где-то забытую ;  или >, хотя это посетитель уж точно заметит.

Напоследок.

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

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

А если у кого-то возникнут вопросы как что-то реализовано здесь, либо как что-то сделать на своем блоге, то могу предложить свою помощь, ибо основные моменты сайтостроения на движке WordPress я уже освоил)

Кстати, подумал, а не создать ли бложик о сайтостроении, функциях WordPress и SEO, а то за время написания шаблона нахватался столько материала, что сразу статей на 15-20 хватит.

Еще обновил WordPress — сколько оказывается я упускал. Вот вкратце история шаблона, хотел написать больше, но уже все подзабыл…