Вы находитесь на странице: 1из 208

УДК 004.45 ББК 32.973.202-018.2

Б26

Darryl Bartlett WORDPRESS IN EASY STEPS

Copyright © 2017 by Easy Steps Limited, Translated and reprinted under a licence agreement from the Publisher: In Easy Steps, 16 Hamolton Terrace, Holly Walk, Leamington Spa, Warwickshire, U.K. CV32 4LY.

Б26

Walk, Leamington Spa, Warwickshire, U.K. CV32 4LY. Б26 Бартлетт, Дэрил. WordPress для

Бартлетт, Дэрил. WordPress для начинающих / Дэрил Бартлетт ; [пер. с англ. М.А. Райтман]. – Москва : Издательство «Э», 2017. – 208 с. – (Миро- вой компьютерный бестселлер).

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

УДК 004.45 ББК 32.973.202-018.2

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

Производственно-практическое издание

МИРОВОЙ КОМПЬЮТЕРНЫЙ БЕСТСЕЛЛЕР

Бартлетт Дэрил

WORDPRESS ДЛЯ НАЧИНАЮЩИХ (орыс тілінде)

Директор редакции Е. Капьёв. Ответственный редактор Е. Истомина Художественный редактор А. Шуклин

В оформлении обложки использованы фотографии: timquo, Levent Konuk / Shutterstock.com Используется по лицензии от Shutterstock.com

ООО «Издательство «Э» 123308, Москва, ул. Зорге, д. 1. Тел. 8 (495) 411-68-86.

ндіруші: «Э» А Б Баспасы, 123308, М скеу, Ресей, Зорге к шесі, 1 й. Тел. 8 (495) 411-68-86. Тауар белгісі: «Э»

аза стан Республикасында дистрибьютор ж не нім бойынша арыз-талаптарды абылдаушыны

арыз-талаптарды абылдаушыны ISBN 978-5-699-81412-1 кілі «РДЦ-Алматы»
арыз-талаптарды абылдаушыны ISBN 978-5-699-81412-1 кілі «РДЦ-Алматы»

ISBN 978-5-699-81412-1

кілі «РДЦ-Алматы» ЖШС, Алматы ., Домбровский к ш.,

3«а», литер Б, офис 1.

Тел.: 8 (727) 251-59-89/90/91/92, факс: 8 (727) 251 58 12 вн. 107. німні жарамдылы мерзімі шектелмеген.

Сертификация туралы а парат сайтта ндіруші «Э»

Сведения о подтверждении соответствия издания согласно законодательству РФ о техническом регулировании можно получить на сайте Издательства «Э»

ндірген мемлекет: Ресей Сертификация арастырылма ан

Подписано в печать 17.02.2017. Формат 84x108 1 / 16 . Печать офсетная. Усл. печ. л. 21,84.

Тираж

экз. Заказ

Усл. печ. л. 21,84. Тираж экз. Заказ © Райтман М.А., перевод на русский

© Райтман М.А., перевод на русский язык, 2017 © Оформление. ООО «Издательство «Э», 2017

Оглавление 1 Знакомство с WordPress 9 Обзор WordPress Зачем использовать
Оглавление
1
Знакомство с WordPress
9
Обзор WordPress
Зачем использовать платформу WordPress?
Что можно сделать?
Хостинг для платформы WordPress
Использование сервиса WordPress com
Планирование сайта
Блог или веб-сайт?
Сайт для бизнеса
10
11
14
15
19
20
22
25
2
Консоль WordPress и управление пользователями
27
Обзор консоли
Ссылки панели администратора
Элементы меню консоли
Знакомство с разделом Пользователи
Добавление пользователей
Изменение ролей пользователей
28
29
31
34
36
38
3
Внешний вид и темы
39
Вкратце о темах
Добавление тем
Загрузка тем
Настройка темы
40
41
44
46
Настройка меню Добавление виджетов Редактор 47 49 52 4 Создание
Настройка меню
Добавление виджетов
Редактор
47
49
52
4
Создание контента
53
Различия между страницами и сообщениями
Создание страниц
Создание записей
Добавление текста
Добавление изображений
Добавление видео
Добавление HTML-кода
Добавление аудиофайлов
Создание рубрик
Слайдеры
54
56
58
59
62
65
66
68
69
71
5
Использование плагинов
77
Поиск и установка плагинов
Загрузка плагинов
Установленные плагины
Обновление плагинов
Рекомендуемые плагины
Редактор плагинов
78
82
83
84
85
86
6
Создание интернет-магазина
87
Установка плагина WooCommerce
Добавление товаров
Оплата
88
91
95

Доставка

Просмотр заказов

Доставка Просмотр заказов 97 99 101 Дополнительные параметры товара

97

99

101

Дополнительные параметры товара

Дополнительные параметры товара 7 Настройки и инструменты 107 108 110
Дополнительные параметры товара 7 Настройки и инструменты 107 108 110
7
7

Настройки и инструменты

107
107

108

110

111

112

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

Настройки публикации

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

Настройки обсуждения

Настройки мультимедийных файлов 115 Настройки постоянных ссылок
Настройки мультимедийных файлов
115
Настройки
постоянных ссылок
116
Инструменты
117
8
Поисковая оптимизация и социальные сети
119

Плагин Yoast SEO

Обзор социальных сетей

Кнопки обмена

120

125

126

128

131

сетей Кнопки обмена 120 125 126 128 131 Записи в сервисе Twitter Фотографии
сетей Кнопки обмена 120 125 126 128 131 Записи в сервисе Twitter Фотографии

Записи в сервисе Twitter

Фотографии в сервисе Instagram

9
9
Twitter Фотографии в сервисе Instagram 9 Взаимодействие с пользователями
Twitter Фотографии в сервисе Instagram 9 Взаимодействие с пользователями

Взаимодействие с пользователями

133
133

Комментарии

134

Плагин Akismet и спам

136

Форумы

138

Формы обратной связи

144

Локализация веб-сайта

146

10 Советы и особые приемы работы 157 Сервис Google Analytics Сервис Google Maps
10
Советы и особые приемы работы
157
Сервис Google Analytics
Сервис Google Maps
Использование таблиц каскадных стилей
Информационная рассылка
Карта сайта
Шрифты Google
158
160
162
166
173
176
11
Расширенные возможности платформы WordPress
179
Платформа WordPress и язык PHP
Настройка FTP-доступа
Создание темы
Создание резервных копий сайта на платформе WordPress
Адаптивный дизайн
180
181
184
193
197
Предметный указатель
204
1 Знакомство с WordPress • Обзор WordPress • Зачем использовать
1 Знакомство с WordPress
1
Знакомство
с WordPress
• Обзор WordPress • Зачем использовать платформу WordPress? • Что можно
Обзор WordPress
Зачем использовать платформу WordPress?
Что можно сделать?
Хостинг для платформы WordPress
Использование сервиса WordPress.com
Планирование веб-сайта
• Блог или веб-сайт?
• Веб-сайт для бизнеса

В этой главе вы познакомитесь с платформой WordPress и некоторыми ее возможностями. Кроме того, вы узнаете, как устанавливать платформу и спланировать свою работу.

1. Знакомство с WordPress

10

Обзор WordPress

Многие люди считают WordPress только платформой для ведения бло- га. И это настолько далеко от истины! С ее помощью можно создать что угодно: от простейшего блога до профессионального, сложного веб-сайта — вы ограничены только собственной фантазией. Платфор- ма WordPress является мощным инструментом, с помощью которого на момент написания данной книги создано 22% всех веб-сайтов.

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

Многие профессиональные веб-разработчики используют платформу WordPress для создания клиентских сайтов, поскольку она является мощным инструментом и позволяет сэкономить время, а также пре- доставляет прекрасную систему управления контентом (англ. Content management system, CMS), которая дает возможность клиентам обнов- лять данные на сайте самостоятельно.

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

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

Что вам понадобится?

Для работы с этой книгой вам понадобятся:

доменное имя (например, www.site.ru);

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

Если вы готовы, самое время начать работу.

11

Зачем использовать платформу WordPress?

Когда-то веб-разработка считалась наисложнейшей задачей, которая требовала серьезных навыков в программировании. Веб-сайты разра- батывались с помощью текстовых редакторов, таких как блокнот. Од- нако с развитием технологий веб-разработки возможность создания собственных сайтов появилась и у людей, обладающих весьма скром- ными навыками в программировании или вовсе их не имеющих. Это произошло в связи с развитием систем управления контентом (CMS), таких как WordPress, Joomla, Moodle, и схожих с ними платформ. Такие системы управления контентом позволяют обычным пользователям разрабатывать веб-сайты профессионального вида. Выбор CMS зави- сит от различных факторов. Однако мы сосредоточимся на том, почему именно система WordPress является прекрасным выбором для разра- ботки веб-сайтов.

Основана на технологиях с открытым кодом

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

Проста в установке и управлении

Установка платформы WordPress — очень простая задача и требует все- го несколько щелчков мышью. Большинство компаний, осуществляю- щих хостинг, например «Джино» или HostGator, обеспечивают установ- ку служб для WordPress одним щелчком мышью. Удобство применения платформы WordPress не ограничивается установкой; после установки ею также очень легко управлять с помощью консоли WordPress. Напри- мер, чтобы создать меню, страницу, сообщение, добавить изображение и настроить заголовок, необходимо выполнить несколько щелчков мы- шью и не требуется никаких навыков программирования.

