37 WordPress тем c простым дизайном и чистым кодом
Вы ищете простые WodPress темы для своего сайта? В сети, на выбор есть довольно много тем для WordPress. Но из-за того, что их очень много, пользователь легко может запутаться в выборе идеальной темы. В этой статье мы подобрали и привели 21 самых лучших простых тем для WordPress, которые стоит опробовать.
Этот список включает в себя как бесплатные так и платные темы WordPress. Особое внимание уделено чистому коду и простоте дизайна.
1. Modern Mag
Modern Mag является простой, красивой и адаптивной WordPress темой от компании ThemeLab. Он может быть использован для журнального или новостного сайта. Также неплохо смотрится и для введения блога. Тема имеет 3 цветовые схемы, пользовательские виджеты, несколько шаблонов страниц и легкую настройку. Также вам больше не придется беспокоиться о скорости, так как в теме оптимизирована быстрая скорость загрузки страниц.
2. Daily Dish Pro
Построенная на Genesis Framework от StudioPress, Daily Dish Pro обеспечивает идеальное сочетание чистого кода с минималистским дизайном. Эта универсальная WordPress тема имеет 6 шаблонов страниц, пользовательский заголовок, и легко настраиваемые опции. Также тема адаптирована под мобильные устройства.
3. Exposure
Exposure — это простая WordPress тема для портфолио. В теме имеется простой конструктор страниц, который позволяет вам создавать страницы так, как вы хотите. Также тема имеет множество вариантов своих настроек и полностью адаптирована под мобильные устройства.
4. Stargazer
Stargazer является красивой бесплатной WordPress темой. В теме используется чистый код и она полностью адаптивна под мобильные устройства. Также тема включает в себя пользовательский заголовок и фон, и полностью может быть настроена с помощью встроенного настройщика.
5. Corner
Corner является хорошо продуманной WordPress темой для творчества и креатива. Тема поддерживает отображение вашего портфолио и фотографий, так как, в основном она подходит для личных веб-сайтов. Также она поддерживает неограниченное число цветовых вариантов и множество вариантов настройки.
6. Executive
Executive является чистой бизнес-темой для WordPress. Тема полностью адаптивна под мобильные устройства, и поддерживает пользовательские виджеты, слайдеры, отзывы и управление портфолио. Тема имеет 3 цветовых схемы и несколько шаблонов страниц, которые можно использовать для создания самых разных страниц.
7. Modern Studio
Modern Studio — это с чистым кодом WordPress тема в стиле минимализм, который особенно подойдет для рекламных и дизайнерских агентств. Она адаптивна и имеет быстрые и простые настройки. Тема поддерживает несколько цветовых вариантов, посадочные страницы (landing page), пользовательский заголовок и фон.
8. Hueman
Hueman является бесплатной и универсальной WordPress темой. Она прекрасно смотрится в мобильных устройствах и имеет множество самых разных настроек. Настраивать тему очень удобно и легко, потому что тема имеет свою собственную панель настроек. Также тема включает в себя несколько шаблонов страниц, поддерживает пользовательский заголовок, фон, логотип и неограниченные цветовые варианты.
9. Music
Music — название само говорит за себя. Это хорошо разработанная WordPress тема для музыкантов и артистов. В теме разработаны удобные функции для альбомов, треков, портфолио и т.д. Особенно уникальна функция полно-экранного видео параллакса.
10. Nico
Nico — это чистая и простая тема для WordPress. Она подойдет для персонального сайта или портфолио. Тема поддерживает фильтруемые типы записей, портфолио-слайдер и два варианта макета. Тема полностью адаптивна и имеет собственную панель настроек.
11. Accountancy
Accountancy — это бизнес-тема для WordPress с чистым кодом, которая особенно подойдет для бухгалтеров и бухгалтерских фирм. Тема универсальна, и может быть использована для любого бизнес-сайта. Тема имеет встроенный и настраиваемый слайдер, отзывы и модуль «Услуги». Также тема поддерживает 3 цветовые схемы, пользовательские виджеты, посадочные страницы (landing page), и много других интересных функций.
12. Semicolon
Semicolon — это журнальная тема для WordPress, которая доступна бесплатно. Тема отображает избранные изображения в несколько колонок. Есть четыре области для виджетов, и можно изменять цвета виджетов боковой панели. Тема полностью адаптивна и имеет легкие настройки.
13. Sixteen Nine Pro
Построенная на мощном Genesis Framework, тема Sixteen Nine Pro обеспечивает уникальное отображение вашего контента. Трех-колоночный макет полностью адаптивен под мобильные устройства. Тема имеет собственные настройки, пользовательский заголовок, фон, несколько шаблонов страниц и простые настройки.
14. Elegant
Elegant — это красивая и привлекательная WordPress тема для художников, фотографов и дизайнеров. Тема имеет встроенные модули добавления фотогалерей, слайдеров, видео и аудио. Elegant имеет множество опций для легкой настройки под свои нужды.
15. FotoFrame
FotoFrame — это простая фото тема для WordPress. Она поддерживает встроенный слайдер и имеет адаптивный макет с вариантами и две цветовые схемы.
16. Slipstream
Slipstream — это чистая и бесплатная WordPress тема для блоггеров. Она фокусируется на простоту дизайна без ущерба для эстетики. Особенностью темы является пользовательский заголовок, фон, макеты страниц и настраиваемые виджеты. Тема полностью адаптивна.
17. Flat
Flat — это бесплатная тема для WordPress с дизайном в две колонки. Простой и незамысловатый дизайн делает ее идеальным для персональных сайтов и блоггеров. Она прекрасно отображается на экранах мобильных устройств, и имеет пользовательский фон, заголовок, и поддерживает форматы постов.
18. Omega
Omega — эта надежная WordPress тема предназначена для использования в качестве родительской темы. Omega является простой темой но в то же время очень мощной, и подойдет для создания практически любого типа сайта с использованием дочерней темы.
19. Angle
Angle — WordPress тема с чистым кодом для портфолио, с простыми функциями перетаскивания. Тема включает в себя модули портфолио, слайдер, визуальный настройщик и несколько вариантов макетов.
20. Foogo Pro
Foogo Pro является простой и универсальной WordPress темой с чистым кодом. К особенностям темы можно отнести кнопку призыва к действию, слайдер, 4 колонки для особых областей, и область для избранных клиентов. Тема полностью адаптивна и поддерживает несколько цветовых схем и выбор макетов.
21. Fara
Fara — это красивая и бесплатная WordPress тема для персонального использования. Особенностью темы является макет в 2 колонки в стиле Masonry (кирпичная кладка), с акцентом на контент. Тема поддерживает пользовательский заголовок, фон и цветовые схемы, которые можно менять с помощью настройщика темы.
22. Zweig
Zweig — это бесплатная WordPress тема в одну колонку. Специально предназначенный для удобной читаемости, Zweig поддерживает лигатуру с красивой типографикой. Она прекрасно смотрится на экранах мобильных устройств и имеет три области для виджетов в футере.
23. Soundstage
Soundstage — простая WordPress тема для музыкантов и музыкальных коллективов. К особенностям темы можно отнести модуль дискографии, которая позволяет легко загружать альбомы и треки на сайт. Также она имеет настраиваемый слайдер в домашней странице, страницы профилей участников группы и полностью адаптивна.
24. Swell
Чистая WordPress тема для блога — Swell, с большим изображением в заголовке и отзывчивым дизайном. Тема поддерживает встроенную модуль портфолио, а также шаблон слайдер страницы.
25. Intro theme
Intro theme — это простая и отзывчивая WordPress тема для портфолио. Тема поддерживает слайдер в домашней странице, портфолио, настраиваемые виджеты и простые опции настройки.
26. Connect theme
Connect theme — простая и персональная WordPress тема с чистым кодом для профессионалов. К особенностям данной темы можно отнести профильную домашнюю страницу, отзывчивый вертикально по центру макет и простые опции настроек. Тема подойдет как для личной профильной страницы, так и для полноценного блога.
27. Portfolio theme
Как говорит само название, Portfolio theme — это тема для портфолио. Она предназначена для демонстрации профессиональных талантов и навыков. Тема с минималистским дизайном и полностью адаптивна. Она поддерживает слайдер сверху и несколько готовых областей для виджетов.
28. Writr
Writr — это бесплатная Tublr тема для WordPress. Если вы хотите перенести блог с Tumblr на WordPress, то вы можете попробовать данную тему. К особенностям темы можно отнести минималистский дизайн поддерживающий форматы постов.
29. Minimal Artist
Чистый премиум шаблон для WordPress
Янв 21
размещено в: Разное. Classiad, это современная премиум тема, которая лучше всего подойдет для создания интернет – проекта типа каталогов. Работает с движком вордпресс самых свежих версий. Но, несмотря на это, этот шаблон премиум класса, и его можно использовать для проектов совершенно любой тематики.К отличительной особенности можно отнести очень простую установку и настройку. Это стало возможным благодаря функциональной административной панели, в которой можно работать даже без особых знаний html – программирования. Это будет особенно полезным новичкам, осваивающим работу с системой.
В самом верху шаблона находятся контактные данные и регистрационная форма для общения с целевыми посетителями. Ниже имеется горизонтальное выезжающее мега – меню и место для логотипа.
Все элементы дизайна качественно прорисованы. Имеется возможность добавления красивых анимационных эффектов. Контент расположен на белом фоне и способствует удержанию посетителей на странице.
Стильный слайдер, который поддерживает огромное количество анимационных эффектов и возможность добавления в слайдер не только фото, а также и текстовой информации со ссылками на сторонние ресурсы.
Тема наделена функциональной админ панелью, гибкая управляемость позволяет настраивать практически любой елемент шаблона.
Важные характеристики
- Интегрированы карты от Гугла.
- Полезная кнопка «наверх».
- Возможность добавления копирайтов в футер.
- Слайдер поддерживает работу с сенсорными устройствами.
- Поддержка Гугл шрифтов.
- Разработан на современном фреймворке Redux.
- Поддержка работы с твиттером.
- Возможность перенаправления всех новых уведомлений на электронный адрес.
- Удобная навигация и чистый дизайн.
- Адаптивный дизайн, благодаря чему корректно отображаеться на любых устройствах.
- Кроссбраузерность.
- Seo – оптимизирована, что в значительной мере улучшает позиции сайта в поисковых системах.
- Для индексной страницы доступны несколько вариантов для отображения.
- В установочном пакете присутствуют демо данные в xml формате.
- Поставляеться с подробной документацией по установке и настройке.
- Поддержка wpml, Bootstrap 2.3.2.
- Работа темы осуществляеться на современных технологиях.
- Подержка актуальный версий WordPress.
- Отимизирован для работы на мобильных и планшетных устройствах.
- Чистый макет с удобной навигацией.
- Присуцтвуют файлы локализации (.mo / .po).
Скачать данную тему вы сможете на этом сайте.
Philomina. Шаблон с чистым дизайном для сайтов на WordPress.
Philomina — шаблон с чистым современным дизайном, который поможет создать уникальный в своей тематике сайт, аналоги к которому будет сложно подобрать. По тематике шаблон довольно универсальный, все зависит от пользовательского контента. На главной странице дизайн предполагает наличие 3-9 интересных качественных фотографий, которые будут соответствовать тематике создаваемого сайта.
Адаптивность шаблона Philomina заложена в дизайн, даже меню в шапке страницы сделано таким образом, чтобы сразу приспособить шаблон к экранам различных устройств, в том числе и мобильных. Разработчики Philomina среди функциональных дополнений упоминают привлекательные красивые эффекты загрузки страницы, для картинок добавлены лайтбоксы.
Среди немногочисленных настроек Philomina, доступных в панели управления: свойства сайта, меню, статическая главная страница. Стоит также упомянуть, что шаблон Philomina кроссбраузерный, а значит его безошибочная работа может быть проверена во всех современных браузерах, в браузерах различных устройств, включая мобильные. Интерфейс шаблона Philomina адаптивный, а код оптимизирован для работы с поисковыми системами, что весьма удобно при продвижении сайта в сети Интернет.
Как вы возможно уже заметили, основная часть всех настроек такого замечательного шаблона как Philomina уже знакома пользователям, тем более если они уже имели дело с WordPress. Новичках с WordPress тоже повезло! Потому что панель управления в WordPress одна из самых замечательных, настолько замечательная, ведь пользователи сразу разбираются в ее настройках. Более того, все изменения в панели управления WordPress отображаются в режиме реального времени, в той же вкладке, где происходит редактирование.
Надо учитывать такой момент при создании сайта, что доля мобильных пользователей растет в геометрической прогрессии каждый день вместе с интенсивным развитием информационных технологий. А для раскрутки созданного сайта крайне важно учитывать мобильных пользователей и отслеживать, кроссбраузерный ли выбранный вами шаблон или нет, ведь ключевые люди это посетители. Мобильные пользователи такой подход к созданию сайта наверняка оценят. Именно поэтому шаблон Philomina кроссбраузерный, и, следовательно, шаблон Philomina будет исправно работать во всех современных браузерах, в браузерах различных устройств, включая мобильные.
Детальное изображение шаблона Philomina представлено на рисунке:
Настройки шаблона Philomina показаны ниже:
25 простых бесплатных WordPress тем для писателей
Главная » Темы » 25 простых бесплатных WordPress тем для писателей
В этой заметке мы подготовили для вас подборку простых бесплатных минималистичных тем, каждая из которых отлично подойдет начинающим писателям для публикации своих мыслей. С данными шаблонами вы сможете самостоятельно и быстро создать качественную площадку для вашего материала и привлечь большое количество постоянных читателей.
1. Noteblog
Описание | Демо | Скачать
Notebook хорошо оптимизирована WordPress тема для всех популярных поисковых систем. Журналисты, писатели и авторы легко могут использовать ее для публикации своих заметок. Noteblog имеет множество функций и красивый отзывчивый дизайн, а еще, данный шаблон отлично будет работать на мобильных телефонах.
2. Copywriter
Описание | Демо | Скачать
Copywriter — отличная тема WordPress для новостных сайтов или блогов. В шаблоне используется адаптивный дизайн, поэтому она будет выглядеть хорошо на всех устройствах. Все настройки можно легко изменить в разделе «Настройка» панели администратора Вордпресс.
3. Writers
Описание | Демо | Скачать
Если вы начинающий писатель, автор или блогер, то эта тема идеально подойдёт для вас. Writers можно использовать для новостного журнала, персонального блога, корпоративного бизнес-сайта, творческого портфолио или дневника путешествий. Шаблон сделан для комфортного чтения текста и очень прост в настройке.
4. writerBlog
Описание | Демо | Скачать
writerBlog — бесплатная минимальная тема для блогов от ThemeIsle. Шаблон является отзывчивым и совместимым с широким спектром плагинов, таких как: Nivo Slider, Siteorigin Page Builder, WooCoomerce, Photo Gallery Grid и Contact Form 7.
5. Clean Blogging
Описание | Демо | Скачать
Дизайн Clean Blogging очень простой, но это сделано, чтобы не отвлекать читателя от самого контента. И в целом это быстрая Wordpress тема, которая отлично смотрится на всех устройствах, и предназначена для того, чтобы давать посетителям вашего сайта наилучшие возможности для чтения.
6. Wisteria
Описание | Демо | Скачать
Wisteria — это чистая, красивая, современная тема для блогов и журналов. Она имеет творческий, отзывчивый макет, с чистым и ориентированным на контент дизайном, и простой функциональностью. Wisteria — идеальное решение для обмена контентом и творчеством с миром.
7. Verbosa
Описание | Демо | Скачать
В этой теме есть все необходимое, чтобы помочь вам в вашем творчестве. Verbosa — это элегантный дизайн и простота. Ее разработчики использовали массу трюков, чтобы повысить удобочитаемость, расставить акценты и создать правильный дизайн, который сделает ваш контент более привлекательным для чтения.
8. EasyBlog
Описание | Демо | Скачать
Тема EasyBlog — идеально подходит для блогеров, редакторов, писателей, путешественников и т. д. В ней используется фреймворк Bootstrap для оперативного реагирования на изменения ширины экрана и подстраивание дизайна под устройство. Это прекрасно спроектированная, чистая и светлая тема, которая идеально подходит для всех видов информационных сайтов.
9. Kent
Описание | Демо | Скачать
Kent — чистая тема, предназначенная для писателей, которые хотят сосредоточиться на написании контента. Это идеальное решение для тех, кто хочет рассказывать истории или расписывать свою жизнь. Kent включает настраиваемые параметры заголовка, социальных ссылок и нижнего колонтитула, чтобы вы могли оформить свой сайт именно так, как хотите.
10. Simppeli
Описание | Демо | Скачать
Simppeli — наверное, самая простая и доступная тема для блогеров и писателей. Она имеет красивый дизайн и позволяет вашему контенту быть самой важной частью вашего сайта.
11. Anarcho Notepad
Описание | Демо | Скачать
Изначально автор разработал тему Anarcho Notepad для личных блогов и дневников, но потом решил ею поделиться со всеми. Она использует последние HTML-5, CSS-3, PHP и встроенные функции WordPress для создания современного сайта, который будет выглядеть хорошо в любом браузере.
12. Clean Journal
Описание | Демо | Скачать
Clean Journal — чистая отзывчивая WordPress тема для блогеров, писателей и малых предприятий. Она основана на теме Catch Base, которая использует HTML5, CSS3 и отзывчивый дизайн, где каждый элемент был тщательно настроен для идеального отображения на всех устройствах и платформах.
13. Serena
Описание | Демо | Скачать
Serena — ещё одна очень чистая, отзывчивая, минималистская тема для писателей и блогеров. Которая поможет акцентировать внимание на контенте, а не излишкам дизайна.
14. Alkane
Описание | Демо | Скачать
Alkane — чистая, минимальная и простая в использовании персональная тема WordPress. Это готовая отзывчивая тема, которая построена с использованием HTML5 и CSS3. Которая идеально подходит для блогеров, путешественников и писателей.
15. Мodernize
Описание | Демо | Скачать
Modernize — это еще одна современная, простая и красивая тема для движка Вордпресс. В ней доступный широкий выбор настроек: значки социальных сетей, несколько шаблонов, добавление логотипа, функция переключения между одним и двумя столбцами и многое другое.
Вот такие темы вы можете смело использовать для своих сайтов совершенно бесплатно. А если вы хотите сделать свой блог на более профессиональном уровне, посмотрите нашу подборку премиум шаблонов «Обзор 25 крутых премиум WordPress шаблонов для современных писателей и блогеров»
верстка под WordPress, верстка шаблона WordPress — Netpeak Blog
На днях я перевёл полезную статью и хочу поделиться ею со всеми. Итак, статью написал товарищ Nick La и далее повествование будет от его лица.
Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.
1. Frontend блога
До того, как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы (шапка, заголовок поста, форма поиска, навигация, подвал и т. д.).
Стандартный Frontpage (index.php)
Стандартный Single (single.php)
2. Photoshop-макеты
Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем. Скачайте demo.zip, чтобы увидеть готовый файл Photoshop.
3. HTML и CSS
Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы. Следуя шагам этой инструкции, вы можете использовать мои HTML файлы GlossyBlue из demo.zip. Распаковав архив, вы увидите index.html, single.html и page.html. Далее я буду использовать их для превращения в шаблон.
Зачем сперва создавать статический HTML? Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить код WordPress. Так что можно уже не беспокоиться об ошибках в HTML или CSS.
4. Как работает тема WordPress
Если вы перейдёте к папке стандартной темы (wp-content/themes/default), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css. Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php , header.php, sidebar.php, и footer.php).
Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .
5. Дублирование файлов шаблонов
Скопируйте папку HTML из GlossyBlue в папку wp-content/themes. После этого перейдите в директорию темы default, скопируйте comments.php и searchform.php в папку glossyblue.
6. Style.css
Перейдите в папку темы default, откройте файл style.css. Скопируйте закомментированный в начале файла текст и вставьте в style.css темы GlossyBlue. Если хотите, можете изменить название и данные об авторе.
7. Разделение файлов
Теперь нам нужно понять где разделить HTML-файлы на части: header.php, sidebar.php, и footer.php. На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.
8. Header.php
Откройте index.html. Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php. Перейдите в папку темы default, откройте новый header.php. Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h2 и div class=description.
Меню навигации (wp_list_pages) Замените тэги li в ul id=nav на ;
Ссылка: wp_list_pages
9. Sidebar.php
Вернитесь к index.html, вырежьте код с того места, где начинается form id=searchform и до закрытия тега div id=sidebar, поместите его в новый php-файл и сохраните как sidebar.php.
- Замените form id=searchform со всем содержимым на .
- Замените теги li категорий на
- Замените теги li архивов на
Ссылка: wp_list_categories и wp_get_archives
Вернитесь к index.html. Извлеките оттуда код от div id=footer включительно с тегом div id=footer и до конца /html затем поместите в новый footer.php.
Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге.
«Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы)
11. Index.php
Теперь в вашем index.html должен остаться только div id=content. Сохраните файл как index.php. Впишите строки: get_header, get_sidebar, и get_footer в том порядке, как они встречаются в шаблоне.
12. Разбор цикла
Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение «Not Found».
13. Копирование цикла
Перейдите к директории темы default, откройте index.php. Скопируйте цикл из стандартного index.php в свой — между div id=content../div. После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.
14. Предпросмотр темы
Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design, вы должны увидеть тему GlossyBlue. Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.
15. Single.php
Пришло время создать шаблон single.php. Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php, сохранив его как single.php. Откройте single.php из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template. На следующем скриншоте отображены внесенные мною изменения:
16. Page.php
Теперь новый single.php сохраните с названием page.php. Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php готов.
17. Удаление файлов HTML
Удалите все файлы HTML из папки glossyblue (они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php или 404.php не будет в папке темы, WordPress автоматически использует index.php для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.
18. Шаблон страницы WordPress
А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:
Тут я использовал query_post (showposts=-1 означает «отобразить все записи»), чтобы перечислить все записи.
Теперь зайдите в панель администратора, создайте новую страницу и назовите её Archives. В выпадающем списке шаблонов выберите Archives.
Дополнительная литература:
Просмотрите список Плагины WordPress, возможно, они покажутся вам полезными. Для более углублённого изучения читайте WordPress Theme Hacks.
Что такое базовый шаблон WordPress
Подготовительная статья
В этой статье я рассмотрю что такое базовый шаблон WordPress. Практически это создание и подготовка базовых файлов перед «натяжкой» HTML шаблона на движок WP. Эта информация пригодится в будущем. Я не знаю уровень каждого заинтересованного посетителя, поэтому не могу пропустить такие прописные истины. А в следующей публикации мы займемся самым интересным.
В окончании статьи смотрите ссылки на предыдущие материалы. И на использованные в статье материалы. В основном это документация codex.wordpress.org. И ссылочки будут на разделы кодекса.
Ну давайте все-таки начнем по порядку.
Где размещается тема WordPress и базовая структура шаблона WordPress
Темы WordPress находятся в поддиректориях wp-content/themes/. Тут все предельно просто, тема под названием "test" будет расположена в директории wp-content/themes/test/.
А в свою очередь директория темы WordPress обязательно должна содержать всего два файла:
style.css — шаблон стилей темы;
index.php — довольно гибкий файл, и в него можно поместить все — шапку сайта, боковую колонку — сайдбар, подвал темы, зону контента, категории, архивы, страницу поиска и все другие модули сайта. Оба эти файла помещаются в папку с темой.
Но мы, естественно создадим как положено, что более гибко и удобно использовать — разные собственные файлы шаблонов для категорий, комментариев, тегов.
Помимо вышеупомянутых файлов, в теме может (у нас будет) присутствовать файл
functions.php
Этот файл работает как плагин, загружается вместе с инициализацией движка WordPress и служит для расширения функционала WordPress. Мы будем постепенно вносить нужные для работы темы функции.
Наш базовый шаблон WordPress для начала будет состоять сразу из
style.css — стили нашей темы;
index.php — главный шаблон;
functions.php — функционал темы;
header.php — шаблон заголовка темы;
sidebar.php — шаблон боковой колонки;
footer.php — шаблон части страницы — подвала.
Позже создадим еще дополнительные файлы для страниц с категориями, метками, одиночными записями, несколько шаблонов страниц.
Итак, давайте начнем создавать наш базовый шаблон WordPress
Пока просто создадим директорию шаблона, пустые файлы, и скриншот темы, а в последующих публикациях разберем подробнее как они подключаются и начнем их наполнение.
На рабочем столе создайте папку с названием startwp — это и будет директория, другими словами папка с темой. Пишите название в нижнем регистре, латинскими буквами. Название может быть любым, но пока лучше просто повторяйте за мной.
Далее в этой папке создайте несколько пустых файлов:
style.css — стили нашей темы;
index.php — главный шаблон;
functions.php — функционал темы;
header.php — шаблон заголовка темы;
sidebar.php — шаблон боковой колонки;
footer.php — шаблон подвала.
Обратите внимание на расширения файлов, прописывайте их правильно.
Ну и кликните по картинке, скачайте, положите в папку startwp, не меняйте размер оригинала. Это будет скриншот нашей темы, который будет отображаться в админ-панели во вкладке с установленными темами.
Пока созданные файлы оставьте как есть. В одной публикации очень сложно все вместить, поэтому следите за появлением свежих статей, в которых продолжим создание темы на WordPress.
Вот исходники к данной публикации
- Скачать материалы
В статье использована документация codex.wordpress.org — создание тем WordPress.
— Я специально создал FeedBerner, чтобы вы не пропустили не одной публикации. Вот ссылка на FeedBurner, просто кликните по картинке :
Feed новостей моего сайта почтой
Как скажется беременность на моей фигуре?
Лучший способ отблагодарить автора
Похожие по Тегам статьи
Уникальный шаблон для WordPress с помощью конструктора своими руками
Привет друзья. Сегодня пост будет не совсем обычным — он будет гостевым. Поэтому не удивляйтесь что в статье пойдет повествование от женского рода — я вовсе не сменил пол)
Автор статьи, известная многим из вас, Дарья, владелица сайта о духовности и саморазвитии, любезно предложила поделиться своими знаниями в области шаблоностроения, и я с удовольствием их публикую:
В те далекие времена, когда я только создавала свой сайт, передо мной стояла очень острая проблема оформления и дизайна. Конечно, тогда я еще ничего не понимала в кодах, но какой-то шаблон для сайта все равно нужно было искать. В платных шаблонах есть большая уверенность в качестве, но все таки денег тратить не хочется, а искать надежного изготовителя тоже труд не из простых. Ну а темы из паблика мне не позволила уставновить моя «тонкая душевная организация»: слишком они страшные и одноколоночные, да и, прямо скажем, не всегда блещут оригинальностью, а еще в них вшиты разные сомнительные ссылки.
Как создать шаблон для WordPress своими руками
Итак, в этой статье мы решим задачу создания шаблона своими руками и регулировки его под свои нужды. Вы узнаете:
- Как быстро, просто и бесплатно создать чистый шаблон для WordPress.
- По-минимуму взаимодействовать с кодом при этом.
- Как изменять и корректировать свой шаблон самостоятельно.
Перед тем, как приступить к делу, подготовьте графику для вашего будущего шаблона, продумайте его структуру: количество сайдбаров, ширину блоков, основные цвета. Я это уже сделала и решила создать универсальный шаблон для блога о Городах.
Вместе со своими заготовками захожу на сайт замечательного буржуйского генератора шаблонов lubith.com. Почему именно он? Честно говоря, я перепробовала множество разных шаблонизаторов, все из них зарубежные, и по-настоящему простым оказался только lubith. Кроме того, он формирует очень простую структуру шаблона, в которой все файлы, как на ладони. Еще один плюс, этот генератор создает именно темы для Вордпресс.
По правде сказать, теперь у меня есть некоторый опыт работы с шаблонами на блогах других людей и понимаю, как мне повезло с самого начала наткнуться именно на lubith. Не знаю, какая тема стоит у вас, но я видела случаи, когда в шаблон не только зверски вшиты ссылки, но еще и нет прямого доступа к основным файлам стилей и функций через админку. И поэтому моя рекомендация проверенная.
Итак, после несложной процедуры регистрации, нажимаю в верхнем меню кнопку editor и перехожу в редактор.
Редактор очень прост и интуитивен в применении, ведь создан именно для таких чайников, которые при виде кода падают в обморок.Поэтому даже блогодедушка легко справится и сможет практически переплюнуть Лебедева своим дизайном. Главное – немного разбираться в английском языке.
Вы сможете регулировать почти все виды стилей через этот редактор: установить рамку для любого блока, сделать его прозрачным, установить цвет или фоновый рисунок, отрегулировать размер шрифта, размер блока и так далее. Все это можно сделать либо установив точный размер в пикселях для конкретного блока, либо просто потянув край блока в сторону курсорчиком.
Кроме того, у вас будет возможность удалить любые ненужные элементы: я, например не использую лого и описание сайта, кто-то, быть может, хочет сайт без картинки в шапке или сайдбара.
Вот что получилось у меня за 15 минут работы.
Хоть я и ненавистник минимализма и серого цвета, но по-моему такой аккуратный шаблон отлично подойдет для блога о мегаполисе. Что бы было не скучно, я добавила немного синего и красный тон для важных акцентов, рисунок в шапку и сайдбар.
Как только вы решили, что шаблон готов, нажимайте на кнопку download и на ваш компьютер загрузится заархивированный пакет со всеми необходимыми файлами. Что бы установить такую тему на свой блог, достаточно просто закачать архив – и ВСЕ!
Однако есть у этого генератора несколько ограничений и недостатков в случае бесплатного использования – нет возможности повторно загрузить шаблон, чтобы позже его снова подкорректировать в генераторе, нельзя редактировать вид комментариев, нельзя создавать больше одной темы. Именно по этой причине я хочу немного подробней остановиться на том, как выглядит код этого шаблона и уверить вас, что самостоятельно править стили – это просто и необходимо.
Итак, после установки шаблона на сайт, зайдите в footer.php и найдите следующий код
[php] div>
<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 – блок, отвечающий за оформление цитат
Что же, на этом все, изучайте стили и ХТМЛ, и сойдет на вас манна небесная в виде заказчиков и классных дизайнов