Как создать сайт на основе шаблона

Добавляем API WordPress

Первым делом добавим в тему поддержку API WordPress, а так же выведем тайтл. В тег добавляем следующее:

<title><?php wp_title('|', true, 'right');?></title>

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

И ниже подключаем API. Код должен находится внутри тега :

<?php wp_head();?>

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

Далее нужно перед закрывающим тегом добавить следующий код:

<?php wp_footer();?>

Эта функция выведет панель инструментов WordPress вверху сайта.

Первоначальная настройка WordPress

2.1 Настройка основных параметров

Итак, мы в админке Вордпресса. Для начала есть смысл изменить некоторые настройки. Нажмём «Параметры» в левом меню.

«Общие» — здесь имеет смысл проверить, правильно ли настроено время (часовой пояс) на сайте, выбрать формат отображения даты и времени по своему желанию.

«Написание» — обычно здесь ничего менять не нужно.

«Чтение». В зависимости от вашего желания можно выбрать, чтобы на главной странице отображались последние записи (формат блога), либо какая-то постоянная информация. Можно также выбрать количество записей на странице.

«Обсуждение». Здесь можно настроить комментарии и аватары. В зависимости от ваших целей можно разрешить или запретить по умолчанию комментарии к вашим записям. Если вы разрешаете комментарии, во избежание спама желательно поставить галочку напротив пункта «Автор должен иметь ранее одобренные комментарии». В этом случае комментарии от новых пользователей поступят к вам на модерацию прежде, чем появятся на сайте. Для предотвращения спама трэкбеками можно убрать галочку возле пункта «Разрешить оповещения с других блогов».

Наконец, обратим внимание на пункт «постоянные ссылки». По умолчанию адреса статей вашего сайта будут вида http://moysuperblog.ru/?p=123 Но лучше задать для них более осмысленный вид, выбрав «Название записи» (в поле «Произвольно» должно отобразиться «/%postname%/»)

После каждого изменения настроек не забывайте нажимать «Сохранить изменения».

2.2 Установка плагинов

• RusToLat — этот плагин преобразует в латиницу адреса страниц.
• WP-DB-Backup — этот плагин позволяет регулярно делать резервные копии базы данных.
• WP Super Cache — этот плагин снижает нагрузку на сервер.
• Если вы разрешили комментарии на сайте, стоит установить плагин SI CAPTCHA Anti-Spam (или другой плагин, добавляющий капчу к форме комментария) для предотвращения автоматического спама в ваш блог.

Для установки плагина, который есть в официальной базе, выбираем «Плагины» — «Установить новый» и вводим название плагина в форму для поиска:

В списке найденных выбираем тот самый плагин, жмём на ссылку «Установить», а затем на ссылку «Активировать плагин».

Точно так же устанавливаем и активируем другие необходимые плагины.

2.3 Установка темы

При помощи темы можно задать дизайн и оформление вашего сайта. Самостоятельное создание темы может занять немало времени и потребует от вас определённых знаний и навыков. К счастью, для WordPress существует огромнейшее количество готовых тем. Как и плагины, из можно установить двумя способами — скачать с какого-либо сайта (скачивайте темы только с проверенных сайтов), затем распаковать и загрузить в папку wp-content/themes. После этого тема появится в списке доступных тем в админке («Внешний вид» — «темы») и вы сможете её активировать. Другой вариант — выбрать из официальной коллекции тем. Для этого выберите вкладку «Установить темы», задайте необходимые фильтры и нажмите «найти темы».

Выберите понравившуюся тему, установите её, а затем активируйте. Дизайн и оформление вашего сайта сразу же поменяется.

Многие темы имеют собственные настройки, которые позволяют видоизменить оформление сайта тем или иным образом.

2.4 Настройка виджетов

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

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

2.5 Robots.txt для WordPress

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

User-agent: YandexBlog
Disallow:

