Правильный h1.  Теги h1, h2, h3 как использовать заголовки в SEO продвижении. Тег H1 — значение для продвижения

Скачать на Телефон 27.02.2019
Скачать на Телефон

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

Теперь вы начинаете с волнением установку выбранной вами темы на своем сайте 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, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!



Рекомендуем почитать

Наверх