Файл: Создаем свой сайт на WordPress быстро.pdf

125
Первая публикация
Первая публикация
Для того чтобы освоить технологию публикации материалов на сайте,
рассмотримпроцесссозданияновойзаписи.Стоитотметить,чтоприн- ципы подготовки и редактирования записей и страниц практически
идентичны, поэтому нам достаточно будет научиться создавать новые
записи.
Чтобыприступитькподготовкеновойзаписи,выберитевменюпанели
управленияраздел
Записи
,авнем—подпункт
Добавить новую
(рис.5.4).
Рис. 5.4. Меню Записи
ОткроетсястраницасозданияновойзаписиWordPress,перваячастько- торойпредставленанарис.5.5.
Как видите, основная (левая) часть окна имеет интуитивно-понятный
интерфейс,вобщихчертахсхожийсMSWordидругимипопулярными
текстовымиредакторами.Работаснимнедолжнавызватьувасникаких
сложностей.
Впервуюочередьнеобходимоввестизаголовок(название)вашейпубли- кации.Заголовокжелательнонеделатьслишкомдлинным,обычноэто
несколько слов, отражающих суть размещаемого материала. Для пер- войзаписимыиспользуемфрагментвведенияизэтойкниги,назвавего
«ВведениевсозданиесайтовнаCMS».

126
Глава 5. Подготовка и публикация материалов
Рис. 5.5. Создание новой записи (начало)
Еслипослевводазаголовкавысохранитезапись(нажавкнопку
Сохранить

влевомблоке)илипростоподождетенекотороевремя,покаWordPress
автоматическинесохранитчерновик,топодполем
Заголовок
появится
новыйэлемент—
Постоянная ссылка
(рис.5.6).
Рис. 5.6. Для записи автоматически сформирована ссылка
НаосновевведенногозаголовкаWordPressавтоматическисгенерировал
постояннуюссылкудляновойзаписи,котораявыглядитследующимоб- разом:
http://wordpressbook.ru/2010/07/введение-в-создание-сайтов-на-cms

127
Первая публикация
Довольно странно видеть в составе гиперссылки русские слова, не так
ли?Причинойтого,чтосгенерированнаяссылкасодержиткирилличе- скиесимволы,являетсято,чтомыещенеустановилиспециальныйпла- гин
Rus-to-Lat
,окоторомужеупоминалосьвчетвертойглаве.Этотплагин
осуществляетавтоматическуютранслитерациюрусскихсловвзаголов- ках записей, страниц, рубрик и меток на латиницу, в результате чего
WordPress будет формировать постоянные ссылки в более привычном
виде,безкириллицы.
Можно,конечно,сохранитьитекущийвариантпостояннойссылки,но
втомслучае,когдавызахотитеподелитьсяссылкойнавашузапись,она
будетпреобразованавотвтакойдлинныйинекрасивыйURL-адрес:
http://wordpressbook.ru/2010/07/%D0%B2%D0%B2%D0%B5%D0%B4%D0%B5
%D0%BD%D0%B8%D0%B5-%D0%B2-%D1%81%D0%BE%D0%B7%D0%B4%D
0%B0%D0%BD%D0%B8%D0%B5-%D1%81%D0%B0%D0%B9%D1%82%D0%B-
E%D0%B2-%D0%BD%D0%B0-cms
Хотяупоминаемыйвышеплагинпокаещенеустановлен,мыужесей- час имеем возможность изменить сформированную гиперссылку, при- ведя ее в более воспринимаемый вид. Для этого нужно нажать кнопку
Изменить
рядом с указанным URL-адресом и ввести любое другое обо- значениессылки(рис.5.7).Вводитьновыйадрес,естественно,лучшена
латинице.Послечегонужнонажать
OK
Рис. 5.7. Изменение постоянной ссылки для записи
Отныне постоянная ссылка на нашу первую запись выглядит следую- щимобразом:
http://wordpressbook.ru/2010/07/intro-to-cms
ВНИМАНИЕ!
Заголовокзаписи,перенесенныйвURL-адрес,—следствие
того, что при настройках постоянных ссылок в предыдущей
главебылвыбраншаблон
http://mysite.ru/2010/06/28/sample- post
,где
sample-post
—этоназваниезаписи.

128
Глава 5. Подготовка и публикация материалов
Рис. 5.8. Короткая ссылка для записи
Визуальный редактор записей
Ниже,вполередактора(рис.5.9)надоввестиосновнойтекстзаписи(либо
вставитьпредварительноскопированныйматериал).
Каквыможетенаблюдать,текствокнередактораможнонетолькона- бирать,ноиформатировать.Причемформатированиеможетосущест- влятьсявдвухрежимах:режимевизуального редактора (вкладка
Визу- ально
,нарис.5.9представленрежимвизуальногоредактора)ирежиме
HTML-редактора
(вкладка
HTML
).
Рассмотрим подробнее инструменты визуального редактора (рис. 5.10).
Кнопка

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