User-agent: *
Disallow: /wp-login.php
Disallow: /wp-register.php
Disallow: /xmlrpc.php
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content
Disallow: /tag
Disallow: /trackback
Disallow: /feed
Disallow: /comments
Disallow: */trackback
Disallow: */feed
Disallow: */comments
Disallow: /?feed=
Disallow: /?s=
Allow: /wp-content/uploads/

Шаг 5: Редактируем шаблон

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

1. Переходим в «Внешний вид» -> «Темы» и в правом нижнем углу активированного шаблона, нажимаем на «Настроить».
2. В отобразившейся странице мы можем выполнять различные манипуляции. Попробуем настроить шапку, включающую в себя меню. Через него пользователи могут легко перемещаться внутри веб-сайта – это один из главных блоков, который должен быть на каждой странице.
3. Далее жмем «Создать новое меню».
4. Задаем название меню и отмечаем его как основное.
5. Меню создано, но пока что оно пустое. Добавим в него нужные элементы:
6. Здесь мы можем добавить как произвольные ссылки, так встроенные. Рекомендуем воспользоваться вторым вариантом, так как с произвольными ссылками будет сложно настроить перемещение. По умолчанию некоторые страницы уже добавлены – для их активации достаточно нажать на плюс. При необходимости можно внести и другие названия. Например: «Главная», «Услуги», «Почему мы?», «О нас», «Контакты».
7. В завершение кликаем по кнопке «Опубликовать».
8. Проверка меню на мобильных устройствах выполняется с помощью специальных кнопок:

Для наиболее удачного создания сайта на основе шаблона рекомендуем использовать референсы веб-макетов. Популярные для этого площадки – Behance, Dribbble, Pinterest.

Высший пилотаж — WordPress Developer

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

Ибо, как я писал, начать работать на своем компьютере дома на вордпрессе труда не составит даже для школьника. Не зря вордпресс считается самой распространенной CMS в мире (по данным 2021 года порядка 40% всех сайтов сделаны на нем).

Основной источник дохода здесь — это разработка собственных плагинов и тем. Их можно продавать и делать на заказ. Равно, как и сами сайты. Поэтому, такие навыки достаточно высоко ценятся и будут цениться в дальнейшем, хотя часть рутинных задач, типа верстки, уже отдано более удобным визуальным системам, типа webflow или pinegrow.

Я сам занимаюсь разработкой сайтов с 2010 года и вглубь кишков вордпресс начал погружаться лишь недавно, и то потому что «жизнь заставила». И могу сказать так: это отдельная вселенная со своей экосистемой, в которой разобраться сходу бывает непросто.

Однако, на все есть проруха…Учиться можно, была бы мотивация. У меня самого главным мотиватором вот уже который год является возможность неспешно прогуливаться по утрам и с нескрываемым состраданием смотреть на утренние заторы на дорогах. Это вдохновляет делать все, чтобы не влезать в душные офисы, оставаться мобильным и самому планировать свои рабочий график.

Успешного фриланса Вам, друзья и прибыльных заказчиков!

Установка Вордпресс

Прелесть сайта на основе Вордпресс — это упрощенная установка. Вам не понадобится пользоваться помощью платного специалиста, чтобы переместить движок на хостинг — вы сможете сделать все своими руками. Сами создатели этой платформы утверждают, что установить ядро можно за 5 минут. И самое главное, что это бесплатно!

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

Далее вам следует уладить все вопросы с сервером. Для установки сайта на основе Вордпресс, вам необходимо создать базу MySQL. Обычно это происходит автоматически, если выбрать правильный хостинг. Лучше пролистать не один форум, прежде чем выбрать сервер, чтобы потом было проще с установкой. Если не понимаете как создать базу данных, то напишите в техническую поддержку — их помощью можно воспользоваться бесплатно, ведь вы уже заплатили за это. Создайте аккаунт в админке сервера.

В распакованном дистрибутиве вы найдете файл wp-config-sample.php. Вам необходимо переименовать его, оставив только wp-config.php. Именно на этом этапе вы и воспользуетесь помощью предустановленного ранее текстового редактора. Чтобы сайт на движке заработал, необходимо правильно указать информацию о базе данных, созданной на хостинге. Вам предстоит кое-что добавить в файле wp-config.php (писать много не придется):

• напротив DB_NAME впишите имя БД (базы данных);
• возле DB_USER укажите имя пользователя;
• там где DB_PASSWORD пропишите пароль;
• около DB_HOST обычно нужно указывать localhost, но не всегда (воспользуйтесь помощью поддержки сервера, чтобы это узнать);
• DB_CHARSET (также выясняйте в службе поддержки);
• DB_COLLATE (если не требуется, то не меняйте эту строку).

Теперь займитесь переносом вашего движка на сервер. Особая инструкция на этом этапе вам не понадобится — это легко сделать своими руками при помощи FTP-клиента, который вы ранее скачали. Если хотите, чтобы весь сайт был на ядре WordPress, тогда разместите его в корневой директории.

После перехода по указанной ссылке ядро окончательно закрепится на вашем хостинге и вы уже и сами сможете обучать тому, как сделать сайт на WordPress. Сразу после установки зайдите в админку платформы. Вы создадите свой аккаунт, введя заранее придуманные имя пользователя и пароль. Теперь постарайтесь не заблудиться в дебрях административной панели и понять что к чему. Разработка Вордпресс, как уже говорилось, тем и хороша, что легко дается новичку. Так что вам не придется платить кому-либо за обучение — вы и сами бесплатно сможете научиться пользоваться этим ядром.

Установка плагинов для Вордпресс

Теперь вы знаете, как создать сайт WordPress, как установить шаблон и даже русифицировать его. Осталось разобраться в том, как расширить функционал CMS. В этом вам помогут плагины — устанавливаемые модули, добавляющие новые возможности и инструменты. С их помощью можно решать такие задачи:

• удаление спама со страниц;

• предотвращение взлома;

• ускорение загрузки страниц;

• упрощение публикации контента и контроля за вебсайтом.

Установка модулей осуществляется через пункт меню панели администратора «Плагины». Вы можете найти расширение через встроенную базу, введя название программы в поисковой строке. После нажмите кнопку «Установить» напротив плагина, и он будет инсталлирован.

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

Помимо этого, вы можете скачать установочный файл плагина отдельно и загрузить его в меню, нажав на кнопку «Загрузить плагин».

Здесь стоит сделать важное уточнение. Многие новички, решив сделать сайт на WordPress с нуля, нередко гонятся не за качеством, а за количеством

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

Используйте только самые важные и полезные плагины: резервное копирование, антиспам, защита от взлома, SEO-оптимизация и пр. Внимательно читайте описание инструментов перед их установкой!

Basic Instructions # Basic Instructions

Here’s the quick version of the instructions for those who are already comfortable with performing such installations. More follow.

1. Download and unzip the WordPress package if you haven’t already.
2. Create a database for WordPress on your web server, as well as a (or MariaDB) user who has all privileges for accessing and modifying it.
3. (Optional) Find and rename wp-config-sample.php to wp-config.php, then edit the file (see Editing wp-config.php) and add your database information.Note: If you are not comfortable with renaming files, step 3 is optional and you can skip it as the install program will create the wp-config.php file for you.
4. Upload the WordPress files to the desired location on your web server:
   • If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all contents of the unzipped WordPress directory (excluding the WordPress directory itself) into the root directory of your web server.
   • If you want to have your WordPress installation in its own subdirectory on your website (e.g. http://example.com/blog/), create the blog directory on your server and upload the contents of the unzipped WordPress package to the directory via FTP.
   • Note: If your FTP client has an option to convert file names to lower case, make sure it’s disabled.
5. Run the WordPress installation script by accessing the URL in a web browser. This should be the URL where you uploaded the WordPress files.
   • If you installed WordPress in the root directory, you should visit: http://example.com/
   • If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/

That’s it! WordPress should now be installed.

Создаем страницы

В терминологии WordPress существуют страницы двух типов: записи и страницы.

Схема записи

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

Иерархия страниц

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

Сначала создаем страницы разделов: услуги, наши проекты, о компании. Потом создаем страницы внутри каждого раздела, указываем родительскую страницу. Если все сделать правильно, то перечень страниц выглядит примерно так:

Создаем основные и дочерные страницы

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

Перечень записей раздела Выполненные объекты

Как создать страницу

Переходим в раздел Страницы — Добавить новую:

Заполняем заголовок, текст страницы, указываем родительскую страницу, если она есть.

Схема создания страницы

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

Как создать рубрику записей

Переходим в раздел Записи — Рубрики:

Задаем название новой рубрики, жмем добавить “Добавить новую рубрику». Ярлык рубрики будет сгенерирован автоматически.

Как создать записи

Переходим в раздел Записи — Добавить новую:

Указываем заголовок, добавляем текст, выбираем рубрику, ставим метки, задаем миниатюру — изображение анонса нашей записи размером 782 ? 509 px.

Схема создания записи

Жмем “Опубликовать».

Конкуренты WordPress

Аналогов CMS Wordrpress довольно много. У каждой из них есть свои минусы и плюсы. Вот некоторые часто упоминающиеся альтернативные движки для вашего сайта:

Joomla

Движок joomla так же, как и WordPress, больше ориентирован на создание информационного контента. Единственное отличие программного обеспечения джумла – прослеживается уклон и позиционирование как cms для интернет- магазинов.

Она тоже проста в использовании и имеет большое количество дополнений. Информации с уроками и обучению по Joomla в интернете довольного много.

ModX

CMS ModX берет начало своей истории, как и Вордпресс, в 2004 году. Но превратиться в достойного конкурента WordPress так и не смогли. Связано это по большей части со сложной административной панелью и небольшим количеством плагинов.

То есть требуются специалисты в области программирования на php. Для чайников данный движок будет крайне сложен в освоении.

1C Битрикс

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

Drupal

Бесплатный аналог WordPress, но с ограниченным функционалом. На СMS хорошо получаются небольшие социальные сети со всеми атрибутами.

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

NetCat

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

Для блогов и информационных сайтов подойдет, но с натяжкой. Проще воспользоваться зарекомендованной и бесплатной CMS WordPress.

Webasyst

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

Установка шаблона WP

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

Затем перейдите в панель администратора вашего вебсайта, отыщите меню «Внешний вид» и перейдите во вкладку «Темы» и затем «Install a Theme».

В новом меню нажмите «Выберите файл», укажите путь до дистрибутива и нажмите «Install». Система загрузит архив и перенесет все необходимые файлы на сервер.

Далее потребуется активировать шаблон. Это можно сделать из меню «Внешний вид — Темы». Выберите установленный дизайн и нажмите кнопку «Активировать».

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

Шаг 0. Выбор тематики блога

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

• Что полезного вы можете рассказать людям? Например: вы много путешествуете и знаете 147 способов слетать на Мальдивы за 20 000 рублей.
• Чем вы интересуетесь?Например, вы печете самые вкусные в мире пироги или умеете одеваться в секонд-хенде так, как будто вы сошли со страниц обзоров лондонской недели моды.
• Будет ли вам интересна эта тема через 2 года? 5 лет?Возможно, сейчас вы хотите писать кинорецензии — готовы ли вы постоянно ходить на премьеры?
• Кто еще пишет о том, о чем вы хотите писать? Подсмотреть идеи у конкурентов очень полезно.
• Интересна ли эта тема людям?Проверьте выбранную тему в wordstat — количество запросов поможет понять, хотят ли люди узнавать что-то новое.
• Можете ли вы рассказать что-то новое по этой теме?На свете существует миллион книг о продажах, но они все равно продолжают выходить: у каждого из нас уникальный опыт.

Разобраться в себе помогут блокнот и ручка: напишите список своих интересов и набросайте пару-тройку идей для тем рядом с каждым из них. Когда вы выберете самую интересную тему, попробуйте придумать хотя бы 10 тем для будущих постов — так вы поймете, насколько просто вам будет вести блог.

Для кого это руководство?

Это руководство по настройке и созданию wordpress сайта для всех: от начинающих до продвинутых пользователей Интернета. Вам не нужно никакого опыта в системе CMS-wordpress, веб-дизайне или программировании, чтобы следовать этому руководству.

Существует множество руководств «how-to», которые пытаются научить людей создавать веб-сайт, но большинство из этих руководств содержат слишком много технической информации или просто недостаточно подробностей для понимания новичком.

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

Краткое описание возможностей редактора WP

На WordPress есть интутивно понятный редактор записей. Если вы когда-нибудь работали в редакторе документов Word или Google.Документ, то освоиться не составит труда. Практически основной функционал есть и в редакторе записей WordPress.

Движок предлагает два типа: классический и Gutenberg. Последний появился не так давно и завоевал популярность среди пользователей широким набором функций и визуальной составляющей.

Основной набор функций редактора WP:

• Разметка записи тегами H1-H6.
• Шорткоды в WordPress — это конструкция в тексте, которая будет обработана и заменена на указанный код/текст. Обрабатывается шорткод специальной PHP функцией, указанной при регистрации шорткода.
• Вставка картинок и видео.
• Гиперссылки в тексте как для внутренней перелинковки, так и на внешние источники без передачи веса.
• Списки, таблицы, кнопки.
• Свой HTML код.
• Много других полезных и необходимых функций для вашего сайта.

Выбор подходящей темы

Начало в WordPress с нуля — это и помощь в прохождении процесса регистрации в системе. Чтобы войти в свой личный кабинет админа сайта, необходимо на странице, которая откроется по адресу http://адрес сайта/wp-admin/, ввести свои логин и пароль.

Работа с Вордпресс для меня началась с выбора темы. Для начинающих неплохим вариантом будет перебрать несколько десятков разных вариантов и выбрать понравившийся. Потом некоторые новички столкнутся с проблемой их настройки и управления, но это потом.

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

Правая сторона страницы редактора

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

Опубликовать

Этот блок позволяет управлять записью. Сданную запись можно сохранить, как черновик, поставить на утверждение или сразу опубликовать.

С помощью кнопок «запланировать» можно отсрочить публикацию на нужную дату и/или время.

Рубрики

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

Создать рубрику можно на вкладке Записи>>>Рубрики или непосредственно при добавлении статьи. Для этого есть ссылка «Добавить новую рубрику». Однако здесь нет возможности добавить описание рубрики, которое необходимо для правильной оптимизации сайта.

Метки

Метки WordPress относятся к функционалу таксономии, то есть объединения статей сайта. У страниц и медиафайлов меток нет. Это значит, что ты с помощью меток можешь группировать статьи из разных рубрик. На все добавленные метки создаются архивы. По умолчанию URL архивов меток помечается как tag. Изменить значение tag можно в общих Настройках>>>Постоянные ссылки.

Управляются метки на вкладке консоли Внешний вид>>>Метки.

Изображение записи

Это возможность, добавить миниатюру к записи (thumbnail). Обязательно при добавлении миниатюры заполняем поле «Альтернативный текст», он будет в теге <alt> к картинке.

Размер миниатюры по умолчанию, ты указал в Общих настройках>>>Медиафайлы. Если поставил галочку «обрезать миниатюру», то картинка миниатюры будет обрезана под установленную настройку.

Настройка WordPress

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

Общие настройки

Заходим в раздел «Настройки» и выбираем вкладку «Общие». Затем, как показно на рисунке вносим данные.

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

Настройки написания

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

Настройки чтения

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

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