Как сделать уникальный шаблон для wordpress своими руками за час. Wordpress шаблон создать

Как создать уникальный шаблон для wordpress за 40 минут самому

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

Как создать уникальный шаблон для wordpress-начинаем

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

Сменить картинки.
Изменить название шаблона.
Сделать мелкие правки в стилях.

Начнём разбор каждого пункта по порядку.

Меняем картинки

Самый простой момент, разберу на примере шаблона twenty eleven. Заменяем стоковые изображения на свои переделанные. Надо менять в шапке, подвале, фон и остальные мелкие.

Но особого решения я вывести не могу, в моём шаблоне минимум картинок (а те что есть громадные). В общем, надо большинство изображений заменить на свои. Давайте разберу два элемента, которые заменяются:

Первый через саму админку.
Второй через код.

Если принцип поймёте, то вам большой респект.

Через саму административную панель

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

настройка темы

Если тема сделана для людей, то глобальные настройки дизайна будут здесь, а с мелочами разберёмся ниже. В разделе покау на примере Twenty eleven.

кастомайзер

Общие цвета темы. Настройки основных элементов (заголовков, надписей и тому подобного).
Изображение заголовка, то есть в шапке.
Фоновое изображение. Присутствует не на всех темах, можно настроить как картинкой, так и просто цветом.

На этом этапе вот что у меня получилось. Едем дальше. отредактированный шаблон 1 этап

Меняем картинки вручную

Предположим картинка какого-то элемента в шаблоне вас не устраивает, и вам хочется её поменять. Что же делать? Будем разбираться. Для примера я возьму вывод картинки количества комментаторов.

меняем мелкие элементы

Система действует для всех тем.

Нажимаем правой кнопкой мыши на элементе и ищем его вывод в коде, с помощью инструмента «просмотреть код».

узнаем стиль

Сам элемент, нажимаем на нём правой кнопкой мыши.
Выбираем пункт «просмотреть код».
Это сам код вывод HTML, на него внимания не обращаем.
Вот тот заветный адрес, куда надо идти с заменой. Искомый файл bubble.png, находящийся в папке images в самой теме.

То есть надо создать такой же файл, с таким же названием и заменить его. Я надеюсь вы знаете как пользоваться файловыми менеджерами типа FileZilla. Я захотел сделать картинку, выводящую количество комментариев звездой с обводкой. Сделал ее в фотошопе, и сохранил как картинку с названием bubble и расширением png.

Сделано, я открыл файлзиллу, и зашёл в активную тему twenty eleven в папку images (которую узнали выше). и простым перетаскиванием нового изображения вставляем в папку, с заменой. Все подробности на скриншоте.

замена изображения через filezilla

Если все сделано хорошо, то новая картинка отобразиться на сайте, вот снимок. измененная иконка

Как понимаете, то таким методом можно сменить любую картинку, если нет настроек в административной панели.

Изменяем название шаблона

Менять можно только на бесплатных темах, это важно.

Есть два пункта и их надо сделать:

Переделываем название в файле style.css

Меняем название папки с темой.

Переделываем названия в style.css

Для этого заходим в редактор (напоминаю внешний вид-редактор), и находим style.css.

описание темы style.css

На cкрине видим надпись, тут все надо изменить. В начале любого файла style.css в самом начале содержится информация о шаблоне. Её и надо изменить как минимум на эти строки.

Theme Name: moi-shablon Description: Standard version 1.0 Author: lifanow Walentin Author URI: https://wpsovet.ru Tags: light. License: GPL

Должно получиться так, после замены.

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

новое описание темы

Разобрались, переходим к следующему пункту.

Меняем название папки с темой

Делаем через файловый менеджер, у меня Filezilla. В предыдущем пункте меняли имя темы в строчке:

Theme Name: moi-shablon

Надо оригинальное имя twentyeleven изменить на новое, в моём случае, moi-shablon. Идём в FileZilla папку themes, и находим исходное название twentyeleven.

переименовываем старое название темы на новое

И меняем его на новое.

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

Мелкие правки в стилях

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

плохой сайдбар надо его сделать уникальным

Правда, не очень? Я хочу сделать покрупнее шрифт заголовков, потому что мелкие и сливаются с фоном. Все шаги смотрим ниже на снимке.

Для исполнения рекомендаций нужны знания в CSS.

стиль заголовка виджета сайдбара

Выбираем тот элемент, который хотим править. Нажимаем правой кнопкой мыши.
Нажимаем на «посмотреть код».
Весь стиль этого заголовка.
Искомое название стиля.