1. Знакомство с WordPress

12

Стилизация с помощью тем

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

Расширение функциональности с помощью плагинов

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

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

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

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

Поддержка со стороны обширного сообщества разработчиков

Сообщество разработчиков WordPress — одно из самых больших

и позволяет пользователям мгновенно решать проблемы, связан-

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

ru.forums.wordpress.org

13

Дружественность по отношению к поисковой оптимизации

Веб-сайты, созданные на платформе WordPress, дружественны по от- ношению к поисковой оптимизации (англ. search engine optimization,

SEO). Коммерческие компании тратят значительные средства на то, чтобы их веб-сайты занимали более высокое положение в результа- тах поиска Google. Хорошая новость заключается в том, что поисковая система Google по некоторым причинам размещает сайты, созданные

с помощью платформы WordPress, выше остальных, благодаря встро-

енной функции поисковой оптимизации. Кроме того, существует не- сколько SEO-плагинов, которые помогают выполнить процесс поиско- вой оптимизации и поднять ваш сайт в рейтинге поисковых систем.

Выводы

Несмотря на многообразие систем управления контентом, доступных на рынке, платформа WordPress представляет собой лучший вариант,

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

1. Знакомство с WordPress

14

Что можно сделать?

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

Интернет-магазин. Вы когда-нибудь хотели иметь свой интернет- магазин? Веб-сайт, принимающий онлайн-платежи? С помощью платформы WordPress вы можете это сделать. Существует множе- ство плагинов, которые вы можете использовать (например, бес- платный плагин WooCommerce, речь о котором пойдет в главе 6).

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

Форумы. Вам может казаться, что форум создать достаточно слож- но, но WordPress значительно упрощает этот процесс. Существу- ют плагины, помогающие создать собственную доску объявле- ний, на основе которой можно быстро организовать сообщество (см. главу 9).

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

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

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

Сайт предложений. Возможно, вы хотите создать сайт с предложе- ниями работы? Или сайт с объявлениями? Это можно сделать с по- мощью платформы WordPress.

Список можно продолжать долго. Мы привели лишь несколько при- меров.

15

Хостинг для платформы WordPress

Чтобы установить платформу WordPress, вам необходимо онлайн-про- странство. Я рекомендую использовать «Джино» (jino.ru). Данная хо- стинговая компания отличается доступными ценами и круглосуточной поддержкой. Кроме того, установить платформу WordPress будет очень легко. В наше время существуют различные хостинг-операторы, позво- ляющие установить платформу WordPress одним щелчком мыши, что идеально подходит для начинающих разработчиков и блогеров. Для своего сайта можно использовать хостинг WordPress.com. Однако здесь существуют некоторые ограничения (см. далее в этой главе).

Настройка учетной записи «Джино»

Чтобы начать работу, необходимо настроить учетную запись «Джино» по адресу jino.ru и выбрать доменное имя для вашего сайта, если у вас его еще нет. Все это можно сделать с помощью сервиса «Джино». Это первый шаг при создании сайта на платформе WordPress.

сайта на платформе WordPress. Совет Использование хостин- га

Совет

Использование хостин- га сторонней компании для платформы WordPress является, вероятно, луч-

шим вариантом, поскольку

в данном случае вы не бу-

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

После регистрации на ваш электронный адрес будет отправлено сооб- щение с параметрами доступа к вашей учетной записи, как показано ниже:

Адрес панели управления: https://account.jino.ru/ Логин: ваше_имя_пользователя Пароль: ваш_пароль

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

на показанное на рисунке ниже. Внимание Чтобы пользоваться
на показанное на рисунке ниже. Внимание Чтобы пользоваться

Внимание

Чтобы пользоваться услу- гами хостинговой компании «Джино», необходимо внести на лицевой счет сумму не ме-

нее 149 рублей, с которого бу- дет списываться ежедневная плата за услуги Пополнить лицевой счет можно различ- ными способами на странице account.jino.ru/payment/ Минимальный набор услуг для использования плат- формы Wordpress на момент написания книги оценивался

в 117 рублей в месяц

1. Знакомство с WordPress

16

2. Перейдите к разделу Хостинг и щелкните мышью по ссылке Все услуги либо перейдите по адресу cp-hosting.jino.ru/services/.

3. Подключите услуги Поддержка доменов, Дисковое пространство, Поддержка FTP-аккаунтов, Поддержка PHP, СУБД MySQL и Под- держка баз MySQL, как показано на рисунке.

баз MySQL , как показано на рисунке. 4. Выберите команду меню

4. Выберите команду меню Управление Управление MySQL в верх- ней части страницы. Затем нажмите кнопку Создать базу данных. Вы должны увидеть форму, показанную на рисунке.

форму, показанную на рисунке. 5. Укажите любое имя базы данных

5. Укажите любое имя базы данных (БД), после чего нажмите кнопку Создать. База данных создана. Теперь установите пароль для базы данных. Для этого возле созданной базы щелкните мышью по кноп- ке в виде карандаша.

6. В открывшемся окне введите новый пароль и нажмите кнопку Со- хранить.

Запишите имя базы данных, имя пользователя БД и пароль.

17

17 8. В появившемся окне щелкните мышью по значку в виде папки, в

8. В появившемся окне щелкните мышью по значку в виде папки, в раскрывшемся списке выберите папку вашего домена, например /domains/mysite.ru, и нажмите кнопку Установить.

и нажмите кнопку Установить . По завершении установки в

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

WordPress успешно скопи- ровано. 9. На этой панели щелкните мышью

9. На этой панели щелкните мышью по ссылке Перейти к установке. Откроется форма, в которой следует ввести имя базы данных, имя пользователя БД и пароль, которые вы записали на шаге 6. Затем нажмите кнопку Отправить.

которые вы записали на шаге 6. Затем нажмите кнопку Отправить .

1. Знакомство с WordPress

18

10. После этого появится еще одна панель, где нужно нажать кнопку Запустить установку.

11. Далее появится форма, в которой следует указать желаемые назва- ние сайта, имя пользователя и пароль для входа в панель админи- стратора и ваш адрес электронной почты. После заполнения формы нажмите кнопку Установить WordPress.

кнопку Установить WordPress . На заметку На экране входа вы

На заметку

На экране входа вы може- те сбросить свой пароль Для этого щелкните мышью по ссылке Забыли пароль?, расположенной в нижней части страницы авторизации

части страницы авторизации 12. После установки появится

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

Эту страницу вы или любые другие зарегистрированные пользователи вашего сайта будете всегда использовать для авторизации. Здесь нужно ввести ваш логин и пароль, которые вы выбрали в шаге 11, и нажать кнопку Войти. Для автоматической собственной авторизации устано- вите флажок Запомнить меня.

Теперь вы можете получить доступ к платформе WordPress, переходя по ссылке www.ваш_домен/wp-admin в веб-браузере. Не забудьте заме- нить слова ваш_домен адресом вашего реального домена.

Храните свои учетные данные в надежном месте.

19

Использование сервиса WordPress.com

Если для установки платформы WordPress вы не хотите использовать услуги сторонних хостинговых компаний, то можете сделать это на офи- циальном сайте WordPress.com. Здесь можно выбрать бесплатный хо- стинг с некоторыми ограничениями или оплатить ежегодный взнос, чтобы снять их. В настоящее время доступны четыре тарифных плана.

Бесплатно.

Личный: 2,99 $ в месяц.

Премиум: 8,25 $ в месяц.

Бизнес: 24,92 $ в месяц.

Бесплатный тарифный план обладает довольно большим числом огра- ничений. Во-первых, вы не сможете использовать собственное домен- ное имя и изменить дизайн. Чтобы убрать рекламу, вам потребуется заплатить. Вам придется выбрать один из доменов WordPress. Напри- мер, если вы создаете сайт о настольном теннисе, то адрес вашего сайта будет выглядеть примерно так: tabletennis.WordPress.com.

примерно так: tabletennis.WordPress.com . Тарифный план зависит от

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

Установка платформы при помощи сайта WordPress.com очень проста. Для настройки нового сайта/блога необходимо последовательно вы- полнить несколько операций.

вы- полнить несколько операций. Внимание По сравнению со сторон-

Внимание

По сравнению со сторон- ними хостинг-компаниями, например «Джино», у серви- са WordPress.com больше ограничений

са WordPress.com больше ограничений На заметку FTP (англ File Transfer Protocol)

На заметку

FTP (англ File Transfer Protocol) — протокол передачи файлов FTP-кли- ент — программное обеспе- чение для загрузки данных, которое позволяет легко пе- ремещать файлы с компью- тера на веб-хост или другой компьютер (см главу 11)

После установки вы сможете войти на сайт таким же образом, как если бы он находился на резидентном сервере, перейдя по ссылке http://www.ваш_домен/wp-admin.

1. Знакомство с WordPress

20

о м с т в о с W o r d P r e s s

На заметку

Планирование является ключевым этапом любо- го проекта Необходимо рассмотреть все вопросы, начиная с дизайна и закан- чивая реализацией

Планирование сайта

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

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

Мозговой штурм. Теперь пришло время взять в руки чашку кофе, сесть за ноутбук и продумать свой веб-сайт: о чем он будет, как он должен выглядеть? Как часто он будет обновляться? Будет ли он ис- пользовать данные социальных сетей? Как пользователи будут взаи- модействовать с сайтом?

