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

Этот туториал покажет, как создать новый шаблон страницы для шаблонов WordPress Cherry Framework .

    Войдите в админ панель WordPress.

    Откройте меню Страницы -> Добавить новую (Pages -> Add New) и создайте новую страницу с новым шаблоном страницы.

    Введите заголовок страницы и сохраните изменения. В правой колонке в панели вы можете выбрать один из используемых в вашей теме шаблонов страницы. Вам необходимо добавить новый шаблон станицы в этот список. Все эти шаблоны находятся в папке на вашем сервере. Но вам необходимо добавить новый шаблон страницы в папку wp-content/themes/theme##### .

    Создайте новый.php файл в любом редакторе, например, Dreamweaver или Notepad++, и назовите его, например, new.php . Добавьте в этот файл следующий код:

    Сохраните файл и загрузите его в папку wp-content/themes/theme##### на ваш сервер.

    Теперь вернитесь к странице, которую вы создали в админ панели WordPress. В панели Атрибуты страницы (Page Attributes) вы можете выбрать новый шаблон страницы под названием “Пользовательский” (“Custom”).

    Cнова откройте файл new.php file и начните добавлять свой контент. Файл может содержать все, что вы захотите, включая неизменяемый контент или элементы макета страницы, которые будyт выводить ее контент.

    Вы можете использовать элементы кода других шаблонов страницы из папки wp-content/themes/CherryFramework , чтобы создать специфическую страницу.

    Давайте сначала добавим хедер и футер в новый шаблон страницы:

    Если вы сохраните изменения, то сможете увидеть их на странице:

    Теперь необходимо выбрать вид контента, который вы хотите использовать на этой странице. Допустим, у вас нет отдельного шаблона страницы для пользовательских постов “Наша команда” (“Our Team”). И вам нравится дизайн шаблона страницы Отзывов (Testimonials) и вы бы хотели использовать этот дизайн для постов “Наша команда” (“Our Team”). Для этого в меню Дизайн -> Редактор (Appearance -> Editor ) вы легко найдете файл, который содержит код шаблона страницы Отзывов (Testimonials). Его название page-testi.php .

    Откройте этот файл для редактирования. Скопируйте только код контента, так как вы уже добавили хедер и футер (ниже приведен пример данного кода, ваш код может выглядеть иначе):

    " data-motopress-wrapper-file="page-testi.php" data-motopress-wrapper-type="content">
    " data-motopress-type="static" data-motopress-static-file="static/static-title.php">
    " id="content" data-motopress-type="loop" data-motopress-loop-file="loop/loop-testi.php">
    sidebar" id="sidebar" data-motopress-type="static-sidebar" data-motopress-sidebar-file="sidebar.php">

    Вставьте скопированный код в файл new.php. Замените Template Name: Custom на Template Name: Team

    И замените page-testi.php на new.php в этом коде.

    Данный код также содержит ссылку на файл loop/loop-testi.php . Это еще один файл, который вам необходимо скопировать и редактировать. Скопируйте файл loop-testi.php из папки wp-content/themes/CherryFramework/loop и вставьте его в папку wp-content/themes/theme#####/loop (если в папке вашей темы отсутствует папка loop , вам следует создать ее). Переименуйте этот файл, например, на loop-new.php и откройте его для редактирования. Замените слово “testi” на слово “team” во всех строчках файла и сохраните изменения. (Для замены слов вы можете использовать комбинацию клавиш Control (Command) + F).

    Когда файл loop-new.php создан и отредактирован, снова откройте файл new.php и замените loop/loop-testi.php на loop/loop-new.php в его коде. В результате ваш код будет выглядеть следующим образом:

    " data-motopress-wrapper-file="new.php" data-motopress-wrapper-type="content">
    " data-motopress-type="static" data-motopress-static-file="static/static-title.php">
    " id="content" data-motopress-type="loop" data-motopress-loop-file="loop/loop-new.php">
    sidebar" id="sidebar" data-motopress-type="static-sidebar" data-motopress-sidebar-file="sidebar.php">

    Сохраните изменения и проверьте вашу новую страницу. Теперь она должна содержать пользовательские посты “Наша команда” (“Our Team”) с дизайном страницы Отзывов (Testimonials).

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

Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому:

  • Можно получить уникальный сайт или лэндинг, отличный от конкурентов. Учитывая миллионы блогов, построенных на этой CMS, каждый типовой дизайн используется как минимум сотню раз.
  • Полная свобода действий на этапе разработки. Можно добавлять собственный функционал с нужными именно вам рабочими элементами.
  • Можно применять разные дизайны для разных разделов сайта, что невозможно при использовании готового шаблона.
  • Можно сделать несколько видов и предоставить посетителям возможность переключаться между разными темами, что повысит интерес и лояльность к веб-ресурсу.
  • Простота работы на Вордпресс делает ее доступной для многих (в помощь будут видео-уроки в интернете). А значит, собственноручная разработка главной или создание дочерней темы позволит сэкономить деньги на привлечении сторонних дизайнеров и программистов.
  • Можно воспользоваться возможностью дочерних тем – когда корректировки вносятся в дублеры таблицы стилей style.css, а главный файл при этом остается нетронутым. Это позволяет быстро отменить изменения, если они окажутся неудачными, а также не терять наработки при обновлении основной темы.

