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

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

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

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

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

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

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

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

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

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

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

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

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">

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

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

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

запись к мастеру

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

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

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

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

Наши услуги