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

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

•
добавляет тег

(альтернативное написание —

),выделяющийтекстполужирнымначертанием.
Кнопка

•
добавляеттег

(альтернативноенаписание—

),
применяющийкурсив.
Кнопка

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

•
добавляеттег

,применяющийквыде- ленномутекстустиль«цитата».
Кнопка

•
добавляет тег

, перечеркивающий выделенный
текст.
Кнопка

•
добавляеттег

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


и

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

•
вставляетвзаписьтег

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

•
гов для отображения списков.
вводит нумерованный список,
—маркированныйсписок,а
формируетотступ,которым

138
Глава 5. Подготовка и публикация материалов
обычнооформляютсясписки.Тегами

и

необходиморазме- чатькаждуюстрочкусписка,а

оформляетвесьсписокцеликом.
Кнопка

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

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

•
не добавляет никаких тегов, а вызывает справоч- ную функцию, осуществляющую поиск заданного термина на
сайте
http://www.answers.com
. В общем-то, это довольно бесполез- наяфункция,несовсемпонятнодлячеговнедреннаявинтерфейс
HTML-редактора.
И последняя кнопка

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

139
Первая публикация
вкакуюкатегориюбудетотнесензагружаемыйфайл:изображение,ви- део,аудиоилипрочийтипмедиафайла(например,файлPDF).
Рассмотрим работу с медиафайлами на примере добавления в запись
изображения.Вполередактораустановитекурсорнатоместовзаписи,
куданужновставитькартинку,инажмитекнопку
Добавить изображение
.
Откроетсядиалоговоеокно(рис.5.18).
Рис. 5.18. Меню добавления изображения
В первую очередь необходимо загрузить файл на сервер. С помощью
первойвкладкивыможетезагрузитькартинкускомпьютера.Этоможно
сделатьврежимеflash-загрузчикалибоврежимезагрузчика-браузера,
функциональной разницы между ними нет, но flash-загрузчик может
работатьнестабильно,еслиуваснеоченьвысокаяскоростьинтернет- соединениялибовбраузереотключеноотображениефлеш-графики.На- жмитекнопку
Выберите файлы
ивыделитеодин(илинесколько)графи- ческийфайл(форматаjpg,gif,tiff,pngинекоторыхдругих)инажмите
OK
.Файлбудетотправленнасервер(рис.5.19),времязагрузкизависит
отразмерафайла.
ПРИМЕЧАНИЕ
Инструментыданнойпанеливомногомдублируютфункции
разделапанелиуправленияWordPress
Медиафайлы
,окотором
пойдетречьнемногопозже.

140
Глава 5. Подготовка и публикация материалов
Рис. 5.19. Файл start.png загружен на сервер
Послезагрузкиизображениявыможетеизменитьегозаголовок,атакже
добавитьподписи,описаниеиальтернативныйтекст(названиекартинки
для поисковых систем). В поле
Ссылка
при необходимости устанавлива- етсягиперссылканастраницу,открывающуюсяприкликенакартинку.
Этоможетбытьссылканаисходныйфайлнасервереилиссылканастра- ницускартинкой(дляавтоматическойвставкиэтихссылокнажмитена

141
Первая публикация
соответствующую кнопку), вы также можете указать ссылку вручную,
например,ссылкуназапись,вкоторуювставляетсякартинка.
Вразделе
Выравнивание
определяетсяотношениекартинкикосновному
текстузаписи,ипринеобходимостиможноустановить«обтекание»изо- бражениятекстомпоцентру,левомуилиправомукраю.Далее,можно
указатьразмер,вкоторомизображениебудетдобавленовзапись:ми- ниатюра,среднийилибольшойразмер,атакжеполныйразмер.
Есливыхотитедобавитькартинкувзаписьпозже,нажмитекнопку
Сохра- нить все изменения
,аеслисобираетесьдобавитьеепрямосейчас,то—
Вста- вить в запись
.Есливыпоошибкезагрузилинетотфайл,нажмитенассыл- ку
Удалить
,икартинкабудетудаленассервера.Вкачествеиллюстрации
продемонстрируем результат добавления изображения
start.png
в нашу
первуюзапись.Дляэтойкартинкибылауказанаподпись«Созданиесай- товнаCMS»иустановленавставкаминиатюры(150
× 150пикселов)слева
собтеканиемтекста.Результатвыможетенаблюдатьнарис.5.20.
Если вас не устраивает результат (например, установленные размеры
дляизображенияилиегорасположениевзаписи),этипараметрыможно
изменитьпрямоввизуальномредакторе(рис.5.21).
Используярамкувокругрисунка,можноизменитьегоразмерыилипе- реместитьвдругоеместозаписи.Кнопка
удаляетрисунокиззаписи
(нонессервера!),анажатиекнопки
вновьоткрываетдиалоговоеокно
загрузчикамедиафайлов,вкоторомвыможетеизменитьэтиидругие
параметрыотображениярисунка.
Крометого,отредактироватьотображениекартинкиможноиврежиме
HTML-редактора,внесяизменениявтеги,отвечающиезавыводизобра- жения.
ПРИМЕЧАНИЕ
Как вы видите, полный путь к файлу на сервере имеет вид
http://mysite.ru/wp-content/uploads/2010/07/mypic.png
.Этояв- ляетсяследствиемтого,чтовнастройкахWordPressвразделе
«Настройки медиафайлов», мы установили путь
wp-content/
uploads
,атакжеактивировалиопцию«Помещатьзагруженные
мнойфайлывпапкипомесяцуигоду».