Краткая инструкция

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

Шаг первый: подготовительные работы

Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или Nodepad++, тем более скачать их можно бесплатно). Следующий шаг – установка движка WordPress и набора Denwer на локальный компьютер. Денвер – это пакет важных инструментов для программистов. С помощью них значительно облегчается и ускоряется процесс разработки и внесения изменения сайтов. Как его устанавливать, подскажет это видео:

Шаг второй: создают папку новой темы

Переходим в нужную директорию. Она чаще всего имеет следующий путь: . Здесь хранятся все темы – и стандартные, и произвольные. Заходим в нее создаем новую папку. Называем ее, например, «MyFirstTheme».

Теперь переходим в новую папку и обязательно добавляем два файла, сделанных через Nodepad++ или другой редактор. Это index.php и style.css. Пока эти документы пусть останутся пустыми, потом мы еще займемся их наполнением. Еще добавьте в «MyFirstTheme» сюда папку images. куда можно будет добавлять картинки для оформления шаблона.

В последствии в «MyFirstTheme» можно добавлять шаблоны для отдельных частей сайта: боковой панели (sidebar.php), сайта (header.php), записей на страничках (single.php), комментариев (comments.php) и пр. Набор дополнительных файлов зависит от структуры, которую вы запланируете для своего веб-ресурса.

Шаг третий: наполнение index.php

Первое, что надо сделать – заполнить индексный файл (index.php). Вот пример самого простого кода, по которому у сайта будет четыре области: header, main, sidebar и footer.












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

Шаг четвертый: заполняем и style.css

Теперь надо открыть style.css, добавить и заполнить следующие поля (вписать вместо *** собственную информацию о сайте и владельце). Введенные данные будут отображаться в админке.

/*Theme Name: ***

Theme URI: http:// ***

Author URI: http:// ***

Description: ***

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

(информация в /**/ — это комментарии, а не части кода)

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

Шаг пятый: разбиваем файлы

Все элементы, указанные в index.php следует продублировать отдельными файлами. В шаге первом в примере помимо главной части main были указаны header, sidebar и footer – следовательно, для них создаем свои документы в формате.php.

Например, создаем файл header.php, открываем index.php. находим соответствующий участок кода и вставляем его в новый файл. Это будет:






Site Title



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






Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Их можно не использовать или добавлять свои разделы:

  • Header – стиль шапки вашего сайта.
  • Comments – шаблон для создания комментариев.
  • Home – тема для главной страницы.
  • Page — определяет тему, если создадите отдельные странички на сайте
  • Category – шаблон для разбивки на категории
  • Date – определяет стиль вывода даты-времени.
  • Archive – шаблон для архивного раздела со старыми материалами.
  • Search – файл, в котором указываются параметры для поиска на сайте.
  • 404 — шаблон для страницы, на которой сообщается об ошибке 404 Not Found.
  • Footer – определяет стиль подвала вашего сайта.

Когда впоследствии вы будете дорабатывать каждый элемент, понадобится наглядный видеоурок. Вот несколько подборок, которые могут вам помочь:

Шапка в header.php:

Добавление контента:

Стилизация комментариев:

Подвал на сайте:

Как можно вносить изменения без опасений

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

Чтобы этого не произошло, можно создать дочернюю тему WordPress (подтему) – это дублер файла стилей style.css, не затрагивающий главный файл (изменения в одном не отменяют обновления в другом).

Создание дочерней темы WordPress не составит никакого труда. Надо сделать новую папку в основном каталоге C:\WebServers\home\localhost\www\НАЗВАНИЕ_ЗАДАННОЕ_ПРИ_УСТАНОВКЕ\wp-content\themes . В новой папке делаем свой файл style.css с вот таким содержимым:

Theme Name: НАЗВАНИЕ ТЕМЫ

Template: НАЗВАНИЕ ПАПКИ В ДОЧЕРНЕЙ ТЕМОЙ

Theme URI: ЗАПОЛНИТЬ

Description: ЗАПОЛНИТЬ

Author URI: ЗАПОЛНИТЬ

/* импортируем стили родительской темы */

