Создание собственной темы для 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
Featured post:
Front page elements
Featured posts
Add featured post
Featured post:
Settings saved
- $parent_slug – уникальный идентификатор для меню верхнего уровня, к которому будет добавлено подменю.
- $page_title заголовок добавляемой страницы.
- $menu_title заголовок, отображаемый в меню (зачастую короткая версия $page_title)
- $capability – минимальные права доступа, требуемые пользователю, чтобы получить доступ к данному меню.
- $menu_slug – уникальный идентификатор для создаваемого меню.
- $function – название функции, которая вызывается для обработки (и представления) данной страницы меню.
Если вы хотите добавить страницу меню в качестве подменю к уже существующей группе WordPress, вы можете использовать следующие значения в качестве параметра $parent_slug:
- Dashboard: index.php
- Posts: edit.php
- Media: upload.php
- Links: link-manager.php
- Pages: edit.php?post_type=page
- Comments: edit-comments.php
- Appearance: themes.php
- Plugins: plugins.php
- Users: users.php
- Tools: tools.php
- Settings: 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!";
}
Вот как это будет выглядеть в действии:
Нам также нужно проверить, имеет ли пользователь права, требуемые для редактирования страницы настроек. Чтобы сделать это, добавим следующий код в самом начале функции страницы настроек:
// проверяем, что пользователь может обновлять настройки
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");
}
// нам нужно добавить функцию обработки меню верхнего уровня
function theme_settings_page() {
echo "Settings page";
}
Если вы протестируете код и обновите консоль WordPress, то вы увидите новую группу меню, представленную в самом низу списка меню.
Однако пока это выглядит не совсем верно. Щелчок по верхнему элементу меню приводит вас не к странице меню Front Page, а к странице Example theme. Это не совпадает с тем, как работают остальные меню WordPress, потому давайте сделаем еще одну вещь: изменив атрибут $menu_slug в вызове add_submenu_page на то же самое значение, что и в меню верхнего уровня, мы можем связать два меню так, чтобы выбор верхнего пункта приводил к появлению меню Front 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
Featured post:
Front page elements
Featured posts
Add featured post
Featured post:
Settings saved
Ниже приведен список стандартных файлов шаблонов, используемых 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 человек в сутки, то купите уникальную тему. Если у Вас остались вопросы, то обязательно задавайте их в комментариях ниже.
С уважением, Сергей Смирнов.
В силу того, что большинство разрабатываемых мною сайтов создается с использованием CMS Wordpress и приходится постоянно сталкиваться с нетривиальными задачами, решил делиться с вами опытом использования различных плагинов. Как бесплатных так и платных, причем попробую придерживаться такого формата: одна статья - один плагин. Постараюсь рассматривать только действительно заслуживающие внимания разработки, и вот в первом своем рассказе поведаю вам об OptionTree - прекрасное, на мой взгляд, решение для создания страницы с пользовательскими настройками сайта.
Что такое пользовательские настройки?
Шаблоны (темы) Wordpress, которые мы можем использовать на своем сайте, очень часто позволяют настраивать какие-то дополнительные параметры, например, цвет заголовков. Все платные темы, которые мне приходилось использовать, существенно расширяют функционал административной панели за счет отдельного интерфейса. Ниже я привожу пример такого расширения, посмотрите, пожалуйста.Когда создается уникальный сайт (под уникальностью я имею ввиду сайт, который использует разработанный специально для клиента шаблон с уникальным дизайном и функционалом), то зачастую требуется создать возможность для администраторов менять те или иные параметры. Почти всегда необходимо дать возможность изменять файл логотипа, какие-то элементы на главной странице, иконки социальных сетей, цвет фона в «подвале» сайта и т.д. Именно такую возможность для разработчиков предоставляет плагин OptionTree, который можно бесплатно скачать с официального сайта Wordpress.
После установки...
Установив и активировав плагин, мы, условно, получаем две части: одна для разработчиков сайта, другая - для пользователей. Первая часть доступна из пункта меню «OptionTree»-«Settings», который появляется после активации плагина слева в административной части Wordpress. Смело жмем туда и получаем уникальный интерфейс для формирования набора пользовательских полей, который будет доступен для пользователей во второй части плагина - «Внешний вид» - «Theme Options».Theme Options UI Builder
Итак, как же создавать настройки? Под отдельной настройкой я буду иметь ввиду некоторое поле, которое будет доступно пользователю, администратору сайта для редактирования. UI Builder позволяет создавать секции или разделы, давайте назовем это лучше так, внутри которых будут располагаться те или иные настройки. На рисунке выше я привел пример настроек, состоящий из двух разделов: «Основное» и «Услуги». Т.е. подразумевается, что в разделе «Основное» будут размещены какие-то общие настройки сайта, а в разделе «Услуги» - специфичные для страницы услуг. Давайте посмотрим, как разделы выглядят для пользователя. Переходим во «Внешний вид» - «Theme Options» и - ура! Вот она страница настроек!Слева мы видим разделы, которые можно переключать, справа - набор настроек внутри раздела. Разделы создаются с помощью Theme Options UI Builder по кнопке «Add section», и для раздела необходимо ввести его заголовок и уникальный идентификатор. Давайте создадим раздел «Дополнительно» и добавим туда несколько настроек.
Все изменения, конечно, фиксируются по нажатию на кнопку «Save Сhanges». Теперь добавим настройку для пользователя, ну, например, цвет заголовков. Нажимаем «Add setting» и, посмотрите, какой набор полей доступен для выбора. Можно сказать, огромный! Выберем «Colorpicker» и введем заголовок и уникальный идентификатор. Будьте внимательны с идентификаторами, именно по уникальному идентификатору затем в коде шаблона мы сможем получить доступ к значению этого поля.
Давайте посмотрим, что же теперь доступно пользователю для редактирования: появился новый раздел и новая настройка, поле «Цвет заголовков», которое пользователь удобным способом может теперь редактировать. Смотрите, я не буду останавливаться на полном списке доступных для создания полей, он есть, конечно же, в документации к плагину и на официальном сайте разработчиков. Если все же какие-то поля вызовут у вас интерес - напишите, я сделаю обновление этой публикации с описанием того или иного типа предлагаемых полей. В принципе, по названию поля понятен его смысл, но, повторюсь, если что-то вызовет у вас трудности - смело обращайтесь, обязательно поясню.
Редактируем шаблон
Теперь нам с вами, как разработчикам, необходимо внести изменения в шаблон сайта для того, чтобы получить значение того или иного поля, которое ввел или выбрал пользователь. За это отвечает некая функция, пример использования которой для нашего выбора цвета заголовков я привожу ниже. Причем, отмечу, что вариантов использования этого плагина может быть огромное множество, в приводимом мною примере внутри файла header.php шаблона в секции head документа будет выводиться теперь стиль заголовков, а именно, их цвет, в зависимости от значения поля h_color.
h1,h2,h3,h4,h5,h6 {
color: ;
}
Т.е. за вывод значения поля отвечает функция ot_get_option($option_id, $default), параметрами которой являются идентификатор поля, который мы с вами, как разработчики, задаем сами, в нашем случае мы выводим значение поля h_color. Второй параметр функции - формат вывода, давайте на этом я остановлюсь чуть подробнее. Например, нам надо сделать опцию, которая позволит пользователю создавать свой набор иконок для социальных сетей. Для этого мы будем использовать поле List Item (на иллюстрации ниже).
Это поле позволяет создавать уже набор повторяющихся полей, когда пользователь сможет добавлять одинаковые параметры внутри одной настройки. Немного непонятно, постараюсь объяснить и затем в коде показать, как это работает. В нашем случае присвоим полю List Item идентификатор social_icons и внутри этого поля (обратите внимание, есть еще одна кнопка «Add setting») добавим два поля: файл иконки и ссылка. Тип первого поля будет Upload, тип второго - Text. Идентификатор первого поля будет icon_image, идентификатор второго - icon_link.
Что получит пользователь? Теперь он сможет добавлять несколько иконок социальных сетей, нажимая на кнопку «Add new» на странице настроек. Причем, обратите внимание, количество таких настроек теперь неограниченно и зависит только от пользователя.
Чтобы вывести теперь в шаблоне такое сложное поле, необходимо использовать немного другой формат вывода, ниже - кусочек кода на PHP для такого случая. Комментариями постараюсь пояснить, что происходит.