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

218
Глава 7. Дизайн сайта
ШаблонTwentyTen(рис.7.7)смотритсянамногоболеевыигрышно.
Рис. 7.7. Вид сайта, использующего тему Twenty Ten
Настройка заголовка
Дляизменениядизайнаэтойтемыможноиспользоватьвстроенныевпа- нельинструментовWordPressфункции.Преждевсегопоменяемизобра- жение,котороенаходитсявверхнейчастисайта,подегоназванием(на
рис.7.7этокартинкасаллеей).Дляэтоговыберитепунктпанелиуправ- ления
Внешний

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

изменения
внизустра-

219
Настройка дизайн-темы Twenty Ten
ницы.Обновивстраницусайтавбраузере(клавиша
F5
),можнооценить
полученный результат и при необходимости выбрать новую картинку.
Рис. 7.8. Изменение изображения-заголовка (начало)
Крометого,существуетвозможностьиспользоватьсобственноеизображе- ниевкачествеграфическогозаголовкасайта.Дляэтоговразделе
Загрузить

изображение
нажмитекнопку
Обзор
ивыберитенужныйфайл.Ондолжен
бытьграфическогоформатаииметьрасширениеjpg,gif,png,tifит.д.
ПРИМЕЧАНИЕ
Есливыразрабатываетекорпоративныйсайт,очевидно,чтовка- чествезаголовканеобходимоиспользоватьизображение,выпол- ненноевфирменномстилекомпании(ссоответствующимицвето- вымиоттенкамиишрифтами),содержащееофициальныйлоготип
организациииеерыночноеназвание.Еслижеинтернет-проектне
привязанкконкретнойкомпании,томожноиспользоватьлюбой
коллажилифотографию,подходящуюпотеме.

220
Глава 7. Дизайн сайта
Перед загрузкой на сервер настоятельно рекомендуется подготовить
файлкзагрузке,отмасштабировави«подогнав»егоподнужныеразмеры.
Размерыэтиуказанывразделе
Загрузить

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

изображение

заголовка
удаляетссерверакартинку,кото- раянаданныймоментиспользуетсявкачествезаголовка.Удалитьизо- бражениестоитвтомслучае,еслизагруженныйвамифайлнеподходит
дляданнойдизайн-темы.
Сдругойстороны,длятого,чтобысайтбылузнаваемым,же- лательнодажедлянекоммерческогопроектаразработатьиис- пользовать в дизайне собственный логотип. В принципе, его
роль может выполнять доменное имя или название проекта,
выполненноеинтересным,привлекательнымшрифтом.
ПРИМЕЧАНИЕ
Программдляработысграфикойсуществуетмножество,хотя
чащевсегодляэтихцелейиспользуютAdobePhotoshop.Сдру- гойстороны,еслипереченьвыполняемыхоперацийбудетогра- ничиватьсямасштабированиемикадрированиемрисунков,нет
никакогосмыслаиспользоватьдляэтоготакоймощный(игро- моздкий)редактор,какФотошоп.Дляпростейшихопераций
сфайламиярекомендуюиспользоватьбесплатнуюпрограмму
XnView,которуюможнозагрузитьссайта
www.wordpressbook.
ru
,найдяеевразделе«Файлы».

221
Настройка дизайн-темы Twenty Ten
Рис. 7.9. Изменение изображения-заголовка (окончание)
Кнопка
Восстановить

исходное

изображение

заголовка
возвращаетпервона- чальныенастройкитемы,вслучаесшаблономTwentyTenвкачестве
заголовкабудетвновьзадействованакартинкасаллеей.
Настройка фонового изображения
Помимокартинки-заголовкачерезпанельуправленияWordPressмож- нотакжезаменитьфоновоеизображение,используемоевтекущейтеме.
Фоновоеизображение—этокартинка-подложка,фондополнительной
области,отображаемойзаграницамиосновногокаркасасайта.Длятемы
Twenty Ten используется фон белого цвета, вы можете поменять его,
выбравпунктпанелиуправления
Внешний

вид
4
Фон
(рис.7.10).
Во-первых, вы можете изменить цвет фона, для этого используйте
поле
Цвет
вблоке
Настройки

отображения
.Нажмитессылку
Выбрать

цвет
,
ивоткрывшейсяпалитре(онапоказананарис.7.10)подберитеподхо- дящий оттенок. После выбора цвета с помощью палитры в поле
Цвет

появитсянаборсимволов,представляющихсобойкоддляеговыводана
сайте(внашемпримереэтоткодвыглядиткак
#ddddd0
).Приэтомвполе
Просмотреть
появитсяпредварительныйвидновогофоновогоизображе- ния.
Есливызнаететочныйкоддлянужноговамцвета,егоможноввести
вполе
Цвет
,безиспользованиявизуальнойпалитры.Такойподходобыч- но используется профессиональными веб-дизайнерами, для которых
принципиальноточное«попадание»вцвет.Аналогичнымобразомнужно