@import url(«../НАЗВАНИЕ/style.css»);

/* Свои дополнительные стили */

Foo{ color:red; }

Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов:

Приветствую вас, друзья.

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

Итак, как сделать шаблон для wordpress самому, без каких либо знаний?

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

Способ №1 – вы изучаете HTML, изучаете структуру шаблонов. Конечно, при таком подходе есть свои плюсы, если у вас есть время и желание начните с него. Знание HTML еще ни кому не помешало.

Способ №2 – заказать шаблон у фрилансера. Если есть свободные деньги, то, обязательно, выбирайте именно этот способ. Стоимость создания качественного шаблона от 15 000 до 70 000 рублей.

Способ №3 – воспользоваться специальным программным обеспечение для создания шаблонов. Сразу уточню, это не создание однотипных шаблонов, в программе вполне возможно создать уникальный, красивый шаблон. Пример этот блог. Все зависит от вашей фантазии.

Как вы, наверно, уже поняли речь, в этой статье, пойдет о способе №3.

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

Скачиваем программу, запускаем ее.

1. В заглавном окне программы выбираем “WordPress”.


2. В окне предпросмотра появляется заготовка шаблона, конечно, вся кривая, но в процессе работы от нее и следа не останется.

3. Переходим на вкладку “Цвета и шрифты”, выбираем цветовую схему (в последующем мы ее немного подкорректируем), я люблю светло серую гамму цветов. Жмем на кнопку “Наборы шрифтов”, выбираем шрифты (я использую везде вердану).



4. Переходим на вкладку “Макет”, здесь нам предлагается выбрать количество и расположение колонок, а также расположение верхнего колонтитула (по простому хедера). Я всегда выбираю “Две колонки->Правая средняя сторона”.


5. На следующей вкладке нам предлагается выбрать фон будущего шаблона. С помощью данной вкладки вы можете создать свой или выбрать уже существующий фон.


6. Следующая вкладка предлагает нам настроить лист шаблона.



Задайте ширину листа (желательно не меньше 1000 px), его тень и границу.

7. На следующей вкладке нам предлагается настроить верхний колонтитул (хедер или шапка). Настройте колонтитул с помощью настроек.


1. Настройка ширины и высоты шапки.

2. С помощью этого меню вы можете загрузить в программу ранее заготовленный хедер, а также добавить к нему эффекты.

3. С помощью этого меню вы можете добавить на хедер стороннюю картинку.

4. Название вашего сайта и его слоган.

5. Расположение названия и слогана.

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

9. На следующей вкладке — “Статьи”, нам предлагается настроить внешний вид области расположения контента (текста, видео, картинок, таблиц). Настройте его с помощью приведенных настроек.





1. Изображение статьи (этот параметр ни на что не влияет, может оставить как есть).

2.С помощью этого меню вы сможете задать стиль области контента (с обводкой или без).

3. Настройка отображение текста внутри статьи.

4. Редактирование различных параметров области контента.

5. Настройка верхнего колонтитула.

6. Настройка нижнего колонтитула.

10. С помощью следующей вкладки — “Блоки”, вы можете настроить внешний вид боковых блоков (сайдбара).

НАСТРОЙКИ И ЭКСПОРТ ШАБЛОНА

1. Нажмите на кнопку “Файл” (находится в левом верхнем углу окна программы).


2. Выберите пункт “Экспорт->Настройки экспорта”. Перейдите на вкладку “Свойства” и укажите необходимые данные. Перейдите на вкладку “Footnote” и снимите все галочки.

3. Повторите шаг номер один. Выберите пункт “Экспорт->Тема WordPress”.

4. Экспортируйте шаблон как ZIP папку.



Все. Теперь вы знаете как сделать шаблон для WordPress своими руками. Удачи в создании.

Не забываем комментировать статью. Автор лучшего, по моему мнению, комментария (по итогам недели), получит мою платную книгу «Как продавать партнерские товары в интернете и получать 200% прибыли» совершенно бесплатно.

ВИДЕО-УРОК “Как сделать шаблон для WordPress без знаний HTML?

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

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

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

Шаблон определяет основную структуру документа и содержит настройки документа, такие как элементы автотекста, шрифты, назначенные сочетания клавиш, макросы, меню, параметры страницы, форматирование и стили. (Из справки Word)

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

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

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

Итак, приступим.

1. Создадим пустой документ.

