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

Дата: / Автор поста:


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

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

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

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

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

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

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

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

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

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

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

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

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

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

На этом этапе вот что у меня получилось. Едем дальше.

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

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

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

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

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

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

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

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

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

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

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

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

  • Переделываем название в файле style.css
  • Меняем название папки с темой.

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

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

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

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

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

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

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

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

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

Theme Name: moi-shablon

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(5 голосов, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Анна

    Привет, Валентин! А ты все в поиске идеального шаблона?! Очистил боковые колонки и правильно сделал — теперь все внимание приковано только к статье!

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

    • Лифанов Валентин

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

  • Руслан

    Интересно, и я даже по твой наводке нашел ссылки, все как в статье.

    А вот ты писал — можно менять в бесплатном? У меня бесплатный, но вроде как логично — наоборот — в платном можно менять, а бесплатно — извольте... ?

    • Лифанов Валентин

      Да нет, у большинства бесплатных лицензия распространения дает возможность править шаблон и присваивать. Потому что большинство сделаны за 10 минут в артистре.

  • Игорь Черноморец

    По моему, тебе пора создавать видео курс про создание уникального шаблона! Или...все к этому идет? :twisted:

    • Лифанов Валентин

      Не знаю не знаю :)

      • Игорь Черноморец

        Я так и знал ;-)

  • Александр

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

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

    • Лифанов Валентин

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

  • Александр

    А по то что статья будет большая, так ее можно же поделить на части, к примеру первый пост из этой темы, как ты подбирал шаблон, что тебя натолкнуло на написание шаблона самому, ну вот так в этом духе. То есть это не целая статья, а как бы небольшой рассказ по главам, и в роли твоих глав будут новые статьи. А писать один пост то будет наверно тебе тяжко, лучше как я пример привел. Седня ты расскажешь про первый там, через пару дней про второй. И у тебя получиться таким образом очень большой рассказ на одну тему, что то вроде сериала :smile:

    • Лифанов Валентин

      Тоже вариант, но не люблю дробить.

      • Александр

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

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

        • Лифанов Валентин

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

          • Александр

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

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

          • Лифанов Валентин

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

  • Влад

    А вот у меня не получилось название поменять Сайт перестает работать и выскакивает табличка Каталог темы не существует.

    • Лифанов Валентин

      Так надо тему деактивировать, и поствавить временно другую, потом переименовать, заново активировать и все в порядке.

  • Влад

    Все сделал как в статье. Не знаю правда нужно ли это для продвижения, но думаю хуже не будет .Правда есть небольшие нюансы. Слетели некоторые стили, само меню и виджеты, но минут за 20 восстановил.

    • Лифанов Валентин

      Все может быть, тут одного способа не выведешь. Хотя стили не должны бы слететь.

  • pozdravhappy

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

    • Лифанов Валентин

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

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

Лифанов Валентин. ©2015-2016 Все права защищены. Полное или частичное копирование запрещено.