Билайн 

Где скачивать темы? Очередной блог фрилансера.

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

Я предполагаю, что вы здесь, потому что вы тем 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, на примере замечательного фреймворка WooFramework .

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

WordPress – на сегодняшний день является наиболее популярной системой управления контентом (CMS). Многие разработчики выбирают WordPress в качестве CMS, независимо от типа проекта.

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

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

Шаг 1

Прежде чем мы приступим к созданию панели управления, нам понадобится тема. Поэтому загрузите , с исходными файлами. Вы увидите слегка измененную классическую тему WordPress. Скопируйте папку “nettuts” (так будет называться наша тема) в папку wp-content/themes. Внутри папки должны быть следующие файлы:

  • functions.php (пустой)
  • index.php
  • comments.php
  • footer.php
  • header.php
  • rtl.php
  • sidebar.php
  • style.css
  • screenshot.png
  • папка с картинками, содержащая два файла

Большая часть нашего кода, будет расположена в файле functions.php.

Тема опционально может использовать функциональный файл, расположенный внутри папки с темой, с именем functions.php. Этот файл действует так же как плагин, и если он входит в состав вашей темы, то он автоматически загружается во время инициализации WordPress (как внешних страниц так и панели администрирования).

Этот файл предполагается использовать для:

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

Теперь, после того как вы скачали и установили предложенную тему, зайдите на страницу “Внешний вид” – “Темы”, и активируйте нашу тему nettuts.

Теперь, нам нужно продумать html-разметку для нашей панели управления. Будем использовать вот такую структуру:

Область применения ограничивается только вашим воображением.

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

Шаг 1 Решение о том, какие настройки необходимы

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

Еще один вопрос, который следует иметь в виду: «Кто будет менять эти настройки?» Если пользователь знаком с PHP и WordPress, можно ожидать что у него не будет проблем с вложением Google Analytics в код, но вы не должны требовать этого от графического дизайнера, не говоря уже о писателе, который даже не должен ничего знать о HTML и CSS.

Общие идеи для определения объектов в настройках темы:

  • Код отслеживания Google Analytics на сайте
  • Количество боковых панелей и их позиционирование (слева, справа, может быть, даже вверх и вниз)
  • Ширина страницы
  • Содержимое вашего футера
  • Параметры для функций, характерных для темы, например, пользовательские форматы тизеров.

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

Настройки, созданные в этом учебнике

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

Элементы главной страницы в редакторе будут представлены в виде списка элементов, к которым новые могут быть добавлены с помощью JavaScript и jQuery.

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

Шаг 2 Подключение страницы настроек к WordPress

Создание страницы настроек начинается с создания функции, которая настраивает меню и подключает его к действию admin_menu . Это сообщает WordPress о том, чтобы вызвать вашу функцию, когда нужно будет создать меню, чтобы все было сделано в нужное время. Добавьте этот код в файл functions.php вашей темы:

