Как вы уже поняли, условным названием блока с навигацией является navigacia. Блок состоит из одной ячейки «название страницы». Обратите внимание на то, что каждый тег закрывается с помощью символа «/». Если теги не закрывать, то могут возникнуть сбои в работе сайта.

Не должны быть большими. Наиболее популярными являются календарь, облако меток, мета, архивы, поиск, rss, видео и последние новости. Чтобы их добавить, вам понадобится перейти во вкладку «Внешний вид» и кликнуть по полю «Виджеты». Затем вы увидите перечень доступных вариантов. Также виджеты можно устанавливать с помощью плагинов. Их можно скачивать как с официального сайта, так и прямо через панель администратора вордпресс. Для добавления видео, которое есть в YouTube, вам достаточно будет лишь вставить ссылку на него в желаемое место на сайте. В ином случае видео нужно будет загружать на сайт. Если вы увлекаетесь программированием, то можете добавить на сайт свой собственный виджет. Для этого вам потребуется кликнуть по опции «Текст» и ввести туда необходимый код.

В настройках каждого виджета вам будет предоставлена возможность изменить стандартные заголовки. Также вы можете выбрать место отображение виджета (правая или левая боковая панель) и так далее. С удалением виджета проблем не должно возникнуть. Для этого вам достаточно будет кликнуть в настройках по кнопке «Удалить».

Создание уникальной темы при помощью специальных программ и сервисов с нуля

1. Наиболее популярной является программа Artisteer. Для работы с ней вам не понадобятся особые знания в области программирования. Процесс создания происходит в визуальном режиме. То, что вы нарисуете, будет представлено с помощью кода, который соответствует международному стандарту «XHTML 1.0 Transitional». Благодаря этому тема вашего будущего сайта будет поддерживаться всеми браузерами.

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

Перейдем непосредственно к инструкции по работе с данной программой Artisteer. Как только вы откроете программу, первой появится опция под названием «Идеи». Она предложит вам различные комбинации стандартных элементов. Если вы хотите, чтобы ваш дизайн был уникальным, то
вам эта опция не понадобится. Для того чтобы освоить программу, вам достаточно покликать по опциях и просмотреть параметры. Эта программа легкая, поэтому проблем с этим не должно возникнуть.

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

Для настройки ширины сайта, вам нужно будет использовать опцию «Лист». Ширина задается в пикселях. Данная программа изначально предложит вам ширину в 900 пикселей. Также с помощью данной опции можно настроить различные эффекты (тень, закругленные края и так далее).

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

Если вы хотите настроить расположение элементов сайта, то вам стоит использовать опцию «Макет».

Не менее важной опцией является «Статьи». В ней происходит верстка дизайна статей сайт. Сюда входит расположение картинки, текста, комментариев, различных блоков и так далее.

Чтобы выбрать цвет, размер или шрифт текста, вам понадобится опция «Цвета и шрифты».

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

Когда ваша тема будет полностью доработана, можно перейти к ее экспорту. Чтобы это сделать, вам потребуется кликнуть по вкладке «Экспорт» и выбрать «Тема WordPress».

2. Если вы в совершенстве владеете Adobe Photoshop, то вам стоит установить к нему дополнение Divine Elemente. Благодаря нему вы сможете с легкостью конвертировать файл формата «.psd» в тот формат, который будет поддерживаться всеми браузерами.

3. Если у вас нет денег на Artisteer, то можно использовать бесплатный сервис Lubith. Он доступен в онлайн режиме на официальном сайте lubith.com. Сервис содержит много полезных опций и отличается особой быстротой работы. Всего за пару минут вы полностью овладеет всеми его опциями.

4. Аналогом предыдущего сервиса является WordPress Theme Generator. Он также является легким в работе и содержит широкий выбор различных опций. Данный сервис является абсолютно бесплатным. Единственным недостатком является то, что данный сервис поддерживает только английский язык.

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