222
Глава 7. Дизайн сайта
поступить,еслифонбудетстроитьсянацветахкорпоративногостиля,
отступать от которого нельзя. В качестве примера приведем таблицу
скодамибазовыхцветов.
Рис. 7.10. Изменение фонового изображения
Таблица 7.1. Значения HTML-кодов для основных цветов
Цвет
Код
Цвет
Код
Цвет
Код
Морская
волна
#00ffff
Черный
#000000
Синий
#0000ff
Серый
#808080
Зеленый
#008000
Лайм
#00ff00
Темно- бордовый
#800000
Темно-синий #000080
Оливковый
#808000
Пурпурный #800080
Красный
#ff0000
Серебряный #c0c0c0
Бирюзовый #008080
Белый
#ffffff
Желтый
#ffff00

223
Настройка дизайн-темы Twenty Ten
Полный перечень цветов, рекомендуемых к использованию в веб-гра- фике,икодовкнимможнопосмотретьвсправочнике,созданномстуди- ейАртемияЛебедева:
http://www.artlebedev.ru/tools/colors
Второйспособзаменыфоновогоизображение—загрузканасерверспе- циального графического файла и использование его в качестве фона.
Для этого используйте функцию
Загрузить

изображение
. Загружаемая
картинканеобязательнодолжнабытьбольшой,таккакWordPressав- томатическиразмножитизображение,заполнивимвсюплощадьфона.
Примертакого«размножения»можнонаблюдатьнарис.7.11,гдебылза- груженпростойлоготипнебольшогоразмера.
Рис. 7.11. Фон, созданный на основе небольшого логотипа
Вместестем,использоватьвкачествефонаподобныеизображенияне
рекомендуется.Фоноваяиллюстрациядолжнабытьнейтральной,неот- влекающей внимание от основной части сайта. Для этих целей лучше
подходятграфическиетекстурыспокойныхтонов,которыевыможете
легконайтивИнтернетеилидажесоздатьсамостоятельно.
Несколько слов об источниках изображений
Вопрос с исходными графическими материалами для сайта является
оченьнасущным.Существуеттриосновныхисточникаиллюстраций:
СОВЕТ
Для быстрого подбора цветовой гаммы сайта можно исполь- зоватьодинизонлайн-серверов,генерирующихцветаикоды
наосновесуществующегоизображения(например,картинки- заголовкаилилоготипа).Одинизтакихсервисоврасположен
поадресу
http://www.colorhunter.com

224
Глава 7. Дизайн сайта
Собственныеизображения,накоторыевыобладаетеполнымиав-
1.
торскимиправами.Этомогутбытьличныефотографии,рисунки,
логотипы,коллажи,созданныевашимсобственнымтрудом.Вэту
жекатегориюможноотнестииматериалывашихродственников
идрузей,которыесовершенноточнонепредъявятвампретензий
онезаконномиспользованииихработ.
Законноприобретенныематериалы,напримеркупленныефото-
2.
графииилисделанныеспециальнодлявасколлажи.Вэтукатего- риюотносятсяиизображения,приобретаемыевплатныхинтернет- фотобанках.
Свободно распространяемые материалы, бесплатное использова-
3.
ние которых является правомочным, что подтверждено соответ- ствующейлицензией.ОднойизтакихлицензийявляетсяCreative
Common,инижемырассмотримработусподобнымипроизведе- ниями.
Есть и четвертый источник, стоящий особняком, — многократное по- вторноеиспользованиеиллюстраций,копируемыхизИнтернета.Фор- мальноэтоявляетсянезаконнымиспользованиемавторскихизображе- ний, но на практике зачастую даже при большом желании установить
авторствотогоилииногоизображениябываетневозможно.Внашидни
вИнтернетепостоянноосуществляетсяинтенсивныйинформационный
обмен;кактекстовые,такиграфическиематериалыежедневнокопиру- ютсявогромныхобъемах,ирегулироватьэтотпроцессспозицийтра- диционногоавторскогоправастановитсявсеболеезатруднительно.По
этойпричинеде-фактоуженаметиласьтенденцияксмирениюстаким
положениемдел,покрайнеймередотехпор,поканебудутвыработа- ны новые концепции копирайта, отвечающие современным реалиям.
Так что на практике наиболее часто используемые источники подбора
ВНИМАНИЕ!
Стоитзаметить,чтоесливыкупиливближайшемларькеком- пакт-дисксколлекциейклипартов(графическихколлажей
ифотографий),это,какправило,небудетсчитатьсязаконным
приобретением,посколькувподавляющембольшинствеслу- чаевподобнаяпродукцияявляетсяконтрафактной.