•
применяетстиль курсив.Курсивтакжеиспользуется
для смысловых выделений, например для примечаний или ком- ментариев.
ПРИМЕЧАНИЕ
Послесохраненияновойзаписи(равнокакиприредактиро- ванииужесуществующейзаписи)вблоке
Постоянная ссылка

появитсяещеоднакнопка—
Получить короткую ссылку
.Эта
функцияневноситникакихизмененийвзаписьиявляется,ско- рее,справочнымэлементом.Посленажатиякнопкиоткроется
окно,вкоторомбудетуказанальтернативныйадресдлядан- ногоматериала,вшаблонедляпостоянныхссылокWordPress
поумолчанию:
http://mysite.ru/?p=1
.Длянашейпервойзаписи
такимадресомслужитссылка
http://wordpressbook.ru/?p=11

(рис.5.8),приэтомзаписьбудетдоступнапообоимадресам.

129
Первая публикация
Рис. 5.9. Ввод основного текста записи
Рис. 5.10. Панель инструментов визуального редактора
Кнопка

•
делаетвыделенныйтекстперечеркнутым:воттаким.
Это оправданно, когда автор хочет сообщить, например, личное
мнение в отличие от официальной трактовки; этот стиль распро- страненвличныхблогах.Скореевсего,выбудетпользоватьсяим
постояннодовольноредко.Другойспособиспользованияэтогости- ля—изменяемыесовременемдокументы,когдаавторхочетвы- делитьпроизведенныеимисправленияизамены.

130
Глава 5. Подготовка и публикация материалов
Команда

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

•
, правда, делая
приэтомсписокнумерованным.
Следующийинструмент

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

•
предназначенадля
выравнивания
выделенногофрагментаполевомукраю,поцентру
илипоправомукраю.
Кнопка

•
служитдлядобавлениявтекстматериалагиперссы-
лок
.Выделитенужныйфрагментинажмитекнопку
Вставить ссыл- ку
.Откроетсяокно(рис.5.11),вкоторомнужноввестиURL-адрес
изаголовок (всплывающую подсказку) для ссылки, а также вы- брать«цель»:открыватьстраницувтомжеиливновомокне.Па- раметр
Класс
отвечаетзавнешнееоформлениессылкииеголучше
оставитьвсостоянии
Не задано
Рис. 5.11. Добавление гиперссылки

131
Первая публикация
Соседняякнопка

•
удаляетгиперссылкуизвыделенногофраг- мента.
Следующаякнопка

•
добавляетвнеобходимомместематериа- ла тег «Далее». Назначение этого тега — разделить материал на
вступительнуюиосновнуючасть.Вступительнаячастьбудетвы- водиться в качестве анонса на главной странице, а для того что- быпрочитатьматериалполностью,посетителюнужнонажатьна
ссылку«Читатьполностью».Использованиеэтоготеганастоятель- норекомендовано,еслитолько,конечно,вашизаписинесостоятиз
1–2абзацев,которыенеимеетсмысладелить.
Кнопка

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

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

•
включаетотображениедополнительной
панели
,накоторойразмещенынетакчастоиспользуемыеинстру- ментыредактированиязаписей.Этапанельвыглядитследующим
образом(рис.5.12).
Рис. 5.12. Дополнительная панель инструментов
Рассмотрим также инструменты дополнительной панели визуального
редактора,посколькунапрактикепериодическивозникаетпотребность
вихиспользовании.
Кнопка

•
позволяет отформатировать выделенный
фрагменттекстаопределенным стилем.Обычноэтотинструмент
используют для выделения в тексте заголовков, для которых до- ступно шесть уровней и, соответственно шесть разных стилей.
Внешнийвидзаголовковидругихдоступныхвэтомменюстилей
(«Адрес»и«Отформатированный»)зависитотпараметровдизайн- темы,которуювыиспользуете.

132
Глава 5. Подготовка и публикация материалов
Кнопка

•
подчеркиваетвыделенныйфрагменттекста.
Кнопка

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

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

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

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

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