6. WPTheme Generator намного мощнее, чем предыдущие, потому как содержит в несколько раз больше опций. Единственным нюансом будет то, что данный сервис платный. Цена составляет 30 долларов. Стоит также отметить, что верстка в нем осуществляется полностью на английском языке.

7. CSSEZ является не менее популярным, чем предыдущий. Перед началом работы, вам потребуется пройти небольшую регистрацию. В данном сервисе вы можете сверстать до 4 столбцов для материалов сайта. Фон можно загрузить собственный.

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

9. Weebly отличается от остальных наличием опции добавления видео прямо с YouTube или Google в любое место сайта. Сайт, на котором есть видео, пользуется успехом, потому как визуально информация быстрей и проще воспринимается.

10. В сервисе Eris’ Template Generator вы сможете добавить до 3 столбцов для отображения материалов сайта, добавить различные теги, календарь и другие виджеты.

Здравствуйте, друзья!

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

Теперь вы начинаете с волнением установку выбранной вами темы на своем сайте WordPress.

Но … что ты делаешь? Как установить тему WordPress? И что вы делаете после этого, чтобы на самом деле настроить все?

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

В конце этого руководства вы узнаете, как:

• Установите как бесплатные, так и WordPress
• Сделать свой сайт похожим на великолепный демонстрационный сайт, который вы видели
• Создать статическую домашнюю страницу
• Настроить свою тему с помощью WordPress Customizer или панели настроек темы
• Добавить меню навигации на ваш сайт
• Добавить в боковые панели и подвал сайта
• Сделать расширенные изменения CSS-стилей и кода
• Обновить свою тему
• Помочь с вашей темой, когда все пойдет не так

Это длинный путеводитель, и я знаю, что вы очень рады, что сайт WordPress , поэтому давайте перейдем к тому, как установить тему WordPress!

Как установить тему WordPress

В зависимости от источника темы, вам может потребоваться один из двух разных способов установки темы.

Существует два основных источника:

• Каталог тем WordPress.org — этот массивный каталог, который содержит исключительно бесплатные темы WordPress. На нем вы можете просматривать тысячи бесплатных тем, где код каждой проверяли члены сообщества WordPress.org.
• Сторонние источники — вы можете получать темы от независимых сторонних разработчиков, таких как ElegantThemes или массовые тематические рынки WordPress, такие как Theme Forest .

Если вы нашли свою тему на WordPress.org, используйте метод 1, чтобы установить бесплатную тему. Вам не нужно ничего, кроме выбранного имени.

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

Метод 1: Как установить WordPress тему из WordPress.org

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

Чтобы начать работу, войдите в свою WordPress (то есть перейдите на страницу yourdomain.ru/wp-admin). Затем перейдите «Внешний вид» — «Темы» на боковой панели и нажмите кнопку «Добавить»:

Затем найдите имя темы, которую вы хотите установить и нажмите кнопку «Установить»:

WordPress автоматически установит тему на вашем сайте. По завершении процесса установки вы можете активировать тему, нажав кнопку «Активировать»:

Метод 2: Как установить тему WordPress из ZIP-файла

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

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

После этого перейдите во «Внешний вид» — «Темы» и нажмите «Добавить новую»:

Затем нажмите кнопку «Загрузить тему»:

Используйте кнопку «Выбрать файл», чтобы выбрать.zip-файл вашей темы, затем нажмите «Установить сейчас»:

WordPress автоматически установит тему для вас. Затем вам просто нужно нажать «Активировать», чтобы активировать тему:

Установка необходимых плагинов для важных функциональных возможностей

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

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

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

Все, что вам нужно сделать, это нажать «Начать установку плагинов».

На следующем экране вы можете нажать кнопку «Установить», чтобы установить столько рекомендованных плагинов, сколько захотите. В столбце «Тип» вы можете увидеть, является ли плагин просто «рекомендованным» или он действительно «обязательный»:

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

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

Как заставить WordPress Theme выглядеть как демо (необязательно)

Вероятно, вы выбрали тему WordPress на основе демонстрационного сайта разработчика. Демонстрация выглядела так красиво и сочеталась. Но когда вы впервые активируете свою тему, это выглядит …