Function setup_theme_admin_menus() { // We will write the function contents very soon. } // This tells WordPress to call the function named "setup_theme_admin_menus" // when it"s time to create the menu pages. add_action("admin_menu", "setup_theme_admin_menus");

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

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

Добавление подменю выполняется с помощью функции add_submenu_page :

  • $parent_slug - уникальный идентификатор страницы верхнего меню, к которому это подменю добавляется как дочернее.
  • $page_title - название добавляемой страницы
  • $menu_title - это название, отображаемое в меню (часто более короткая версия $page_title
  • $capability - минимальные требования для пользователя для доступа к этому меню.
  • $menu_slug - уникальный идентификатор создаваемого меню
  • $function - это имя функции, которая вызывается для обработки (и визуализации) этой страницы меню

Если вы решите добавить страницу меню в качестве подменю в одну из групп WordPress, вы можете использовать следующие значения в качестве параметра $parent_slug:

  • Панель инструментов: index.php
  • Сообщения: edit.php
  • Медиа: upload.php
  • Ссылки: link-manager.php
  • Страницы: edit.php?post_type=page
  • Комментарии: edit-comments.php
  • Внешний вид: themes.php
  • Плагины: plugins.php
  • Пользователи: users.php
  • Инструменты: tools.php
  • Настройки: options-general.php

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

Function setup_theme_admin_menus() { add_submenu_page("themes.php", "Front Page Elements", "Front Page", "manage_options", "front-page-elements", "theme_front_page_settings"); }

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

Function theme_front_page_settings() { echo "Hello, world!"; }

И вот как это выглядит в действии:

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

// Check that the user is allowed to update options if (!current_user_can("manage_options")) { wp_die("You do not have sufficient permissions to access this page."); }

Теперь, если пользователь, которому не разрешено управлять параметрами, попадает на страницу настроек, он не увидит ничего, кроме сообщения «У вас недостаточно прав для доступа к этой странице».

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

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

Function setup_theme_admin_menus() { add_menu_page("Theme settings", "Example theme", "manage_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page("tut_theme_settings", "Front Page Elements", "Front Page", "manage_options", "front-page-elements", "theme_front_page_settings"); } // We also need to add the handler function for the top level menu function theme_settings_page() { echo "Settings page"; }

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

Но пока что-то не совсем корректно. Щелчок по элементу верхнего меню не приведет вас к меню «Главная страница», а к странице меню «Пример темы». Это не согласуется с тем, как функционируют другие меню WordPress, поэтому давайте сделаем еще одну вещь: изменив атрибут $menu_slug в вызове add_submenu_page на то же значение, что и в меню верхнего уровня, мы можем связать два меню, чтобы выбор верхнего меню выбирал меню главной страницы:

Function setup_theme_admin_menus() { add_menu_page("Theme settings", "Example theme", "manage_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page("tut_theme_settings", "Front Page Elements", "Front Page", "manage_options", "tut_theme_settings", "theme_front_page_settings"); } function theme_settings_page() { }

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

  • $icon_url указывает URL-адрес значка для меню верхнего уровня.
  • $position определяет позицию вашей группы меню в списке меню. Чем выше значение, тем ниже положение в меню.
Шаг 3 Создание HTML формы для страниц настроек

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

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

Function theme_front_page_settings() { ?> Front page elements

Number of elements on a row:
  • Featured post: Front page elements Number of elements on a row:
    Featured posts Add featured post
  • файлы таблицы стилей;
  • файлы дополнительного функционала;
  • файлы шаблона.

    • Файлами таблицы стилей являются style.css. Они отвечают за цвет, размеры, шрифт и другие параметры элементов сайта. У каждого сайта есть только 1 файл style.css. Если открыть данный файл, то в самом верху можно увидеть информацию о названии, авторе и кратком описании темы. При создании собственной темы можете вписать в style.css информацию о себе.

    Следующей категорией являются файлы дополнительного функционала. К таким относится functions.php, принцип работы которого делает его похожим на плагин. Благодаря этому файлу вы можете осуществить визуальную настройку темы прямо в панели администратора. Обычно перечень настроек не очень широкий (название сайта, цвет навигации и боковых панелей сайта и так далее). Если же тема является многофункциональной, то перечень настроек будет значительно шире.

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

    Если вы никогда не занимались созданием дизайна, то для начала вам стоит попробовать создать простую тему. Для ее нормальной работы понадобится хотя бы 2 следующих файла: style.css и index.php.

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

    Стоит отметить, что те параметры, которые не генерируются файлом index.php, будут генерироваться стандартными файлами. Например, если ваша тема состоит только из 2 вышеперечисленных файлов, но у пользователя возникает потребность в генерации формы добавления комментариев, то в таком случае эту функцию будет выполнять стандартный comments.php. Поэтому, если хотите, чтобы ваша тема была более уникальной, то стоит сделать дополнительные файлы шаблона. Рассмотрим основные.

  • Для добавления комментариев, как вы уже догадались, используется шаблон comments.php.
  • Если же вы хотите сделать всплывающее окно с комментариями, то для таких целей вам понадобится comments-popup.php.
  • Чтобы генерировать главную страницу, используется home.php.
  • Файл single.php отвечает за отображение статей сайта. Если у вас отсутствует такой файл, то его функцию будет выполнять index.php.
  • Файл page.php же осуществляет генерацию отдельных страниц сайта.
  • Для вывода информации об авторе вам понадобится author.php.
  • За категории отвечает category.php.
  • Отображение архивов, даты и поиска осуществляется файлами archive.php, date.php и search.php соответственно.
  • Чтобы ваш сайт выводил уникальную страницы ошибки номер 404, вам понадобится добавить свой 404.php.
  • Верхняя и нижняя часть сайта генерируется файлами header.php и footer.php соответственно.
    • Создание уникальной темы вручную с нуля

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

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

    Также ее можно выбрать прямо в панели администратора wordpress. При этом вам не потребуется ее скачивать. Вам нужно будет лишь кликнуть по клавише «Установить», а затем «Активировать». Перед установкой предлагается осуществить предварительный просмотр.

    Теперь, когда тема активирована, можно перейти к ее уникализации. Первым делом стоит задуматься о верхней части сайта (шапке). Это первое, что бросится в глаза вашим посетителям, поэтому стоит отнестись ответственно. Обычно шапка состоит из названия сайта, логотипа и краткой информации о контенте. Шапку можно создать в любом графическом редакторе. Даже в стандартном Paint. Более продвинутые дизайнеры используют Adobe Photoshop.

    Название сайта должно быть небольшим и легким для запоминания. В Adobe Photoshop можно подобрать множество различных стилей для него. При создании логотипа вам могут потребоваться различные фигуры. Их можно скачать на официальном сайте Adobe Photoshop.

    После того как сделаете рисунок шапки в графическом редакторе, вам нужно будет загрузить его к себе на сайт. По окончанию загрузки справа от рисунка появится URL-адрес, которую нужно будет скопировать. Затем вам понадобится перейти в раздел «Редактор» и выбрать файл, который отвечает за генерирование шапки (header.php). В нем нужно будет найти URL-адрес текущего рисунка и заменить его на тот, который вы получили при загрузке рисунка шапки. После этого вам нужно будет обновить файл. Теперь можно перейти к проверке отображения шапки.

    Если ваша шапка имеет не такие параметры, как стандартная, то их можно подогнать в header.php. Ширина регулируется атрибутом width, а высота - height. Настройка может производится в пикселях и процентах. Так что, если хотите просто растянуть шапку, то выставляйте 100%.

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

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

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

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



    Есть вопросы?

    Сообщить об опечатке

    Текст, который будет отправлен нашим редакторам:

    Отправить