142
Глава 5. Подготовка и публикация материалов
Рис. 5.20. Изображение добавлено в запись
Рис. 5.21. Изменение параметров рисунка

143
Первая публикация
Как вы помните, картинку можно добавить не только путем загрузки
файланасервер,поэтомурассмотримостальныедваспособа.Дляэто- гонамнужновернутьсянашагназадиснованажатькнопку
Загрузить изображение
напанелиуправлениямедиафайлами.Воткрывшемсяокне
перейдемнавкладку
С сайта
(рис.5.22).
Рис. 5.22. Добавление изображения с внешнего сайта
Окно добавления внешней картинки практически идентично окну на
вкладке
С компьютера
,заисключениемтого,чтоотсутствуетзагрузчик
файлов,ноприсутствуетполе
Адрес (URL)
,вкотороенеобходимоввести
полныйпутьквнешнемуфайлу.
СОВЕТ
Чтобыузнатьадрескартинки,щелкнитепонейправойкнопкой
мышиивыберитепункт
Свойства
.Воткрывшемсяокнебудет
указанполныйURL-путькфайлу,этотпутьнеобходимоско- пировать.Крометого,многиесовременныебраузерыпозволяют
скопироватьпутьккартинкеводинклик,например,вMozilla
Firefoxдляэтогосуществуетпунктконтекстногоменю
Копи- ровать ссылку на изображение

144
Глава 5. Подготовка и публикация материалов
Послевводаобязательной(помеченазвездочками)идополнительной
информацииивыборапараметровотображениярисунканажмитекноп- ку
Вставить в запись
Третийспособдобавитьизображениевзапись—использоватьужеза- груженную ранее картинку. Для этого в диалоговом окне загрузки ме- диафайловнеобходимоперейтинавкладку
Галерея
(рис.5.23).
Наоткрывшейсястраницевыберитенужноевамизображение,нажавна
ссылку
Показать
встолбце
Действия
.Послеэтогооткроетсяокно,анало- гичноерис.5.19,действияскоторыммыужерассматриваливыше.Что- быдобавитькартинкувзапись,действуйтепоаналогии.
ПРИМЕЧАНИЕ
Хотявставкавзаписиизображений,размещенныхнадругих
сайтах, проста и даже более удобна, чем загрузка файлов
скомпьютера,данныйспособнеявляетсяэтичнымпоотноше- ниюквладельцамдругихресурсов.Этотметоддажеполучил
собственноеназвание,носящеенегативныйоттенок—хот-
линкинг
.Во-первых,спозицийавторскогоправаиспользовать
чужоеизображениебезразрешения—незаконно.Нонаэтот
аспект в эру современного интенсивного информационного
обменачащевсегоужениктонеобращаетвнимание,только
еслинасайте-источникеявнымобразомнеуказано,чтоис- пользоватьизображениязапрещено.Носуществуетивторой
аспект—добавляяссылкунавнешнююкартинку,вытаким
образомсоздаетедлясервера,накоторомонарасположена,
дополнительную нагрузку за счет посетителей вашего сай- та, которые будут загружать страницу с этой картинкой.
Этосовершеннонеэтично,поэтомуправильнеебудетсперва
сохранить нужное вам изображение на компьютер, а потом
загрузитьегонасвойсерверпопервомуописанномувэтой
главеметоду.
ВНИМАНИЕ!
Вкладка
Галерея
будетотображатьсявдиалоговомокнетоль- ко в том случае, если вы загрузили на сервер хотя бы один
файл,причемсделалиэтоврежимеработыстекущейзаписью
(тоесть«прикрепили»егокзаписи).Чтобыиспользоватьлюбой
файл с сервера, без привязки к текущей записи, выбирайте
соседнюювкладку—
Библиотека файлов

