Как сделать сайт на wordpress самостоятельно и бесплатно. Вторая часть

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

Если вы еще не читали первую часть этого поста, советую вам это незамедлительно сделать. Вот ссылка: создание сайта на wordpress первая часть.

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

Навигация по странице как сделать сайт на wordpress самостоятельно:

Настройка сайта на wordpress: подключаем шаблон

Типичные вопросы

  • Зачем нужно делать настройку сайта?

    Каждая тема wordpress - индивидуальная. Мы должны сделать настройки сайта под нее. Также стоить учесть тот факт, что если настроить вордпресс на одну тему, то автоматически на вторую он не перестроится. Нужно будет делать вторую настройку.

  • Как сделать сайт визитку wordpress на шаблоне?

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

к менюВ предыдущей статье я говорил, что у вас должен быть установлен wordpress на сервере, желательно на реальном, а не локальной эмуляции, но не критично. Также, у вас должен быть установлен ФТП клиент, я например использую файлзилу. Это бесплатный ФТП клиент, его можно скачать вот здесь: Получить ссылку на (filezilla).

В установке нет ничего сложного, все предельно понятно. Если у вас другой фтп клиент, можете пользоваться им.

На этом скине, я показал как подключиться к фтп, зная данные своего сервера:host-1

Если вы работаете с локальной машиной, то вам фтп не нужен, вы можете закинуть файлы в нужное место с помощью копировать/вставить.

Пошаговая инструкция как сделать сайт на wordpress

1) к менюОткрываем свой сервер по фтп, надеюсь вы уже залили и установили WordPress, у вас есть доступ к админке + сайт открывается с вашего домена.

2) Зашли по фтп, движемся вперед пока не увидим вот такие файлы справа, как у меня на скине: как сделать сайт на wordpressКлючевые папки "wp-admin", "wp-content", "wp-includes". Это место нужно запомнить, называется корень сайта.

3) С корня сайта идем по таком адресу: открываем "wp-content", потом "themes". Это место для заливки шаблона. Открываем слева во вкладке папку с нашим шаблоном и заливаем, как это делаю я на скине: сделать сайт на wordpressЗалили? - теперь мы можем активировать нашу тему.

4) Заходим в админку сайта, раздел мойсайт/wp-admin/themes.php там должен появиться наш шаблон, его нужно активировать (нажать на кнопку "Активировать"), как на скине (кликабельный откроется поверх всех окон в просмотре)instr-16Это сообщение говорит нам что мы все сделали правильно:instr-17В противном случаи нужно искать где мы допустили ошибку.

5) Продолжаем урок как сделать сайт на wordpress дальше. Нужно настроить на сайте ЧПУ, я это делаю вот здесь: вашсайт/wp-admin/options-permalink.php

Выберите чекбоксы как у меня на скине и сохраните:

instr-18

Более подробно о ЧПУ wordpress описано по ссылке. Там вы найдете список проблем, которые могут у вас возникнуть и как избавится от траблов.

Если вам не нужны человеко понятные ссылки, можете пропустить этот пункт.

6) Устанавливаем плагины.

Это пожалуй один из самых важных моментов, без него сделать сайт на wordpress у нас не получится.

Добавлять плагины будем через админку сайта (это можно сделать по адресу ваш_сайт/wp-admin/plugin-install.php)

Справа вводим название плагина, жмем enter и в результатах поиска активируем его. Показываю пример в виде скина: как сделать сайт на wordpress

Вставляю список плагинов, которые нам нужны:

  • TinyMCE Advanced - хороший текстовый редактор
  • Yoast SEO - для оптимизации СЕО заголовков и мета
  • WP-PageNavi - для пагинации
  • Contact Form 7 - сделаем форму обратной связи в контактах
  • Rus-To-Lat - для преобразования ЧПУ из кириллицы в транслит.

Этот список плагинов вы должны самостоятельно добавить и активировать у себя на сайте.

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

7) После активации всех плагинов, часть из них нужно настроить. В таблице ниже будет находится название плагина, путь где его можно настроить и мой скин настроек. Вам желательно сделать так же.

Название плагина Ссылка на настройку (перед адресом нужно подставить ваш домен) Скин настроек
Yoast SEO /wp-admin/admin.php?page=wpseo_advanced&tab=permalinks instr-20
TinyMCE Advanced /wp-admin/options-general.php?page=tinymce-advanced instr-21
WP-PageNavi /wp-admin/options-general.php?page=pagenavi instr-22

 

8) Теперь предлагаю сделать структуру и создать наполнение для нашего сайта. Собственно заходим в раздел добавить страницу (ваш_сайт/wp-admin/post-new.php?post_type=page) и делаем в соответствии с ТЗ такие страницы:

  1. Главная
  2. О нас
  3. Контакты

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

9) Открываем вкладку записи, рубрики, вот по этой ссылке ваш сайт/wp-admin/edit-tags.php?taxonomy=category, там должна быть рубрика "Без рубрики", ее мы должны переименовать в "Новости". Можно создать новую рубрику с таким названием. Теперь нам нужно получить ее ИД. Нажимаем мышкой на рубрику новости и попадаем в редактор. Нас интересует только URL, например у меня оно такое: instr-23где цифра 2 после tag_ID= и есть наш идентификатор. Спросите зачем он нам, читайте следующий пункт как сделать сайт на wordpress.