Структура страниц. Будут ли на вашем сайте страницы и вложен- ные страницы? Например, раздел «О нас» может содержать страни- цу «Вакансии» в качестве подраздела. От вас требуется организовать структуру страницы. Например:

Главная

О нас

— История

— Сотрудники

— Вакансии

Услуги

— Веб-дизайн

— Графический дизайн

— Веб-хостинг

— Печать

События

— Текущий год

Блог

Контактная информация

21

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

Управление проектом. Если у вас график или крайний срок? Со- ставьте расписание и следуйте ему. Если вы хотите добиться целей, то необходимо составить детальный график, который является клю- чом к успешному веб-сайту.

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

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

Создание резервных копий сайта. Убедитесь, что позаботились о создании резервных копий своего сайта. В идеале неплохо бы со- здавать их каждый день, но, если это затруднительно, создание ко- пий через день будет приемлемой альтернативой. Никогда нельзя знать заранее, когда сервер выйдет из строя или подвергнется ха- керской атаке. Вы будете спать крепче, зная, что у вас есть резервная копия (см. главу 11).

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

Социальные сети. Какой бы сайт вы ни создавали, социальные сети являются важной частью роста его аудитории. Постарайтесь пред- ставить свой контент в максимально возможном количестве соци- альных сетей. Самые популярные из них: Twitter, Facebook, YouTube, «Одноклассники», «ВКонтакте» и LinkedIn.

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

1. Знакомство с WordPress

22

Блог или веб-сайт?

Иногда, когда речь идет о платформе WordPress, возникает путаница. Пользователи задаются вопросами:

Должен ли мой сайт, созданный на платформе WordPress, выглядеть как блог?

Должен ли мой сайт, созданный на платформе WordPress, иметь блог?

Прежде чем начать, давайте проясним эти моменты.

Блог WordPress

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

но как быть, если вы планируете создать сайт о своем бизнесе?

23

Сайт WordPress

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

и услугах, оказываемых вами. Меню бизнес-сайта Пример
и услугах, оказываемых вами. Меню бизнес-сайта Пример

Меню бизнес-сайта

вами. Меню бизнес-сайта Пример бизнес-сайта В наши дни

Пример бизнес-сайта

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

Веб-сайт

В основном контент статичный, за исключением блога или форума.

Своего рода «цифровая витрина» интернет-магазина.

Профессиональный вид.

Широкая функциональность.

Есть страницы о продуктах и услугах.

1. Знакомство с WordPress

24

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

Блог

Контент обновляется чаще.

Последние обновления контента отображаются в верхней части блога.

Контент обычно упорядочен по рубрикам или датам.

Поисковая система Google «предпочитает» блоги, поскольку их кон- тент постоянно обновляется.

Неформальный контент.

Пользователи могут взаимодействовать при помощи системы ком- ментирования.

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

25

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

Интернет произвел революцию в мире — теперь он стал одним боль- шим «поселением», в котором все находятся друг от друга на расстоя- нии нескольких щелчков мышью. Предприятия пользуются тем, что большинство клиентов используют Интернет. В настоящее время 99% всего успешного бизнес-сообщества представлено в социальных сетях или на специализированных сайтах. Для создания таких веб-сайтов есть несколько причин.

Огромное количество потенциальных клиентов

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

Экономически эффективный инструмент маркетинга

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

Простота взаимодействия с покупателями

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

в неделю. Благодаря этому потенциальные покупатели могут получить

информацию о продуктах или услугах независимо от часового пояса,

в котором они находятся.

Глобальное присутствие

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

Хорошее первое впечатление

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

2

2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы

Консоль WordPress

2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы

и управление

2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы
2 Консоль WordPress и управление пользователями В этой главе вы

пользователями

и управление пользователями В этой главе вы познакомитесь с

В этой главе вы познакомитесь с консолью платформы WordPress и научитесь работать с ней. Кроме того, вы узнаете об управлении пользователями.

Обзор консоли • Ссылки панели администратора • Элементы меню
Обзор консоли
Ссылки панели администратора
Элементы меню консоли
Знакомство с разделом Пользователи
Добавление пользователей
Изменение ролей пользователей

2. Консоль WordPress и управление пользователями

28

Обзор консоли

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

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

Совет

В этой книге мы будем рабо- тать с платформой WordPress версии 4 6

В этой главе вкратце рассказывается о различных элементах консоли,

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

Панель администратора

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

После авторизации вы должны увидеть окно, показанное на следую- щем изображении.

Панель администратора

Панель администратора В верхней части страницы
Панель администратора В верхней части страницы

В верхней части страницы находятся элементы меню. Совокупность

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

право.

29

Ссылки панели администратора

29 Ссылки панели администратора Значок WordPress Если навести на этот

Значок WordPress

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

Перейти на сайт

Отображает название вашего сайта. Кроме того, слева от этого элемен- та находится значок с изображением дома. Если вы щелкнете по нему мышью, то попадете на домашнюю страницу своего сайта в качестве авторизированного пользователя. Если установить курсор поверх него, появится раскрывающийся список со всего одной ссылкой — Перейти на сайт (Visit Site).

— Перейти на сайт (Visit Site). Совет Сайт Wordpress.org можно с

Совет

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

Обновление плагина

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

Модерация комментариев

Четвертым слева элементом панели инструментов является меню моде- рации комментариев. Если каждая запись или комментарий на вашем сайте перед публикацией требует модерации, с помощью данной ссыл- ки можно это сделать.

Добавить

Последний элемент панели инструментов — Добавить (New Item). Он содержит ссылки на страницы Запись (Post), Медиафайл (Media),

2. Консоль WordPress и управление пользователями

30

Страница (Page) и Пользователь (User). Чтобы отобразить эти ссылки, просто установите указатель мыши поверх него.

Панель администратора

Если вы посмотрите в правый верхний угол страницы, то увидите ссыл- ку Привет, ваш_логин (Howdy, ваш_логин). Она содержит информа- цию о текущем пользователе. Обычно с помощью этой ссылки мож- но изменить параметры учетной записи администратора. Кроме того, выбрав пункт Выйти (Log Out) в раскрывающемся списке, мож- но выйти из учетной записи.

(Log Out) в раскрывающемся списке, мож- но выйти из учетной записи.

31

Элементы меню консоли

Мы вкратце рассмотрели все меню верхней панели инструментов. Пе- рейдем к элементам меню, расположенного в левой части консоли.

Консоль

Если вы щелкнете мышью или установите курсор поверх элемента Кон- соль (Dashboard), отобразится раскрывающийся список с двумя пунк- тами: Главная (Home) и Обновления (Updates). При выборе пункта Главная (Home) вы вернетесь к основной консоли, а при выборе пункта Обновления (Updates) — перейдете к странице, на которой отобража- ются все доступные обновления.

ются все доступные обновления. Записи Раздел Записи (Posts)

Записи

Раздел Записи (Posts) программы WordPress позволяет добавлять, уда- лять и публиковать записи на вашем сайте. Вы также можете поместить их в различные рубрики. Процесс со- здания и публикации записей описан в главе 4.

Медиафайлы

Этот элемент используется для добав- ления мультимедийных файлов, таких как изображения, аудио- или видеоза- писи, в мультимедийную библиотеку вашего сайта. Также с его помощью можно просмотреть текущую библио- теку. Если вы установите указатель мыши поверх этого элемента, то уви- дите список с двумя пунктами: Биб- лиотека (Library) и Добавить новый (Add New).

Страницы

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

2. Консоль WordPress и управление пользователями

32

уже существующих. Если вы установите указатель мыши поверх это- го элемента, то увидите список с двумя пунктами: Все страницы (All Pages) и Добавить новую (Add New).

Комментарии

Этот пункт меню позволяет управлять комментариями, размещенны- ми на вашем сайте. В этом разделе отображаются комментарии, добав- ленные пользователями к любым вашим записям или страницам. Вы можете утвердить, отклонить, пометить как спам или удалить коммен- тарий в корзину.

Внешний вид

С помощью этого пункта в платформе WordPress можно изменить вне-

шний вид вашего сайта. Здесь вы можете добавить новые темы, изме- нить текущую тему, создать меню и поработать с виджетами. Подроб- нее этот раздел меню будет рассмотрен в главе 3.

меню будет рассмотрен в главе 3. На заметку При добавлении новых

На заметку

При добавлении новых пла- гинов в консоли WordPress могут появиться новые ссылки

Плагины

Этот элемент меню можно использовать для редактирования, удаления, включения и отключения установленных плагинов, а также для добав- ления новых. Если вы установите указатель мыши поверх элемента Плагины (Plugins), то увидите список с тремя пунктами: Установлен- ные (Installed Plugins), Добавить новый (Add New) и Редактор (Editor). Подробнее плагины будут рассмотрены в главе 5.

Пользователи

С помощью этого раздела меню можно добавлять, редактировать и об-

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

33

Инструменты

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

Настройки

Раздел Настройки (Settings) находится в нижней части меню. Он со- держит все настройки, связанные с написанием и чтением контента, созданием комментариев к записям, ссылками и параметрами мульти- медийных элементов, а также общими параметрами вашего сайта.

Свернуть меню

С помощью этого пункта можно свернуть меню.