•
позволяетвставитьвзаписьмедиафайлформата,от- личногоотграфического,видеоилиаудио(дляработысэтими,наи- более распространенными медиафайлами используется отдель- ныйинструмент,окотороммыпоговоримчутьпозже).Даннаяже
ВНИМАНИЕ!
Янастоятельнорекомендуюдлякопированияматериалов,соз- данныхиразмеченныхвWord,использоватьименноэтуфунк- циюиневставлятьтекстобычнымспособом(

133
Первая публикация
функцияпозволяетдобавитьвзаписьмедиафайлыболееэкзоти- ческих типов, такие как анимацию в форматах Flash, Quicktime,
Shockwave,атакжепотоковоевидеоилиаудиовформатахWin- dows Media или Real Media. Соответствующий файл предвари- тельно должен быть загружен на сервер, и тогда в открывшемся
окне(рис.5.13)следуетвыбратьтипмедиаиуказатьпутькфайлу.
Существует возможность предварительного просмотра, а также
дополнительныхнастроекотображениянавкладке
Дополнительно
Рис. 5.13. Добавление в запись медиафайла
Кнопка

•
позволяет вставить в запись специальный символ,
который обычно не присутствует на клавиатуре, например, знак
копирайта ©. Нажатие кнопки открывает окно (рис. 5.14), в кото- ром можно выбрать нужный символ и нажать на него для встав- кивзапись.Дополнительно,принаведениикурсоравокнебудет

134
Глава 5. Подготовка и публикация материалов
отображатьсявнешнийвидсимвола,коддляеговставкиврежиме
HTML,атакжекоддлянаборасимволасклавиатуры.
Рис. 5.14. Вставка специального символа
Группа из двух следующих кнопок

•
предназначена для
увеличения или уменьшения абзацного отступа от левого края
страницы.
Две следующие кнопки

•
дают возможность отменить по- следнеедействиесзаписьюили,наоборот,повторитьего.
И наконец, последняя кнопка

•
предназначена для вызова не- большойсправочнойсистемыпоработесвизуальнымредактором,
вкоторойприведенадополнительнаяинформация,вчастностисо- четания«горячих»клавиш.
Работа в режиме HTML-редактора
Какужеговорилось,работатьсматериаламисайтаможнотакжеивре- жимеHTML-редактора,вкоторомформатыистили,применяемыектек- сту,включаютсяпрямовтелозаписиввидеспециальныхHTML-тегов.
Дляпереходакэтомурежимунужнонажатьнавкладку
HTML
вверхнем
правомуглуокна.Еслимыперейдемвэтотрежим,ужеимеянабранный
иотформатированныйтекст,тоувидим,чтовHTML-редакторесоздан- ныенамистилипреобразованывтеги(рис.5.15)

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

•
товWord,содержащихбольшоеколичествонестандартныхстилей,
«идеологически»правильнееигораздонадежнеевставитьтекст
врежимеHTML-редактора(приэтомонполностьюочищаетсяот
форматирования)иразметить«чистый»текствсоответствиисо
стандартами,принятыминавашемсайте.
Зачастуюприкопированииматериаловдругихсайтовиихвставке

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

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

136
Глава 5. Подготовка и публикация материалов
HTML-редакторнезаменим,когданужнореализоватьнестандарт-

•
нуювозможность,неподдерживаемуюинструментамивизуально- горедактора.Например,каквымоглиубедиться,егосредствами
невозможнодобавитьвзаписьтаблицу.
ТегиврежимеHTML-редактораможновводитьвручную,если,конеч- но,выснимизнакомы.Синтаксистиповоготегапростейший:начальная
часть(открывающийтег)—форматируемыйтекст—последняячасть
(закрывающийтег):
<тег>тексттег>
Например,текст
WordPress
,оформленныйстилем«курсив»,будетзаписан
врежимеHTML-редактораследующимобразом:
WordPress
либо
WordPress
Базовыхтегов,которыххватаетдлябольшинстватипичныхзадачфор- матирования,немного,иихлегкозапомнить.ВИнтернетевыбезтру- данайдетесправочнуюинформациюпоHTML-тегам,например,можно
воспользоваться вот этим удобным сайтом:
http://htmlka.com/text
, либо
следующимонлайн-справочником:
http://www.htmlbook.ru
Помимо ручного ввода тегов, для форматирования текста можно ис- пользоватьспециальныекнопкипанелиинструментов,которыеавтома- тическидобавляюттотилиинойтегдлявыделенногофрагмента.Надо
ПРИМЕЧАНИЕ
Теги

и

идентичны, оба обозначают курсив, и оба
будут работать. Такое дублирование встречается для не- которыхтегов.
СОВЕТ
ГлавноеправилопривводеHTML-теговвручную—незабы- ватьзакрыватьих,иначедействиетегавместоодногословаили
фразыраспространитсянавесьдокумент.Этаошибканастоль- кораспространена,чторазработчикиWordPressдажевывели
напанельинструментовспециальнуюкнопку«Закрытьтеги».