› › Создание страницы настроек для вашей WordPress темы. Очередной блог фрилансера

Создание страницы настроек для вашей WordPress темы. Очередной блог фрилансера

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

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

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

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

Я напишу про несколько элементов такой страницы и объясню как ними пользоваться. Страницу я создал из кучи других. Я находил много разных, но в каждой был что-то, что меня не устраивало или не работало. В одной не было чекбоксов, флажков(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 есть id и name у которых значение theme_settings . Вы можете создавать много элементов, но у каждого должно быть свое имя, в данном случаи это - custom_logo

Также у полей input есть - value у которого внутри тоже есть custom_logo . Так что, если Вам надо добавить еще поле, можете целиком скопировать код выше, но только поменяв имя на новое.

Как Вы ведите тут тоже есть id и name и у них свое уникальное имя - block_pos . Внутрь списка добавляем элементы option , для которых тоже задаем условия.

Можете приспособить под себя, но только не сделайте ошибки.

Как в поле ввода и списке есть id и name и они тоже обязательны. Тоже есть свойство $options и в нем тоже указано имя.

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

Лгоготип " />
Расположение блока:
Показывать блок: />
Ссылка на банер
Текст в подвале
Метрика

Также к каждому полю я прописывал label , с помощью которого я прописал пояснения к каждому из элементов.

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

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

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

Настройки сохранены

Лгоготип " />
Расположение блока:
Показывать блок: />
Ссылка на банер
Текст в подвале
Метрика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блок слева

Блок справа

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

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

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

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

Настройка темы (шаблона) WordPress.

Войдем в Панель инструментов () WordPress и продолжим ее изучение, подробно разобрав все пункты раздела “Дизайн “, который отвечает за внешний вид и редактирование шаблона WordPress:

Следующая вкладка “Виджеты “. При переходе на нее перед нами откроется такая картина:

В левой части мы видим все “Доступные виджеты “: RSS, Архивы, Календарь, Найти, Облако меток, Последние записи, Рубрики, Текст и т. д. Справа схематически обозначен сайдбар блога. В зависимости от строения структуры шаблона WordPress, сайдбар может быть один или несколько. На блоге он выглядит как боковая колонка, расположенная справа или слева, а, возможно, и с обеих сторон одновременно.

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

Что обозначает каждый из виджетов, достаточно понятно из их названий. Особого внимания заслуживает виджет “Текст “. Переместив его в сайдбар, откроются поля для ввода данных и заголовка. Сюда Вы можете вставить как обычный текст с картинками, так и различные HTML-коды. Например, счетчики статистики, рекламные блоки и банеры, формы подписки и др. После заполнения или редактирования виджета “Текст “, нажмите кнопку “Сохранить “, чтобы изменения вступили в силу. Не нужные виджеты можно удалить, нажав кнопку “Удалить ” или перетащив их обратно в раздел “Доступные виджеты “. Если надо временно отключить виджет, сохранив при этом все его настройки для дальнейшего использования, перетащите этот виджет влево вниз в раздел “Неактивные виджеты “. В любой момент Вы сможете вернуть его обратно.

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

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

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

Итак, мы изучили раздел “Дизайн ” в админке нашего блога и разобрались с настройками темы (шаблона) WordPress.

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

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

Как настроить ту или иную тему должно быть подробно описано на сайте разработчика или локализатора шаблона, с которого Вы ее скачали. Индивидуальные настройки темы WordPress позволяют с легкостью, не вмешиваясь в исходный код шаблона, изменять элементы дизайна сайта (логотип, фон, шрифты, расположение сайдбаров и др.), вставлять банеры, кнопки социальных сетей и RSS, счетчики статистики, рекламные блоки и многое другое. Советую внимательно изучить эти настройки, особенно если Вы плохо знакомы с HTML и CSS.

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

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

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

На рисунке ниже Вы можете видеть примерную структуру шаблона WordPress.

Вот список файлов, которые обычно присутствуют во всех шаблонах и их краткое описание:

  • header.php (шапка) – присутствует на всех веб-страницах и отвечает за вывод верхней части сайта.
  • index.php – отвечает за вывод содержимого главной страницы.
  • single.php – выводит каждую конкретную статью.
  • page.php – содержимое статичной страницы сайта.
  • category.php – файл вывода записей определенной категории.
  • tag.php – выводит архив записей по тегам.
  • archive.php – временной архив статей (за месяц или за год). Иногда этот файл заменяет собой category.php и tag.php.
  • search.php – вывод записей результатов поиска по сайту.
  • comments.php – файл шаблона комментариев.
  • sidebar.php – боковая колонка сайта, в которой располагаются виджеты. Сайдбаров, в зависимости от структуры шаблона WordPress, может быть несколько. Этот файл присутствует на всех страницах сайта.
  • 404.php – файл ошибки 404, которая появляется, если вводится неправильный адрес веб-страницы или ее не существует.
  • functions.php – в этом файле обычно прописаны функции, которые вызываются при отображении сайта или при работе с админ.панелью.
  • footer.php (подвал) – нижняя часть сайта, присутствует на всех его страницах. Этот файл шаблона WordPress мы уже рассматривали, когда удаляли в нем нежелательные .
  • style.css – файл таблицы стилей, отвечающий за внешнее оформление сайта.

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

Важно понимать, что, не имея хотя бы начальных знаний HTML и CSS , лучше не пытаться редактировать файлы темы (шаблона) WordPress. А в случае, если Вам все-таки необходимо отредактировать какой-нибудь файл шаблона, обязательно предварительно сделайте его резервную копию. Тогда, если что-то пойдет не так, Вы всегда сможете восстановить исходный файл.

От себя замечу, что редактировать шаблон WordPress удобнее не из админки блога, а открыв файл в программе Notepad++, используя для этого соединение с сервером хостинга через FTP-клиент. О том, как это сделать, можно почитать в статье “ “.

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

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

После того, как Вы купили домен и заказали хостинг, самое время произвести настройки 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 человек в сутки, то купите уникальную тему. Если у Вас остались вопросы, то обязательно задавайте их в комментариях ниже.

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

Сегодня, мы подробно рассмотрим процесс создания страницы настроек для темы 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-разметку для нашей панели управления. Будем использовать вот такую структуру:

">
/*Выводим инпуты нужное количество раз (соответствующее количеству настроек)*/ /* используем
для каждой секции настроек */

Позвольте мне все вам все здесь объяснить. Группы настроек будут заключены в блок с классом “rm_wrap”, а затем в блок с классом “rp_opts”. Затем, внутри этих блоков, мы открываем тег form, внутри которой будут размещены все необходимые инпуты. Каждая секция настроек (Основные настройки, Настройки домашней страницы, Настройки блога и т.д.) будет расположена в отдельном блоке с именем класса “rm_section”. В этом блоке будет расположено название (для секции настроек) и несколько блоков с инпутами. Используя специальные классы для блоков, типа

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

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

Шаг 3

Откройте файл functions.php своим любимым редактором кода (я использую NotePad++), и вставьте следующий код:

Это две PHP-переменные, содержащие имя вашей темы (в нашем случае это Nettuts), и псевдоним, который вы укажете (в нашем примере это nt). Псевдоним используется в качестве префикса к именам всех настроек темы, и как правило является уникальным для каждой темы.

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

$categories = get_categories("hide_empty=0&order_by=name"); $wp_cats = array(); foreach ($categories as $category_list){ $wp_cats[$category_list -> cat_ID] = $category_list -> cat_name; } array_unshift($wp_cats, "Выберите рубрику");

Этот фрагмент кода использует встроенную wordpress-функцию get_categories, для получения всех рубрик, а затем, с помощью цикла foreach, сохранения их в переменной $wp_cats. Затем к массиву добавляется опция “выберите рубрику”.

Шаг 4

Теперь пришло время создать список настроек для нашей темы. Вставьте следующий код в файл functions.php:

$options = array(array("name" => "Настройки", "type" => "title"), array ("name" => "Основные настройки", "type" => "section"), array ("type" => "open"), array ("name" => "Цветовая схема", "desc" => "Выберите цветовую схему темы", "id" => $shortname . "_color_scheme", "type" => "select", "options" => array ("синяя", "красная", "зеленая"), "std" => "blue"), array ("name" => "URL Логотипа", "desc" => "Введите ссылку к картинке логотипа", "id" => $shortname . "_logo", "type" => "text", "std" => ""), array ("name" => "Пользовательский CSS", "desc" => "Хотите использовать свой CSS-код? Вставьте его в это поле", "id" => $shortname . "_custom_css", "type" => "textarea", "std" => ""), array ("type" => "close"), array ("name" => "Домашняя страница", "type" => "section"), array ("type" => "open"), array ("name" => "Картинка в шапке, на главной странице", "desc" => "Введите URL картинки, которая будет использоваться в шапке", "id" => $shortname ."_header_img", "type" => "text", "std" => ""), array ("name" => "Рубрика домашней страницы", "desc" => "Выберите рубрику, в которую будут публиковатся записи", "id" => $shortname ."_feat_cat", "type" => "select", "options" => $wp_cats, "std" => "Выберите рубрику"), array ("type" => "close"), array ("name" => "Подвал", "type" => "section"), array ("type" => "open"), array("name" => "Текст копирайта", "desc" => "Введите текст, который будет размещен в правой части подвала. Можно использовать HTML", "id" => $shortname."_footer_text", "type" => "text", "std" => ""), array("name" => "Код Google Analytics", "desc" => "Здесь вы можете разместить код Google Analytics, или любой другой счетчик", "id" => $shortname."_ga_code", "type" => "textarea", "std" => ""), array("name" => "Favicon", "desc" => "Favicon - это пиксельная иконка, которая представляет ваш сайт. Вставьте URL к картинке с расширением.ico", "id" => $shortname."_favicon", "type" => "text", "std" => get_bloginfo("url") ."/favicon.ico"), array("name" => "Feedburner URL", "desc" => "Feedburner - это сервис Google, управляющий RSS-потоками. Paste your Feedburner URL here to let readers see it in your website", "id" => $shortname."_feedburner", "type" => "text", "std" => get_bloginfo("rss2_url")), array("type" => "close"));

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

  • PHP-переменная $options хранит весь список настроек для нашей темы.
  • Список настроек состоит из нескольких массивов, каждый из которых содержит ключ “type”, для определения типа настройки и способа ее отображения.
  • Наш список настроек начинается с массива “type” => “title” – который будет использоваться для отображения имени темы и названия в заголовке страницы.
  • Каждый раздел (Основные настройки, Домашняя страница, Подвал) имеет отдельный список настроек.
  • Мы начинаем новую секцию, закрывая любую из предыдущих секций, и объявления новой секции с помощью массива array(“name” => “Подвал”, “type” => “section”).
  • Каждая опция может содержать следующие настройки:
    name: Имя текстового поля.
    desc: Короткое описание поля, для пользователя.
    id:     id поля, с префиксом из псевдонима. Оно будет использоваться как для записи настройки, так и для доступа к ней.
    type: тип input — text, select или textarea
    options: используется для объявления массива настроек для поля выпадающего списка.
    std: значение поля по умолчанию, используется если никаких других значений не указано.

Шаг 5

Попробуйте зайти в панель управления WordPress. Вы нигде не найдете указанных нами настроек, как же нам отобразить их? Добавляем следующий код в файл functions.php:

Function mytheme_add_admin(){ global $themename, $shortname, $options; if($_GET["page"] == basename(__FILE__)){ if("saved" == $_REQUEST["action"]){ foreach ($options as $value){ update_option($value["id"], $_REQUEST[$value["id"]]); } foreach ($options as $value){ if(isset ($_REQUEST[$value["id"]])){ update_option($value["id"], $_REQUEST[$value["id"]]); }else{ delete_option($value["id"]); } } header("Location: admin.php?page=functions.php&saved=true"); die; } } else if("reset" == $_REQUEST["action"]){ foreach($options as $value){ delete_option($value["id"]); } header("Location: admin.php&page=functions.php&reset=true"); die; } add_menu_page($themename, $themename, "administrator", basename(__FILE__), "mytheme_admin"); } function mytheme_add_init() { }

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

Последняя строка функции, добавляет страницу меню – параметры по порядку: имя и название, уровень пользовательских прав для просмотра страницы, страница сохранения и функция, использующаяся для отображения/сохранения настроек (в нашем примере называется mytheme_admin).

Заметили, что функция mytheme_add_init пустая? Пусть пока останется такой как есть, мы вернемся к ней позже.

Шаг 6

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

Function mytheme_admin(){ global $themename, $shortname, $options; $i = 0; if($_REQUEST["action"] == "save") echo "

настройки темы ". $themename ." были сохранены

"; if($_REQUEST["reset"]) echo "

настройки темы ". $themename ." были сброшены

"; ?>

Настройки

Очень просто, не правда ли? Если настройка была сохранена, выводим подтверждающее сообщение. То же самое для сброса. Обратите внимание на класс “update fade” – WordPress автоматически выведет это сообщение в самом верху окна. Удобно, не правда ли? Идем дальше, начиная с блока “rm_wrap”

Шаг 7

Вставляем следующий код, ниже:


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

" id="" type="" value="" />

Здесь используется php-цикл foreach, каждый тип настроек определяется индивидуально для каждого случая. Для этого мы будем использовать оператор switch. Переменная в операторе switch – это текущий тип параметра, case – ожидаемый тип параметра. Вы, наверное, обратили внимание на выражение “break”, после каждого case? Это выражение используется для предотвращения неправильной обработки условия. Когда значение case соответствует переменной, все последующие case также будут выполнены. То есть, если у нас определен case3, то кроме него, также будут выполняться case4, case5 и т.д. Но нам этого не нужно, поэтому мы используем break, для прекращения работы оператора switch.

Если текущее значение параметра “open” – ничего не происходит. Если текущее значение “close”, ставятся два закрывающих блока. Значение параметра “title” используется только один раз – во вступительном тексте перед настройками темы. Для каждого типа “text” (input type=”text”), “select” (выпадающий список) и “textarea” (название говорит само за себя) – отображается соответствующий input. Обратите внимание на блок

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

Шаг 8

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

Case "select" : ?>

" id="" value="true" />

/functions/images/trans.gif" class="inactive" alt=""/>

Иконки: WooFunction

Для типа настройки “section”, мы используем переменную-счетчик $i. Это позволяет отслеживать номер секций и соединять его с именем кнопки отправки данных, получая таким образом уникальное имя для каждой кнопки. Кроме того, в конец секции добавляется форма, для сброса всех настроек. Картинка будет использована для дальнейшей jQuery-фикации. Это последний фрагмент кода, который приведет наши функции в действие:

Add_action("admin_init", "mytheme_add_init"); add_action("admin_menu", "mytheme_add_admin");

Этот код добавляет дополнительную страницу в панели управления WordPress.

Шаг 9

Отлично, теперь у нас есть собственная страница управления, с отдельным пунктом меню. Однако, зайдя на эту страничку, мы видим, что не все так хорошо как нам бы хотелось. Но не беда, у нас есть отличный помощник – CSS! Создаем новую папку “functions”, внутри папки nettuts. Внутри этой папки, создаем новый файл – functions.css, и вставляем в него следующий код:

Rm_wrap{ width:740px; } .rm_section{ border:1px solid #ddd; border-bottom:0; background:#f9f9f9; } .rm_opts label{ font-size:12px; font-weight:700; width:200px; display:block; float:left; } .rm_input { padding:30px 10px; border-bottom:1px solid #ddd; border-top:1px solid #fff; } .rm_opts small{ display:block; float:right; width:200px; color:#999; } .rm_opts input, .rm_opts select{ width:280px; font-size:12px; padding:4px; color:#333; line-height:1em; background:#f3f3f3; } .rm_input input:focus, .rm_input textarea:focus{ background:#fff; } .rm_input textarea{ width:280px; height:175px; font-size:12px; padding:4px; color:#333; line-height:1.5em; background:#f3f3f3; } .rm_title h3 { cursor:pointer; font-size:1em; text-transform: uppercase; margin:0; font-weight:bold; color:#232323; float:left; width:80%; padding:14px 4px; } .rm_title{ cursor:pointer; border-bottom:1px solid #ddd; background:#eee; padding:0; } .rm_title h3 img.inactive{ margin:-8px 10px 0 2px; width:32px; height:32px; background:url("images/pointer.png") no-repeat 0 0; float:left; -moz-border-radius:6px; border:1px solid #ccc; } .rm_title h3 img.active{ margin:-8px 10px 0 2px; width:32px; height:32px; background:url("images/pointer.png") no-repeat 0 -32px; float:left; -moz-border-radius:6px; -webkit-border-radius:6px; border:1px solid #ccc; } .rm_title h3:hover img{ border:1px solid #999; } .rm_title span.submit{ display:block; float:right; margin:0; padding:0; width:15%; padding:14px 0; } .clearfix{ clear:both; } .rm_table th, .rm_table td{ border:1px solid #bbb; padding:10px; text-align:center; } .rm_table th, .rm_table td.feature{ border-color:#888; }

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

Шаг 10

Теперь, когда у нас есть готовый CSS-файл, как же подключить его к странице, если у нас нет прямого доступа к разделу документа ? Помните, мы создали пустую функцию mytheme_add_init()? Вон она-то как раз нам и поможет. Измените ее следующим образом:

Function mytheme_add_init() { $file_dir = get_bloginfo("template_directory"); wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all"); }

Этот код подключит файл functions.css в раздел документа . Расположение файла определяется папкой с шаблоном.

Шаг 11

Взгляните на нашу страницу. Она выглядит вполне хорошо, осталось лишь добавить функциональность иконкам плюса, в заголовках секции. Для этого будем использовать jQuery. Создайте новый файл rm_script.js внутри папки nettuts/functions/folder. Вставьте следующий код:

JQuery(document).ready(function(){ jQuery(".rm_options").slideUp(); jQuery(".rm_section h3").click(function(){ if(jQuery(this).parent().next(".rm_options").css("display")==="none") { jQuery(this).removeClass("inactive").addClass("active").children("img").removeClass("inactive").addClass("active"); } else { jQuery(this).removeClass("active").addClass("inactive").children("img").removeClass("active").addClass("inactive"); } jQuery(this).parent().next(".rm_options").slideToggle("slow"); }); });

Что же делает этот код? После того как DOM загружен, все блоки с классом “rm_options” сворачиваются. Затем, при клике на иконке плюса, удаляется класс “inactive”, и добавляется класс “active”, который заменяет иконку на знак минус. При повторном нажатии этой иконки, происходит обратный процесс. Для сворачивания/разворачивания блоков используется довольно простая функция jQuery slideToggle. Чтобы подключить этот скрипт к странице, мы будем использовать уже знакомую нам функцию mytheme_add_init(), измените ее следующим образом:

Function mytheme_add_init() { $file_dir = get_bloginfo("template_directory"); wp_enqueue_style("functions", $file_dir."/functions/style.css", false, "1.0", "all"); wp_enqueue_script("rm_script", $file_dir."/functions/script.js", false, "1.0"); }

После этого, скрипт должен работать. Проверьте, как это выглядит на странице:

Шаг 12

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

$var = get_option("nt_colur_scheme");

С его помощью, мы сможем реализовать смену цветовой схемы сайта. Это довольно просто:

/* Изменяем CSS-файл, в зависимости от выбранного цвета */ /.css" /> /*Выводим текст в подвале, можно использовать HTML-тэги */

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

Из этой статьи вы узнаете, как добавить свои настройки для темы, используя встроенные возможности WordPress, а именно Theme Customizer. Мощный инструмент, встроенный в ядро WP, для настройки тем.

Предисловие

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

Собственно все, что я узнал по теме я описал в статье. Кому интересно сразу почитать о плюсах/минусах и моем мнении прошу в конец статьи или .

Экшн!

Итак, если у вас нет пункта меню «Внешний вид — Настроить» при активации вашей темы, то нужно его добавить. Делается это так:

Для этого создадим и откроем в корне темы файл functions.php и добавим туда такой код:

Add_action("admin_menu", function(){ add_theme_page("Настроить", "Настроить", "edit_theme_options", "customize.php"); });

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

Создаем секцию

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

В созданный нами ранее файл functions.php добавим такой код:

Add_action("customize_register", function($customizer){ $customizer->add_section("example_section_one", array("title" => "Мои настройки", "description" => "Пример секции", "priority" => 11,)); });

Мы создали хук и привязали к нему функцию. Метод add_section() как раз и добавляет секцию настроек. Он принимает 2 параметра:

$args — массив аргументов

title — как секция будет называться

description — описание секции (необязательно)

Добавляем настройку в секцию

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

Для добавления настроек напишем такой код в functions.php прямо после метода add_section(), но в внутри хука customize_register:

$customizer->add_setting("example_textbox", array("default" => "Сайт сайт"));

Метод add_setting() принимает два параметра:

$id — уникальный идентификатор

$args — массив аргументов

В массиве $args может быть несколько позиций, а именно:

default — значение настройки по-умолчанию

type — тип настройки

capability — права пользователя, необходимые для изменения данного параметра. Т.е. разные параметры могут видеть разные группы пользователей. Круто! (необязательно)

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

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

sanitize_callback — имя функции для фильтрации входных данных, в БД

sanitize_js_callback — имя функции для фильтрации выходных данных, из БД

Теперь добавим контрол к настройкам . Ниже добавим такой код:

$customizer->add_control("example_textbox", array("label" => "Настройка текста", "section" => "example_section_one", "type" => "text",));

Вот теперь мы можем увидеть нашу настройку.

// картинку

Метод add_control() принимает два параметра:

$id — уникальный идентификатор

$args — массив аргументов

В массиве $args может быть несколько позиций, а именно:

label — название настройки

description — описание

section — секцию, в которую будет помещен контрол и настройка

type — тип контрола (по-умолчанию: text)

choices — для типа с переключателями флажками, определяет список значений на выбор

priority — какой по счету будет располагаться секция или ее приоритет (по-умолчанию 10)

Но мы не вывели настройку в теме. Давайте займемся этим.

Выводим настройки в теме

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

Функция get_theme_mod() принимает два аргумента^

$name — имя настройки, которую нужно получить

$default — значение по-умолчанию. Выведется, если настройки не существует

Другие типы контролов

CheackBox (Флажок)

Позволяет включить или отключить, что либо.

$customizer->add_control("hide_text", array("type" => "checkbox", "label" => "Скрыть текст", "section" => "example_section_one",));

В теме выводится так:

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

Radio (Группа переключателей)

Позволяет выбрать, какой либо 1 параметр из списка.

$customizer->add_setting("radio ", array("default" => "item_1")); $customizer->add_control("radio ", array("type" => "radio", "label" => "Пример переключателей", "section" => "example_section_one", "choices" => array("item_1" => "item_1", "item_2" => "item_2", "item_3" => "item_3",),));

Select (Список)