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

Логотип WordPress
Выбор темы оформления сайта
Создание дочерней темы
Установка плагинов

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

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

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

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

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

Удаление плагинов установленных по умолчанию   Далее сделаем вот что:

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

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

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

а) Выбор темы оформления сайта

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

Проверка адаптивности сайта

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

Переход к выбору темы для проекта   Жмём кнопку «Добавить новую»,

Поиск новых тем

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

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

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

Просмотр информации о теме

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

Внешний вид темы Jolene

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

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

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

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

Дочерняя тема

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

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

Создание файлов для дочерней темы с помощью Notepad++Созданные файлы в дочерней теме  Откроем файл style.css в блокноте и вставляем код.

Как открыть файл с помощью Notepad++Названия меняем на свои и убраем пояснения:

/*
Theme Name: Jolene Child            /название дочерней темы, обязательно/
Theme URL: https://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' );               ?>  Этот код подключает стили родительской темы в дочернюю и работает эффективнее, чем просто import@. Сайт быстрее загружается.

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

Копирование файлов

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

Активация получившейся дочерней темы в консоли WordPress

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

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

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

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

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

Каталог плагинов

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

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

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

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

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

Управление копиями проекта с помощью плагина All-in-One WP Migration

Profile Builder 

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

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

 Затем настроить поля формы в настройках плагина Настройка формы регистрации с помощью плагина Profile Builder

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

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

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

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

Добавление кодов с помощью плагина Simple Custom CSS and JS

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

На этом подготовка wordpress пока готова. Читайте следующую сатью -«Наполнение сайта контентом«.

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

mybabki.ru
"Построй свои собственные мечты, или кто-то другой наймёт тебя строить свои."
-Фаррах Грей