Как создать сайт и перенести его на Вордпресс

Создать сайт для бизнеса

Как создать сайт и перенести его на WordPress

Создать сайт необходимо
как создать сайт?

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

Таким образом, вы получите полноценный сайт по индивидуальному дизайну и по своему вкусу. Тема вашего сайта будет так же уникальна, как и ваша личность.

Сама статья написана в продолжение «Вёрстка сайта: пошаговая инструкция…«. Собственно — это пролог для демонстрации веб-проекта на конструкторе WordPress. Получился простой, но действующий (с подключенной формой отправки заявки, с кнопками-ссылками, адаптированный под мобильные устройства) вариант сайта.

Если у вас уже есть домен и WordPress на хостинге, и вы уже сверстали (или только планируете) сайт для своего бизнеса, то можно разместить его на этом движке самостоятельно, не обладая глубокими познаниями в принципах работы CMS.

Конечно, СМS располагает огромным набором готовых тем под любой бизнес. Но здесь я показываю, как разместила собственный веб-проект на этом движке.

Алгоритм создания сайта

Вспомним сам процесс создания сайта.

Создать сайт — командная работа и состоит она из пяти этапов. И один из них — встроить файлы нашего сайта на страницу в WordPress. Но рассмотрим все пункты по порядку.

Команда по созданию сайта
  1. Разработать прототип сайта (схему). Т.е., продемонстрировать наглядно расположение блоков, кнопок, статей и других элементов будущего сайта. А также показать их функциональность. Другое название этого пункта — техническое задание.

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

3. Верстка или написание кода на языке разметки HTML и каскадных таблиц стилей CSS. Чтобы все идеи смог понять и воспроизвести любой браузер. Верстальщик также отвечает за оптимизацию сайта для мобильных устройств — чтобы информация и весь дизайн были доступны и удобочитаемы на любом устройстве, и за адаптивность вёрстки для быстрой загрузки сайта. Кстати, образец сайта, который здесь представлен — оптимизирован для гаджетов с любым разрешением экрана с помощью добавленного для этой страницы кода CSS.

4. Интеграция верстки в CMS – систему управления сайтом.

Здесь же мы просто будем размещать файлы с HTML-кодом и CSS на странице в WordPress. А если у вас есть желание и время учиться, вы можете создать сайт на WordPress самостоятельно, перейдя по ссылке и прослушав бесплатный вебинар Евгения Вергуса. Информация преподнесена доступным языком, остаётся только следовать инструкциям.

5. Комплекс СЕО-работ по продвижению. Сюда входит, например, установка счетчиков «Яндекс.Метрика» и Google Analytics для анализа видимости в поисковых системах и обнаружения ошибок. Сбор поисковых запросов, связанных с представленной продукцией (так называемое — семантическое ядро). Создание качественного контента под эти запросы и грамотное размещение внутренних и внешних ссылок на страницах. Это в общих чертах, чтобы доходчиво объяснить работу сеошника. Если составить полный список, то может получиться 55 пунктов или более. Это тема для отдельной статьи и я к ней обязательно вернусь.

А пока размещаем готовый веб-проект в WordPress.

Встраиваем свой HTML на страницу в WordPress

Итак, у вы уже выбрали хостинг (Timeweb, Spaceweb, например) и приобрели доменное имя для сайта. Каждый, кто хочет иметь свой сайт или блог должен начать именно с этого. Поэтому выше я дала ссылку на бесплатный курс по его созданию.

реклама по созданию сайта
Бесплатная онлайн-школа по созданию сайтов

Возможно, что изучив материал в предыдущей статье, вы уже написали код для своего сайта. И у вас на локальном компьютере находится папка с веб-проектом, содержащая файлы: index.html, css, папочка с img (картинки и фото) и другие материалы.

Переходим к 4-му пункту в разработке сайта — размещение файлов веб-проекта на Вордпрессе. Так как мой сайт создан именно на этом конструкторе, то и публиковать веб-проект будем на этом движке.

Так вот, при создании новой страницы или статьи, нужно скопировать ваш код HTML из редактора в котором вы кодили (Notepad или VSCode) и загрузить его вместо стандартного текста.