Совсем не похоже на демо! .

Вам это знакомо? Это одна из самых распространенных проблем, с которыми сталкиваются пользователи WordPress. Так что же делать?

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

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

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

Разработчики пытаются сделать этот процесс максимально безболезненным. Это обычно так же просто, как нажимать несколько кнопок — вам просто нужно проконсультироваться с документацией, чтобы узнать, какие кнопки нажимать!

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

Как настроить основные параметры вашей темы

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

Как выбрать в вашей теме статическую домашнюю страницу

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

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

Затем на странице «Главная страница» выберите параметр «Статическая страница» и выберите страницу, которую вы хотите использовать в качестве вашей первой страницы, а также страницу, на которой вы хотите отображать свои последние сообщения:

Если у вас нет страниц на выбор, вы можете перейти вовкладку «Страницы» — «Добавить новую», чтобы создавать новые страницы. Назовите их что-то вроде:

• Домашняя страница

Как использовать WordPress Customizer для настройки темы

WordPress Customizer — полезная функция WordPress, которая позволяет вам легко настраивать тему при просмотре всех ваших изменений в режиме реального времени. То есть, вы увидите параметры темы на одной половине экрана и живой предварительный просмотр вашего сайта на другой половине.

Хотя не все темы используют WordPress Customizer, многие новые темы используют его для внесения изменений. И даже если тема не полностью поддерживает WordPress Customizer, вы все равно можете использовать его, чтобы внести некоторые основные изменения в свою тему.

По этой причине, это хорошее место для начала при настройке вашей темы.

Чтобы получить доступ к Настройщику WordPress, вы можете либо перейти «Внешний вид» — «Настроить» на панели управления WordPress:

Или, если вы просматриваете общедоступную часть вашего сайта WordPress, вы можете нажать кнопку «Настроить» на панели инструментов администратора:

Использование WordPress Customizer

Внутри WordPress Customizer вы можете перемещаться между различными настройками, выбирая из параметров на боковой панели:

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

Например, если вы хотите изменить «Цвет» вашей темы, вы просто нажмите на параметр «Цвет». Оттуда вы можете выбрать совершенно новую цветовую схему для своей темы и просмотреть изменения в реальном времени, не обновляя страницу:

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

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

Использование панели параметров пользовательской темы для настройки

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

Обычно вы можете найти эти параметры, перейдя в раздел «Внешний вид» вашей панели управления и найдите что-то вроде «Параметры темы»:

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

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

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

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

Как добавить и настроить меню вашей темы

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

Хотя вы можете использовать WordPress Customizer раньше, чтобы настроить свои меню, более удобным для пользователя способом является переход во вкладку «Внешний вид» — «Меню» на панели управления WordPress.

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

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

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

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

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

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

Чтобы добавить виджеты в новую тему, перейдите во «Внешний вид» — «Виджеты».

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

После перетаскивания виджета вы можете настроить его функциональность, щелкнув маленькую стрелку Expand:

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

Если вы хотите удалить виджет, вы можете перетащить его обратно в доступную область виджетов или нажать кнопку «Удалить» в нижней части настроек виджета.

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

Создание расширенных CSS-стилей и изменение кода вашей темы

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

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

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

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

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

Как добавить пользовательский CSS-код в тему

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

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

Чтобы получить доступ к этой области CSS, откройте «Внешний вид» — «Настроить» и выберите вкладку «Дополнительные CSS» в «Настройщике WordPress»:

Оттуда вы можете добавить свой собственный CSS непосредственно в поле. Например, вы можете добавите короткий CSS-класс, который нацелен на кнопку темы следующим образом:

