Wordpress (подготовка перед натяжкой)

doc_descr.txt

Axxon - WebDesign (смотри с 22 урока и до конца)
https://www.youtube.com/watch?v=-jonfg3fo5M&list=PLzGX_ggMZ5EyRBceudiD1FoPO2UHIhV7j&index=22

Glo Academy
https://www.youtube.com/watch?v=u_3BfxwkjWw - 1 часть(без 2й части ничего не делай)
https://www.youtube.com/watch?v=AiPkeBWwI3s - 2 часть

Уроки веб-разработки
https://www.youtube.com/watch?v=xmJkgbiBBUQ&list=PLcVuGt1dXgc3PQhr1Lg-BGh3X3svQl0ze (6 уроков) 

WebUpBlog - СОЗДАНИЕ ТЕМЫ (т.е. полное погружение в WP)
https://www.youtube.com/watch?v=tvGfno8VLnw&index=1&list=PL5FCJIdFxiLlWJU4gQd9JPkhE-lsFOCAd (20 уроков)

WebDesign Master (более сложно объясняетc 10 урока и до конца)
https://www.youtube.com/watch?v=IlGpzU6--dY&index=10&list=PLyf8LgkO_8q8UkipPnB-23hXBf4Ma_BcV

			Базовая подготовка перед переносом сайта на WP
доп инфа по работе WP, документация (https://wp-kama.ru/) (https://codex.wordpress.org/Theme_Development)
0)на локальном сервер в папке home создаем папку, например (wp-nameProject.local)
1)создаем здесь папку: www
2)скачиваем последнюю версию wordpress (https://ru.wordpress.org/) и распаковываем все файл в папку www
3)вставляем в браузер строку ( http://localhost/tools/phpmyadmin/ )
4)Кликаем Базы данных
5)пишем любое имя БД по шаблону (wp-nameDB-local), выбираем кодировку utf8-general-ci и создать
6)делаем Рестарт Денвера 
7)вставляем в браузер строку имя проекта: ( wp-nameProject.local/ )
8)должно открыться окно приветствия установки Wordpress, жмем Вперед
9)Появятся поля, заполняем:
	Имя БД пишем: wp-nameDB-local
	Имя пользова: root
	Пароль:	      должно быть пустым, все стираем
	Сервер БД:    localhost
	Префикс табл: wpyoutube_  (как пример, но желаетельно, секретное)
жмем далее/вперед

10)Появятся поля, заполняем:
	Название сайт: Мой первый сайт (может быть любым)
	Имя пользоват: admin (может быть любым)
	Пароль:	       admin (может быть любым)
	Ваш e-mail:    [email protected]
жмем Установить. Все

Для входа в готовый проект на WP, который хранится в папке home на локальном сервере
просто в строке браузера вставляем имя проекта, см. выше ( wp-nameProject.local/ )
далее по уроку
11) далее входим в директорию поадресу: wp-nameProject.local/www/wp-content/themes и в папке themes
создаем новую папку с именем например MyTheme
12)в папке MyTheme создаем 2 файла (index.php и style.css) и в папку MyTheme копируем 
только папки img, libs, fonts. + можен скопировать файл .png (картинка темы) и назвать screenshot.png 
В папке libs создаем папку common и в нее переносим все из папки js, которая была в нашей верстке
13)открываем созданный файл style.css и пишем в нем
/*
Theme Name: MyFirstPractice (можно написать любое название)
Theme URI: domain.local (потом здесь нужно прописать реальный домен)
Author: Ivanov Ivan 
Description: description theme MyFirstPractice
Version: 1.0
Tags: key-words (ключевые слова через запятую. в словах допускается - : key-word)

Развернутое описание темы/Лицензия если нужно
*/

сохраняем
14)в рабочей области wordpress слева выбираем: Внешний вид-Темы далее ищем нашу MyFirstPractice 
15)на теме MyFirstPractice жмем Активировать, 
появится ссылка "перейти на сайт", открываем в новой вкладке. Должно открытся пустая вкладка
16.1)из всех файлов .css копируем все содержимое в созданный файл style.css в следующей последовальности
как в файле index.html (reset.css -> fonts.css -> main.css -> others.css -> media.css)
16.2)с файла index.html (из ранее сверстоного проекта) все содержимое копируем 
и вставляем в созданы index.php (который храниться в 
	wp-nameProject.local/www/wp-content/themes/MyTheme )
сохраняем
17)обновляем (F5 или Ctrl+F5) ранее открытую вкладу сайта из под нашей Активированой темы MyFirstPractice и
в место пустой страницы должна появится вся наша верстка без стилей. Так и должно быть
18)создаем в папке MyTheme файл functions.php и подключаем в нем стили (.css) и скрипты (.js)

--------Начало файла functions.php:
<?php