Для этого в админке конструктора, при создании новой публикации, выбирайте в меню блоков не абзац, а чуть ниже найдите «виджеты» и нажмите на «произвольный html». Появится поле для ввода, в него и вставляйте код HTML.

Добавляем свой CSS на страницу

После того, как вы вставили свой html, необходимо подключить на страницу и свой css.

Хотя программа конструктора написана на языке PHP, но любую страницу стилизовать с помощью CSS не трудно, даже для начинающего верстальщика. Просто скопируйте скрипт, приведенный ниже (за что спасибо https://lpgenerator.ru/), и вставьте его в functions.php. Где это найти?

Через консоль заходите во «Внешний вид», выбираете «Редактор тем». И справа увидите колонку, где расположены файлы темы. Кликаете на functions.php. В открывшемся окне опуститесь до последней строчки и ниже неё можете вставить этот код. На поле для записи появится дополнительный блок Custom CSS. В этот блок и вставляйте ваш код css.

В этом же поле, ниже можно вставить css-файл для мобильной версии сайта:

@media only screen and (max-width:768px){ }

где в круглых скобках указывается ширина экрана мобильного устройства, а в фигурных — свойства для селекторов через точку с запятой. Получается вот так:

@media only screen and (max-width:768px){ .conteiner-slyder{width:100%;height:300px; padding-top:32%;}}

Скрипт для создания блока под CSS

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
add_meta_box('custom_css', 'Custom CSS', 'custom_css_input',
'post', 'normal', 'high');
add_meta_box('custom_css', 'Custom CSS', 'custom_css_input',
'page', 'normal', 'high');
}
function custom_css_input() {
global $post;
echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename"
value="'.wp_create_nonce('custom-css').'" />';
echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30"
style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST['custom_css'];
update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'
</style>';
endwhile; endif;
rewind_posts();
}
}

Добавляем свои картинки и фото для сайта

Теперь, когда уже на странице появился ваш HTML и CSS можно просмотреть предварительно, как будет отражаться публикация в интернете. Но пока вы не добавите свои фото и картинки в папку WordPress на хостинге, браузер их не увидит. Эта папка называется — wp-content/uploads/. Чтобы это проверить, достаточно открыть в другой публикации любую загруженную ранее картинку. Открывайте её в новой вкладке через контекстное меню и в верхней части окна браузера (адресная строка) вместе с названием домена будет прописан путь к этому изображению. Это подсказка для вас, где искать место для размещения своих фото на хостинге. Для этого сайта путь будет

На своем хостинге на панели слева найдите пункт «Файловый менеджер». Зайдите в него. В открывшемся окне есть папка wordpress, в ней — public_html, далее — wp-content, а конечная папка — uploads. На верхней строчке таблицы полный путь будет выглядеть так: /wordpress/public_html/wp-content/uploads. Вот сюда и перетаскивайте свои изображения скопом, путем копирования.

Только не забудьте изменить в коде html, путь к картинкам. В строке после src, укажите внешний адрес домена и через слеш допишите wp-content/uploads/. Вот так это выглядит для моего домена в коде html:

<img src="https://progiznilubov.ru/wp-content/uploads/название фото.jpg">

Шаблон сайта для бизнеса

Этот проект — результат прохождения обучения в Центре Опережающей Профессиональной Подготовки в рамках федеральной программы профессионального образования. Такой же макет может быть использован для салона красоты, или юридического агентство, или арт-мастерской и тому подобное.

Выгодное предложение — офер — должно быть на видном месте, чтобы сразу заинтересовать посетителя сайта. Или ответить на его запрос в поиске. Так ваш сайт может быстрее попасть в выдачу. В данном проекте такое предложение представлено в виде акции и выделено контрастным цветом.


CАЛОН МОЗАИКИ
АНАСТАСИЯ

+7-952-832-43-27
Пн-пт: с 9.00 до 18.00
Заказать звонок
фоновое изображение шапки сайта

Квалифицированные опытные мастера

Широкий ассортимент наших услуг

Высокое качество

Наличие сертификатов

Наши услуги

Мозаика

Мозаичные витражи делают комнату светлее и радостнее

Bfjkdjksksksk

Lorem ipsum dolor sit amet consectetur adipisici

Bfjkdjksksksk