Blog-post-read-more a { background: #6ab999; }

Затем вы увидите цвет кнопки в режиме реального времени:

Как и раньше, ни одно из изменений CSS, которые вы делаете, не будет применяться к вашему текущему сайту, пока вы не нажмете кнопку «Сохранить и опубликовать».

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

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

Как создать дочернюю тему для изменения кода

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

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

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

Если вы найдете там дочернюю тему, вы можете установить ее как любую другую тему, загрузив ее.zip-файл на свой сайт.

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

Как только вы установите и активируете плагин Childify Me , перейдите в WordPress Customizer, зайдите «Внешний вид» — «Настройка». Затем нажмите кнопку «Childify Me» внизу, чтобы автоматически создать дочернюю тему:

Дайте своей дочерней теме имя (имя может быть любым — на самом деле это не имеет значения), а затем нажмите «Создать». После этого нажмите «Предварительный просмотр» и «Активировать», чтобы активировать новую дочернюю тему бренда «spankin».

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

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

Как обновить тему WordPress

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

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

Всякий раз, когда ваша тема имеет доступное обновление, WordPress предупредит вас, показывая красное число рядом с параметром «Обновления» на боковой панели :

WordPress будет обрабатывать остальную часть процесса обновления за вас!

Как получить помощь по теме WordPress

Если вы следовали этому полному руководству и все еще боретесь со своей темой WordPress, не волнуйтесь! У вас все еще есть много возможностей получить помощь от настоящего человека.

Вот несколько способов получить помощь по теме.

Использование Форума поддержки WordPress.org

Если вы используете бесплатную тему с сайта WordPress.org, попробуйте обратиться за помощью к разработчику с помощью встроенных форумов поддержки WordPress.org. Чтобы получить доступ к форумам, перейдите на страницу листинга темы на WordPress.org и нажмите кнопку поддержки форума «Просмотр»:

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

Немедленно обратитесь к разработчику за помощью

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

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

Возьмите Freelance WordPress Developer или Maintenance Service

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

Занимаюсь созданием сайтов на WordPress более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на WordPress, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!

Создать шаблон для 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. находим соответствующий участок кода и вставляем его в новый файл. Это будет:

Тоже самое проделывается для остальных частей. Это надо сделать для более легкой навигации. Когда элементов будущего сайта будет много, то отдельные файлы помогут лучше ориентироваться для проверки или внесения изменений.
Чтобы главный индексный файл был согласован с дополнительными, в 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; }

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

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

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

Также нужно разобраться в меню консоли. Консоль еще называют “админкой”. Вы могли заметить, что в админке достаточно много дополнительных настроек.

Чтобы попасть в админку блога, нужно зайти по адресу site.ru/wp-admin/. Вместо site.ru подставьте название своего домена.

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

2. Обновления

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

Не забывайте обновляться, если Вас просят об этом. Это защитит Вас от попыток взлома злоумышленниками.

3. Записи. Все записи

В этом меню можно увидеть все записи сделанные за все время. Также можно посмотреть сколько комментариев набрала каждая статья и к какой рубрике она относится.

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

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

3.1. Добавить новую

Прежде чем начать публиковать статьи в блог, нужно сделать несколько очень важных настроек. Сделайте их в пункте 8.1 и 11.3. После того, как Вы настроите постоянные ссылки или как их еще называют (ЧПУ), можете приступать к публикации статей.

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

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

Если Вы впервые сталкиваетесь с таким редактором, то посмотрите видео-уроки на YouTube о том, как добавить статью на блог WordPress. После того, как статья добавлена и отформатирована, выберите или создайте для нее рубрику. Одна статья в одну рубрику, запомните это!

Загрузите миниатюру, это небольшая картинка к Вашей статье. Такие картинки поддерживают большинство тем. После того, как все готово нажмите на “Опубликовать”. Теперь перейдите на главную страницу своего блога и посмотрите, как выглядит Ваша запись.

Работа с картинками

При добавлении фотографий старайтесь всегда прописывать атрибут “Alt”. Если Вы используете свои фотографии, то это позволит Вам привлечь трафик из поисковых систем из раздела “картинки”.

Достаточно 2-3 слов о том, что изображено на самой картинке. Если не знаете что писать, лучше ничего не пишите.