2. Сразу сохраним его. Зайдем в меню "Файл" (File) и выберем команду "Сохранить как..." (Save as...). Откроется диалоговое окно "Сохранение документа", в котором нам надо выбрать в поле "Тип файла" (Save as type) тип "Шаблон документа" (*.dot) (Document Template (*.dot).

Будет открыта папка "Шаблоны", в которой по умолчанию сохраняются все шаблоны. Присвойте файлу имя и нажмите кнопку "Сохранить".

3. Определяем, какие элементы (текст и графика) и где именно будут располагаться в документе.

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

4. Название организации мы разместим в верхней части документа по центру. Для этого напечатаем название нашей организации прописными буквами, например, ООО "БЕЛЫЕ НОЧИ". Нажимаем клавишу Enter и переходим на новую строку.

5. Ниже можем вставить разделительную линию. Для этого нужно кликнуть мышкой на кнопке "Рисование" (Drawing). В нижней части экрана появится панель рисования с управляющими кнопками. Нас интересуют линии, поэтому выбираем соответствующую кнопку "Линия" (Line). Курсор мыши превращается в крестик.

Обратите внимание: возможно, у вас будет вставлено так называемое полотно - пунктирная область вставки фигур/рисунков. Чтобы предусмотрительно избавиться от вставки полотна, зайдите в меню "Сервис" (Tools) и выберите команду "Параметры" (Options). Щелкните вкладку "Общие" (General) и снимите галочку с опции автоматического создания полотна при вставке автофигур (Automatically create drawing canvas when inserting AutoShapes). Щелкаем "OK" и закрываем окно "Параметров" (Options).

6. Подводим курсор в форме крестика к названию организации и чуть ниже проводим линию от мигающего курсора до правого края поля, нажимая и удерживая левую кнопку мыши. Линия нарисована.

7. Можно оставить линию как есть, а можно придать ей более элегантный вид. Для этого на панели рисования есть соответствующая кнопка "Тип линии" (Line Style). Щелкаете на ней и выбираете любой тип.

8. После того как вы остановитесь на каком-либо типе линии, дважды щелкните ниже этой линии - в этом месте будут напечатаны адрес и реквизиты организации. Впечатайте те данные, которые считаете необходимыми: юридический и фактический адрес, телефон, факс, URL сайта, E-mail, банковские реквизиты.

9. Теперь отформатируйте набранный текст в соответствии с вашими представлениями. Название организации, например, я выделил и присвоил ему стиль "Заголовок 1" (Heading 1). Я также выровнял заголовок по центру и сделал между буквами разреженный интервал в пять пунктов.

Размер шрифта текста под линией я уменьшил до девяти пунктов и выровнял по центру. Образец вы можете наблюдать ниже на скриншоте.

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

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

1. В меню "Вставка" (Insert) выбираем команду "Дата и время" (Date and Time). Откроется окно, в котором вы выбираете необходимый формат отображения даты, например 18 июля 2006 г.

2. Отмечаем галочкой поле "Обновлять автоматически" (Update automatically). Теперь при создании нового документа на базе этого шаблона дата уже будет проставлена в соответствии с текущим временем на вашем компьютере.

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

4. В меню "Вставка" (Insert) выбираем команду "Поле" (Field). Откроется окно как на скриншоте ниже:

5. В области "Категории" (Categories) выберите "Автоматизация" (Document Automation). В области "Поля" (Field names) выберите команду MacroButton. В области "Сообщение" (Display text) наберите текст "Вставить ФИО получателя" и нажмите OK.

Строго говоря, в области "Имя макроса" следовало было бы указать NoMacro (то есть команда без макроса), но такового в списке не оказалось. Поэтому оставляем как есть, по крайней мере, я никогда не встречал никаких ошибок.

6. Получаем поле с нашим текстом.

Если у вас это поле отображается как обычный текст без затенения, то я рекомендую сделать такое затенение. Это позволит вам впоследствии легко определять в документе нужные поля для ввода данных. Для этого зайдите в меню "Сервис" (Tools) и выберите команду "Параметры" (Options) и на вкладке "Вид" (View) в группе "Показывать" (Show) выберите из списка затенение полей (Field shading) опцию всегда (Always).

Ниже можно дополнительно вставить аналогичное поле адреса получателя и его должности.

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

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

Теперь, чтобы воспользоваться этим шаблоном для создания письма, вам надо зайти в меню "Файл" (File) и выбрать команду "Создать" (New). Справа появится область задач, в которой нужно выбрать опцию "Общие шаблоны" (On my computer). Откроется окно со всеми доступными шаблонами. Выбираете созданный вами шаблон и нажимаете "OK". Новый документ на основе вашего шаблона будет загружен в Word. Добавляйте свои данные в соответствующие поля и наслаждайтесь автоматизацией.

Приветствую. Эта статья ответит на вопрос как создать уникальный шаблон для 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.. License: GPL

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

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

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

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

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

Theme Name: moi-shablon

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

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

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

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

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

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

  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. И стандартную тему можно будет назвать вашей авторской.

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