225
Настройка дизайн-темы Twenty Ten
иллюстрацийдлявеб-проекта—этопоисковикипокартинкамотЯн- декс(
http://images.yandex.ru
)иGoogle(
http://images.google.ru
).
Немногоподробнееостановимсянатретьемисточникекакнаиболеедо- ступномизлегальныхспособовполученияизображенийдлясайта.
Преждевсего,чтотакоелицензияCreative Common?Этоотносительно
новаяконцепция,получающаявсеболееширокоераспространениекак
альтернатива понятию копирайт и нормам традиционного авторского
права.Еслипроизведение(внезависимостиотегоформыисодержания)
публикуетсясознакомкопирайта(воттаким:©),этоозначает,чтоего
частичноеилиполноеиспользованиезапрещенобезсогласияправообла- дателя(приэтомправообладателемможетвыступатькакавторпроиз- ведения,такипокупательправнанего,напримериздательство).Таким
образом,дажееслиавториневозражаетпротивкопированияиисполь- зования его произведения, то по нормам авторского права он должен
каждомужелающемудатьнаэтописьменноеразрешение(видеале—
ввиделицензионногодоговораопередаченеисключительныхправ).Со- гласитесь,чтодляинтернет-эрыэтодовольнотупиковаяситуация.
Именнодлятого,чтобыпопытатьсявыйтиизэтоготупика,ибылараз- работана лицензия Creative Common. Если вы видите на сайте зна- чок
илитекстнаподобие«ДоступнонаусловияхлицензииCreative
Commons»,этозначит,чтоавторзаранеедаетсогласиенакопирование
ираспространениесвоегопроизведения,иногдадажевключаяегопере- работку.ЛицензияCCвключаетвсебянесколькоподвидов,выможете
подробнопочитатьонихнаофициальномсайтепроектаиливВикипе- дии (
http://ru.wikipedia.org/wiki/CC-ND
), которая, кстати, также функцио- нируетполицензииCreativeCommons.
ПРИМЕЧАНИЕ
Естественно, нужно понимать, что этот принцип свободного
обмена изображений в Интернете не применим для автор- ских фотографий и дизайнерских работ, в том случае если
на странице источника явным образом указан запрет неза- конногокопированияииспользования.Набольшинстветаких
изображенийстоитзнаккопирайта,удалениекоторогобудет
однозначнымфактомнарушенияавторскихправиприсвоения
чужогопроизведения.

226
Глава 7. Дизайн сайта
Практическая польза от CC состоит в том, что на этих началах рабо- таютмногиепроекты,вчастностиифотографическиепорталы.Пожа- луй,самымизвестнымимасштабнымизнихявляетсяпопулярныйсайт
Flickr.com
,значительнаячастьматериаловкоторогораспространяетсяпо
лицензииCreativeCommons.Посколькуфотографиинасайтзагружают
самипользователи,каждыйихнихустанавливаетнастройки,накаких
принципах будет доступно то или иное изображение. Соответственно,
при поиске изображений вы можете ввести критерий отбора — толь- ко фотографии, распространяемые по лицензии CC. Быстрый переход
вчастькаталогаFlickr,накоторойразмещенытолькосвободнораспро- страняемыефотографии,можноосуществитьпоссылке
http://www.flickr.
com/creativecommons
Дополнительноприведемпереченьдругихсайтов,изображенияското- рыхвыможетесвободноиспользовать:
библиотека

•
Stock.XCHNG
(
http://www.sxc.hu
), содержащая сотни
тысячиллюстрацийнасамыеразличныетемы;
проект

•
Openfoto
(
http://openphoto.net
),одинизстарейшихфотосай- тов,появившийсяещев1998годуиобладающейогромнойколлек- циейфотографий;
фотобанк

•
FreePhotosBank
(
http://www.freephotosbank.com
)—бесплат- ныйаналогмногочисленныхинтернет-фотобанков;
сервис

•
Image*After
(
http://www.imageafter.com
), специализирующий- сянафоновыхизображениях,текстурах,обоях,абстрактныхкар- тинках;идеальноподходитдляпоискасопутствующихматериалов
ифоновыхкартинокдлясайта;
фотосайт

•
Unprofound
(
http://www.unprofound.com
) с большой кол- лекциейкачественныхфотоизображений;
фотобанк

•
Morguefile
(
http://morguefile.com
) с удобным поисковым
механизмомихорошоорганизованнымкаталогомизображений;
сайт

•
Pixel Perfect Digital
(
http://www.pixelperfectdigital.com/free_stock_
photos
), посвященный новостям из мира цифровой фотографии
исодержащийбольшойподразделбесплатныхизображений;
Проект