145
Первая публикация
Рис. 5.23. Вставка картинки из галереи сайта
Крометого,наэтойстраницесуществуетвозможностьзагрузитьвза- пись сразу несколько изображений — так называемую галерею. В на- стройках галереи выберите количество столбцов, порядок сортировки
рисунковинажмитекнопку
Вставить галерею
.Есливгалереюнужнодо- бавитьневсезагруженныеизображения,аизбранные,нажмитенассыл- ку
Все вкладки: Показать
,послечегоскройтекартинки,которыененуж- новключатьвгалерею.Порядокрасположенияизображенийвгалерее
можноизменитьметодомперетаскиваниякартиноквтаблице,атакже

146
Глава 5. Подготовка и публикация материалов
воспользовавшисьссылкамигруппы
Порядок
.Результатдобавленияга- лереивзаписьпоказаннарис.5.24.
Рис. 5.24. В запись добавлена галерея изображений
Последняя вкладка —
Библиотека файлов содержит файлы всех ти- пов, загруженные на сервер, вне зависимости от их типа и привязке

147
Первая публикация
к конкретной записи. Если вы предварительно уже загрузили на сайт,
например, видеофайл, то его можно добавить в запись прямо из этого
окна,невозвращаяськпанелиуправлениямедиафайлами(см.рис.5.17).
В окне добавления нового изображения (см. рис. 5.19) есть еще одна
функция,окотороймынерассказали,—встроенныйграфическийре- дактор,позволяющийвыполнятьпростейшиеоперациисзагруженны- ми изображениями прямо на сервере. Обычно графические файлы го- товятсякпубликацииещедозагрузкинасайт,дляэтогоиспользуется
любойредактор(отAdobePhotoshopдоXnView),вкоторомможноизме- нитьразмерыкартинки,отмасштабироватьее,добавитьновыеэлемен- ты,изменитьцветовуюгаммуипровестидругиенеобходимыеоперации.
Ноесливыпокаким-топричинамэтогонесделали,внестиизменения
в загруженное изображение можно силами графического редактора
WordPress. Для его запуска нажмите кнопку
Редактировать
, после чего
откроетсяследующееокно(рис.5.25).
Рис. 5.25. Графический редактор WordPress

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

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

•
осуществляют поворот рисунка против часовой
стрелкиипочасовойстрелке.
Спомощьюкнопок

•
можноосуществитьзеркальноеразво- рачиваниеизображенияповертикалиилипогоризонтали.
Кнопки