2. Консоль WordPress и управление пользователями

34

Знакомство с разделом Пользователи

С помощью раздела Пользователи (Users) можно добавлять и удалять пользователей, а также изменять их права доступа. Он особенно по- лезен, если кроме вас есть и другие пользователи, которые работают с сайтом, например создают контент или участвуют в его разработке. Чтобы перейти к разделу, выберите одноименный пункт в меню слева.

одноименный пункт в меню слева. Прежде чем приступить к

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

Администратор (Administrator)

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

Редактор (Editor)

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

Автор (Author)

Пользователи с ролью Автор (Author) могут публиковать, редакти- ровать или удалять собственные записи, а также загружать мульти- медийные данные. Однако у них отсутствует доступ к материалам, созданным другими пользователями. Кроме того, авторы не могут создавать или удалять страницы.

35

Участник (Contributor)

Пользователи с ролью Участник (Contributor) могут создавать за- писи и редактировать их. Однако перед публикацией такие записи должны пройти проверку у пользователя, обладающего ролью Ад- министратор (Administrator) или Редактор (Editor).

Подписчик (Subscriber)

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

2. Консоль WordPress и управление пользователями

36

Добавление

пользователей

1. Чтобы добавить нового пользователя, выберите команду меню Пользователи Добавить нового (Users Add New).

⇒ Добавить нового (Users ⇒ Add New). 2. Откроется форма, содержащая

2. Откроется форма, содержащая информацию о пользователе. Вве- дите имя (латинскими буквами), под которым новый пользова- тель будет заходить на сайт, а также заполните поля E-mail (Email Address), Имя (First Name), Фамилия (Last Name), Сайт (Website) и Пароль (Password). Если хотите отправить пароль новому поль- зователю по электронной почте, то установите соответствующий флажок.

по электронной почте, то установите соответствующий флажок.

37

3. Убедитесь, что выбрали соответствующую роль в раскрывающемся списке Роль (Role).

раскрывающемся списке Роль (Role). Внимание Права администратора
раскрывающемся списке Роль (Role). Внимание Права администратора

Внимание

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

4. Нажмите кнопку Добавить нового пользователя (Add New User). Теперь пользователь сможет войти на сайт под управлением WordPress с помощью ссылки www.ваш_домен/wp-admin/.

на сайт под управлением WordPress с помощью ссылки www. ваш_домен /wp-admin/ .

Изменение ролей пользователей

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

1. Выберите команду меню Пользователи Все пользователи (Users All Users).

Все пользователи (Users ⇒ All Users). 2. Щелкните мышью по ссылке

2. Щелкните мышью по ссылке Изменить (Edit) под именем пользова- теля, права доступа которого вы хотите изменить.

которого вы хотите изменить. 3. Прокрутите страницу вниз и

3. Прокрутите страницу вниз и выберите соответствующий пункт в раскрывающемся списке Роль (Role).

раскрывающемся списке Роль (Role). 4. По завершении не забудьте

4. По завершении не забудьте нажать кнопку Обновить информацию (Update User) в нижней части страницы.

Цветовые схемы

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

и со своей. К примеру, вы можете изменить цветовую схему консоли.

3

В этой главе рассказывается о разделе Темы (Themes) и о том, как можно установить, загрузить и настроить темы. Темы являются важной частью внешнего вида сайта.

частью внешнего вида сайта. Внешний вид и темы Вкратце о

Внешний

внешнего вида сайта. Внешний вид и темы Вкратце о темах •
внешнего вида сайта. Внешний вид и темы Вкратце о темах •
внешнего вида сайта. Внешний вид и темы Вкратце о темах •
внешнего вида сайта. Внешний вид и темы Вкратце о темах •
внешнего вида сайта. Внешний вид и темы Вкратце о темах •
внешнего вида сайта. Внешний вид и темы Вкратце о темах •

вид и темы

Вкратце о темах • Добавление тем • Загрузка тем • Настройка
Вкратце о темах
Добавление тем
Загрузка тем
Настройка темы
Настройка меню
• Добавление виджетов
• Редактор

3. Внешний вид и темы

40

Вкратце о темах

Веб-разработка: от технических тонкостей до удобства пользователей

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

и реализовывать алгоритмы при помощи простых текстовых редакто-

ров. Но, как говорится, только процесс изменения является постоян-

ным. Это относится и к индустрии веб-разработки.

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

и платформа WordPress.

Для чего нужны темы?

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

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

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

41

Добавление тем

Чтобы добавить тему к сайту WordPress, выполните следующие дей- ствия.

1. Перейдите в консоль веб-сайта или блога WordPress.

2. В раскрывающемся списке Внешний вид (Appearance) консоли вы- берите пункт Темы (Themes).

