Создаем свой сайт на WordPress быстро
 Скачать 4.33 Mb.
|
|
Глава 5. Подготовка и публикация материалов В этой главе мы рассмотрим процедуру планирования структу- ры сайта, подготовки материалов к публикации и их размещение на сайте, их упорядочивание с помощью рубрик и меток, а также обсудим работу с изображениями, аудио-, видео- и медиафайлами других типов. Планирование структуры сайта 9 Подготовка первой публикации 9 Работа с рубриками, метками и дополнительными опциями 9 записи Добавление изображений и медиафайлов 9 Перед началом работы с контентом Итак,мыприступаемксамомуинтересномузанятию—формированию структурысайтаинаполнениюегоконтентом.Вы,наверное,удивитесь, 5 ГЛАВА 120 Глава 5. Подготовка и публикация материалов почемумыпропускаемэтапсамойразработки,исобственно,когдамы будемнашсайт«делать»?Ответпростой—егоненужноделать,сайт ужесозданисуществуетвовполнерабочемсостояниипосвоемуоснов- номуадресу.ЕщенаэтапеустановкиWordPressсоздалфункционирую- щуюзаготовкусайта,которуютеперьнамнужнолишьнастроитьипри- способитьподсвоинужды.ВэтомизаключаетсяпрелестьсистемCMS, иименноэтоявляетсяпричинойихрастущейпопулярности:ужечерез несколько минут после загрузки дистрибутива WordPress вы можете приступатькработенадконтентомсайта,нетратядолгиенеделииме- сяцынапрограммированиеисозданиедизайна. Заготовка сайта НавернякасразупослеустановкиWordPressвынесмоглиотказатьсебе влюбопытствеиуженеодинразоткрылизаглавнуюстраницусвоего сайта( http://mysite.ru ).ЕсливыустанавливаливерсиюWordPress,пред- шествующую3.0,товашемувзорупредстанетпрообразбудущегосайта вотвтакомнепритязательномвиде(рис.5.1). Поканеоченьвпечатляет,неправдали?Впрочем,уженапримереэтой заготовкиможноувидеть,чтоусайтасуществуетупрощеннаяструкту- раимакетглавнойстраницы,атакжеминимальныйдизайн. Навизуальноевпечатлениеотсайтаименнодизайн(аточнее,выбран- наядизайн-темаWordPress)иоказываетнаибольшеевлияние.Встарых версияхWordPressдизайн-темойпоумолчаниюбылатемаWordPress Default , внешний вид которой вы можете наблюдать выше. Но, начи- наясверсии3.0,вкачестведефолтной(выбраннойприпервомзапуске программы) разработчики стали предлагать новую, намного более ка- чественнуюипривлекательнуютемуTwenty Ten.Еевнешнийвидпо- казаннарис.5.2,иначнеммыработунадссайтомименноврамкахэтой темы. ПРИМЕЧАНИЕ Работасдизайн-темамибудетрассмотренапозже,этомуво- просупосвященаглава7. 121 Перед началом работы с контентом Рис. 5.1. Заготовка для вашего сайта на ранних версиях WordPress Как вы видите, у вашего сайта уже есть одна тестовая запись, один тестовый комментарий, одна страница и одна рубрика. Аналогич- ную информацию сообщает и консоль панели управления WordPress (рис.5.3). Этитестовыеэлементыконтентаможнобудетвпоследствииотредакти- ровать или просто удалить — они нужны, в первую очередь, для того, чтобыпользовательоценилвозможностиCMSилогикупредставления информациинасайте,атакжеподобралудовлетворяющуюегодизайн- тему. 122 Глава 5. Подготовка и публикация материалов Рис. 5.2. Дизайн-тема Twenty Ten Рис. 5.3. Статистика сайта в консоли управления WordPress 123 Перед началом работы с контентом Планируем структуру сайта Преждечемприступитьнепосредственнокработесконтентом,яреко- мендуюхотябысхематичноспланироватьструктурувашегосайта.Это можно сделать как на компьютере, в программах MS Word, Excel или Visio, так и от руки, на обычном листе бумаги. Для того чтобы сделать корректнуюсхемусайтанаWordPress,нужноприниматьвовнимание, чтоввашемраспоряжениибудеттриосновныхэлемента: запись • ,динамическийэлемент,вэтукатегориюотносятрегуляр- нообновляемыйтипконтента(например,новостиилипубликации вблоге); страница • ,статичныйэлемент,обычносюдаотносятинформацию, котораяредкоменяетсяиимеетобщийилислужебныйхарактер (например, данные о компании, об авторе, о проекте, контактная информацияит.д.); рубрика • , служебный элемент, позволяющий классифицировать иупорядочитьпубликациинасайте(например,еслиувасновост- нойпроект,тоспомощьюрубрикконтентможноподразделятьна отечественныеновости,зарубежныеновости,аналитическиеста- тьи,интервьюит.д.). Соответственно,вамнеобходимохотябыпредварительноспланировать количество и содержание статичных страниц (и, возможно, их подчи- ненностьдругдругу),атакжерубрики,накоторыебудетподразделять- сяосновнойпотокобновляемогоконтентасайта.Рубрикитакжеможно делатьнесколькихуровней,вводяподрубрики. Для нашего примера, сайта wordpressbook.ru , можно составить следую- щуюпредварительнуюструктуру. Страницы сайта: Опроекте • Сотрудничество Окниге • Содержаниекниги Гдекупитькнигу 124 Глава 5. Подготовка и публикация материалов Файлы • ДистрибутивыWordPress Полезныепрограммы Темы Плагины Разное Партнерыпроекта • Контакты • Рубрики записей: УрокиWordPress • НовостиWordPress • Хостингидомены • Продвижениесайта • ЗаработоквИнтернете • Разное • Унасбудетпятьстатичныхстраниц,некоторыеимеютнесколькопод- чиненныхстраницвторогоуровня.Длязаписейзапланированошесть основныхрубрик,посколькуэтонебольшоечисло,вводитьподрубрики поканеимеетсмысла.Подчеркну,чтоэтолишьпримернаяипредвари- тельнаясхема,которуюможноинужноменятьпоходунаполнениясай- таконтентомиразвитияпроектавцелом,добавляяновыеструктурные элементы. НемногопозжемыперенесемзадуманнуюструктурувWordPress,со- здавсоответствующиерубрикиистраницы. ПРИМЕЧАНИЕ Конечноже,этооченьпростаяструктура,которуюможнобыло бы спланировать прямо по ходу наполнения сайта инфор- мацией.Обычнодляболеесложныхпроектовформирование логичнойиинтуитивнопонятнойструктурыявляетсяважным этапомразработкисайтаизанимаетдлительноевремя. 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,использоватьименноэтуфунк- циюиневставлятьтекстобычнымспособом( |