Lorem ipsum dolor sit amet consectetur adipisici

Bfjkdjksksksk ghhghjj

Lorem ipsum dolor sit amet consectetur adipisici

Bfjkdjksksksk ghgh

Lorem ipsum dolor sit amet consectetur adipisici

Bfjkdjksksksk ggggggg ggggggggg

Lorem ipsum dolor sit amet consectetur adipisici

Bfjkdjksksksk hhhhhhhhhh

Lorem ipsum dolor sit amet consectetur adipisici hhhjjjkk hhjjkkk ghhjjkk hhjkk

Bfjkdjksksksk ggh

Lorem ipsum dolor sit amet consectetur adipisici

Bfjkdjksksksk jjjjj

Lorem ipsum dolor sit amet consecteturh

все услуги

Наша продукция

Сайт для бизнеса

Помогу создать и сайт для бизнеса, и свой блог, и публиковать интересные и полезные для людей статьи, и рассказывать о вашем бизнесе. Заказывайте сайт! Для бизнеса это необходимо. И придут новые клиенты.

Мозаика

Мозаика в картинах и витражи из мозаики украсят ваш дом и в любую погоду в комнатах будет солнечно, а ощущение праздника будет поднимать настроение всегда. Заказывайте мозаику для уюта и радости в вашем доме.

Выпечка

Занимаетесь выпечкой? Представим вашу продукцию в лучшем свете, клиенты узнают о вас и дела пойдут в гору. Заказывайте сайт! Для бизнеса это необходимо. Больше людей узнает про вас и придут новые клиенты.

Краска для волос

Здесь может быть любой текст и фотография вашей продукции…А также информация о вашей компании и ваших сотрудниках. Заказывайте сайт! Для бизнеса это необходимо. Больше людей узнает про вас и придут новые клиенты.

Крема

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam earum id laudantium dolore quos, eius, eum, unde repudiandae harum nesciunt ipsam repudiandae harum nesciunt ipsam repudiandae harum.harum nesciunt ipsam repudiandae harum.

Лаки

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam earum id laudantium dolore quos, eius, eum, unde repudiandae harum nesciunt ipsam repudiandae harum nesciunt ipsam repudiandae harum.harum nesciunt ipsam repudiandae harum.

все услуги

Нужна консультация мастера?

Звоните +7-952-832-43-27, +7-другой-00
Или оставляйте заявку и мы перезвоним Вам в течение 5 минут!


Как удалить редакции страниц и записей на сайте

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

Чтобы полностью раз и навсегда отключить и удалить все редакции в WordPress, скопируйте аккуратно со всеми знаками и точкой с запятой эту запись:

define( ‘WP_POST_REVISIONS’, false );

Далее, опять через файловый менеджер на хостинге зайдите в папку /wordpress/public_html/wp-config.php. Найдите строчку:

/* Это всё, дальше не редактируем. Успехов! */

Аккуратно над ней и вставляйте скопированную запись. После этого нажмите на кнопочку внизу «Сохранить». Вот и всё. Редакции записей больше не тормозят работу сайта. И не будет лишнего мусора в базе данных.

Создать сайт — увлекательное дело!

крыло самолёта в небе - символ взлетающего сайта

Как видите, получилась статья и лендинг в рубрике «Создать сайт для бизнеса» на той теме Вордпресса, которую я ранее выбрала при создании своего блога. Но и она отлично подошла для демонстрации использования конструктора для реализации собственного веб-проекта, создания сайта. А вы подбирайте тему на свой вкус.

Остается пожелать удачи на вашем пути и выбранном направлении! Уверенно держите штурвал и пусть ваш сайт взлетит в ТОП-5!

Только не останавливайтесь на этом. Ваш сайт должен уверенно стать на крыло. Для этого и нужен пятый пункт алгоритма по разработке сайтов. Продолжение на эту тему готовится.

Более полная версия шаблона сайта, показанного на этой странице и адаптированного под мобильные устройства, доступна по этой ссылке

Статья подготовлена по материалам обучающего курса «Веб-дизайн и разработка» АНПОО Университета Профобразования г. Краснодара. Благодарю за полученные знания в программировании и помощь в усвоении материала преподавателей Университета: А. Дарбиняна, С. Минеева и В. Повелко.