•
Freerange
(
http://freerangestock.com
) — еще один фотобанк
сбесплатнымиизображениями.

227
Управление меню
Управление меню
Возможность управления меню и создания собственных, произволь-
ных
,менювWordPressпоявиласьтольковверсии3.0.Поэтойпричине
в дизайн-темах, разработанных до релиза WordPress 3.0, эта функция
отсутствует.Однакоболееновые(ибудущие)шаблонынавернякабудут
включатьвсебяэтуинтереснуювозможность,поэтомумырассмотрим
процесссозданияменюнапримеретемыTwentyTen.
ПоумолчаниютемаTwentyTenиспользуетстандартноеменю,вкоторое
включеныссылкинастатичныестраницысайта,расположенныевпо- рядке,установленномвамиприихсоздании(см.главу5,раздел«Управ- лениестраницами»).Менювыводитсявверхнейчастисайтаследующим
образом(рис.7.12):
Рис. 7.12. Вид основного меню в теме Twenty Ten
Есливаспокаким-топричинамнеустраиваетпринципформирования
меню, можно создать его собственный вариант. Например, вы хотите,
чтобыопределеннаястраницасуществоваланасайте,нонеприсутство- валавменю.Либовыхотитевыводитьвменюнестраницы,арубрики
сайта. Или вообще вам необходимо сформировать его из внешних ги- перссылок.
Длясозданияпроизвольногоменювыберитепунктпанелиуправления
Внешний

вид
4
Меню
(рис.7.13).
В форме, расположенной в правой части страницы, введите заголовок
нового меню и нажмите кнопку
Создать

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

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

в

меню
вкаждойформе(рис.7.15).

228
Глава 7. Дизайн сайта
Рис. 7.13. Управление произвольными меню
Рис. 7.14. Новое меню создано
Составновогоменюбудетсформирован(рис.7.16).Егоможноредакти- ровать, меняя пункты местами, удаляя их, переименовывая названия
именяяадресаURLдлягиперссылок.
Еслиактивироватьопцию
Автоматически

добавлять

новые

страницы

верхне- го

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

229
Управление меню
Рис. 7.15. Выбор пунктов меню
Тема Twenty Ten включает в себя только одно горизонтальное меню
вверхнейчастисайта(областьосновнойнавигации),поэтомувыборане
существует. Если тема поддерживает отображение нескольких меню
(например,дополнительныеменювбоковойколонкеилинижнейчасти),
вэтомблокеможнобыловыбрать,какоепроизвольноеменюнужновы- водитьвкаждойизэтихобластей.
Есливраскрывающемсяспискевыбранозначение
Мое

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

230
Глава 7. Дизайн сайта
Рис. 7.16. Состав нового меню сформирован
Рис. 7.17. Определение области вывода меню

231
Управление виджетами
Рис. 7.18. Произвольное меню доступно на сайте
Управление виджетами
Еще одна замечательная функциональная возможность WordPress —
этоподдержкаработысвиджетами.Виджет—этонастраиваемыйблок
длявыводаопределенногосодержимогосайтавопределеннойобласти,
предусмотренной текущей дизайн-темой. Благодаря виджетам, струк- турный каркас сайта можно собирать и видоизменять наподобие кон- структора:выводитьиудалятьблоки,менятьихместами,корректиро- ватьспособвыводаконтентаит.д.
Каждаядизайн-темаподразумеваетсобственныйспособвыводавидже- товиихколичество.Воднихтемахдлявиджетовпредусмотрено5обла- стей,вдругих—10,причемместадляразмещенияэтихобластейхотя
и довольно типичны, но также могут различаться. Некоторые старые
темывообщенеподдерживаютработусвиджетами,поэтомукорректи- ровка структурного каркаса сайта возможна только путем редактиро- вания программного кода в служебных файлах темы. Впрочем, сейчас
такихшаблоновстановитсявсеменьше.
Для управления виджетами выберите пункт панели
Внешний

вид
4
Виджеты
(рис.7.19).
Влевойчастистраницыприведеныдоступныевиджеты,которыевымо- жетеиспользоватьвданнойтеме,вправой—областисайта,вкоторых
ихможноразместить.
ПРИМЕЧАНИЕ
Нужнопонимать,что,несмотрянабогатыевозможности,предо- ставляемыевиджетами,ихиспользованиеограниченорамками
общегодизайнатойилиинойтемы.Есливашатекущаятема
содержиттолькооднубоковуюколонкусправа,товывестидо- полнительныйблоквлевойчастинеудастся—дляэтогонужно
искать другую тему, дизайн которой содержит две колонки:
левуюиправую.