10+ лучших бесплатных тем WordPress 2021 (включая темы WooCommerce)

Если вы хотите выделиться с помощью блога WordPress, выделить личное портфолио или представить интернет-магазин, вам необходимо создать сайт с высочайшим качеством дизайна.

Устанавливаем WordPress и создаем первые записи

Для начала нужно установить сервер и сам WordPress. «Сервер» — это набор программ, которые позволят вам полноценно тестировать сайт на своем компьютере. Кроме вас, его никто не увидит. Откройте нашу простую инструкцию по установке и выполните все пункты.

Устанавливаем WordPress и создаем первые записи

Когда вы установили WordPress, зайдите в панель администратора. Скорее всего, она будет по адресу: 

http://localhost/wordpress/wp-admin 

Устанавливаем WordPress и создаем первые записи

Давайте создадим новую запись:

Сделайте заголовок, напишите какой-нибудь текст, добавьте картинку и нажмите кнопку «Опубликовать» в верхнем правом углу

Устанавливаем WordPress и создаем первые записи

Главная страница пока выглядит так

Пока все очень скромно, не правда ли? Но прежде чем наводить красоту, нам нужно добавить на сайт еще несколько тестовых записей. Вернитесь к началу этого пункта и повторите все несколько раз.

Устанавливаем WordPress и создаем первые записи

Распределяем код по файлам

2. Переименуйте файл в .

3. Откройте в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:

/* Theme Name: MyTheme Theme URI: Author: NoName Author URI: Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: */д. Правые части строк вы можете заменить на собственные, то есть задать свои авторство, версию, описание и прочие данные.

4. Создайте файлы , , , и распределите по ним код из .

4.2. В вставьте код основного блока (со строки <!— Основной блок —> по строку <!— Конец основного блока —>).

4.3. В скопируйте код бокового меню (с <!— Левая панель —> по <!— Конец левой панели —>).

4.4. В вставьте оставшиеся строки (с <!— Ноги сайта —> до конца документа ).

5. Удалите .

6. Перейдите в админ-панель и убедитесь, что шаблон MyTheme появился в разделе Внешний вид -> Темы. Вы даже можете попробовать его просмотреть или активировать, но ничего хорошего из этого пока не получится, ведь шаблон с WordPress мы ещё никак не интегрировали.

Шаблон для WordPress сайта

Где взять такой шаблон? Можно найти в Интернете бесплатно.

Но беда вся в том, что в бесплатные шаблоны их авторы “вшивают” (внедряют в код) разные ссылки или коды. И далеко не всегда эти ссылки и коды такие уж безобидные.

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

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

Читайте также:  Docker. Управление образами и контейнерами

Про “вшитые” коды я вообще молчу. Чего только не запихивают в такие шаблоны.

Вот и получается, что бесплатный сыр только в мышеловке.

Так сколько же стоит шаблон для сайта?

Для своих подписчиков и посетителей моего блога я создала чистый шаблончик.

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

Шаблон для WordPress сайта

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

►Посмотреть шаблон для WordPress сайта ◄

Отдать его совсем бесплатно я не могу. Не ценятся такие бесплатности.

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

►Купить◄

Поделись с друзьями

Давайте дружить

Редактируем шаблон самостоятельно

Простая, но очень важная рекомендация для новичков. Если HTML, CSS для вас дремучий лес, даже не пытайтесь переделывать код. Одно дело, когда в уроке советуют скопировать кусок кода и вставить его в конкретное место файла. Совершенно другое дело, когда блоггер пытается настроить параметры темы WordPress наобум. Помните о регулярном бэкапе базы данных.

Есть три варианта настройки темы или шаблона WordPress:

  1. Через админку.

Достаточно зайти в раздел «Внешний вид» и найти там редактор. В правой колонке будет список всех файлов темы. Нужно выбрать нужный файл, внести изменения и нажать «Обновить».

Редактируем шаблон самостоятельно

Админка

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

  1. В файловом менеджере хостинга.

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

Хостинг

Как работает редактор тем WordPress? Вам нужно открыть папку по адресу /wp-content/темы/название_темы/файл. Если файлового менеджера нет, есть смысл задуматься о смене хостинга.

  1. Редактируем шаблон по
Редактируем шаблон самостоятельно

Когда намечается основательная работа с контентом, и нужно отредактировать сразу несколько файлов в папках, на помощь приходит третий вариант – ftp-клиент.

Достаточно выполнить три простых действия:

  • Запустить клиент, воспользоваться FileZilla, Total Commander. Установив соединение, нужно открыть папку темы ВордПресс по адресу: /wp-content/темы/название_темы/
  • Скопировать файл, внести изменения.
  • Открыть его в Dreamwaver, Notepad++, любой другой толковой программке, предназначенной для редактирования. Выбирайте ПО, с которым действительно удобно работать. Недостаточно просто загрузить тему в WordPress – нужно найти программку для редактирования с удобной подсветкой кода, нумерацией строк.

