Подготовка WordPress к работе над проектом

  Здравствуйте, уважаемые посетители. Эта моя статья не является никаким этапом. Скорее всего, она как бы ответвление от первого или его дополнение. Это как вам будет угодно. Но зато очень важное и нужное. Так что советую не игнорировать её. Перед тем, как начать наполнять сайт контентом нужно ещё немного его доработать. Этим мы и займёмся в данной статье. Для начала произведём ещё несколько действий необходимых в работе.

  На предыдущем этапе нам общими усилиями удалось установить локальный сервер и зайти в админ панель WordPress. Помните вот это?

mybabki.ru   Обновите для начала сам WordPress, выберите подходящую для вас версию.

mybabki.ru  Перейдите во вкладку «плагины» и удалите, установленные по умолчанию. Они нам не нужны, позже мы установим нужные.

mybabki.ru   Далее сделаем вот что:

а) Подберём тему оформления

б) Создадим дочернюю тему для основной

в) Установим необходимые плагины

а) Тема оформления сайта

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

mybabki.ru

   Итак, давайте выбирать тему оформления для нашего проекта. Идём во вкладку «Внешний вид» — «Темы».

mybabki.ru   Жмём кнопку «Добавить новую»,

mybabki.ru

перед нами появится каталог разнообразных тем.

mybabki.ru  Выберем адаптивную и более подходящую для нашего проекта.

Если вы скачали тему, но она вам не нравится, то можно её удалить нажав «Информация о теме» — «Удалить»

mybabki.ru

mybabki.ru  Для нашего изучения мне захотелось выбрать тему «Jolene» . Вот так она выглядит в оригинале:

mybabki.ru

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

б)Создание дочерней темы

    Дочерняя тема — это дополнительная тема, созданная на основе родительской. Она как бы накладывается на родительскую, становясь основной и полностью с ней взаимодействует, заимствуя её данные.

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

  Переходим в наш OSPanel  —> domains —> mysite —> wp-content —> themes. Там вы увидите папку со своей выбранной темой. Здесь же создайте новую папку и назовите её как-нибудь, главное без пробелов и на латинице, я  назову: «jolene-child».

mybabki.ru   В этой папке создадим 2 файла style.css и function.php  с помощью блокнота «Notepad++»(не обходимая программа в нашей работе, поэтому обязательно скачайте её. Открыть программу —> Файл —>  Новый —>  Сохранить как. Указать место куда сохранить, написать название, сохранить.) 

mybabki.rumybabki.ru  Откроем файл style.css в блокноте и вставляем вот такой код.

mybabki.ru Естественно названия меняем на свои и убраем пояснения:

/*
Theme Name: Jolene Child            /название дочерней темы, обязательно/
Theme URL: http://mysite/wp-admin/themes.php          /путь к папке/
Description: Jolene Child Theme           /что она является дочерней/
Author: Natil             /имя автора/
Author URI: https://mybabki.ru         /сайт автора, необязательно пока/
Template: jolene                /название папки родительской темы, обязательно/
Version: 1.0.1               /версия дочерней темы/
*/ @import url("../jolene/style.css");         /импорт файлов из основной темы/

/* дополнительные стили */

Жмём «Сохранить».

Теперь также откроем файл function.php и вставляем код, заменив jolene_child_theme_scripts и function fotografie_child_theme_scripts на своё и не забыв потом сохранить:

<?php
function jolene_child_theme_scripts() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'jolene_child_theme_scripts' );               ?>

  Этот код даёт нам возможность подключить стили родительской темы в дочернюю и работает гораздо эффективнее, чем просто [email protected] Стили через [email protected] загружаются поочерёдно, а значит при этом уменьшается скорость загрузки сайта, что ни есть хорошо.

  Теперь заходим в родительскую тему. Копируем 2 файла: footer.php и header.php и вставляем в дочернюю к двум предыдущим файлам. С ними чаще всего приходится работать. 

mybabki.ru

  Переходим в консоль WordPress, выбираем Внешний вид —> Темы.

mybabki.ru

  Появилась наша дочерняя тема, осталось её активировать. Вопрос по дочерней теме закрыт.

в) Установка плагинов

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

  Устанавливать плагины можно также прямо из админ панели, перейдя во вкладку «Плагины»—>»Добавить новый».

mybabki.ru  Перейдя на страницу с предлагаемыми плагинами вводите в поиск те, о которых я вам расскажу, установите их и активируйте.

mybabki.ru

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

 1. FancyBox for WordPress — этот плагин даёт возможность настроить практически всё во внешнем виде вашего сайта. Можно задать свои: ширину, цвета, анимацию, кнопки, рамки, прозрачность и многое другое. Нужный плагин.

mybabki.ru

2. Advanced Editor Tools — этот плагин добавляет в редактор блоки и функции редактирования. С его помощью вы настроите панель инструментов редактора так, как вам удобно. Добавите или удалите значки функций, настроите блоки на свой вкус. Зайдите в его настройки и сделайте редактор удобным для себя просто перетащив нужные действия. Удобный и нужный плагин.

mybabki.ru3. All-in-One WP Migration — этот плагин поможет вам легко и просто сделать копии своего проекта для миграции и резервного копирования. 

mybabki.ru4. Profile Builder — конструктор профилей и хороший помощник в создании формы регистрации, а также входа — выхода из учётной записи пользователя. Для формы достаточно создать новую страницу с названием и вставить нужный шорткод, помещённый в квадратные скобки: [ ]

  • wppb-edit-profile — предоставить пользователям интерфейсный доступ к их профилю (требуется, чтобы пользователь вошел в систему)
  • wppb-login — добавить внешнюю форму входа в систему
  • wppb-logout — добавить функцию выхода из системы
  • wppb-register — регистрация пользователей через форму внешнего интерфейса 
  • wppb-recovery-password — добавить форму восстановления пароля
  • wppb-restrict — контент для ограничения / wppb-restrict — для ограничения контента любого типа

 Затем настроить поля формы в настройках плагина

mybabki.ru

и добавить код в виджет:

wppb-login   /в квадратных скобках/
<a href="сюда вставьте ссылку на вашу страницу регистрации "><input type="submit" value="Регистрация" onclick="this.disabled=true; this.form.submit(); return false;"></a> 

Получится внешняя форма регистрации.

4. Simple Custom CSS and JS очень удобный плагин для добавления кодов, особенно для новичков. Благодаря ему вам не придётся терять время на поиски нужных файлов для размещения css или javascript, когда вам захочется добавить какой-нибудь свой элемент в проект.  Нужно будет просто создать в самом плагине новый код, сохранить и опубликовать. 

mybabki.ru

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

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

Добавить комментарий