Открываем файл style.css. Ищем название стиля с помощью комбинации клавиш CNTRL+F.

меняем заголовок виджета

Я хочу сделать шрифт крупнее, под ним сделать сплошную линию, сменить цвет и толщину текста. Для этого я меняю либо добавляю вот такие параметры.

color: #1a1a1a; font-size: 15px; font-weight: 600; border-bottom: 2px solid #271eb1;

Разберём строчки кода.

Изменение цвета.
Изменение размера.
Изменение ширины текста.
Добавление линии подчёркивания.

Соответственно меняем либо добавляем параметры в стиль. Должно получиться так.

конечный код вывода стиля заголовка

Все изменения сразу покажутся на сайте. наглядный пример на сайте

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

Так со всеми остальными элементами, доводите до идеала. Показываю что получилось в рамках этой статьи.

обновленная тема после редактирования в рамках статьи

Эта статья ответила на вопрос как создать уникальный шаблон для wordpress. И стандартную тему можно будет назвать вашей авторской.

Если будут вопросы, то прошу в комментарии. Успехов.

wpsovet.ru

Как сделать шаблон для WordPress без программирования

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

Как сделать шаблон для WordPress самому, бесплатно и без программирования

Это тоже может быть вам интересно:

Как сделать шаблон для WordPress самому

Итак, переходим на WordPress Theme Generator и видим справа предпросмотр шаблона, который будем создавать, а слева — набор инструментов. Регулируя ту или иную опцию, можно визуально оценивать, как это влияет на шаблон. Таким образом, можно создать собственный дизайн для сайта и использовать его на своём проекте.

Wordpress Theme Generator – это простой и интуитивно понятный конструктор шаблонов для WordPress, который был создан в 2007 году, и сегодня, к сожалению, более не поддерживается разработчиками и не обновляется. Однако он отлично работает и подходит для создания несложных тем, которые можно кастомизировать на своё усмотрение. Работа с этим инструментом проста и легка, несмотря на английский язык.

Как сделать шаблон для WordPress самому, бесплатно и без программирования

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

Site name. В этом разделе можно выбрать цвет заголовка сайта, задать сам заголовок, а также указать URL к логотипу. Логотип можно оставить пустым.
Body Size. Выбираем размер сайта в ширину. Для корректного отображения лучше оставить по умолчанию – 100%.
Sidebar Location. В этой опции можно выбрать размер и расположение боковой колонки. Есть три варианта размера для левого и правого сайдбара, а также возможность сделать тему без боковых колонок.

Third Column. Эта опция подключает третью колонку. Есть разные варианты.
Menu Layout. Здесь выбирается макет меню – есть 4 разных варианта.
Scheme Overall. Настраивается цветовая схема – фоны разных элементов, границы.
Text Scheme. Схема оформления текста: настраиваются цвета, начертания и шрифты всех частей сайта – заголовков, меню, основного текста и других.
Tag Cloud. Можно включить и выключить облако тегов в сайдбаре.
Archives & Search. Настраивается отображение архивов и поиска – показывать полные версии теста или только анонсы.
Выбираем копирайт.

Итак, теперь вы знаете, как сделать шаблон для WordPress. Осталось его получить. Для этого нажимаем внизу кнопку «Save», а затем там, где был предпросмотр, жмём на ссылку «Files packed: download theme ZIP file», чтобы скачать архив темы себе на компьютер. После этого можно установить её на свой сайт.

wp-system.ru

28 готовых шаблонов для сайта Wordpress. Создайте сайт за 30 минут

Возможно ли так? Зарегистрировать хостинг и домен, установить шаблон сайта и начать получать клиентов? Я скажу вам, что да! Вам всего лишь нужно выбрать подходящий дизайн, который подойдет для вашего бизнеса. Посмотрите готовые шаблоны сайтов для WordPress, я подобрал 28 крутых шаблонов, они универсальные и у каждого есть по несколько десятков демо, на разные тематики, вы определенно выберите что-нибудь для себя. 3 подарка

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

28 готовых шаблонов для WordPress. Сделайте сайт за 30 минут

универсальный шаблон

1. H-Code

H-Code — тема WordPress с «отзывчивой» раскладкой и креативным pixel-perfect дизайном, позволяющая получить качественные веб-ресурсы различной тематики: готовый сайт агентства недвижимости, сайт-портфолио для профессионала, занятого в сфере искусств, или интернет-магазин. При конструировании элементов страниц разработчики шаблона уделили особое внимание деталям, благодаря чему функционал темы получился продуманным и подходящим под разносторонние проекты.