Создаем шаблон WordPress с помощью конструктора: делаем уникальную тему.
Привет друзья. Сегодня пост будет не совсем обычным — он будет гостевым. Поэтому не удивляйтесь что в статье пойдет повествование от женского рода — я вовсе не сменил пол)
Автор статьи, известная многим из вас, Дарья, владелица сайта о духовности и саморазвитии, любезно предложила поделиться своими знаниями в области шаблоностроения, и я с удовольствием их публикую:
В те далекие времена, когда я только создавала свой сайт, передо мной стояла очень острая проблема оформления и дизайна. Конечно, тогда я еще ничего не понимала в кодах, но какой-то шаблон для сайта все равно нужно было искать. В платных шаблонах есть большая уверенность в качестве, но все таки денег тратить не хочется, а искать надежного изготовителя тоже труд не из простых. Ну а темы из паблика мне не позволила уставновить моя «тонкая душевная организация»: слишком они страшные и одноколоночные, да и, прямо скажем, не всегда блещут оригинальностью, а еще в них вшиты разные сомнительные ссылки.
Как создать шаблон для WordPress своими руками
Итак, в этой статье мы решим задачу создания шаблона своими руками и регулировки его под свои нужды. Вы узнаете:
- Как быстро, просто и бесплатно создать чистый шаблон для WordPress.
- По-минимуму взаимодействовать с кодом при этом.
- Как изменять и корректировать свой шаблон самостоятельно.
Перед тем, как приступить к делу, подготовьте графику для вашего будущего шаблона, продумайте его структуру: количество сайдбаров, ширину блоков, основные цвета. Я это уже сделала и решила создать универсальный шаблон для блога о Городах.
Вместе со своими заготовками захожу на сайт замечательного буржуйского генератора шаблонов lubith.com. Почему именно он? Честно говоря, я перепробовала множество разных шаблонизаторов, все из них зарубежные, и по-настоящему простым оказался только lubith. Кроме того, он формирует очень простую структуру шаблона, в которой все файлы, как на ладони. Еще один плюс, этот генератор создает именно темы для Вордпресс.
По правде сказать, теперь у меня есть некоторый опыт работы с шаблонами на блогах других людей и понимаю, как мне повезло с самого начала наткнуться именно на lubith. Не знаю, какая тема стоит у вас, но я видела случаи, когда в шаблон не только зверски вшиты ссылки, но еще и нет прямого доступа к основным файлам стилей и функций через админку. И поэтому моя рекомендация проверенная.
Итак, после несложной процедуры регистрации, нажимаю в верхнем меню кнопку editor и перехожу в редактор.
Редактор очень прост и интуитивен в применении, ведь создан именно для таких чайников, которые при виде кода падают в обморок.Поэтому даже блогодедушка легко справится и сможет практически переплюнуть Лебедева своим дизайном. Главное – немного разбираться в английском языке.
Вы сможете регулировать почти все виды стилей через этот редактор: установить рамку для любого блока, сделать его прозрачным, установить цвет или фоновый рисунок, отрегулировать размер шрифта, размер блока и так далее. Все это можно сделать либо установив точный размер в пикселях для конкретного блока, либо просто потянув край блока в сторону курсорчиком.
Кроме того, у вас будет возможность удалить любые ненужные элементы: я, например не использую лого и описание сайта, кто-то, быть может, хочет сайт без картинки в шапке или сайдбара.
Вот что получилось у меня за 15 минут работы.
Хоть я и ненавистник минимализма и серого цвета, но по-моему такой аккуратный шаблон отлично подойдет для блога о мегаполисе. Что бы было не скучно, я добавила немного синего и красный тон для важных акцентов, рисунок в шапку и сайдбар.
Как только вы решили, что шаблон готов, нажимайте на кнопку download и на ваш компьютер загрузится заархивированный пакет со всеми необходимыми файлами. Что бы установить такую тему на свой блог, достаточно просто закачать архив – и ВСЕ!
Однако есть у этого генератора несколько ограничений и недостатков в случае бесплатного использования – нет возможности повторно загрузить шаблон, чтобы позже его снова подкорректировать в генераторе, нельзя редактировать вид комментариев, нельзя создавать больше одной темы. Именно по этой причине я хочу немного подробней остановиться на том, как выглядит код этого шаблона и уверить вас, что самостоятельно править стили – это просто и необходимо.
Итак, после установки шаблона на сайт, зайдите в footer.php и найдите следующий код
[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 —> [/php]
Как видно в блоке «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 – блок, отвечающий за оформление цитат
Что же, на этом все, изучайте стили и ХТМЛ, и сойдет на вас манна небесная в виде заказчиков и классных дизайнов
Комментариев: 44
Спасибо Сережа, как я удачно зашла к тебе а тут и мой пост!
спасибо за ссылки))
У кого есть вопросы — могу помочь
Даша тебе спасибо) Я немножко его прозевал — ставил запланированную публикацию и забыл что иконку так и не выбрал) Сейчас поправлю
Кстати, почему ты не перелинковал статью?
потом перелинкую, я сначала статьи набираю, и раз в месяц где-то занимаюсь перелинковкой.
Отличная статья. Стал принимать гостевые посты?
Начали предлагать, начал принимать =) Хотя кому я пока нужен с моим нулевым пузом)
С твоим энтузиазмом, этот блог может выйти на высокий уровень, тем более стиль изложения необычный. С юмором пишешь, а это плюс 😉
спасибо на добром слове, энтузиазм это у тех кто по 2-3 статьи в день клепает)) а я так, в сторонке курю)
Статья замечательная! Я и не знала, что шаблон можно склепать в интернете бесплатно! Надо будет обязательно попробовать, что из этого получится. А то я как раз хотела поменять тему. Нашла среди условно бесплатных одну понравившуюся — а в ней ссылок куча, да еще и закодированных. Пол дня уйдет , чтобы разобраться где и что удалять.
А я уже попробовал, быстро и просто создается чистое тело в php под вордперсс, а там дальше уже версткой допиливается)
Берем на вооружение)
Хороший вариант
Есть один минус во всем этом великолепии. Стандартно.
Но для начала, для тех, «кто падает в обморок при виде кода» — самое то. Хотя по-моему всё-таки правильнее подучить стили и пхп.
Андрей я там к примеру только php тело сделал будущего шаблона. Потом скачал и уже с версткой и html работую сам. Удобно — ничего лишнего, все простенько и со вкусом)
Ну это ж всё от конечных целей зависит, в принципе и от вкусов. Кому-то вот всякие разные свистелки-перделки нравятся, а минимализм — за борт… 😕
Закинул сервис в закладки, посмотрю. Может не всё так плохо, как мне показалось. ))
мне поначалу тоже не понравился если честно) чутка привык и норм — за пол часа накидал шаблончик простенький, зато точно уверен что без всякой вирусни и закодированных ссылок (ту ссылку что идет в шаблоне легко удалить)
Ну Андрей, у вас ведь тоже абсолютно стандартный шаблон, я например такой видела у другого блоггера, да и колчество его скачиваний не говорит в пользу его уникальности. А тут есть возможность как минимум визуально сделать уникальное сочетание графики и стилей.
А вы действительно думаете, что уникальность — это куча прикрученных блестяшек и цветочков? Тогда мне придется вас немножко огорчить. В случае с сайтами уникальность — это контент. На что я, кстати, совершенно не претендую. Было бы довольно нелепо кричать об уникальности «тыча всем в глаза» мой супер-пупер-самый-лучший сайт с шаблоном, скачанным из свободного доступа и контентом, скопированным из интернета чуть менее, чем полностью. Правда допиливал я этот шаблон вручную, но это не суть важно. Я как-то по другим каким-то критериям оцениваю интернет, сайты, да и людей тоже. Например — мне нравится то, что у меня получилось. Вам нравится то, что получилось у вас. Это никаким образом не пересекается.
P.S.: я не отношусь к своим сайтам как детям и не пытаюсь их как-то защищать и доказывать их уникальность. Для меня это просто увлечение. А шаблонизатор — инструмент. Такой же как калькулятор, к примеру. И гордиться тем, что мой калькулятор красивее, чем ваш или наоборот — с моей стороны было бы довольно глупо.
Вы чего так остро реагируете..)
Мне кажется что уникальность сайта видна за версту, так же как и его неуникальность — особенно это касается опытного сайтостроителя, когда он заходит на сайт, он способен за 30 сек определить всю его уникальность.
Конечно, можно и не быть уникальным, только в плане оптимизации это довольно гиблое дело. Я не говорю что вам срочно надо менять шаблон или контент, вы все равно при своем мнении останетесь, да и неудал из меня советчик)) Комментарии вроде как созданы для дисскусии а не для нравоучений, хотя и такое случается, я просто высказываюсь)
Это не остро, это просто развернуто получилось. ) Наверно это ужасно, но я не занимаюсь оптимизацией — перелинковкой, покупкой-продажей ссылок, ключевиками и т.п., достаточно стандартного необходимого минимума. Мне просто это неинтересно. )
Так это и есть дискуссия, на «нравоучения» я бы просто не стал бы отвечать. )
Хороший вариант. Я о таком не знала. Если бы знала, то может и поэкспериментировала со своим сайтом. Но уже не хочу тревожить. Однако на будущее, если передумаю, я запомнила, где информацией воспользоваться 😉
Я сам от Дарьи только узнал об этом сервисе, уже и опробовать успел)
Помогите раздвинуть сайт блога с темой RoundBox
надо чтобы середина(где обычно текст) стал шире…календарь,чтобы не вылазил..также пошире сделать виджеты(свежие комментарии,записи)..И соответствено,чтобы не уплыло все….
А то мне не нравится ,что середина узкая…и бока маленькие
можно прислать css на почту(djrust@яндекс.ру)
Заранее благодарен!
Календарь можно убрать в настройках виджетов, а шире сделать блоки можно в настройках css. Вы только адрес сайта скиньте, который хотите подкорректировать
не надо убирать календарь…
Вопрос с шириной решил…
Остался вопрос ,как убрать из этой темы RSS и поиск вверху
удалить из кода шаблона
Очень клёва… Спасибо!!!!!!!! давно искал!!!!!! 😉 😉 😉
Ух ты, как раз меня терзает вопрос, где взять более менее уникальный шаблон для нового проекта, а тут такой чудесный сервис!
Кто ищет, тот всегда найдет!
Спасибо, ребята, за наводку!
Начал изучать wp… Для начала очень познавательно!
Артем, удачи. ВП довольно легкая cms даже если поначалу кажется сложной
Здравствуйте!
Может не совсем по теме)
хочу сделать на главной странице своего сайта анонсы статей в виде картинок.
Просто,что бы на главной странице было 40 картинок без надписей.
Что бы выглядело все,как большой квадрат в котором 40 маленьких прямоугольников,на каждый из которых можно кликнуть и перейти на статью.
Как бы это сделать? 😀
Привет Серж.
Вообще вариантов такое реализовать может быть несколько. Начиная от спец. шаблонов в которых такая функция уже встроена и заканчивая ручной настройкой. Если вы разбираетесь в php то проблем не будет.
Можно как вариант просто отдельную страницу создать для главной и оформить ее как душе угодно. Тут опять же все индивидуально и зависит от используемого шаблона.
Спасибо.
php я не знаю 🙂
Не подскажите название шаблона?
Увы нет, я такими не пользуюсь поэтому названия не знаю. но точно знаю что они есть, поищите не сайтах с подборкамми шаблонов.
Не понял как делать-английский не знаю! видео бы сняли и коментировали-было бы супер! ведь по видео лучше запоминается !я по видео сайты научился создавать- а что написано в инете как делать сайты месяц читал тока голову себе забил!и так и не понял! зделайте видео пожалуста..
Здравствуйте,подскажите,как можно отсортировать анонсы на главной странице.
Я имею ввиду у меня анонсы выводятся в виде картинок,отсортированы по времени,можно ли их отсортировать вручную? Как пятнашки,снизу вверх,справа налево))
Есть ли такой плагин?
Я знаю,что так можно отсортировать категории(my category order),а вот сами анонсы…хм…
Здравствуйте Серж, я о таких плагинах не знаю ибо не пользовался ни разу, но уверен что что-то подобное есть, если не плагин то как минимум хаки или скрипты. Попробуйте погуглить.
Ну. это все же не пятнашки))) Записи можно сортировать по разному, но не справа налево и тд. Есть определенные критерии: по заголовку, по дате публикации, по дате модификации и т.д. Есть вариант сортировать оп произвольному полю: прикручиваете произвольное поле в записям и уже по нему можно делать какую угодно сортировку. Главное понимать, по какому критерию должны быть поля отрсотированы, а дальше дело техники))
спасибо…
буду искать)
Замечательный какой сервис! У меня тоже аллергия на коды, как у автора))). Поэтому довольствуюсь готовыми темами, как максимум могу че-то со шрифтами поделать рамочки вставить)). Спасибо
Народ, чего-то там сайт захромал — пишет ошибку, не хочет пускать. Я тут html с css изучать начал, решил немного полениться и залезть в шаблоны 😉 А не тут-то было 😈 😉 Отсюда вывод: лень опасна!!!!!
Всем привет.Тема статьи,одна из самых востребованных для новичка,т.к. очень мало,кто из вебмастеров пишет о ней,все больше-о плагинах.Но присоединюсь к др.комментаторам и выскажу свое мнение-новичка.
1.Заголовок не стыкуется с содержанием темы,т.к.тема совершенно не раскрыта,одни общие слова-надо то сделать,другое сделать,но нет конкретных примеров того и этого,хотя бы в виде скриптов.
2.Заголовок для этой статьи должен быть такой-«Обзор структуры шаблона», или «
Здравствуйте!
Статья познавательная
в особенности для молодых блогов на WordPress
в шаблонах данного движка действительно много внешних ссылок
как в русских версиях, так и в иностранных
это дело кропотливое и требует от автора внимательности….
Спасибо за статью
Если у вас есть возможность
То прошу вас оставить комментарий на моем блоге ……
здравствуйте. этот сервис позволяет сверстать мобильную версию (как в adobe muse) или только десктоп?