10) У каждого ВП сайта есть свой редактор, находится по этой ссылке вашдомен/wp-admin/theme-editor.php заходим туда и выбираем вкладку справа "Боковая колонка sidebar.php", смотрите рисунок:

instr-24
В этом же рисунке, я выделил код который нас интересует cat=1, вот число 1 нужно заменить на наш идентификатор, в моем случае на 2. и нажать Обновить файл в низу.

Может получится такая ситуация, что у вас на хостинге нельзя править файлы из админки. Плохой хостинг кстати, нужно тогда править этот файл или по фтп, или по фтп выставить права на тему 777. Я не буду углубляться в этот вопрос.

11) WordPress версии 4.4 немного изменил вывод меню, и теперь наш код будет плохо смотреться. Для этого нам нужно повторить п. 10, только теперь открывать нужно файл "Функции темы functions.php" и в самый конец забросить вот такой код

add_filter('wp_nav_menu_items', 'filter_menu_items');
function filter_menu_items($menu_items){
  return str_replace('</li><li', "</li> <li", $menu_items);
}

Должно получится точно как у меня на скине: instr-25

11.1) Еще маленькая проблемка, в своей верстке я допустил ерундовую ошибку. Можно было б на ее забить, но лучше исправить. Для этого в том же редакторе темы, открываем вкладку "Таблица стилей style.css" и находим вот такой селектор: "#right".

Сейчас у него вот такие стили:

#right{
      width:100%;
      height:auto;
}

а нам нужно сделать вот такие:

#right{
      width:100%;
      height:auto;
      float:left;
}

12) Совсем забыл, нам же нужно еще сделать наполнение рубрики новости, заходим во вкладку "Записи" - "Добавить новую", она по этой ссылке вашдомен/wp-admin/post-new.php и создаем несколько новостей, желательно 5 или больше штук. Вот краткий пример instr-26Не забываем о разрыве новости, more.

13) Далее, для того чтобы сделать сайт визитку на wordpres нам нужно главную страницу сделать страницей, вместо блога. Заходим в настройки, эта ссылка ваш_сайт/wp-admin/options-reading.php

Тут нам нужно сделать главной статическую страницу, а также уменьшить число выводимых новостей из 10 до 4 (нужно что бы показать вам как работает пагинация). Смотрите внимательно, как я это делал на рисунке:

instr-27
Незабываем сохранять свои правки в настройках.

14) Нам нужно перейти в раздел меню и создать там его. Раздел находится по ссылке вашдомен/wp-admin/nav-menus.php , заходим и там же нажимаем "создайте новое меню" instr-28

14.1) В поле "Название меню" вводим такое имя: "Меню". И нажимаем создать меню instr-29

14.2) В блоке "Области темы" ставим чекбокс напротив "Меню верх" instr-30

14.3) Добавляем с левой части пункты которые нам нужны (ставим чекбокс напротив их и нажимаем "добавить в меню"):

  • главная
  • о нас
  • новости
  • контакты

Проверяем то что получилось у вас с моим скином и нажимаем "Сохранить меню"instr-31

Мне кажется, что урок как сделать сайт на wordpress подходит к концу :).

 

Сделать сайт на wordpress самостоятельно: проверяем работу

к менюВот мы и настроили наш шаблон на CMS WordPress. Открываем наш сайт по ссылке вашдомен и смотрим его работу. Вставляю парочку скинов, как это выглядит у меня:

sdelat-sajt-na-wordpress-1

sdelat-sajt-na-wordpress-2
sdelat-sajt-na-wordpress-3

Довольно много времени у меня ушло на этот урок. Надеюсь статья как сделать сайт на wordpress будет вам полезной и интересной.

 

Работа над ошибками поста как сделать сайт на wordpress

к менюКак говорит пословица:

не ошибается только тот, кто ничего не делает

В моей ситуации, также есть ошибки и промахи.

  1. Забыли сделать страницу 404.php для отображения ошибки 404. Эти свойства на себя берет сейчас index.php хотя его нужно допилить в таком случае.
  2. Забыли сделать страницу single.php для отображения полной версии новости. Сейчас за это отвечает тоже файл index.php. Этот файл можно сделать амостоятельно с page.php. Нужно просто скопировать переименовать и вставить. Возможно добавить дату новости с сайдбара.

Эти задачи я оставляю на вас дорогие читатели. Вот прикрепляю в архиве 2 файла, о которых писал выше, вы можете скачать их, извлечь из архива и закинуть в тему по фтп соединению.

Думаю после прочтения этих двух уроков вы болжны понимать как это сделать.

Скачать дополнение к теме можно по ссылке: https://help-wp.ru/wp-content/uploads/2019/12/shabtestsite-new-file.zip

Пожалуйста, поддержите нас: поделитесь ссылкой со своими друзьями

На этом у меня все, большое спасибо за внимание. Надеюсь мой пост вам пригодился.

Комментарии к записи «Как сделать сайт на wordpress самостоятельно и бесплатно. Вторая часть»:
  1. Иван:

    Просто сделать сайт мало. Сайт - это хитрый инструмент и нужно уметь с ним работать. Как сделать так, чтобы сайт приносил пользу, выполял свою задачу, приводил клиентов, читайте об этом тут - (spam-url)

Сделать заказ
Онлайн помощь по WordPress