Фото можно выровнять по центру или по краю. Если у Вас большая картинка и Вы хотите, чтобы при ее нажатии она открывалась в полном размере, то выберите “ссылка на медиафайл”. Если нужно перенаправить на другой сайт, то используйте произвольный url.

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

Следите за тем, чтобы все Ваши фотографии перед загрузкой на блог имели название латинскими буквами например, moy-dom.jpg.

3.2. Рубрики

Это меню предназначено для создания рубрик. Например, у Вас блог по кулинарным рецептам. Рубрики могут быть такие:

• Салаты
• Закуски
• Напитки

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

У рубрик могут быть подрубрики. Например в “Салаты” могут входить такие подрубрики: “Салаты с курицей”, “Простые салаты”, “Рецепты салатов на зиму” итд. Подрубрики можно создать в меню “Родительская”.

Напишите 2-3 предложения описывающую вашу рубрику. Изложите самую суть. Обязательно сделайте его уникальным. Это значит, что Вы должны сами придумать это описание, а не скопировать его. Как только все поля будут заполнены, можно нажать на кнопку “Добавить новую рубрику”.

3.3. Метки

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

4. Медиафайлы

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

5. Страницы

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

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

В этом разделе Вы увидите все созданные страницы. Если нужно создать новую, то просто перейдите в меню “Добавить новую” и воспользуйтесь редактором, как в меню 3.1.

6. Комментарии

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

7. Внешний вид. Темы

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

Я же рекомендую ставить темы из официального магазина WordPress. Во-первых, они бесплатные, а во-вторых на них нет вредоносного кода или вируса. Чтобы установить новый шаблон, достаточно нажать на “Добавить новую тему”.

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

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

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

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

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

Также в этом разделе Вы всегда можете сменить пароль и email.

10. Инструменты

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

11. Настройки. Общие

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

Напишите название своего сайта. Описание должно быть короткое и понятное. Оно должно содержать всю суть Вашей ниши. Краткое описание можно пропустить. Если есть что написать, то заполните. Можно написать какой-нибудь слоган.

Адрес WordPress и адрес сайта. Тут Вы можете указать то, как будет отображаться Ваш блог. Например, с www или без. https или http. Это очень важный параметр, заполните его обязательно.

Если Вы регистрировали домен и хостинг по моему , то у Вас должен быть сертификат защищенного протокола https. Значит — настройки ставьте, как на картинке. Выберите формат даты и времени тот, который Вам нужен. Меню “написание” пропускаем.

11.1. Чтение

11.2. Обсуждение

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

Например, если добавить слова: www, http://, скачать, бесплатно, то такие комментарии не пройдут автоматическую модерацию. Настройки медиафайлов можно смело пропустить.

11.3. Постоянные ссылки

Одна из самых важных настроек WordPress находится именно здесь. Это настройка постоянных ссылок. Поставьте галочку на “Произвольно” и вставьте туда вот такой шаблон:

/%category%/%postname%.html

Яндекс метрика

Чтобы узнать сколько человек посещают блог, на него нужно установить специальный счетчик. Этот счетчик будет показывать подробную информацию о пользователе. Рекомендую установить Яндекс Метрику .

Если у Вас еще нет почты от Яндекса, то зарегистрируйте ее прямо сейчас, это займет несколько минут.

После того как Вы попали внутрь, нажмите на “Добавить счетчик”.

Далее заполните: имя счетчика и адрес сайта, поставьте галочку “я принимаю условие”, создать счетчик. Поставьте галочку на вебвизор и нажмите сохранить. Ниже Вы увидите код счетчика, который нужно установить.

Скопируйте его и перейдите в админку своего блога, как показано на картинке ниже.

Найдите в правой колонке и нажмите на “Заголовок (header.php)”. Вставьте скопированный код в свободное место. Лучше это сделать, где заканчивается .

Нажмите обновить файл. Вернитесь в список счетчиков, нажав на “Счетчики”.

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

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

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

robots.txt

Если Вы не знаете, что такое robots.txt и для чего он нужен, то можете почитать в справке Яндекса. Чтобы не мучиться и не составлять его самостоятельно, Вы можете просто его скачать .