Итак, давайте начнем создавать наш базовый шаблон WordPress

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

Читайте также:  Как сделать скриншот экрана на компьютере и телефоне

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

Далее в этой папке создайте несколько пустых файлов:

— стили нашей темы;

— главный шаблон;

— функционал темы;

— шаблон заголовка темы;

— шаблон боковой колонки;

— шаблон подвала.

Обратите внимание на расширения файлов, прописывайте их правильно.

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

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

Вот исходники к данной публикации

  • Скачать материалы

В статье использована документация — создание тем WordPress.

— Я специально создал FeedBerner, чтобы вы не пропустили не одной публикации. Вот ссылка на FeedBurner, просто кликните по картинке :

Feed новостей моего сайта почтой

Как скажется беременность на моей фигуре?

Лучший способ отблагодарить автора

Похожие по Тегам статьи

Наполняем файл WordPress

Продолжаю цикл статей по переносу HTML верстки в WordPress. В прошлом занятии мы первоначально…

Разбираем и наполняем файл index php WordPress

Разбираем и наполняем файл index php WordPress, знакомимся с некоторыми функциями и переносим часть…

Перенос header HTML в WordPress

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

Перенос сайта из HTML в WordPress  |   шаблон с нуля   |   Комментировать

Бесплатные темы WooCommerce

Бесплатная тема для магазина WooCommerce

Бесплатные темы WooCommerce

Детали | Демо

Storefront — это гибкая тема WooCommerce, которая наилучшим образом представит ваш интернет-магазин. Он поставляется с целым набором современных функций, которые помогут вам создать замечательный интернет-магазин, который конвертирует.

Бесплатные темы WooCommerce

Аптека Бесплатная тема WooCommerce

Детали | Демо

Бесплатные темы WooCommerce

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

Интернет-магазин Бесплатная тема WooCommerce

Бесплатные темы WooCommerce

Детали | Демо

eStore — отличная бесплатная тема WooCommerce, которая позволяет вам создать высокофункциональный интернет-магазин. Он оптимизирован для SEO, имеет кроссбраузерную совместимость, множество настраиваемых виджетов и ряд других замечательных инструментов и функций. Не стесняйтесь проверить его демо!

Бесплатные темы WooCommerce

Бесплатная тема электронной коммерции Tyche

Детали | Демо

Бесплатные темы WooCommerce

Нужна стильная тема для продвижения вашего интернет-магазина? Проверьте эту бесплатную тему электронной коммерции, которая поразит вас с первого взгляда. Здесь у вас есть элегантный слайдер веб-сайта, броский дизайн и множество функций WooCommerce.

Тема WooCommerce для магазина товаров для домашних животных (Премиум)

Бесплатные темы WooCommerce

Детали | Демо

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

Читайте также:  PDSH: Параллельное выполнение команд на нескольких Linux-серверах

Cделаем элементы шаблона для wordpress (Шаг

После того как работа над версткой окончена, и файл полностью укомплектован div’ами и другими тегами, нам потребуется разделить полученный html код на три части, и вынести их в отдельные файлы:

  1. — все содержимое от первой строки до начала вывода контента;
  2. — все содержимое от начала до конца блока sidebar;
  3. — все содержимое от начала футера до конца файла;

В конечном итоге, у вас останется в , только часть, в которой должен выводиться контент сайта (содержание страниц).

В моем примере принял такой вид:

123456789101112131415 <!—header—> <div class="wraper-content"> <div class="wrap"> <div class="wraper-content"> <div class="content-wrap"> <div id="content"> Контент </div> <!—sidebar—> </div> </div> </div> </div> <!—footer—>

Комментариями выделены те места, на которых, располагались соответствующие части.

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

Выглядят они следующим образом:

  1. get_header();
  2. get_sidebar();
  3. get_footer();

Чтобы шаблон начал функционировать нужно в те места файла , которые на данный момент закомментированы, вставить соответствующие по смыслу, приведенные выше php вставки, а на то место, в котором должен выводиться контент страницы вставьте следующий кусочек кода:

12345 <?if (have_posts()) : while (have_posts()) : the_post();?> <h1><?the_title();?></h1> <?the_content(‘<br/>Читать всю статью &raquo;’);?> <?endwhile; ?> <?endif; ?>

В данном коде реализован цикл loop присущий любой странице сайта отвечающей за вывод записей в шаблоне сделанном для wordpress.

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

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

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

Lingonberry – чистая тема для блогеров

Тема Lingonberry использует отображение в виде временной шкалы для ваших постов в блоге. Она предлагает один столбец макета и поддерживает несколько форматов записей и Гутенберга.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

Lingonberry – чистая тема для блогеров

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

Бесплатные шаблоны (темы) для WordPress