Как сделать пустой шаблон wordpress
Пустая тема для WordPress — чистые шаблоны для разработки
Чистый шаблон для разработки сайта на WordPress представляет собой пустую тему с минимальным дизайном и базовой компоновкой элементов. Кому и зачем может потребоваться использование такой темы при создании сайта и где найти пустой шаблон?
Пустая тема Вордпресс для разработки
Чистая тема используется веб-дизайнерами и веб-разработчиками в качестве основы для создания сайта с полностью настраивающимися элементами. Такой шаблон представляет собой скелет с минимальным содержанием, который обычно включает код для отображения записей, архивных страниц, комментариев. При этом стиль оформления либо вообще отсутствует, либо представлен по минимуму.
Кому может понадобиться использование пустой темы WordPress? Полностью стилизованные шаблоны удобны для применения «как есть». Если Вы не разработчик, а заказчик – то проще и дешевле приобрести премиум-тему с несколькими видами страниц, тематических блоков и вариантов оформления контента.
Если вам просто нужен типовой сайт – готовый премиум-шаблон редко стоит более 60 долларов, в то время как разработка «с нуля» может стоить несколько сотен или тысяч.
Пустой шаблон WordPress послужит отправной точкой для разработки собственной пользовательской темы. Такие темы поставляются с базовым PHP, CSS и HTML-кодом и уже заполненными файлами. Использование шаблона для собственных нужд позволит использовать все возможности в полной мере, поскольку чистая тема предоставит:
Пустые темы WordPress ускоряют рабочий процесс за счет сокращения объема кода, который необходимо написать. Наличие скелетной основы означает, что не требуется каждый раз повторять один и тот же процесс, когда вы создаете новый шаблон. Использование пустой темы снижает вероятность того, что вы забудете важные файлы или код, необходимые для правильной работы сайта на WordPress.
Где скачать чистый шаблон для WordPress?
Найти пустую тему для разработки сайта на WordPress можно в каталоге на официальном сайте (1). Наберите в строке поиска «blank» (2), в репозитории содержится 2 пустых шаблона для создания пользовательской темы (3).
Чистые темы также можно найти на сайтах известных разработчиков шаблонов и плагинов.
Например, по адресу: https://livecomposerplugin.com/downloads/blank-theme/. Некоторые пустые темы WordPress оснащены полезными интегрированными функциями, такими как адаптивные макеты или образцы страниц, которые помогут протестировать ваш сайт.
С использованием чистой темы можно создать шаблон под сайт, содержащий очень много текстовой информации, например, различные онлайн-базы или справочники. Не рекомендуется скачивать пустые темы в блогах неизвестных вебмастеров, поскольку в такой код могут быть добавлены посторонние ссылки.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
Пустой шаблон ВордПресс, что можно выбрать если нужен WordPress пустой шаблон?
Пустой шаблон ВордПресс — это шаблон, который служит отправной точкой для разработки собственной пользовательской темы, поэтому такой шаблон также часто называют «чистая тема ВордПресс» или «чистый шаблон ВордПресс».
Практически каждый пустой шаблон WordPress поставляется с уже написанными для вас базовыми кодом WordPress:
А также необходимыми файлами темы. В отличие от каркасов тем, большинство файлов wordpress пустой темы предназначены для изменения в соответствии с вашими потребностями.
Зачем использовать пустой шаблон ВордПресс?
Пустые темы WordPress ускоряют рабочий процесс, уменьшая объем кода, который необходимо написать. Наличие основы скелета означает, что вам не нужно повторять один и тот же процесс инициации каждый раз, когда вам нужно начать создавать новую тему.
Кроме того, использование пустой темы WordPress снижает вероятность того, что вы забудете важные файлы или код, необходимый для правильной работы темы.
Некоторые пустые темы WordPress также будут иметь полезные встроенные функции, такие как адаптивные макеты и примеры данных, которые помогут вам протестировать вашу тему.
10 лучших бесплатных пустых тем для WordPress
Как правило, пустые темы не поставляются со стилями, вы не должны использовать их как есть, и они не являются фреймворками с пользовательскими хуками, фильтрами и тегами шаблонов. Вместо этого вы используете чистую тему для создания собственного шаблона.
Теперь, давайте посмотрим на некоторые из лучших пустых тем для WordPress.
Underscores wordpress
Он имеет пять шаблонов макета. К сожалению, Underscores не имеет предварительно созданного адаптивного макета, поэтому вам придется его создать.
Серия учебных пособий Шевченко Вячеслава на YouTube поможет вам научиться создавать темы WP с использованием Underscores.
JointsWP
JointsWP построен на основе Foundation 6 (основной фреймворк для разработки интерфейсов наряду с Bootstrap).
У вас есть возможность использовать версию Sass или просто версию CSS, если хотите.
Roots пустая тема WordPress
Roots — отличная пустая тема WordPress с открытым исходным кодом. Она построена с использованием HTML5 Boilerplate и Bootstrap (если вам это не нужно, вы можете заменить или удалить его). Он также имеет файлы Grunt для быстрой компиляции кода LESS и объединения ваших файлов CSS и JS.
Отличная особенность Roots — это Theme Wrapper, которая помогает вам избежать написания одного и того же кода в нескольких файлах.
Проверьте темы, созданные с помощью Roots. Как начать работать с Roots, можно найти в официальной документации проекта.
HTML5 Blank WordPress Theme
Это оптимизированная для веб-приложений пустая тема WordPress для разработчиков. HTML5 Blank WordPress Theme поставляется с полезными пользовательскими функциями темы, такими как динамическая боковая панель, а также стандартный код для использования WordPress Shortcode API в ваших темах.
Bones пустой шаблон ВордПресс
Bones — это бесплатная пустая тема ВордПресс, созданная поверх HTML5 Boilerplate. Он отзывчив и разработан в соответствии с философией Mobile First
HTML5 Reset WordPress Theme (тема ВордПресс пустая)
Эта пустая тема поможет вам начать с правильного пути к созданию семантических и структурно организованных тем HTML5 WordPress. Например, шаблон публикации, включенный в тему HTML5 Reset WordPress, включает микроформат hNews, чтобы помочь поисковым системам лучше понять ваш контент.
HTML5 Boilerplate для WordPress
Этот проект с открытым исходным кодом взял популярный HTML5 Boilerplate и преобразовал его в пустую тему WordPress.
В проекте HTML5 Boilerplate for WordPress используется современная структура блога HTML5, основанная на рекомендованной структурной разметке для блогов, предложенной Брюсом Лоусоном из Opera Web.
Naked WordPress
Эта пустая тема WordPress отлично подходит для людей, которые хотят научиться разрабатывать темы.
Тема «Naked WordPress» прокомментирована таким образом, что при создании темы WordPress вы понимаете, что происходит на самом деле. Это как урок WordPress + тема для начинающих вместе взятых.
WP-Flex
WP-Flex — отзывчивая пустая тема WordPress. У него есть серьезные функции, которые по достоинству оценят веб-разработчики, такие как примеры данных для модульного тестирования и строгое соответствие официальным руководящим принципам WordPress.
BlankSlate
BlankSlate, пожалуй, самая простая, минималистская пустая тема, которую вы можете получить. BlankSlate является средним звеном между созданием тем WordPress с нуля и использованием больших начальных тем, таких как Roots или Underscore.
3 способа создать шаблон страницы
В этой статье я расскажу о способах создания шаблонов для постоянных страниц WordPress. Каждый способ несет в себе плюсы и минусы. Но прежде чем начать, коротко о том, что такое страницы и чем они отличаются от записей.
В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как «Обо мне», «Контакты», «Карта сайта»; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как «запись» в рубрике «Кодекс», а ссылки в меню шапки ведут на страницы: Функции.
Страницы похожи на записи — они расположены в одной таблице базы данных и данные у них почти одинаковы: заголовок, текст, дополнительные поля и т.д. И то и другое — это записи, но разных типов: страницы древовидные и организуются путем создания родительских и дочерних страниц, а записи объединяются рубриками и метками. В WordPress можно создавать дополнительные типы записей древовидные или нет.
Создание страниц в WordPress
Часто нужно создать отдельный шаблон страницы, чтобы вывод информации отличался от остальных страниц. Создавая шаблон страницы в WordPress, можно совершенно изменить страницу: удалить сайдбар, подвал, шапку, можно изменить страницу до неузнаваемости. Например, на этом сайте так изменяется страница на которой выводятся коды файлов WordPress.
Способ 1: шаблон страницы через файл с произвольным названием (классический способ)
Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать «шаблон»:
Преимущества:
Создав один шаблон, мы можем удобно применять его для разных страниц. Например, можно создать шаблон без боковой панели и использовать его на разных страницах.
Недостатки:
После создания файла шаблона в папке темы, нужно зайти в админ-панель и установить шаблон для страницы. При разработке это не всегда удобно. Поэтому если подразумевается использовать шаблон только для одной страницы, используйте второй метод.
Как это работает:
Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок «Атрибуты страницы».
_wp_page_template = default
_wp_page_template = tpl_my-page.php
Поиском подходящих файлов шаблона занимается метод это делает метод WP_Theme::get_post_templates().
Локализация названия шаблона
Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)
При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:
Изменение слага страницы
Достоинства:
Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.
Недостатки:
Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).
Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.
Как это работает:
WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):
Способ 3: шаблон страницы через фильтр «template_include» (коддинг)
Это продвинутый способ, он более сложный, но вместе со сложностью он открывает широкие возможности. С помощью этого способа можно задать шаблон любой странице, записи, категории, любой публикации на сайте или вообще группе любых публикаций.
Рассмотрим на примере:
Достоинства:
Можно установить шаблон для любой страницы или группы страниц. Практически полный карт-бланш в действиях.
WordPress создание темы с нуля
Давно хотел написать подробное руководство о том, как создать тему на WordPress с нуля. Вам это пригодится: если вы хотите научиться разрабатывать сайты на WP, а не просто устанавливать шаблонные решения; вы хотите сделать уникальный дизайн для своего сайта или «натянуть» HTML шаблон; ну или в конце концов работать в этом направлении получая свои кровные.
В свое время мне очень помогла одна статья, размещенная кажется на хабре. Если встречу её снова, то обязательно скину ссылку. Именно в ней более менее подробно и понятным языком был описан процесс создания шаблона для WordPress. Вся остальная информация была представлена небольшими статейками написанными абы как. Ну по крайне мере в рунете. На сегодняшний день, как я вижу, ситуация не особо изменилась.
Вот ещё один пример, когда может понадобится создать тему с нуля. На одном известном мне сайте изначально был установлен шаблон, который полностью устраивал хозяина и дизайном и функционалом. Но скорость его работы была занижена за счет лишних скриптов и не нужного ему функционала. Я думаю это проблема любого шаблона для любой CMS. После долгих мучений с оптимизацией было решено разработать шаблон с нуля на чистом Bootstrap, чтобы не было ничего лишнего, только то, что нужно. На самом деле это заняло не так много времени. Гораздо больше он бы потратил на оптимизацию готового шаблона. Вся работа заняла около недели. И вуаля в Google PageSpeed 99 пунктов.
В этом уроке я покажу как создать тему для WordPress с нуля используя начальный шаблон Bootstrap 4. На самом деле вы можете использовать любой HTML шаблон или сверстать его самостоятельно суть от этого не изменится.
Структура шаблона
Я приведу пример основной структуры файлов темы WordPress для создания шаблона блога или новостного сайта. В каждом конкретном случае эта структура может различаться. Например, можно создать разный дизайн для категорий, шаблоны для кастомных типов записей и т.д.
style.css — файл стилей в корне темы. В нём так же указывается основная информация о шаблоне, но можно её не добавлять. Без этого файла WordPress будет выдавать ошибку темы. Лично я создаю его именно для того, чтобы тема работала и оставляю его пустым.
index.php — содержимое главной страницы
header.php — общая шапка сайта
footer.php — общий футер сайта
functions.php — файл с функциями темы
single.php — шаблон записи
page.php — шаблон страницы
category.php — шаблон списка записей категории
archive.php — шаблон списка записей архивов
404.php — содержимое страницы ошибки 404
search.php — шаблон страницы со списком результатов поиска
css/ — папка со стилями
js/ — папка со JS скриптами
Получается вот такой минимальный набор всех нужных файлов для создания шаблона новостного сайта или блога.
Создание темы WordPress
Если вы ещё не установили CMS WordPress, то пришло время это сделать. Про то, как установить WordPress можно прочитать в этой статье. Если система уже установлена, то продолжаем.
Итак, приступим к созданию собственной темы. Для начала нам понадобится создать папку с названием темы в разделе /wp-content/themes/. Я назову её it-blog. Как я уже говорил, чтобы WordPress не выдавал ошибку, внутри этой папки необходимо создать файл стилей style.css. Теперь в панели администрирования в разделе Внешний вид → Темы появится наша тема, где её можно применить к сайту, нажав кнопку активировать. Название темы будет такое же, как и название её папки. На сайте теперь конечно же будет открываться только белая страница, так как тема ещё совсем пустая.
Вы можете создать свое изображение темы, добавив файл screenshot.png в папку с темой, а в файле style.css установить название, описание, автора и другую информацию добавив в начало файла примерно такой текст:
Лично я считаю, что это лишнее, но для эстетики можно потратить немного времени.
Теперь внутри папки с нашей новой темой нам нужно создать все файлы в соответствии со структурой описанной выше. Можно создать их все сразу пустыми или создавать отдельно по мере написания кода.
HTML шаблон
Как я уже говорил мы будем использовать стандартный начальный шаблон Bootstrap 4. Скачать его можно на официальном сайте по ссылке Starter template.
Для его работы понадобятся файлы bootstrap.min.css и bootstrap.min.js, которые мы соответственно добавляем в папки css и js нашей темы. Скачать их можно по кнопке Download source code на той же странице.
Перед тем, как тема будет «разрезана» на шапку и футер вы можете добавить весь исходный код шаблона в файл index.php и увидеть, что тема работает. Путь до папки с темой указывается функцией get_template_directory_uri() — это чтобы сразу в теме указать ссылки для скриптов. Должно получится примерно следующее:
Если все сделано верно, то на главной странице сайта отобразится тема Bootstrap 4.
Добавляем API WordPress
Первым делом добавим в тему поддержку API WordPress, а так же выведем тайтл. В тег добавляем следующее:
Теперь заголовок окна браузера будет содержать тайтл из системы WordPress.
И ниже подключаем API. Код должен находится внутри тега :
Теперь если вы посмотрите исходный код сайта, то вы сможете увидеть, что в появилась новая разметка, которую добавил WordPress. Это мета-теги, скрипты и т.д.
Как сверстать тему для WordPress
Введение
Добавление темы
Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.
Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.png.
После того, как тема активируется, вы увидите сообщение со ссылкой на сайт. Уже сейчас можно зайти на него и увидеть пустую страницу.
Предварительный осмотр
Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.
Структура страниц
Большинство руководств по созданию тем для WordPress ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на WordPress в рамках предоставленных макетов.
После добавления, список страниц должен выглядеть вот так:
Header.php и Footer.php
Шапка в терминологии WordPress, это не только визуальная шапка на макете сайта. По сути, она содержит весь общий код, который встречается в начале всех страниц сайта. Давайте создадим файл header.php в папке нашего шаблона и наполним его содержимым.
Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».
Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:
В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.
Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.
Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.
Шаблон страницы
Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:
Здесь мы подключили наши файлы шапки и футера, создали блок названия страницы и в теге section вставили стандартный блок вывода контента страниц и постов.
Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:
В результате должна получиться вот такая картина:
Логотип
После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В шаблон шапки, в файле header.php вставьте разметку для логотипа:
Форма поиска
WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:
А в файл стилей запишите стили для формы:
Всё, что осталось сделать – это подключить searchform.php внутри header.php.
Навигация
Добавить навигацию на страницу можно разными способами, например через функцию wp_list_pages, но более современным способом будет добавление через админку. По умолчанию функционал добавления меню не активирован, для того, чтобы это сделать, добавьте в файл темы functions.php следующий код:
После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.
Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:
Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».
После этого меню уже появится на страницах но без стилей. Стилизуем его:
Футер
Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images
images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок
Далее делаем вёрстку в файле footer.php:
И прописываем стили в style.css:
В итоге главная страница сайта должна выглядеть вот так:
Главная страница
Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.
WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-<название страницы>.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.
Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:
Он отличается от кода page.php только тем, что в нем нет заголовка страницы.
То, что мы будем делать дальше, уже выходит за рамки создания темы WordPress, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самой темы.
home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png
Не забудьте поправить пути до картинок. Они зависят от даты добавления.
Теперь осталось стилизовать данный код.
Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:
После этого, главная страница должна отобразиться правильно.
Сайдбар
Теперь, когда главная страница готова, давайте вернемся к шаблону внутренних страниц и добавим в него сайдбар.
Для этого создайте файл sidebar.php и поместите в него следующий код:
После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:
Далее нам нужно добавить стили для вёрстки:
Страница About us
Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:
about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg
Далее перейдите в редактирование страницы в панели администратора и добавьте код:
И стили в style.css:
Шаблон поста
После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:
Этот шаблон аналогичен предыдущим шаблонам с той лишь разницей, что здесь мы сначала отображаем контент поста, а затем комментарии к нему.
Страница поиска
В самом начале, когда мы создавали шаблон шапки мы добавили в него поиск, однако страницы для отображения результатов поиска у нас еще нет. Создайте в папке темы файл search.php и добавьте в него содержимое:
От других шаблонов этот отличается тем, что мы выводим заголовок с текстом поиска, а затем список результатов поиска.
Страница архива
В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.
Последний шаблон, который осталось добавить — это шаблон для 404 страницы, когда WordPress не смог найти запрошенную страницу. Он будет точно такой же, как page.php только вместо вывода постов будет написано сообщение об ошибке:
Заключение
На этом создание шаблона WordPress закончено. Готовый проект можно скачать здесь.