ruSKweb.ru

"Самая хорошая работа – это высокооплачиваемое хобби"

Генри Форд

Создаем шаблон WordPress с помощью конструктора: делаем уникальную тему.

выделился

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

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

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

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

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

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

создаем шаблон

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

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

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

  1. Wrapper – фоновый блок, содержащий все остальные
  2. Сontainer – блок с основными содержательными элементами сайта
  3. header – блок шапки
  4. site-title – блок названия сайта
  5. site-description – блок описания сайта
  6. access (menu) – блоки горизонального меню под шапкой
  7. content – блок основной контентной части сайта, где распологаются посты
  8. primary – отвечает за виджет справа
  9. entry-title – блок с метками о дате публикации и авторе
  10.  entry-meta – блок с метками а рубрике поста
  11. widgetitle – заголовок одного виджета
  12.  textwidget – тело виджета (в данном случае текстового)

Дополнительные блоки:
Footer – подвал
Link – отображение ссылок
Comments – вид комментариев и их авторов
home .sticky – отвечает за вид «прилепленных» на главной записей
Primary – отвечает за виджет справа
Secondary – отвечает за виджет слева
Blockquote – блок, отвечающий за оформление цитат

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

Понравилась статья? Жми лайк:

44 комментариев

  1. Даша пишет:

    Спасибо Сережа, как я удачно зашла к тебе а тут и мой пост!
    спасибо за ссылки))
    У кого есть вопросы – могу помочь

    [Ответить]

    Сергей Кобзарь отвечает:

    Даша тебе спасибо) Я немножко его прозевал – ставил запланированную публикацию и забыл что иконку так и не выбрал) Сейчас поправлю

    [Ответить]

    Даша отвечает:

    Кстати, почему ты не перелинковал статью?

    [Ответить]

    Сергей Кобзарь отвечает:

    потом перелинкую, я сначала статьи набираю, и раз в месяц где-то занимаюсь перелинковкой.

    [Ответить]

  2. Тимур пишет:

    Отличная статья. Стал принимать гостевые посты?

    [Ответить]

    Сергей Кобзарь отвечает:

    Начали предлагать, начал принимать =) Хотя кому я пока нужен с моим нулевым пузом)

    [Ответить]

    Тимур отвечает:

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

    [Ответить]

    Сергей Кобзарь отвечает:

    спасибо на добром слове, энтузиазм это у тех кто по 2-3 статьи в день клепает)) а я так, в сторонке курю)

    [Ответить]

  3. Kristina пишет:

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

    [Ответить]

    Сергей Кобзарь отвечает:

    А я уже попробовал, быстро и просто создается чистое тело в php под вордперсс, а там дальше уже версткой допиливается)

    [Ответить]

  4. Дмитрий пишет:

    Берем на вооружение)
    Хороший вариант

    [Ответить]

  5. Есть один минус во всем этом великолепии. Стандартно.

    Но для начала, для тех, “кто падает в обморок при виде кода” – самое то. Хотя по-моему всё-таки правильнее подучить стили и пхп.

    [Ответить]

    Сергей Кобзарь отвечает:

    Андрей я там к примеру только php тело сделал будущего шаблона. Потом скачал и уже с версткой и html работую сам. Удобно – ничего лишнего, все простенько и со вкусом)

    [Ответить]

    Андрей Рубцов отвечает:

    Ну это ж всё от конечных целей зависит, в принципе и от вкусов. Кому-то вот всякие разные свистелки-перделки нравятся, а минимализм – за борт… :???:

    [Ответить]

    Андрей Рубцов отвечает:

    Закинул сервис в закладки, посмотрю. Может не всё так плохо, как мне показалось. ))

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

    Даша отвечает:

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

    [Ответить]

  6. А вы действительно думаете, что уникальность – это куча прикрученных блестяшек и цветочков? Тогда мне придется вас немножко огорчить. В случае с сайтами уникальность – это контент. На что я, кстати, совершенно не претендую. Было бы довольно нелепо кричать об уникальности “тыча всем в глаза” мой супер-пупер-самый-лучший сайт с шаблоном, скачанным из свободного доступа и контентом, скопированным из интернета чуть менее, чем полностью. Правда допиливал я этот шаблон вручную, но это не суть важно. Я как-то по другим каким-то критериям оцениваю интернет, сайты, да и людей тоже. Например – мне нравится то, что у меня получилось. Вам нравится то, что получилось у вас. Это никаким образом не пересекается.

    P.S.: я не отношусь к своим сайтам как детям и не пытаюсь их как-то защищать и доказывать их уникальность. Для меня это просто увлечение. А шаблонизатор – инструмент. Такой же как калькулятор, к примеру. И гордиться тем, что мой калькулятор красивее, чем ваш или наоборот – с моей стороны было бы довольно глупо.

    [Ответить]

    Даша отвечает:

    Вы чего так остро реагируете..)
    Мне кажется что уникальность сайта видна за версту, так же как и его неуникальность – особенно это касается опытного сайтостроителя, когда он заходит на сайт, он способен за 30 сек определить всю его уникальность.

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

    [Ответить]

  7. Это не остро, это просто развернуто получилось. ) Наверно это ужасно, но я не занимаюсь оптимизацией – перелинковкой, покупкой-продажей ссылок, ключевиками и т.п., достаточно стандартного необходимого минимума. Мне просто это неинтересно. )

    Так это и есть дискуссия, на “нравоучения” я бы просто не стал бы отвечать. )

    [Ответить]

  8. Хороший вариант. Я о таком не знала. Если бы знала, то может и поэкспериментировала со своим сайтом. Но уже не хочу тревожить. Однако на будущее, если передумаю, я запомнила, где информацией воспользоваться ;)

    [Ответить]

    Сергей Кобзарь отвечает:

    Я сам от Дарьи только узнал об этом сервисе, уже и опробовать успел)

    [Ответить]

  9. Руста пишет:

    Помогите раздвинуть сайт блога с темой RoundBox

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

    можно прислать css на почту(djrust@яндекс.ру)

    Заранее благодарен!

    [Ответить]

    Сергей Кобзарь отвечает:

    Календарь можно убрать в настройках виджетов, а шире сделать блоки можно в настройках css. Вы только адрес сайта скиньте, который хотите подкорректировать

    [Ответить]

  10. Рустам пишет:

    не надо убирать календарь…
    Вопрос с шириной решил…
    Остался вопрос ,как убрать из этой темы RSS и поиск вверху

    [Ответить]

    Сергей Кобзарь отвечает:

    удалить из кода шаблона

    [Ответить]

  11. Castiil пишет:

    Очень клёва… Спасибо!!!!!!!! давно искал!!!!!! ;-) ;-) ;-)

    [Ответить]

  12. Вулфик пишет:

    Ух ты, как раз меня терзает вопрос, где взять более менее уникальный шаблон для нового проекта, а тут такой чудесный сервис!
    Кто ищет, тот всегда найдет!
    Спасибо, ребята, за наводку!

    [Ответить]

  13. Артём пишет:

    Начал изучать wp… Для начала очень познавательно!

    [Ответить]

    Сергей Кобзарь отвечает:

    Артем, удачи. ВП довольно легкая cms даже если поначалу кажется сложной

    [Ответить]

  14. Серж пишет:

    Здравствуйте!
    Может не совсем по теме)
    хочу сделать на главной странице своего сайта анонсы статей в виде картинок.
    Просто,что бы на главной странице было 40 картинок без надписей.
    Что бы выглядело все,как большой квадрат в котором 40 маленьких прямоугольников,на каждый из которых можно кликнуть и перейти на статью.
    Как бы это сделать? :grin:

    [Ответить]

    Сергей Кобзарь отвечает:

    Привет Серж.

    Вообще вариантов такое реализовать может быть несколько. Начиная от спец. шаблонов в которых такая функция уже встроена и заканчивая ручной настройкой. Если вы разбираетесь в php то проблем не будет.

    Можно как вариант просто отдельную страницу создать для главной и оформить ее как душе угодно. Тут опять же все индивидуально и зависит от используемого шаблона.

    [Ответить]

    Серж отвечает:

    Спасибо.
    php я не знаю :smile:
    Не подскажите название шаблона?

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

  15. роман пишет:

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

    [Ответить]

  16. Серж пишет:

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

    Есть ли такой плагин?

    Я знаю,что так можно отсортировать категории(my category order),а вот сами анонсы…хм…

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

    Артем отвечает:

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

    [Ответить]

  17. Серж пишет:

    спасибо…
    буду искать)

    [Ответить]

  18. AnSummer пишет:

    Замечательный какой сервис! У меня тоже аллергия на коды, как у автора))). Поэтому довольствуюсь готовыми темами, как максимум могу че-то со шрифтами поделать рамочки вставить)). Спасибо

    [Ответить]

  19. Игорь пишет:

    Народ, чего-то там сайт захромал – пишет ошибку, не хочет пускать. Я тут html с css изучать начал, решил немного полениться и залезть в шаблоны ;-) А не тут-то было :twisted: ;-) Отсюда вывод: лень опасна!!!!!

    [Ответить]

  20. Галина пишет:

    Всем привет.Тема статьи,одна из самых востребованных для новичка,т.к. очень мало,кто из вебмастеров пишет о ней,все больше-о плагинах.Но присоединюсь к др.комментаторам и выскажу свое мнение-новичка.
    1.Заголовок не стыкуется с содержанием темы,т.к.тема совершенно не раскрыта,одни общие слова-надо то сделать,другое сделать,но нет конкретных примеров того и этого,хотя бы в виде скриптов.
    2.Заголовок для этой статьи должен быть такой-“Обзор структуры шаблона”, или “

    [Ответить]

  21. Алексей пишет:

    Здравствуйте!
    Статья познавательная
    в особенности для молодых блогов на WordPress
    в шаблонах данного движка действительно много внешних ссылок
    как в русских версиях, так и в иностранных
    это дело кропотливое и требует от автора внимательности….
    Спасибо за статью
    Если у вас есть возможность
    То прошу вас оставить комментарий на моем блоге ……

    [Ответить]

  22. артем пишет:

    здравствуйте. этот сервис позволяет сверстать мобильную версию (как в adobe muse) или только десктоп?

    [Ответить]

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: