WordPress – создаем сайт с нуля

Сегодня мы изучим основные принципы работы одной из самых популярных систем управления сайтами – WordPress.

Содержание:

  1. WordPress — создаем сайт с нуля
  2. Знакомство с WordPress. Базовые возможности
  3. С чего начинается запуск сайта на WordPress
  4. Добавление постов на сайт
  5. Работа с изображениями и видео файлами
  6. Шаблоны дизайна для WordPress
  7. Как выбрать плагины для WordPress
  8. Наиболее популярные плагины для WordPress

WordPress — создаем сайт с нуля

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

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

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

  • для статейных, контекстных сайтов
  • для интернет-магазинов.

Админки для интернет-магазинов обязательно содержат такой инструмент, как корзина. Кроме этого в них есть все необходимые инструменты для работы с товарами: предоставление скидок, акции и все в этом духе.

У тех админок, которые мы относим к статейным, большинство инструментов работают для контекста.

Пожалуй, самой популярной системой для создания сайтов, заполненных текстовыми материалами, будет WordPress. Большинство сайтов, новостных, развлекательных, сделаны именно на основе этой админки.

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

Приступаем!

Знакомство с WordPress. Базовые возможности

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

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

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

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

На основе этого движка вы легко создадите:

  • свой собственный блог
  • галерею
  • портфолио
  • электронный каталог или интренет-магазин
  • видеотеку
  • новостной портал
  • статейный сайт

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

В начале работы давайте проговорим первые шаги:

  • Определиться с Хостингом. Выбор этого параметра напрямую зависит от ваших задач. Если вы хотите создать просто свой личный блог, где размещать статьи и небольшие изображения, то достаточно самого минимального пакета хостинговой компании. Если же вы планируете сделать видеотеку, то понадобится больше места, и нужно выбрать более подходящий пакет хостинга с большим объемом места на сервере.
  • Купить доменное имя. Тут не должно возникнуть никаких вопросов — просто выбираете подходящее, запоминающееся простое слово, которое будет отражать содержание сайта. Для ресурсов, рассчитанных на региональный уровень, стоит подобрать местный домен. Для более широкого продвижения, нужно взять домен *com или *ru.
  • Подобрать для своего сайта шаблон. Ведь сам WordPress это только «скелет», а нам еще нужно его одеть в красивый шаблон.
  • Создаем начальный контент. Чтобы разобраться, какие нужны плагины, вам нужно начать работу, т.е сделать несколько страниц, подготовить меню.
  • Выбираем и устанавливаем нужные Плагины на сайт.

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

С чего начинается запуск сайта на WordPress

После того, как вы выбрали нужный хостинг, устанавливаем туда WordPress.
Скачать последнюю версию движка можно на официальном сайте бесплатно. При скачивании вы получите zip архив.

Установка WordPress на хостинг

Для распаковки архива лучше воспользоваться FTP. Любая хостинговая компания предоставляет своим клиентам FTP доступ к вашему хостингу, т. е. вы сможете напрямую загрузить файлы. Настроить FTP можно в любом файловом менеджере, например Windows Commander или FileZilla.
Далее вам нужно подключиться к серверу с помощью логина и пароля вашей учетной записи и просто скопировать все файлы из архива в основную директорию сайта.
После этой несложной процедуры, нужно приступить к созданию базы данных. Она тоже будет храниться на сервере и там разместятся все статьи сайта, ссылки и так далее. Любой хостинг предоставляет возможность добавить базу данных для сайта. Обычно где-то на видном месте есть кнопка Add Database. Нажимаете ее и заполняете все поля, которые появились в окошке. Выглядит это примерно так:

  • Database name — это название базы данных. Оно может быть абсолютно любым.
  • Database type — тут мы выбираем MySQL.
  • Database encoding – оставляем то, что стоит по умолчанию.
  • New user name – ставите любое имя
  • Password – пароль
  • Re-enter password — еще раз пароль
  • Allow remote access — установив тут галочку, вы получите удаленный доступ к вашей базе данных.

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

Помимо установки на сервер, вы также можете поставить WordPress локально на свой компьютер. Для этого нам нужно установить себе на компьютер все нужные для работы программы: MySQL, PHP.

Еще нам понадобится локальный сервер. Мы воспользуемся проектом Denwer . В этом проекте уже есть все, что нам нужно: и Apache, PHP, MySQL, Perl и т.д. К тому же, все на русском языке.

Создание домена на локальном сервере

Чтобы создать себе домен на своем же сервере придется немножко покопаться в файлах. Перейдем в директорию, в которую был установлен Денвер, по умолчанию это C:/WebServers/. Оттуда в папку /home/. Теперь смотрим — мы видим домен test.ru, это просто папка. Все что нам нужно, это добавить еще одну папку, но с нашим названием, например moiblog.ru. Внутри созданной папки /moiblog.ru/ создадим еще папку /www/. Все, миссия выполнена.
Теперь копируем в эту папку все файлы заранее скаченного WordPress.

С созданием базы данных будет посложнее. Переходим на контрольную панель Денвера, здесь нам понадобиться утилита под названием phpMyAdmin. phpMyAdmin — это программа, написанная на языке PHP для работы с базами данный MySQL. Нажимаем на ссылку.

3

Далее в разделе «Базы данных» пишем название новой базы и нажимает кнопку «Создать». Все очень просто!

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

Начальные настройки WordPress

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

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

26

А если не устраивает расположение этих окошек, то их можно перетаскивать! Тяните за заголовок и поставьте в нужное место.

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

27

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

7

На картинке вы видите число «20», можно спокойно изменить его на 40 или 50 и на странице будет выведено именно столько записей. Кому-то так будет удобнее.

Каждая страница в консоли имеет такую вот закладочку «Настойки экрана».

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

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

Настраиваем постоянные ссылки

Заходим в настройки и выбираем «Постоянные ссылки».

8

Открывается вот такое окно с настройками:

9
Такой вариант можно ввести в поле «Произвольно». Давайте посмотрим, что это значит. Это значит при формировании ссылки на записи или страницу вместо символов %category% будет вставлена рубрика к которой относится запись, а вместо %postname% будет вставлено название записи.

  • year – Год создания записи, например «2015»;
  • monthnum – числовое обозначение месяца в году, в который была создана запись, например «04»;
  • day – день месяца, в который была создана запись, например «26»;
  • hour – час в который была создана запись, например «17»;
  • minute – Минута в часу на которой была опубликована записи, например «20»;
  • second – Секунда минуты на которой была создана записи, например «10»;
  • postname – Отформатированное название записи. Например, эта запись называется «Настройка постоянных ссылок WordPress» отформатированная ссылка на нее будет «nastrojka-postoyannyx-ssylok-wordpress». Почему так? Форматирование требуется для формирования правильной ссылки, ведь некоторые символы в ссылках не допускаются, заглавные буквы ничего не значат, а кириллические символы вообще не приветствуются;
  • post_id – Уникальный идентификационный номер записи, например «11». WordPress присваивает его автоматически;
  • category – Отформатированное название рубрики;
  • author – Отформатированное имя автора записи.Не забываем сохранять свои настройки!

Добавление постов на сайт

Часто начинающие веб-мастера WordPress путаются со страницами и записями и не понимают суть разницы между ними. По-началу пользователя смущают все эти, вроде бы, идентичные типы контента. И возникает вопрос: Какая же разница между страницами и записями в WordPress? Они даже создаются почти одинаково. И выглядят на сайте тоже одинаково. Зачем вообще эти два разных типа? Как использовать для постов в блог? И использовать ли вообще страницы? Не спешите, сейчас разберемся.

Запись:

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

Страница:

Страницы созданы быть статичными, например, страница «Контакты», «О проекте», «Прайс лист» и прочее. После создания страницы WordPress хранит дату ее создания, но страницы не устаревают. Страница никогда не уйдет в архив, т.е. она безвременна или, если хотите, вечна. Естественно, можно вернуться и обновить, или исправить страницу, но это никак не повлияет на дату ее создания и не приведет к появлению новой страницы. К страницам не привязаны дата и время, страницы по умолчанию не включаются в RSS ленту. Они как таблички на дверях магазинов с режимом работы этих магазинов — никогда не меняются, в отличие от ассортимента. Страницы не предназначены быть социальными, кнопки «Твитнуть!» на них никто не вешает и комментарии всегда выключают.

Стандартно, в WordPress все записи добавляются с помощью кнопки «Добавить новую» в разделе Записи

10

Работая над новой записью (статьей) на свой сайт заполните все поля и укажите настройки:
Заголовок — он должен быть понятным и запоминающимся.
Сам текст записи — обратите внимание, что есть возможность редактировать запись на закладке «Визуально» и «Текст». Закладка «Визуально» работает по принципу текстового редактора — можно форматировать запись, добавлять списки и картинки. На закладке «Текст» вам уже придется столкнуться с HTML. Тут можно сделать более тонкую настройку.

11

Рубрика:

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

12

Ярлык:

Наверное, самое непонятное поле это «Ярлык» – для чего он нужен, что с ним делать? Ярлыки — это ключевые слова. Метки, которые можно присваивать записям. У одной записи может быть несколько ярлыков. Ярлыки используются для URL, поэтому лучше использовать латинские строчные буквы.
13
Работа с изображениями и видео файлами.

Все мультимедиа файлы для записей хранятся в специальном разделе — Медиатека.

Медиатека:

Сюда мы их загружаем с жесткого диска компьютера. Здесь можно файлы сортировать в галереи, присваивать определенной записи. Даже есть свой графический редактор, встроенный в WordPress.

14

Редактирование картинок:

Все самые необходимые изменения картинок вы сделаете самостоятельно, с помощью WordPress. Для этого выбираем изображение и нажимаем «Редактировать» в правой части окна:

Мы можем менять размер картинки, поворачивать ее, редактировать пропорции.

15

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

16

Выбираем и устанавливаем тему — шаблон дизайна для сайта.

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

Выбираем шаблон:

На сайте компании TamplateMonster вы найдете шаблоны для сайтов разных тематик:

23

Загружаем шаблон:

Темы обычно запаковываются в .zip архивы файл вы получите после скачивания. Распакуйте его. Теперь у нас есть папка с темой.

Загружаем тему на сервер
Распакованную папку с темой загружаем на сервер с нашим блогом в папку /wp-content/themes/. Делаем это как и ранее выгружали WordPress через FTP.

Активируем тему WordPress:

После загрузки папки с темой на сервер, остается активировать тему. Идем на административную панель WordPress в раздел «Внешний вид» — «Темы».

20Загружаем новую тему в админку

25

Загруженную тему нужно активировать.

21Рядом с установленной темой будет пометка, что она активна

24

Теперь можем посмотреть на наш сайт в новом дизайне.

Хочется еще сказать пару слов о темах WordPress. Часто они называются шаблонами. В сети есть платные и бесплатные шаблоны. Несмотря на привлекательность бесплатных, не стоит устанавливать их. В коде таких шаблонов часто встречаются ненужные скрипты и даже вирусы.
С платными шаблонами все в порядке, они идеально работают и выглядят гораздо современнее.

Как выбрать плагины для WordPress

Как мы уже говорили ранее, плагинов очень много. Их пишут разные разработчики по всему миру. Есть множество хороших бесплатных шаблонов, есть и платные. Обычно, это какие-то специфические плагины для определенных задач.

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

Выбираем «правильный» плагин

Давайте разберем самые очевидные критерии при выборе плагина:

  • Описание плагина и его функций.
  • Автор плагина. Работает ли создатель над совершенствованием своего плагина или он забросил его пару лет назад.
  • Количество загрузок плагина
  • Совместимость с версией WordPress
  • Рейтинг плагина. Количество отзывов и обзоров

Самый главный вопрос, который стоит себе задать это «А нужен ли вообще моему сайту этот плагин?». Существует мнение, что не нужно устанавливать большое количество плагинов, это приводит к снижению скорости загрузки сайта.

Самый простой способ установки плагина.

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

17

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

Чтобы этот плагин заработал в полную силу нам придется раздобыть специальный ключ, дающий доступ к API WordPress. После активации переходим в панель настройки Akismet — ссылка появится прямо в разделе плагинов.

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

18

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

19

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

Наиболее популярные плагины для WordPress

Чтобы сайт развивался и набирал обороты, нам нужно предоставить пользователям возможность делиться статьями в социальных сетях. Для этого тоже есть специальный плагин. На официальном сайте WordPress есть бесплатный плагин Кнопки “Поделиться в социальных сетях” Скачиваем с официального сайта плагин, устанавливаем его и получаем возможность делиться в:

  • Facebook
  • Twitter
  • Вконтакте
  • Одноклассники
  • Mail.ru
  • LiveJournal
  • Google Plus

Далее полученный шорткод (shortcode) можно разместить как в контенте страницы или записи, так и в шаблоне WordPress.
Вот небольшой список наиболее популярных бесплатных плагинов для WordPress, которые могут вам пригодится:
Google XML Sitemaps. Довольно популярный плагин, при помощи которого можно создать XML-версию карты сайта (файл в формате .xml). Карта сайта нужна для того, чтобы поисковики быстрее и эффективнее (без ошибок) индексировали информационное содержимое блога.
Google Analytics для WordPress. Установка статистики от сервиса Google Analytics здесь еще проще. Вам нужно лишь скопировать ваш ID в Google Analytics и вставить его в соответствующее окно плагина.
Easy AdSense. Данный плагин позволяет упростить работу с рекламными блоками Google Adsense. Вы сами можете выбрать место на странице, куда вам нужно установить данные блоки. При этом не нужно редактировать файлы PHP шаблона и выполнять прочие трудоемкие операции.
Google Doc Embedder. Очень полезный и практичный плагин, при помощи которого вы сможете встраивать документы в форматах PPT, PDF, TIFF прямо на страницы блога. Другими словами, посетителям не нужно будет загружать их в отдельном окне для просмотра или скачивать.
Google Custom Search Plugin. Это плагин для поиска от Google. Как известно, на движке WordPress есть стандартный модуль поиска, который обладает довольно скудным функционалом. Данный плагин вставляет упрощенный поисковый модуль Google прямо на страницы блога. При этом пользователь сможет выбрать, где именно искать информацию – на вашем блоге или в Google.

Это просто крупицы, по сравнению с огромным количеством плагинов, которые написаны для WordPress:

22

 

кнопка

На главную