Как создать сайт и перенести его на WordPress — пошагово на простом примере
Создать свой сайт можно на странице такого движка, как Вордпресс. На этой странице размещен простенький образчик сайта, который был сверстан начинающим веб-дизайнером. И этот простой и универсальный шаблон вполне подойдет для любого бизнеса. Так как блоки в этом шаблоне можно дополнять и изменять сообразно специфике бизнеса. Также контент в этом проекте легко заменить другой информацией, поменять цветовую палитру, шрифты, добавить логотип, соответствующий стилю компании.
Таким образом, вы получите полноценный сайт по индивидуальному дизайну и по своему вкусу. Тема вашего сайта будет так же уникальна, как и ваша личность.
Сама статья написана в продолжение «Вёрстка сайта: пошаговая инструкция…«. Собственно — это пролог для демонстрации веб-проекта на странице WordPress. Получился простой, но действующий (с подключенной формой отправки заявки, с кнопками-ссылками, адаптированный под мобильные устройства) вариант сайта.
Если у вас уже есть домен и WordPress на хостинге, и вы уже сверстали (или только планируете) сайт для своего бизнеса, то можно разместить его на странице этого движка самостоятельно, не обладая глубокими познаниями в принципах работы CMS.
Конечно, СМS располагает огромным набором готовых тем под любой бизнес. Но здесь я показываю, как разместила собственный веб-проект на этом движке.
Алгоритм создания сайта
Вспомним сам процесс создания сайта.
Создать сайт — командная работа и состоит она из пяти этапов. И один из них — встроить файлы нашего сайта на страницу в WordPress. Но рассмотрим все пункты по порядку.
- Разработать прототип сайта (схему). Т.е., продемонстрировать наглядно расположение блоков, кнопок, статей и других элементов будущего сайта. А также показать их функциональность. Другое название этого пункта — техническое задание.
2. Создать дизайн. Здесь вступает в оркестр дизайнер. Он отвечает за внешний вид сайта — за цветовое решение, за привлечение внимания посетителя, за понятную подачу нужной информации, чтобы пользователи легко могли ориентироваться на странице и быстро найти то, что их интересует. Очень важно, чтобы сайт был и удобным, и приятным для восприятия. Дизайнер рисует цветной макет и передаёт его на вёрстку.
3. Верстка или написание кода на языке разметки HTML и каскадных таблиц стилей CSS. Чтобы все идеи смог понять и воспроизвести любой браузер.
Научиться верстать можно всего за два месяца, уделяя занятиям по вечерам лишь 2-3 часа. Вот ссылка на онлайн-университет ГикБреинс (GeekBrains), где можно получить базовые знания языков HTML и CSS и самостоятельно создать свой сайт.
Верстальщик также отвечает за оптимизацию сайта для мобильных устройств — чтобы информация и весь дизайн были доступны и удобочитаемы на любом устройстве, и за адаптивность вёрстки для быстрой загрузки сайта. Кстати, образец сайта, который здесь представлен — оптимизирован для гаджетов с любым разрешением экрана с помощью добавленного для этой страницы кода CSS.
4. Интеграция верстки в CMS – систему управления сайтом.
Здесь же мы просто будем размещать файлы с HTML-кодом и CSS на странице в WordPress. А если у вас есть желание и время учиться, вы можете создать сайт на WordPress самостоятельно, перейдя по ссылке и прослушав бесплатный вебинар Евгения Вергуса. Информация о работе в конструкторе Вордпресс преподнесена доступным языком, остаётся только следовать инструкциям.
5. Комплекс СЕО-работ по продвижению. Сюда входит, например, установка счетчиков «Яндекс.Метрика» и Google Analytics для анализа видимости в поисковых системах и обнаружения ошибок. Сбор поисковых запросов, связанных с представленной продукцией (так называемое — семантическое ядро). Создание качественного контента под эти запросы и грамотное размещение внутренних и внешних ссылок на страницах. Это в общих чертах, чтобы доходчиво объяснить работу сеошника. Если составить полный список, то может получиться 55 пунктов или более. Это тема для отдельной статьи и я к ней обязательно вернусь.
А пока размещаем веб-проект на странице в WordPress.
Встраиваем свой HTML на страницу в WordPress
Итак, у вас уже есть домен и оплаченный хостинг, на котором вы установили WordPress — конструктор сайтов. Каждый, кто хочет иметь свой сайт или блог должен начать именно с этого. Поэтому выше я дала ссылку на бесплатный курс по его созданию.
Возможно, что изучив материал в предыдущей статье, вы уже написали код для своего сайта. И у вас на локальном компьютере находится папка с веб-проектом, содержащая файлы: 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">
Шаблон сайта для бизнеса
Этот проект — результат прохождения обучения в Центре Опережающей Профессиональной Подготовки в рамках федеральной программы профессионального образования. Такой же макет может быть использован для салона красоты, или юридического агентство, или арт-мастерской и тому подобное.
Выгодное предложение — офер — должно быть на видном месте, чтобы сразу заинтересовать посетителя сайта. Или ответить на его запрос в поиске. Так ваш сайт может быстрее попасть в выдачу. В данном проекте такое предложение представлено в виде акции и выделено контрастным цветом.
Квалифицированные опытные мастера
Широкий ассортимент наших услуг
Высокое качество
Наличие сертификатов
Наши услуги
Мозаика
Мозаичные витражи делают комнату светлее и радостнее
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
Наша продукция
Сайт для бизнеса
Помогу создать и сайт для бизнеса, и свой блог, и публиковать интересные и полезные для людей статьи, и рассказывать о вашем бизнесе repudiandae harum nesciunt ipsam repudiandae harum nesciunt ipsam
Мозаика
Мозаика в картинах и витражи из мозаики украсят ваш дом и в любую погоду в комнатах будет солнечно, а праздничное ощущение будет поднимать настроение всегда repudiandae harum nesciunt ipsam.
Выпечка
Занимаетесь выпечкой? Представим вашу продукцию в лучшем свете, клиенты узнают о вас и дела пойдут в гору. Заказывайте сайт, для бизнеса это необходимо repudiandae harum nesciunt ipsam.
Краска для волос
Здесь может быть любой текст и фотография вашей продукции…А также информация о вашей компании и ваших сотрудниках repudiandae harum nesciunt ipsam repudiandae harum nesciunt ipsam.
Крема
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.
Лаки
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.
Нужна консультация мастера?
Звоните +7-952-832-43-27, +7-другой-00
Или оставляйте заявку и мы перезвоним Вам в течение 5 минут!
г.Краснодар, ул.Здесь адрес,номер дома
Как удалить редакции страниц и записей на сайте
В заключении добавлю полезный лайфхак, чтобы ускорить работу базы данных сайта. В процессе редактирования и предварительного просмотра сохраняются копии создаваемой записи. Потом после опубликования вы захотите переименовать статью или внести в неё дополнения. Таким образом копии множатся. До поры до времени они безвредны. Но когда на сайте будет много публикаций, то лишние копии приведут к лишним сложностям. Лучше сразу обезопасить свой сайт от неприятностей из-за поисковых роботов.
Чтобы полностью раз и навсегда отключить и удалить все редакции в WordPress, скопируйте аккуратно со всеми знаками и точкой с запятой эту запись:
define( ‘WP_POST_REVISIONS’, false );
Далее, опять через файловый менеджер на хостинге зайдите в папку /wordpress/public_html/wp-config.php. Найдите строчку:
/* Это всё, дальше не редактируем. Успехов! */
Аккуратно над ней и вставляйте скопированную запись. После этого нажмите на кнопочку внизу «Сохранить». Вот и всё. Редакции записей больше не тормозят работу сайта. И не будет лишнего мусора в базе данных.
Создать сайт — увлекательное дело!
Как видите, получилась статья-сайт на той теме Вордпресса, которую я ранее выбрала при создании своего блога. Но и она отлично подошла для демонстрации использования конструктора в целях размещения собственного веб-проекта — создания сайта. А вы подбирайте тему на свой вкус.
Остается пожелать удачи на вашем пути и выбранном направлении! Уверенно держите штурвал и пусть ваш сайт взлетит в ТОП-5!
Только не останавливайтесь на этом. Ваш сайт должен уверенно стать на крыло. Для этого и нужен пятый пункт алгоритма по разработке сайтов. Продолжение на эту тему готовится.
Более полная версия шаблона сайта, показанного на этой странице и адаптированного под мобильные устройства, доступна, кликнув по этой ссылке
Статья подготовлена по материалам обучающего курса от онлайн-университета GeekBrains. А также после прохождения курса «Веб-дизайн и разработка» АНПОО Университета Профобразования г. Краснодара. Благодарю за полученные знания в программировании и помощь в усвоении материала преподавателей университетов: А. Кадочникова, Ф. Гребенникова, А. Дарбиняна, С. Минеева и В. Повелко.