вы- берите пункт Темы (Themes). Откроется страница (похожая на

Откроется страница (похожая на показанную на изображении ниже), которая демонстрирует уже установленные темы. В верхней части стра- ницы находится поле поиска, с помощью которого можно найти уже установленные темы, а также кнопка Добавить новую (Add New), ко- торая позволяет добавить новую тему.

Кнопка добавления новой темы

добавить новую тему. Кнопка добавления новой темы Поле поиска

Поле поиска

добавить новую тему. Кнопка добавления новой темы Поле поиска
добавить новую тему. Кнопка добавления новой темы Поле поиска

3. Внешний вид и темы

42

3.

Чтобы добавить новую тему, нажмите кнопку Добавить новую (Add New).

Вы перейдете к странице, на которой можно выбрать одну из множе- ства тем. Все темы разбиты по категориям Избранные (Featured), По- пулярные (Popular) и Свежие (Latest). Кроме того, благодаря кнопке Фильтр характеристик (Feature Filter) вы можете настроить параметры поиска тем, соответствующих определенным запросам. С помощью поля поиска можно выполнить поиск темы по названию.

Категории тем

темы по названию. Категории тем Если установить курсор поверх
темы по названию. Категории тем Если установить курсор поверх

Если установить курсор поверх какой-либо темы, можно просмотреть ее и установить, нажав кнопку Установить (Install).

можно просмотреть ее и установить, нажав кнопку Установить (Install).

43

4.

После щелчка мышью по кнопке Установить (Install) выбранная вами тема будет установлена.

вами тема будет установлена. Вам будет предложено

Вам будет предложено активировать ее нажатием одноименной кнопки.

После щелчка мышью по ссылке Просмотреть (Live Preview) вы увиди- те, как будет выглядеть ваш сайт после применения выбранной темы. Однако сама тема не будет активирована, что дает возможность ре- шить, подходит она вам или нет. Щелчок мышью по ссылке Активиро- вать (Activate) активирует тему. Если вы вернетесь на сайт, то увидите, что новая тема применена к нему.

что новая тема применена к нему. На заметку Можно установить

На заметку

Можно установить несколь- ко тем Однако активной может быть только одна из них

может быть только одна из них Внимание Активация темы может

Внимание

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

Удаление тем

Удалить тему очень легко. Выберите команду меню Внешний вид Темы (Appearance Themes) и щелкните мышью по теме, которую хотите удалить. Откроется страница со сведениями о теме. Щелкните мышью по ссылке Удалить (Delete) в правом нижнем углу страницы.

в правом нижнем углу страницы. Ссылка удаления темы После

Ссылка удаления темы

После нажатия кнопки Удалить (Delete) от вас потребуется подтвер- ждение этого действия.

3. Внешний вид и темы

44

Загрузка тем

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

В результате покупки или разработки темы в вашем распоряжении окажется простой ZIP-файл, который содержит все необходимые фай- лы, образующие тему. Его необходимо загрузить на ваш блог или сайт WordPress. Чтобы сделать это, выполните следующие действия.

1. Перейдите в консоль сайта или блога WordPress.

2. В меню консоли выберите пункт Внешний вид Темы (Appearance Themes).

вид ⇒ Темы (Appearance ⇒ Themes). 3. Нажмите кнопку Добавить новую

3. Нажмите кнопку Добавить новую (Add New).

4. Вместо выбора темы с сайта WordPress.org нажмите кнопку За- грузить тему (Upload Theme).

темы с сайта WordPress.org нажмите кнопку За- грузить тему (Upload Theme).

5.

Нажмите кнопку Обзор (Choose File). Откроется диалоговое окно выбора файла. Выберите ZIP-файл с новой темой, а затем нажмите кнопку Установить (Install Now).

45

кнопку Установить (Install Now). 45 Кнопка выбора файла Кнопка

Кнопка выбора файла

Кнопка установки темы

файла Кнопка установки темы 6. После нажатия кнопки

6. После нажатия кнопки Установить (Install Now) вы увидите про- цесс установки темы. Этот процесс очень похож на добавление темы из библиотеки WordPress.org (см. ранее в этой главе).

Активировать тему также легко. В вашем распоряжении снова будут две кнопки: Просмотреть (Live Preview) и Активировать (Activate). Все, что вам нужно сделать, — это щелкнуть мышью по кнопке Акти- вировать (Activate) по окончании установки темы.

3. Внешний вид и темы

46

Настройка темы

В платформе WordPress по умолчанию отображаются лишь некоторые

параметры темы, например краткое описание сайта, заглавное изобра-

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

1. Перейдите в консоль веб-сайта или блога WordPress.

2. В меню консоли выберите команду Внешний вид Настроить (Appearance Customize).

⇒ Настроить (Appearance ⇒ Customize). Настраиваемые параметры В левой
⇒ Настроить (Appearance ⇒ Customize). Настраиваемые параметры В левой

Настраиваемые параметры

В левой части страницы находится список параметров, а в правой —

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

зави- сят от выбранной темы. Пример, показанный на

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

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

Выполнив изменения, нажмите кнопку Со- хранить и опубликовать (Save & Publish) в верхней части страницы, чтобы обновить внешний вид сайта.

47

Настройка меню

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

1. В меню консоли выберите пункт Внешний вид Меню (Appearance Menus).

вид ⇒ Меню (Appearance ⇒ Menus). В области Структура меню (Menu

В области Структура меню (Menu Structure) видно, что меню содержит уже добавленные элементы, для которых указан их тип. В зависимости от выбранной вами темы уже добавленные страницы могут отличать- ся от показанных на иллюстрации, однако процесс добавления новых пунктов меню будет похож на описанный.

2. В списке с левой стороны отображаются уже созданные вами стра- ницы. Чтобы выделить одну или несколько, установите соответ- ствующий флажок.

выделить одну или несколько, установите соответ- ствующий флажок.

3. Внешний вид и темы

48

е ш н и й в и д и т е м ы 48 Совет На

Совет

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

встроено дополнительное меню Выделив страницы, нажми- те

Выделив страницы, нажми- те кнопку Добавить в меню (Add to Menu), чтобы доба- вить их в структуру меню.

В этом упражнении я вы- делил страницу Контакты и тем самым добавил дан- ный элемент в меню.

Список элементов может быть другим в зависимости от созданных вами страниц.

1. Теперь, если вы перейдете на главную страницу блога или сайта, то увидите новые элементы меню.

то увидите новые элементы меню. 2. В области Структура меню (Menu

2. В области Структура меню (Menu Structure) можно изменить поря- док следования страниц, выделяя элементы и перетаскивая их вверх или вниз по отношению к другим элементам меню.

3. В меню также можно добавлять ссылки на внешние ресурсы. Для этого щелкните мышью по разделу Произвольные ссылки (Links).

URL (Link URL): URL-адрес страницы, ссылка на которую долж- на отображаться.

Текст ссылки (Link Text): Текст, который будет использован как название ссылки.

49

Добавление виджетов

Виджеты представляют собой мини-приложения, которые упрощают работу пользователей, а также расширяют функциональность встроен- ных тем. Наглядным примером является виджет Facebook Like Button, который часто размещается на главной странице сайта. Он отображает число пользователей, которым понравилась данная страница. Кроме того, благодаря этому виджету пользователь может отметить, что стра- ница ему понравилась, вместо того чтобы заходить на сайт Facebook, искать страницу и отмечать ее там.

1. В меню консоли выберите пункт Внешний вид Виджеты (Appea- rance Widgets).

вид ⇒ Виджеты (Appea- rance ⇒ Widgets). Откроется страница, похожая на

Откроется страница, похожая на ту, что показана на изображении. Ее внешний вид зависит от используемой вами темы. Возможно, вы уви- дите больше доступных областей для виджетов. Область Доступные виджеты (Available Widgets) отображается в левой части страницы, а Боковая колонка (Widget Areas) — в правой.

колонка (Widget Areas) — в правой. На заметку При добавлении нового
колонка (Widget Areas) — в правой. На заметку При добавлении нового

На заметку

При добавлении нового плагина (см главу 5) могут добавляться и виджеты, связанные с ним Например, при добавлении плагина Twitter добавится одноимен- ный виджет, с помощью которого на странице можно отображать твиты

3. Внешний вид и темы

50

В правой области уже находятся некоторые виджеты, например Све- жие записи (Recent Posts), Свежие комментарии (Recent Comments), Мета (Meta) и другие.

2. Перетащите виджет RSS из области Доступные виджеты (Available Widgets) в поле Боковая колонка (Widget Areas).

в поле Боковая колонка (Widget Areas). 3. На экране отобразятся

3. На экране отобразятся некоторые параметры выбранного виджета. В данном примере введите адрес RSS-ленты, заголовок и количество отображаемых новостей ленты. Укажите, например, число 10 и на- жмите кнопку Сохранить (Save).

на- жмите кнопку Сохранить (Save). Можете обратить внимание на то,

Можете обратить внимание на то, что теперь в левой части сайта по- явился виджет RSS с новостями РБК. Это очень простой пример — не- которые виджеты можно получить вместе с плагинами (см. главу 5) либо с помощью сторонних сайтов, которые предоставляют код для вставки внутрь текстового виджета.

51

Чтобы добавить виджет Facebook Like Button, выполните следующие действия.

1. Перейдите по ссылке developers.facebook.com/docs/plugins/like- button/.

2. Вы можете настроить ширину, макет, тип взаимодействия (лайк или комментарий) и URL-адрес страницы Facebook. На изображе- нии ниже представлен примерный вид вашего виджета и элементы управления для его настройки.

управления для его настройки. 3. Закончив, нажмите кнопку

3. Закончив, нажмите кнопку Получить код (Get Code), расположен- ную в нижней части страницы.

ную в нижней части страницы. 4. Скопируйте полученный код

4. Скопируйте полученный код плагина.

полученный код плагина. Совет Вернуться к настройкам ви-

Совет

Вернуться к настройкам ви- джета Facebook Like Button можно в любой момент Кро- ме того, существуют и другие виджеты Facebook

5. Теперь вернитесь к странице Виджеты (Widgets) и перетащите ви- джет Текст (Text) из области Доступные виджеты (Available Wid- gets) в область Боковая колонка (Widget Areas).

Боковая колонка (Widget Areas). 6. Вставьте полученный код в поле,

6. Вставьте полученный код

в поле, показанное на изо- бражении. После этого виджет Facebook появится

в левой части страницы.

Не забудьте нажать кнопку Сохранить (Save).

Теперь на вашей страни- це должен отображаться виджет Facebook.

Внимание Изменяя PHP-файлы, будьте осторожны Вы легко можете

Внимание

Изменяя PHP-файлы, будьте осторожны Вы легко можете нарушить работу сайта

Редактор

Обладая достаточными навыками программирования с помощью CSS3, HTML, JavaScript и PHP, вы легко можете отредактировать установлен- ную тему CSS. Для этих целей платформа WordPress содержит встро- енный редактор. Чтобы сделать это, выполните следующие действия.

1. В меню консоли выберите команду меню Внешний вид Редактор (Appearance Editor).

вид ⇒ Редактор (Appearance ⇒ Editor). Откроется страница, которая

Откроется страница, которая содержит все страницы, стили, функции и практически каждый компонент темы.

каждый компонент темы. Совет С помощью этой области

Совет

С помощью этой области можно изменить любую тему Это очень гибкий способ, который позволяет опытным разработчикам выполнить дальнейшее расширение возможностей веб-сайта

возможностей веб-сайта В правой боковой панели

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

2. Выполнив изменения, нажмите кнопку Обновить файл (Update File), располо- женную в нижней части окна документа, чтобы обновить файл. Эта область предна- значена для опытных пользователей. Если вы намерены редактировать шаблоны, ре- комендуем настроить учетную запись FTP, чтобы получить возможность быстрого резервного копирования и внесения изме- нений.

4

В этой главе мы поговорим о страницах и сообщениях. Кроме того, мы
В этой главе мы поговорим о страницах и сообщениях. Кроме того, мы
В этой главе мы поговорим о страницах и сообщениях. Кроме того, мы
В этой главе мы поговорим о страницах и сообщениях. Кроме того, мы

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

текст, изображения, видео- и аудиофайлы.

Создание контента

и аудиофайлы. Создание контента • Создание страниц • Создание
и аудиофайлы. Создание контента • Создание страниц • Создание
и аудиофайлы. Создание контента • Создание страниц • Создание
и аудиофайлы. Создание контента • Создание страниц • Создание
и аудиофайлы. Создание контента • Создание страниц • Создание
и аудиофайлы. Создание контента • Создание страниц • Создание
и аудиофайлы. Создание контента • Создание страниц • Создание
и аудиофайлы. Создание контента • Создание страниц • Создание

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

Создание записей

Добавление текста

Добавление изображений

Добавление видео

Добавление HTML-кода

Добавление аудиофайлов

Создание рубрик

Слайдеры

• Создание рубрик • Слайдеры • Различия между страницами и

Различия между страницами и сообщениями

4. Создание контента

54

Различия между страницами и сообщениями

Чем отличаются страницы от сообщений в платформе WordPress? Это один из основных вопросов, задаваемых начинающими разработчика- ми о платформе WordPress, и ответ на него прост. После входа на свой сайт или в блог WordPress вы увидите в консоли два пункта меню: За- писи (Posts) и Страницы (Pages).

На изображении ниже показано расположение пунктов Записи (Posts) и Страницы (Pages) в консоли.

(Posts) и Страницы (Pages) в консоли. Записи Страницы Давайте
(Posts) и Страницы (Pages) в консоли. Записи Страницы Давайте

Записи

Страницы

Давайте рассмотрим основные различия между этими понятиями.

Что такое страница?

Если вы посетите главную страницу сайта, то увидите различные ссыл- ки, оформленные в виде меню, расположенного обычно в верхней части страницы. Среди них встречаются такие ссылки, как «Домой», «О нас», «Услуги», «Контакты» и т.д.

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

Например, если вы выберете пункт меню «Услуги», то перейдете к стра- нице, которая содержит сведения об услугах, предоставляемых компа- нией. То же можно сказать и о пунктах «Контакты» и др. Обычно каж - дая из ссылок представляет отдельную, специализированную страницу.

55

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

Например, страница «О нас» вряд ли будет меняться часто. Говоря про- стыми словами, можно сказать, что страницы вечны. Хотя база данных сервера хранит информацию о дате публикации страницы, вы скорее всего не увидите информацию о дате публикации ее содержимого.

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

в сервисе Facebook или Twitter. Кроме того, на страницах отключены комментарии.

Что такое запись?

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

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

в своих социальных профилях. При просмотре записей вы увидите следующую информацию:

заголовок записи;

рубрика;

автор;

дата публикации.

• автор; • дата публикации. На заметку RSS буквально означает

На заметку

RSS буквально означает «очень простое распростра- нение» (от англ Really Simple Syndication) Это технология, которая позволяет достав- лять список заголовков, уве- домлений об обновлениях и иногда контента широкому кругу пользователей

4. Создание контента

56

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

Процесс создания страниц в платформе WordPress весьма прост. Чтобы создать страницу, выполните следующие действия.

1. Перейдите на веб-сайт или блог WordPress и авторизуйтесь с учет- ной записью администратора.

2. В консоли установите указатель мыши поверх пункта меню Стра- ницы (Pages). Откроется список, содержащий два пункта: Все стра- ницы (All Pages) и Добавить новую (Add New). Выберите команду Добавить новую (Add New).

команду Добавить новую (Add New). Команда Добавить новую 3.

Команда

Добавить новую

3. Откроется новое окно, в котором можно указать название новой страницы и добавить ее контент. На изображении ниже в редакторе показана страница «Моя первая страница» и ее текст.

«Моя первая страница» и ее текст. Заголовок Визуальный редактор 4.

Заголовок

Визуальный

редактор

4. Нажмите кнопку Опубликовать (Publish), расположенную в правой части окна, чтобы опубликовать страницу. После этого новая стра- ница станет доступна на веб-сайте. Нажав кнопку Сохранить (Save Draft), можно сохранить страницу в виде черновика. При желании

57

нажмите кнопку Просмотреть (Preview), чтобы просмотреть теку- щую страницу.

Сохранение

страницы

страницу. Сохранение страницы Просмотр страницы Публикация

Просмотр

страницы

Публикация

страницы

страницы Публикация страницы Совет Вы можете сохранить стра-

Совет

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

5. Сейчас, если вы выберете пункт меню Страницы Все страницы (Pages All Pages), то увидите, что созданная страница была до- бавлена к списку страниц сайта/блога, как это показано на рисунке ниже.

сайта/блога, как это показано на рисунке ниже. Ваша страница

Ваша страница

4. Создание контента

58

Создание записей

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

1. Перейдите в консоль блога и установите указатель мыши поверх пункта меню Записи (Posts). Справа появится раскрывающийся список. Выберите в нем команду Добавить новую (Add New).

команду Добавить новую (Add New). На заметку Постарайтесь

На заметку

Постарайтесь сохранять резервные копии страниц и записей на своем компью- тере в документах Word или текстовых документах

Word или текстовых документах 2. В появившемся окне введите в

2. В появившемся окне введите в соответствующие поля название записи и текст записи. В данном примере заголовок записи «Моя первая запись» находится перед текстом «Немного текста для моей первой записи. Удачного дня!» в визуальном редакторе.

дня!» в визуальном редакторе. 3. При желании опубликовать

3. При желании опубликовать запись можно, нажав кнопку Опуб- ликовать (Publish), расположенную справа там же, где находится аналогичная кнопка публикации страницы. Здесь же находятся кнопки Сохранить (Save Draft) и Просмотреть (Preview).

Здесь же находятся кнопки Сохранить (Save Draft) и Просмотреть (Preview).

59

Добавление текста

Добавить текст в запись или на страницу очень просто. Узнав, как со- здавать страницы и записи, вы готовы перейти к добавлению контента.

1. Давайте начнем с загрузки только что созданной записи. Выберите пункт меню Записи (Posts), а затем щелкните мышью по ссылке Моя первая запись.

по ссылке Моя первая запись . Давайте взглянем на редактор еще

Давайте взглянем на редактор еще раз. На изображении выше можно заметить, что бόльшая часть страницы выделена под визуальный ре- дактор. С его помощью можно добавлять изображения и текст. Вскоре мы перейдем к добавлению изображений, но в настоящий момент за- острим внимание на тексте. Вы можете вставить текст в поле редактора так же, как в обычном текстовом редакторе. Редактор имеет две вклад- ки: Визуально (Visual) и Текст (Text) (см. изображение ниже).

Текст (Text) (см. изображение ниже). 2. Убедитесь, что выбрана вкладка

2. Убедитесь, что выбрана вкладка Визуально (Visual). Вкладка Текст (Text) используется только в тех случаях, когда вы собираетесь до- бавить пользовательский HTML-код (см. главу 3).

3. Добавьте текст в поле.

пользовательский HTML-код (см. главу 3). 3. Добавьте текст в поле.

4. Создание контента

60

Над визуальным редактором находится панель инструментов, показан- ная на изображении ниже. С ее помощью можно настроить формати- рование записи. Например, использовать начертание Жирный (Bold), вставить горизонтальную линию или ссылку и т.п.

линию или ссылку и т.п. Совет Панель инструментов

Совет

Панель инструментов замечательно подходит для форматирования текста в платформе WordPress

текста в платформе WordPress Панель инструментов Ниже

Панель инструментов

Ниже представлены все кнопки панели инструментов.

все кнопки панели инструментов. 1 2 3 4 5 6 7 8 9 10 11 12

1

2

3

4

5

6

7

8

9

10

11

12

13

14

1.

Жирный (Bold).

 

2.

Курсив (Italic).

3.

Перечеркнутый (Strikethrough).

 

4.

Маркированный список (Bullet Point List).

 

5.

Нумерованный список (Numbered List).

6.

Цитата (Block Quote) (в каждой теме отображается по-разному).

7.

Горизонтальная линия (Horizontal Line).

 

8.

По левому краю (Align Text Left).

 

9.

По центру (Center Text).

 

10.

По правому краю (Align Text Right).

 

11.

Вставить/изменить ссылку (Insert Link).

 

12.

Удалить ссылку (Unlink).

 

13.

Вставить тег «Далее» (Insert More Tag).

 

61

61 С правой стороны панели инструментов находится значок. Он

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

При нажатии кнопки Показать/скрыть панель инструментов (Enables Second Row of Toolbar) откроется второй ряд инструментов (показан- ный на изображении ниже), которые также можно использовать для форматирования текста.

для форматирования текста. 1 2 3 4 5 6 7 8 9 10 11 12 Функции

1

2

3

4

5

6

7

8

9

10

11

12

Функции дополнительной панели инструментов.

панели инструментов. На заметку Обе панели

На заметку

Обе панели инструментов могут отображаться автома- тически Все зависит от на- стройки платформы

1. Этот раскрывающийся список позволяет выбрать один из несколь- ких стилей текста.

2. Подчеркивание текста.

3. Выравнивание текста по ширине.

4. Изменение цвета текста.

5. Вставка текста.

6. Сброс форматирования выделенного фрагмента текста.

7. Добавление специальных символов.

8. Уменьшение отступа.

9. Увеличение отступа.

10. Отмена последнего действия.

11. Повтор последнего действия.

12. Отображение сочетаний клавиш.

После изменения форматирования текста с помощью визуального редактора вы можете просмотреть конечный код. Выберите вкладку Текст (Text). Отобразится HTML-код текста и связанного с ним фор- матирования.

с ним фор- матирования. Визуальный редактор Текстовый
с ним фор- матирования. Визуальный редактор Текстовый

Визуальный

редактор

Текстовый

редактор

редактор Текстовый редактор На заметку Не обладая навыками

На заметку

Не обладая навыками рабо- ты с HTML-кодом, не добав- ляйте код вручную

4. Создание контента

62

Добавление изображений

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

на страницы очень просто. Кнопка для добавления

Кнопка для добавления мультимедийных файлов

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

1. Сначала на странице щелкните мышью по месту, в котором вы хоти- те разместить изображение. Нажмите кнопку Добавить медиафайл (Add Media). Появится окно, содержащее две вкладки.

Загрузить файлы (Upload Media). Здесь вы можете загрузить мультимедийные файлы, сохраненные на вашем компьютере.

Библиотека файлов (Media Library). Эта вкладка позволяет вы- брать мультимедийные файлы, уже загруженные в платформу WordPress.

63

63 Кнопка для выбора файлов 2. Перетащите свои мультимедийные файлы

Кнопка для выбора файлов

2. Перетащите свои мультимедийные файлы в это окно или нажмите кнопку Выберите файлы (Select Files). Откроется диалоговое окно, с помощью которого можно выбрать мультимедийные файлы, рас- положенные на вашем компьютере.

положенные на вашем компьютере. Загруженные изображения будут

Загруженные изображения будут автоматически добавлены в библио- теку файлов.

4. Создание контента

64

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

окна отобразятся его параметры. Совет Атрибут Alt — прекрасный

Совет

Атрибут Alt — прекрасный способ добавить текстовое описание, которое с помо- щью программ экранного доступа смогут услышать пользователи с недостатка- ми зрения

с недостатка- ми зрения Заголовок (Title). Укажите заго-

Заголовок (Title). Укажите заго- ловок для этого изображения.

Подпись (Caption). Эта подпись будет отображаться при уста- новке указателя мыши поверх изображения.

Атрибут alt (Alt Text). Если изо- бражение не будет загружаться на сайте, вместо него будет по- казан данный текст. Это эффек- тивный способ указать поиско- вой системе Google тему вашей страницы, которая будет исполь- зоваться в рейтинге поиска.

Описание (Description). Описа- ние изображения.

Выравнивание (Alignment). Определяет, как изображение должно быть выровнено на стра- нице: Слева (Left), Справа (Right) или По центру (Center).

Ссылка (Link To). Вы можете свя- зать изображение с любым мульти- медийным файлом, URL-адресом или прикрепленной страницей.

Размер (Size). Выберите размер изображения. Если оно слишком большое, возможно, потребуется использовать вариант меньшего размера.

4. Когда вы будете готовы добавить изображение на страницу или в запись, нажмите кнопку Вставить в запись (Insert into post).

Кроме того, вы можете выбрать изображение из библиотеки, которая содержит все изображе- ния, загруженные ранее на сайт. Мультимедийный файл будет вставлен на страницу.

ранее на сайт. Мультимедийный файл будет вставлен на страницу.

65

Добавление видео

Вы будете удивлены тому, как легко добавить видеоролик, размещен- ный на видеохостинге YouTube, на ваш сайт WordPress. Сегодня видео становится все популярнее, и видеоблоги набирают последователей в свои ряды.

1. Скопируйте URL-адрес видеоролика с сайта YouTube в своем браузере.

с сайта YouTube в своем браузере. 2. Создайте или откройте страницу

2. Создайте или откройте страницу или запись, в которую вы хотите вставить видео.

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

видео моментально отобразится. 4. Нажмите кнопку Опубликовать

4. Нажмите кнопку Опубликовать (Publish) или Обновить (Update). Теперь видео появилось на вашей странице или в записи.

(Update). Теперь видео появилось на вашей странице или в записи.

4. Создание контента

66

Добавление HTML-кода

Если вы знакомы с языком HTML, то сможете добавить соответствую- щий код на свои страницы или в записи. HTML-код — это прекрасный способ расширить функциональность или изменить стиль ваших веб- страниц.

1. Откройте страницу или запись.

1. Откройте страницу или запись. Вкладка Текст 2. Перейдите на

Вкладка Текст

2. Перейдите на вкладку Текст (Text), как это показано на изображе- нии выше.

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

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

Если вы уже создали контент, например добавили или отформатирова- ли текст, то здесь вы должны увидеть HTML-код. Он был создан авто- матически при добавлении контента в визуальный редактор.

67

67 При желании в этом окне вы можете ввести собственный код. Не вол-

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

Ссылки

<a href ="http://www.thewebday.com">Моя ссылка</a>

Этот код создает ссылку на страницу «Моя ссылка», которая будет свя- зана со страницей http://www.thewebday.com.

Цвет текста

<span style="color: blue;">Дом</span>

Этот код делает шрифт, которым написано слово «Дом», синим.

Выравнивание текста

<p style="text-align: center;">Привет</p>

Этот код выравнивает слово «Привет» по центру.

Список элементов

<ul>

<li>Молоко</li>

<li>Яйца</li>

</ul>

Этот код создает маркированный список из двух элементов: «Молоко» и «Яйца».

4. Создание контента

68

Добавление аудиофайлов

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

1. Откройте страницу или запись, в которую вы хотите вставить аудиофайл.

2. Нажмите кнопку Добавить медиафайл (Add Media) в верхней части страницы.

(Add Media) в верхней части страницы. Кнопка Добавить медиафайл 3.

Кнопка Добавить медиафайл

3. Выделите аудиофайл, который вы хотите загрузить со своего ком- пьютера.

На экране появятся параметры файла, подобно тому как это было с изо- бражением.

как это было с изо- бражением. 4. Добавьте заголовок и описание.

4. Добавьте заголовок и описание.

5. Убедитесь, что выбрали пункт Вста- вить медиаплеер (Embed Media Player) в раскрывающемся списке.

6. Щелкните мышью по кнопке Вставить в запись (Insert into Post).

69

Создание рубрик

Записи могут быть объединены в рубрики или подрубрики. Обычно рубрики используются для группирования записей. Например, в своем блоге вы можете создать рубрику «Веб-разработка» и добавлять в нее все записи, связанные с веб-разработкой. Если не создавать рубрику, то все записи будут добавляться в рубрику Без рубрики (Uncategorized). Создание рубрики происходит просто.

1. Выберите пункт меню Записи Рубрики (Posts Categories), как показано на следующем изображении.

на следующем изображении. 2. Откроется новое окно, с помощью

2. Откроется новое окно, с помощью которого вы сможете добавить сведения о новой рубрике.

сведения о новой рубрике. 3. Введите название новой

4. Создание контента

70

4. Введите в поле Ярлык (Slug) значение, которое является URL-версией названия рубрики. Обычно оно содержит только латинские буквы

в нижнем регистре, цифры и дефисы. Не используйте пробелы.

5. Выберите пункт Нет (None) в раскрывающемся списке Родитель-

ская (Parent), поскольку это ваша первая рубрика. Вы можете вы- брать другой пункт, только если создаете подрубрику. Например, если вы уже создали рубрику «Игровые консоли» и создаете подруб- рику «Xbox», то тогда вы сможете выбрать пункт Игровые консоли

в раскрывающемся списке Родительская (Parent).

6. Наконец, нажмите кнопку Добавить новую рубрику (Add New Cate- gory) в нижней части окна, чтобы добавить новую рубрику. В списке рубрик справа появится новая рубрика.

справа появится новая рубрика. Добавление записи в рубрику При

Добавление записи в рубрику

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

список созданных вами рубрик. Все, что от вас требуется, —

Все, что от вас требуется, — установить нужный флажок, и запись ото- бразится в соответствующей рубрике. Этот этап очень важен при созда- нии структурированного сайта.

Вы можете также создать рубрику прямо во время добавления записи, нажав кнопку +Добавить новую рубрику (+Add New Category) в обла- сти Рубрики (Categories).

71

Слайдеры

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

1. В меню консоли выберите команду Плагины Добавить новый (Plugins Add New).

⇒ Добавить новый (Plugins ⇒ Add New). Совет Обычно слайдеры распо-

Совет

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

2. Введите Soliloquy Lite в поле поиска и нажмите клавишу Enter.

поиска и нажмите клавишу Enter . 3. Нажмите кнопку Установить

3. Нажмите кнопку Установить (Install Now), а затем — ссылку Акти- вировать плагин (Activate).

Обратите внимание на то, что среди ссылок консоли появился пункт Soliloquy.

консоли появился пункт Soliloquy . 4. Выберите команду меню Soliloquy ⇒

4. Выберите команду меню Soliloquy Add New (Soliloquy Доба- вить новый), чтобы приступить к созданию слайдера.

приступить к созданию слайдера. 5. Для начала добавьте заголовок

4. Создание контента

72

з д а н и е к о н т е н т а 72 Совет

Совет

По умолчанию слайдеры плагина Soliloquy имеют размер 960×300 пикселов Размер можно изменить в настройках плагина (см далее в этой главе) Обя- зательно проверьте, что размеры, указанные в плаги- не, совпадают с размерами изображений

с размерами изображений На заметку Вы можете добавить

На заметку

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

6. Теперь давайте добавим изображения. Нажмите кнопку Select Files (Выбрать файлы) или просто перетащите файлы изображений в вы- деленную область страницы.

в вы- деленную область страницы. Кнопка для выбора изображений 7.

Кнопка для выбора изображений

7. Загрузите фотографии, как это было показано в главе 4. После вы- бора изображений они отобразятся в нижней части экрана и будут готовы к публикации.

и будут готовы к публикации. 8. Нажмите кнопку Опубликовать

8. Нажмите кнопку Опубликовать (Publish), чтобы добавить слайдер на веб-сайт.

9. После нажатия кнопки Опубликовать (Publish) вы должны увидеть короткий код, как это показано на следующем изображении. Если он не появился, получить его можно, выбрав в консоли команду меню Soliloquy Soliloquy.

получить его можно, выбрав в консоли команду меню Soliloquy ⇒ Soliloquy .

10.

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

73

в поле визуального редактора. 73 11. Нажмите кнопку Опубликовать

11. Нажмите кнопку Опубликовать (Publish) или Обновить (Update).

(Publish) или Обновить (Update). 12. Посетив страницу, вы увидите,

12. Посетив страницу, вы увидите, что на ней появился слайдер.

что на ней появился слайдер. 13. Теперь мы добавим текст к

13. Теперь мы добавим текст к слайдеру. Выберите в консоли команду Soliloquy Soliloquy и щелкните мышью по слайдеру в списке.

мышью по слайдеру в списке. Выберите слайдер 14. Сейчас вам

Выберите слайдер

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

щелкнуть мышью по кнопке в виде каран- даша рядом с изображением.

4. Создание контента

74

15. Откроется форма, похожая на ту, которая показана на следующем изображении.

на следующем изображении. Совет Постарайтесь использовать

Совет

Постарайтесь использовать короткий, но содержатель- ный текст для слайдов Все, что вам нужно, — подать информацию, которая вызвала бы у пользователя желание посетить соответ- ствующую страницу

соответ- ствующую страницу • Title (Название). Введите

Title (Название). Введите название изображения.

Alt Text (Замещающий текст). Этот текст будет отображаться, если изображение не удастся загрузить.

Caption (Подпись к изображению). Введите подпись к кон- кретному слайду.

URL (Гиперссылка). Укажите ссылку, по которой перейдет пользователь, если щелкнет мышью по слайду.

Open Link in New Window? (Открывать ссылку в новом окне?) Установите этот флажок, если хотите, чтобы браузер открывал ссылку в новой вкладке.

16. Не забудьте нажать кнопку Save Metadata (Сохранить метаданные). Повторите процесс для всех слайдов.

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

потребуется делать это еще раз. При желании вы можете также

При желании вы можете также добавить в редакторе PHP-код в файлы своей темы, как это было описано в главе 3.

75

Настройка плагина Soliloquy Slider

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

выполните следующие действия. 1. В консоли выберите пункт меню

1. В консоли выберите пункт меню Soliloquy Soliloquy и выберите свой слайдер в списке.

и выберите свой слайдер в списке. 2. Перейдите на вкладку Config

2. Перейдите на вкладку Config (Конфигурация).

на вкладку Config (Конфигурация). Вкладка Config На следующем

Вкладка Config

На следующем изображении показаны некоторые из параметров, кото- рые вы можете изменить.

показаны некоторые из параметров, кото- рые вы можете изменить.
На заметку Символом * помечены функ- ции, доступные в платной

На заметку

Символом * помечены функ- ции, доступные в платной версии плагина Soliloquy

Slider Theme (Тема слайдера). Выберите одну из двух основных тем слайдера: Base (Основная) или Classic (Классическая).

Slider Dimensions (Размеры слайдера). Укажите размеры слайде- ра — высоту и ширину.

Slider Transition (Тип перехода в слайдере). Вы можете также ука- зать тип перехода между слайдами. Выберите один из трех вариан- тов: fade (выцветание), scroll horizontal (прокрутка по горизонта- ли)* или scroll vertical (прокрутка по вертикали)*.

Slider Transition Speed (Скорость перехода). Этот параметр отве- чает за длительность перехода от одного слайда к другому (время указывается в миллисекундах).

К другим параметрам относятся следующие.

Slider Gutter (Положение слайдера). Определяет положение слайде- ра на странице.

Mobile Dimensions (Размеры для мобильных устройств)*. Плагин Soliloquy прекрасно подходит для отображения слайдов на различ- ных устройствах. С помощью этого параметра вы можете указать размер слайдера для просмотра в мобильных устройствах.

Autostart Slider (Автозапуск слайдера)*. Если данный параметр ак- тивен, слайдер запустится автоматически при загрузке страницы. Однако, если вы отключите его, пользователю придется вручную переходить от одного слайда к другому.

Pause on Hover (Пауза при наведении указателя мыши)*. По умол- чанию этот параметр отключен. Однако, если вы хотите, чтобы воспроизведение слайдов прекращалось, когда пользователь уста- навливает указатель мыши поверх слайдера, активируйте данный параметр.

Loop Slider (Зациклить слайдер)*. При включении данного параме- тра слайды будут воспроизводиться непрерывно в виде цикла. При отключении — воспроизведение прекратится на последнем слайде.

5

5 Использование плагинов В этой главе вы познакомитесь с

Использование

5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с

плагинов

5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с
5 Использование плагинов В этой главе вы познакомитесь с

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

и даже редактировать плагины.             Поиск и
       
   

Поиск и установка плагинов

 
•

Загрузка плагина

•

Установленные плагины

Обновление плагинов

•
 

 

Рекомендуемые плагины

•

Редактор плагинов

5. Использование плагинов

78

Поиск и установка плагинов

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

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

1. В меню консоли выберите команду Плагины Добавить новый (Plugins Add New).

⇒ Добавить новый (Plugins ⇒ Add New). Совет Вы также можете выбрать

Совет

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

в нижней части страницы 2. Откроется страница с окном

2. Откроется страница с окном поиска, с помощью которого можно найти нужный вам плагин по словам, имеющим к нему отноше- ние. Например, если вы ищете плагин, с помощью которого можно настроить форму для обратной связи, введите сочетание «contact form» и нажмите клавишу Enter.

сочетание «contact form» и нажмите клавишу Enter . Поле поиска Категории
сочетание «contact form» и нажмите клавишу Enter . Поле поиска Категории

Поле поиска

сочетание «contact form» и нажмите клавишу Enter . Поле поиска Категории

Категории

79

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

3. В результатах поиска вы увидите несколько плагинов, связанных с формами для обратной связи. Большинству из них присвоен рей- тинг, который позволяет выбрать лучший из них. Выбрав ссылку Детали (More Details), можно прочитать подробные сведения о кон- кретном плагине.

сведения о кон- кретном плагине. На заметку Плагинов сотни

На заметку

Плагинов сотни Выбирайте внимательно Обзоры — лучший способ не ошибить- ся в выборе

способ не ошибить- ся в выборе Кнопка Установить Ссылка

Кнопка Установить

Ссылка Детали

Откроется окно с информацией о плагине, подробными сведениями о его установке и снимками экрана.

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

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

5. Использование плагинов

80

о в а н и е п л а г и н о в 80 Кнопка
о в а н и е п л а г и н о в 80 Кнопка

Кнопка Установить

6. Выбрав плагин, нажмите кнопку Установить (Install Now) либо на стра- нице с результатами поиска, либо в окне со сведениями о плагине.

7. После установки плагин должен предоставить вам возможность своей активации.

вам возможность своей активации. Кнопка Активировать плагин 8.

Кнопка Активировать плагин

8. Если вы случайно закрыли страницу до активации плагина, выбе- рите пункт меню Плагины Установленные (Plugins Installed Plugins), найдите нужный плагин и щелкните мышью по ссылке Ак- тивировать (Activate).

81

81 Ссылка активации плагина С этого момента у каждого плагина будет
81 Ссылка активации плагина С этого момента у каждого плагина будет

Ссылка активации плагина

С этого момента у каждого плагина будет свой способ настройки. Не- которым из них потребуется настройка в самом начале установки. Обычно, чтобы настроить плагин, необходимо выбрать пункт Уста- новленные (Installed Plugins) и нажать ссылку Изменить (Settings) под конкретным плагином.

Если на странице Установленные (Installed Plugins) вашего плагина нет, скорее всего, он находится в меню консоли или в пункте Настройки (Settings).

или в пункте Настройки (Settings). Поиск документации о плагине

Поиск документации о плагине

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

1. В меню консоли выберите пункт Плагины Установленные (Plug- ins Installed Plugins).

2. Щелкните мышью по ссылке Детали (View Details) выбранного пла- гина.

3. Перейдите на вкладку Установка (Installation). Большинство разра- ботчиков использует эту область в качестве справки по использо- ванию плагина или размещает на ней ссылку на сайт, содержащий полную документацию к плагину.

на ней ссылку на сайт, содержащий полную документацию к плагину.

5. Использование плагинов

82

о в а н и е п л а г и н о в 82 Внимание

Внимание

Убедитесь, что приобретае- те плагин у проверенного источника Прежде чем покупать плагин, почитайте отзывы о нем или поищите информацию о разработчике

Загрузка плагинов

Возможно, на каком-нибудь сайте вы найдете плагин для платформы WordPress, который захотите загрузить. Некоторые разработчики дают возможность опробовать упрощенную версию плагина, которую впо- следствии можно обновить до полной с расширенными возможностя- ми. Если вы загрузили или приобрели плагин из стороннего источника, загрузить файл (обычно с расширением .zip) довольно легко.

1. В меню консоли выберите команду Плагины Добавить новый (Plugins Add New).

⇒ Добавить новый (Plugins ⇒ Add New). 2. Нажмите кнопку Загрузить

2. Нажмите кнопку Загрузить плагин (Upload Plugin).

Загрузить плагин (Upload Plugin). Кнопка Загрузить плагин 3.

Кнопка Загрузить плагин

3. Укажите путь к файлу с расширением .zip, когда это потребуется. После загрузки или покупки плагина у вас должен быть файл с рас- ширением .zip, который предстоит загрузить. Нажмите кнопку Об- зор (Choose File) и найдите этот zip-файл, после чего нажмите кноп- ку Установить (Install Now).

кноп- ку Установить (Install Now). Кнопка Обзор Кнопка Установить

Кнопка Обзор

Кнопка Установить

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

83

Установленные плагины

С помощью страницы Установленные (Installed Plugins) можно про-

смотреть установленные в настоящий момент плагины, деактиви- ровать их или удалить. Попробуйте просмотреть все установленные плагины. Убедитесь, что деактивировали все, которые не используе- те, поскольку они могут замедлять работу вашего сайта или вступать в конфликт с другими плагинами. Чем больше будет становиться ваш сайт, тем, вероятно, больше плагинов вы будете использовать. Чтобы перейти к странице Установленные (Installed Plugins), выполните сле- дующие действия.

1. Выберите пункт меню