Не забудьте исправить в файле свой сайт заменив site.ru и site.ru/sitemap.xml на свой. Также пропишите http или https. Теперь его нужно закачать к себе на сервер в корневую папку, где установлен Ваш блог.

Если вы пользуетесь хостингом «Бегет» , который я рекомендую, то загрузить этот файл вы можете следующим образом. Зайдите в хостинг и нажмите «Файловый менеджер».

Найдите папку с вашим сайтом и зайдите в нее нажав 2 раза. Вы должны увидеть вот это:

Зайдите в эту папку нажав 2 раза. Теперь вы попали в корневую папку своего сайта. Теперь нажмите «Загрузить файлы» и «Browse…»

Выберите файл и нажмите на кнопку «Загрузка». Файл загружен на сайт.

Теперь можете проверить. Введите в поисковой строке такой запрос: https://site.ru/robots.txt в место site.ru подставьте свой сайт. Также учтите значение https или http.

Регистрируем Домен. Настраиваем Хостинг. Устанавливаем Блог!

Заказать хостинг и купить домен >>>

Заключение

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

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

С уважением, Сергей Смирнов.

Если вы пользуетесь скачанными темами, то наверное встречались с такой страницей, которая доступна в админке и с ее помощью можно настроить тему, не правя код самой темы.

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

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

В общем у вас будут дополнительные опции темы, которые вы сделаете своими руками без плагина. Выглядит она примерно так:

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

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

Для начала Вы должны определится как именно вы подключите код страницы. Есть два варианта.

Первый простой, все добавляем в самый конец вашего functions.php после ?> и все.

Второй способ - нужно создать файл settings.php и в него добавить весь код, после подключить его в functions.php следующим образом.

Include("/settings.php");

Когда создадите settings.php , перед тем как добавлять в него код убедитесь, что он сохранен в правильной кодировке - UTF-8 без BOM . Редактировать файлы, лучше всего в программе Notepadd++.

Теперь начинаем добавлять сам код. Сначала зарегистрируем нашу функцию.

Теперь добавим нашу страницу в админку в меню слева.

// Добавление Страницы настроек в меню function add_settings_page() { add_menu_page(__("Опции темы"), __("Опции темы"), "manage_options", "settings", "theme_settings_page"); } //Добавление действий add_action("admin_init", "theme_settings_init"); add_action("admin_menu", "add_settings_page");

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

Добавим действия и функцию сохранения опций нашей страницы

//Сохранение настроек function theme_settings_page() { global $select_options; if (! isset($_REQUEST["settings-updated"])) $_REQUEST["settings-updated"] = false; ?>

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

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

Теперь весь код целиком

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

Для этого сначала нужно включить нашу функцию

Эту строку нужно прописывать каждый раз перед выводом опции

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

Для лого например это так:

Готовый результат будет вот таким

Думаю с этим понятно. Если хотим вывести значение из страницы настроек, в нужном месте вставляем код, что выше, лишь правильно указав имена. Так выводим для метрики и баннера меняя лишь имена на tracking и banner , ну или те, что Вы придумаете, главное чтобы они совпадали с теми что на странице настроек.

Можно еще провернуть еще один фокус. На примере опции - Текст в подвале, предлагаю добавить условие - если . Суть такова - изначально текст в подвале прописан по умолчанию, но если пользователь на странице настроек что-то введет, то вместо текста по умолчанию появится то что задал пользователь.

Чтобы это сделать нам понадобится прописать такой вот код:

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

Содержание если флажок установлен.

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

Теперь осталось вывести только содержание того, что пользователь выберет в списке. У нас это было размещение блока слева или справа

Тут как и с текстом в подвале будем использовать условие - если . В моем списке - только два элемента, поэтому условие такое - если выбран пункт номер один(слева) показываем блок у которого в стилях свойство - float:left; , иначе показываем блок у которого свойство - float:right; .

Блок слева

Блок справа

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

На этом все, спасибо за внимание. 🙂