•
отменяютилиповторяютпоследнеесовершенное
срисункомдействие.
Мы рассмотрели процесс загрузки и вставки в запись изображений.
Принципы работы с остальными типами медиафайлов, доступными на
панелиуправлениямедиафайлами(см.рис.5.17),абсолютноидентичны.
Единственноеразличиесостоитвтом,чтоаудио-,видео-ипрочиемедиа- файлынельзяредактироватьименятьихразмерыдлявставкивзапись.
Загрузка медиафайлов по FTP
Существует также и традиционный способ добавления в записи изо- браженийиссылокнадругиетипымедиафайлов.WordPressневсегда
ВНИМАНИЕ!
Редактироватьможнотолькозагруженноенасерверизображе- ние,длякартиноксостороннихсайтовграфическийредактор
неможетбытьзадействован.
СОВЕТ
В отличие от изображений файлы аудио- и видеоформатов,
загружаемые на сервер, не отображаются в своем исходном
видеивставляютсявзаписьввидеобычнойгиперссылкидля
скачиванияфайла.Поэтойпричинедляпомещениявзапись,
например,видеопредпочтительнееиспользоватьсервистипа
YouTube,добавляяHTML-коддляотображениявидеоплеера,
проигрывающеговашролик.

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

дляееотображениявзаписи.
Многие разработчики до сих пор используют именно этот способ для
загрузкиизображенийипрочихпубличныхфайлов,даженесмотряна
наличиеудобныхинструментовдляуправлениямедифайлами,появив- шихсявпоследнихверсияхWordPress.
ВамужезнакомпроцессзагрузкифайловпопротоколуFTP,посколь- куименнотакимспособоммызакачивалислужебныефайлыWordPress
дляустановкиCMS(см.главу3).Аналогичнымобразом,используя,на- пример,программуTotalCommander,выможетезагрузитьнужноеизо- бражениевпубличнуюдиректориюсвоегосайта(
httpdocs
,
public_html
или
www
).Можноиспользоватьвкачествепапкиназначениятужедирек- торию
wp-content/uploads
,вкоторуюзакачиваютсяфайлыприиспользо- ваниязагрузчикаWordPress,либосоздатьновуювкорневомкаталоге
сайта,например
public_files
Впоследнемслучаепутькзагруженномунамиизображению
mypic.jpg
бу- детвыглядетькак
http://mysite.ru/public_files/mypic.jpg
,идляотображения
еговзаписиврежимеHTML-редакторанужнодобавитьследующийкод:
Дляэтогоможноиспользоватькнопку
img
панелиинструментовHTML- редакторалибоввестиеговручную.
Соответственно, для вставки в запись ссылки на загрузку PDF-доку- мента
myfile.pdf
взаписьнужнодобавитьследующийкод(вручнуюили
используякнопку
link
):
файл,
где
файл
—произвольныйтекст,которыйбудетотображатьсяввидеги- перссылки.
Определение рубрик и меток для записи
После того как вы ввели текст новой записи, отформатировали его
и добавили при необходимости изображения или другие медиафайлы,

150
Глава 5. Подготовка и публикация материалов
основную работу по подготовке публикации можно считать сделанной.
Нодлятогочтобыматериалынасайтебылиструктурированы,необхо- димоназначитьдляновойзаписирубрикииметки.
Чемотличаетсярубрикаотметки?
Рубрика
— это тематическая категория публикации, обычно каждая
записьопределяетсятольководнурубрику(можноназначитьеевне- сколькорубрик,ноэтобудетнесовсемправильносточкизрениясистем- ностисайта).Благодарярубрикациипосетителисайтасмогутбыстросо- риентироватьсявегоструктуреинайтитуилиинуюпубликацию.
Напротив,меткимогутприсваиватьсявбольшомколичестведлякаж- дойзаписи,ичембольшеметокбудетнавашемсайте,темлучше(ко- нечно,этоколичестводолжнобытьвразумныхпределах,чтобывэтой
классификациисмоглиразобратьсякакминимумвысами).Метки—это
своеобразные«признаки»длязаписи,определяющиееетематику,упо- минаемыеперсоны,компании,явленияит.д.
Внашемслучаетестовойзаписи«ВведениевсозданиесайтовнаCMS»
можетбытьназначенарубрика
Уроки WordPress
иметки
CMS
,
веб-разра- ботка
,
Яндекс
,
Narod
Для назначения рубрики используйте одноименный блок в правой ко- лонкестраницысозданияновойзаписи(рис.5.26).
Рис. 5.26. Меню выбора рубрики