/*Регистрация всех стилей
последовальность: как в файле index.html
вместо register_styles можно любое имя указать*/
function register_styles()
{
	/*регистрация одного стиля.	
	Вместо "my_style" нужно уникально имя с маленькой буквы и через _ подчеркиване*/
	wp_register_style(
		"my_style", /*любое уникальное имя*/
		get_template_directory_uri() . "/style.css" /*получить путь директории нашей темы WoodTheme и обязат / */
	);
	wp_enqueue_style("my_style");	/*добавить стиль в очередь*/

	/*---тоже самое для других стилей----*/
}

/*Регистрируем Хук-событие
register_styles указываем как назвали выше нашу функцию*/
add_action("wp_enqueue_scripts","register_styles");

/*Регистрация всех скриптов*/
function load_my_script() /*имя функции произвольное*/
{
	/*В первую очередь подключаем библиотеку jquery
	Потом остальные подключенные библиотеки и в конце
	Свои файлы .js*/
	/*отключаем встроенную библиотеку jquery в Wordpress*/
	wp_deregister_script("jquery");
	/*регистрация одного скрипта.*/
	wp_register_script(
		"my_jquery", /*любое уникальное имя*/
		get_template_directory_uri() . "/libs/jquery/jquery-1.11.1.min.js");
	wp_enqueue_script("my_jquery");	/*добавить стиль в очередь*/

	/*---тоже самое для других скриптов после jquery, но добовляем 3 параметр array("my_jquery"), null, false--*/ 
	wp_register_script(
		"name_script", /*любое уникальное имя*/
		get_template_directory_uri() . "/libs/name_directory/name_library.min.js", 
		array("my_jquery"), /*Массив названий всех зарегистрированных скриптов, от которых зависит регестрируемый*/
		null, /*т.е. не добовлять версию скрипта.*/
		false
	);
	wp_enqueue_script("name_script");	/*добавить стиль в очередь*/

}

/*Регистрируем Хук-событие
load_my_script указываем как назвали выше нашу функцию*/
add_action("wp_enqueue_scripts","load_my_script");

/*закрывающий тег ?> для всего кода php НЕ НУЖЕН*/

---------Конец файла functions.php:


А в файле index.php нужно подключенные стили и скрипты закоментировать. 
Удалить закоментированное можно будет когда ВЕСЬ проект будет работать правильно

19.1)!!!Меняем пути в файле style.css
	Для фоновых картинок Путь должен быть прописан от файла style.css к картинке
Если папка img лежит в тойже директории что и файл style.css то путь такой: img/catalog/pic.png  
	Для шрифтов в файле style.css тоже самое: fonts/catalog/nameFont.ttf 
  
В файле index.php для картинок нужно следущая запись, с помощью (    <?php bloginfo("template_url");?>/   )
например для отображения логотипа:
<img src="<?php bloginfo("template_url");?>/img/logo.png" alt='Логотип'/>

<?php bloginfo("template_url");?> вернет строку http://wp-vika.local/wp-content/themes/WoodTheme
т.е. полный путь к созданной нами папке MyTheme

см. описание на сайте https://wp-kama.ru/
19.2)
- для вывода заголовка вкладки страницы между тегами <title> нужно вставить 
<?php bloginfo("name");?> А в консоли wordpress в разделе: Настройки-Общие нужно указать 
что должно отразится между тегами <title> 

- перед путем к фавиконке нужно тоже вставить <?php bloginfo("template_url");?>/

- чтобы вывести описание сайта из раздела консоли WP Настройки-Общие (Краткое описание:)
нужно вместо 	<meta name="description" content="краткое описание" /> написать:
		<meta name="description" content="<?php bloginfo("description");?>" />

20)Перед закрывающимся тегом head вставляем <?php wp_head(); ?>
Перед закрывающимся тегом body вставляем <?php wp_footer(); ?>

21)Далее из файла index.php вырезаем часть начиная с <!DOCTYPE html> и до закрывающегося тега
Шапки сайта в теле body, которая у нас будет идентиченой на всех страницах сайта (например шапка с меню)
И вставляем вырезаную часть в файл header.php, который создаем в папке MyTheme
22)вместо вырезанной части в index.php и перед тегом разметки пишем <?php get_header(); ?>
23)Далее из файла index.php вырезаем нижнею часть 
начиная с открывающегося тега, который отвечает за footer (если он также повторяется на всех 
страницах нашего сайта) и до включительно закрывающего тега </html>
24)вместо вырезанной части футера в index.php пишем <?php get_footer(); ?>
25)обновляем (F5 или Ctrl+F5) ранее открытую вкладу сайта (ничего не должно менятся, т.е. все Ок)
26)В консоли WP в разделе Страницы, создаем все ключевые страницы