Уникальный шаблон для Wordpress с помощью конструктора своими руками

Опубликовано: 01.09.2018

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

Автор статьи, известная многим из вас, Дарья , владелица сайта о духовности и саморазвитии, любезно предложила поделиться своими знаниями в области шаблоностроения, и я с удовольствием их публикую:

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

Как быстро создать шаблон для сайта с помощью Artisteer 4 🖌️ Инструменты и функции.Часть вторая

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

Как быстро, просто и бесплатно создать чистый шаблон для WordPress. По-минимуму взаимодействовать с кодом при этом. Как изменять и корректировать свой шаблон самостоятельно.

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

Шаблон для WordPress без особых знаний

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

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

Итак, после несложной процедуры регистрации, нажимаю в верхнем меню кнопку editor и перехожу в редактор.

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

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

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

Вот что получилось у меня за 15 минут работы.

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

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

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

Итак, после установки шаблона на сайт, зайдите в footer.php и найдите следующий код

div id="site-info"> <a href="http://wordpress.org/" title="Semantic Personal Publishing Platform" rel="generator"> Wordpress </a> theme built with <a href="http://www.lubith.com/" title="Wordpress Theme Generator" rel="generator"> Lubith </a> </div>

Как видно в блоке «site-info» расположены ссылки на генератор, но они не закодированы и вы можете без вреда для нервов удалить этот блок вовсе или заменить ссылки на свои. Позже не забудьте также и удалить site-info из файла style.css, если вдруг решите стереть этот блок.

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

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

Зачем я их привожу? У вас же аллергия на код!

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

Простое решение может быть таким: вы открываете файл style.css в редакторе Вордпресса и ищете слово «wrapper» — название фонового блока. Тут же можно в два счета изменить цвет этого блока на розовый. Аналогичные правки можно делать в сайдбаре и контентной части, раскрасить или сместить комментарии, менять шрифты и развлекаться… Главное, не удалить ненароком блог. Итак, вот справка:

Wrapper – фоновый блок, содержащий все остальные Сontainer – блок с основными содержательными элементами сайта header – блок шапки site-title – блок названия сайта site-description – блок описания сайта access (menu) – блоки горизонального меню под шапкой content — блок основной контентной части сайта, где распологаются посты primary — отвечает за виджет справа entry-title – блок с метками о дате публикации и авторе entry-meta – блок с метками а рубрике поста widgetitle – заголовок одного виджета textwidget – тело виджета (в данном случае текстового)

Дополнительные блоки:

Footer — подвал

Link – отображение ссылок

Comments – вид комментариев и их авторов

home .sticky – отвечает за вид «прилепленных» на главной записей

Primary – отвечает за виджет справа

Secondary – отвечает за виджет слева

Blockquote – блок, отвечающий за оформление цитат

Что же, на этом все, изучайте стили и ХТМЛ, и сойдет на вас манна небесная в виде заказчиков и классных дизайнов, а шаблон от lubith.com в действии можете посмотреть у меня на сайте selfcomposing.org