Делаем магазин на WordPress (WooCommerce) часть 1

Устанавливаем WordPress

Для начала скачиваем дистрибутив WordPress. Здесь ссылка на версию 6.0, но всегда можно скачать актуальную версию с сайта.

WordPress 6.0
Сайт WordPress

Копируем архив WordPress на хостинг в папку public_html и распаковываем.

Как правило получается папка WordPress в public_html, нам нужно файлы внутри папки WordPress перенести в корень папки public_html.

После переноса пустую папку WordPress и архив дистрибутива можно удалить, что бы не мешали.

После перемещаемся в управление базами данных на хостинге и создаем базу данных для сайта. Придумываем имя базы и пароль.

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

Далее на следующем шаге WordPress нас попросит ввести параметры базы данных для подключения. Если все в порядке и у CMS получилось подключится к базе данных, то следующим шагом придумываем логин администратора и пароль, для входа в административную часть и запускаем установку WordPress.

На этом установка закончена.

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

Для начала нам нужно установить полезные базовые плагины на WordPress. Это Classic Editor и WP Translitera. Также предлагаю удалить как правило не нужные плагины, это Akismet Anti-Spam и Hello Dolly.

Далее для посадки верстки на WordPress нам нужно скачать шаблон базовой темы.

Создать шаблон базовой темы

Созданный базовый шаблон

Переключаемся на внешний вид и устанавливаем тему которую сгенерировали. После установки, мой совет, ненужные темы удалим.

У нас осталась одна единственная тема, которая сгенерирована нами. Поправим в ней авторство и поставим картинку.

Для этого переключаемся на Редактор тем и в файлике styles.css темы оставляем только эти данные, остальное все удаляем.

Вот что должно остаться

/*!
Theme Name: Lawyers
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lawyers
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

Правим эти данные к нужному нам виду.

Например

/*!
Theme Name: Lawyers
Theme URI: https://udnlxportfolio.ru/
Author: Niki Digital Agency (https://nikida.ru/)
Author URI: https://nikida.ru/
Description: WordPress тема для сайта адвоката Виталии Юрьевны Терещенко.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lawyers
Tags: Адвокат Виталия Юрьевна Терещенко. Помощь адвоката.
*/

Меняем картинку, для этого на хостинге в папке нашей темы есть файлик screenshot.png, это и есть наша заставка к теме. Эта картинка должна быть разрешением 959 на 615. Вот и создаем картинку, и заменяем ее на хостинге.

Переходим к посадке нашей верстки. Для начала перенесем всю папку assets нашей верстки на хостинг в нашу тему.

Далее переходим в файл functions.php нашей темы и добавляем подключение стилей для нашей верстки.

Находим строки

function lawyers_scripts() {
	wp_enqueue_style( 'lawyers-style', get_stylesheet_uri(), array(), _S_VERSION );
	wp_style_add_data( 'lawyers-style', 'rtl', 'replace' );

И добавляем строки что бы получить вот такой вид

function lawyers_scripts() {
	wp_enqueue_style( 'lawyers-style', get_stylesheet_uri(), array(), _S_VERSION );
	wp_style_add_data( 'lawyers-style', 'rtl', 'replace' );
	wp_enqueue_style( 'lawyers-bootstrap.min', get_template_directory_uri() . '/assets/css/bootstrap.min.css', array(), _S_VERSION );
	wp_enqueue_style( 'lawyers-styles', get_template_directory_uri() . '/assets/css/styles.css', array(), _S_VERSION );

	wp_enqueue_script( 'lawyers-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'lawyers-jquery-3.5.1.slim.min', get_template_directory_uri() . '/assets/js/jquery-3.5.1.slim.min.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'lawyers-popper.min', get_template_directory_uri() . '/assets/js/popper.min.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'lawyers-bootstrap.min', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'lawyers-main', get_template_directory_uri() . '/assets/js/main.js', array(), _S_VERSION, true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'lawyers_scripts' );

Далее в нашей теме меняем header.php. Добавляем в него уже нашу верстку.

Делаем его такого вида

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Lawyers
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">
	
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

	
	
	
ЗДЕСЬ НАША ВЕРСТКА ХЕАДЕРА

Далее в нашей теме меняем footer.php. Добавляем в него также нашу верстку.

Делаем его такого вида

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Lawyers
 */

?>

ЗДЕСЬ НАША ВЕРСТКА ФУТЕРА

<?php wp_footer(); ?>

ЗДЕСЬ НАШИ СКРИПТЫ ПОСЛЕ ФУТЕРА

</body>
</html>

Создаем в нашей теме шаблон Главной страницы, для этого создаем в нашей теме файлик template-homepage.php (как правило я его делаю через хостинг).

template-homepage.php

Содержание файла template-homepage.php

<?php
/**
 * Template name: Главная страница
 */

get_header();
?>





ЗДЕСЬ НАША ВЕРСТКА ГЛАВНОЙ СТРАНИЦЫ





<?php
get_footer();

Далее переходим в WordPress на "страницы" и создаем новую - "Главная страница". Она пустая, с шаблоном Главной что мы создали.

Удаляем не нужные страницы, которые были изначально для примера.

Далее переходим в настройки - чтение, и делаем основной, начальной страницей нашу Главную, которую мы только что создали.

Выбираем Статическую страницу, и делаем Главной страницей - Главную страницу, сохраняем.

Если возникнут проблемы с путями к картинкам или каким либо другим файликам, то к путям нужно будет добавить /wp-content/themes/lawyers/assets и т.д.

При просмотре сайта в режиме администратора нам будет мешать панель. Для того, что бы ее убрать нужно перейти в профиль администратора, убрать галочку "Показывать верхнюю панель при просмотре сайта" и нажать кнопку "Обновить профиль".

На этом все. Наша верстка посажена, переходим ко второй части.