Главная страница

Создаем свой сайт на WordPress быстро


Скачать 4.33 Mb.
НазваниеСоздаем свой сайт на WordPress быстро
Дата13.01.2023
Размер4.33 Mb.
Формат файлаpdf
Имя файлаGrachev_A._Sozdaem_svoj_sajt_na_WordPres_S_WordPress_3._SPb._Pit.pdf
ТипДокументы
#884867
страница9 из 12
1   ...   4   5   6   7   8   9   10   11   12
ГЛАВА

208
Глава 7. Дизайн сайта
однойизсамыхпопулярныхвмире.Благодарятому,чтопользователи
WordPress могут подключать к своему сайту внешние темы, создан- ныестороннимиразработчиками,любойпроектможнопреобразитьдо
неузнаваемости,приэтомпоуровнюдизайнаиюзабилитионнебудет
уступать профессиональным сайтам, в разработку которых вложено
многоресурсов.
Приэтомсуществуютдесяткитысячсовершеннобесплатныхтем,для
использованиякоторыхтребуетсятолькоихустановкаипервоначаль- ная настройка. Есть и готовые платные темы, использование которых
сводиткминимумувероятностьтого,чтопохожийдизайнможетвстре- титьсянадругихсайтах.Приэтомихценаобычноневеликаибудетго- раздо меньше, чем в том случае, если бы вы обратились в профессио- нальнуювеб-студию.
Нуаесливыхотите,чтобысайтимелабсолютнонеповторимыйвид,со- здание темы для WordPress можно заказать специализирующимся на
этойCMSвеб-дизайнерам,истоимостьэтойработытакжеврядлибудет
оченьвысокой.
Что же представляет собой дизайн-тема? Тема (шаблон) WordPress —
этонаборслужебныхфайлов,которыеотвечаютзаорганизациюстра- ницсайта,ихдизайнистилевуюразметку.Можносравнитьиспользова- ниетемWordPresscвариантамиоформления(скинами),котороеможно
осуществитьдлямногихпрограмм,например,дляпопулярногомедиа- проигрывателяWinamp.Однакосущественнымотличиемотскиновяв- ляетсято,чтодизайн-темынетолькоменяютвнешнийвидсистемы,нои
по-своемуорганизуютструктурныйкаркассайтаиспособотображения
контента.
ПослеустановкииактивацииновойтемыWordPressменяетдизайнсай- таиорганизациюструктурывсоответствиисновымиправилами,кото- рыепрописанывслужебныхфайлахшаблона.Такженекоторыетемы
поддерживаютуправлениечерез«админку»WordPress,ивэтомслучае
вразделепанели
Внешний

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

209
Управление темами WordPress
Установка и активация тем
Дляпереходакуправлениютемамивыберитепунктменю
Темы
раздела
панелиуправления
Внешний

вид
(рис.7.1).
Рис. 7.1. Переход к управлению темами
Откроетсястраница,накоторойвыувидитевсеустановленныенатеку- щиймоменттемы,атакжеинформациюотойизних,котораяиспользу- етсявнастоящеевремя(рис.7.2).
Наданныймоментунасустановленотритемы:TwentyTen1.0,WordPress
Default 1.6 и WordPress Classic 1.5, при этом активная тема — Twen- ty Ten 1.0. Для каждой темы указана ее папка на сервере, например
ПРИМЕЧАНИЕ
Обычновыбордизайн-темыначинаетсянасамомпервомэтапе
созданиясайта,ещеприпланированииегоструктуры.Этосвя- заностем,чтомногиетемыимеютсвоюспецификувчастивы- водаконтента,илучшепроводитьэкспериментысдизайномна
этапе,когданасайтеещенеопубликованомногоматериалов.
Сдругойстороны,длятогочтобыпонять,подходитливамта
илиинаятемы,необходимокакминимумсоздатьвсерубрики
истатичныестраницы,атакжеразместитьнесколькозаписей
длякаждойрубрики.Впротивномслучаевпечатлениеотди- зайнабудетнеполным.

210
Глава 7. Дизайн сайта
/themes/twentyten
,этоозначает,чторабочиефайлышаблонаTwentyTen
размещены по адресу вида
http://mysite.ru/wp-content/themes/twentyten
.
Эта информация необходима для того, чтобы быстро найти и отредак- тироватьопределенныйслужебныйфайлтемы,втомслучае,еслипо- требуетсявмешательствовпрограммныйкодили,например,заменаис- пользуемыхизображений.
Рис. 7.2. Страница управления темами

211
Управление темами WordPress
Метки,которыеприводятсярядомсописаниемкаждойтемы,нерешают
никакихфункциональныхзадач,онипредназначенытолькодляудобно- гопоискавглобальномкаталогетемWordPress.
Длятогочтобыизменитьтемусайта,выберитеизсписканезадейство- ванных тем нужную и нажмите ссылку
Активировать
. Предварительно
можно просмотреть предполагаемый результат активации темы, для
этогонужнонажатьссылку
Просмотреть
,правда,этафункцияневсегда
корректноработаетсомногимитемами.
Еслиопределеннуютемувынесобираетесьникогдаиспользовать,мож- ноудалитьееслужебныефайлыссервера,нажавссылку
Удалить
Длятогочтобытемапоявиласьвперечнедоступныхдляактивации,ее
необходимопредварительноустановить.Дляэтогосуществуетдваспо- соба.
ПослетогокаквынашливИнтернетеинтересующуювастему,
1.
загрузитееенакомпьютере,распакуйте(обычнотемы«постав- ляются»вzip-архивах)изагрузитекаталогнасерверспомощью
FTP-клиента. Загружать папку следует по адресу
/wp-content/
themes/
. Если все было сделано корректно, новая тема появится
вспискеустановленныхипослеактивацииееможнобудетпро- тестировать.
Перейдите на вкладку
2.
Установить

темы
 (рис. 7.3), выберите пункт
Загрузка
изакачайтезаранеесохраненныйархивнасервер.Word-
Press автоматически распакует архив и поместит каталог темы
внужнуюдиректорию.
СОВЕТ
Файлы шаблонов не занимают много места, поэтому, если
какая-то тема сейчас вам не подошла, не стоит ее удалять
ссайта—возможно,вызахотитевернутьсякнейпозжеилиис- пользоватьвновомпроекте.Учитывая,чтовыбортемзанимает
довольномноговремени,лучшенакапливатьпонравившиеся
вамшаблоны,прошедшиепредварительныйотбор.

212
Глава 7. Дизайн сайта
Рис. 7.3. Установка новой темы из панели управления WordPress
Поиск новых тем
Кроме того, на вкладке
Установить

темы
 существует возможность бы- строго поиска и установки темы из официального каталога WordPress.
Их можно искать и загружать и автономно, вне панели управления
WordPress,поадресу
http://wordpress.org/extend/themes
,ноработачерез
панель WordPress облегчает эту задачу, поскольку установить темы
можнотутже,водинклик.
ПодобратьновуютемуизкаталогаWordPressможно,применивразличные
критерии сортировки (рис. 7.4):
Избранные
,
Свежие
,
Недавно

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

213
Управление темами WordPress
работы.Крометого,наэтойстраницеможноотметитьхарактеристики
темыиосуществитьпоискпоним.Толькоимейтеввиду,чточемболь- шебудетзаданофильтров,темменьшевыполучитерезультатовпоиска.
Рис. 7.4. Каталог дизайн-тем, отсортированный по дате создания
ПРИМЕЧАНИЕ
Ещеразподчеркиваю,чтотемыизофициальногокаталога
WordPress абсолютно бесплатны, и вы можете свободно ис- пользоватьихкакнакоммерческихпроектах,такиналичных
страницах и блогах. Некоторые разработчики ненавязчиво
предлагаютотправитьимdonate(добровольноепожертвование)
втомслучае,еслиихработавампонравилась,ноэтотшагоста- етсянавашеусмотрение.Крометого,большинствоавторских
тем содержит ссылки на сайты их создателей, и некоторые
разработчикиихудаляют,редактируяслужебныефайлытемы.
Этонесовсемэтичнодлясвободнораспространяемогопродук- та,поэтомуярекомендуюсохранятьэтиссылки.

214
Глава 7. Дизайн сайта
Рис. 7.5. Поиск тем в каталоге WordPress
Где найти русскоязычные темы WordPress
Увы, несмотря на огромное количество дизайн-тем, которое содержит
официальныйкаталогWordPress,большинствоизнихнеподойдутдля
использованиявисходномвиденарусскоязычномпроекте.Деловтом,
чтоподавляющаямассаэтихтемсозданадляанглоязычнойаудитории,
иесливыактивируетелюбойшаблонизкаталогаWordPress,всеслу- жебные пункты меню, названия блоков сайта, а также тексты, разме- щенныенаграфическихэлементах,будутнаанглийскомязыке.Вприн- ципе,этодопустимодлянекоторыхтиповсайтов,например,такможет
бытьоформленпрофессиональныйблогопрограммировании,поскольку

215
Управление темами WordPress
IT-специалистывмассесвоейзнаютанглийскийязык,даидизайнсайта
кактаковойимврядлиболееважен,чемудобнаяструктураинавига- ция.Нодлясайтов,рассчитанныхнаширокуюаудиторию,использова- ниеанглоязычныхшаблоновврядлиоправданно.
Поэтому многие отечественные разработчики, специализирующиеся
наCMSWordPress,занимаютсялокализациейзападныхтемиихрас- пространениемсредирусскоязычныхпользователей.Локализацияпод- разумеваетпереводвсехсистемныхнадписейисообщений(например,
Not

Found
всоответствующемслужебномфайленужнозаменитьна
Ничего

не

найдено
),атакжеобработкуизображений,содержащихтекст,который
такженужнонаписатьнарусскомязыке.Есливкомплекттемывходит
собственнаяпанельуправления,встраиваемаявадминкуWordPress,ее
такжеобычнорусифицируют.
Побольшомусчету,влокализациитемдляWordPressнетничегослож- ного,нужнотолькохорошознатьидеологиюэтойCMSипониматьназна- чениетогоилииногослужебногофайла.Нуи,конечно,нужныхотябы
базовыезнаниянекоторыхвеб-технологийиязыковпрограммирования
HTMLиCSS.Обычнопослепереводанесколькихпервыхтемостальные
«щелкаются»какорешки.
Поэтойпричинебольшинствобесплатныхрусскоязычныхтем,которые
можнонайтивРунете,—этолокализованныеиностранныешаблоны.
Вэтомнетничегоплохого,нособственныеавторскиешаблоны,распро- страняемыебесплатноихсоздателями,покадляотечественногорынка,
скорее,редкость.Наоборот,отечественныеспециалистыпредпочитают
делатьанглоязычныетемыираспространятьихсразунамировомрын- ке,понимая,чтоохватаудиториивэтомслучаевразыбольше.
ПРИМЕЧАНИЕ
Казалосьбы,зачемразработчикамтратитьсвоевремянабес- платные продукты, ведь, кроме мифических пожертвований
имненачторассчитывать?Насамомделе,любойспециалист
понимает, что его опыт, портфолио, рекомендации и статус,
который он приобретет, создав качественную и популярную
темудляWordPress,стоятгораздобольше,чем100–200дол- ларов,закоторыеможнопродатьплатныйшаблон.Крометого,
многиеавторыпрактикуютбизнес-схему,прикоторойразра- батываетсядвеверсиишаблона:бесплатнаяиплатная,сболее
богатымфункционалом.

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

для

wordpress
).Врезультатахпоискавыполучитессылкинаты- сячисайтов,предлагающихкаталогибесплатныхWordPress-шаблонов.
Приэтомзначительнаячастьэтихкаталоговокажетсядовольнопосред- ственногокачества,сплохопереведенными(апоройивообщенелокали- зованными)темами,неудобнойструктуройизагруженнаямногочислен- нойрекламой.Этомуспособствуетдвафактора:растущаяпопулярность
CMSWordPress(и,соответственно,потребностьвразнообразныхтемах)
и,какужеотмечалосьвыше,относительнаяпростоталокализацииан- глоязычныхшаблонов.ПоэтомувСетипоявляетсявсебольшенаскоро
сделанных проектов, распространяющих плохо локализованные темы
дляWordPress,—ихсоздателипонимают,чтоосновнойпотокпосети- телейитакпридеткнимизпоисковыхсистем,такзачемжезатруднять
себякачествомконтента?
Потративнекотороевремянапоискхорошихресурсовскачественны- ми темами, вы наверняка накопите собственную подборку избранных
сайтов.Вкачествеодногоизтакихпроектовмогупорекомендоватьсайт
www.wpbot.ru
,накоторомрегулярнопубликуютсякаклокализованные,
такиавторскиетемы.
Другойпуть—заказатьспециалиступоWordPressлокализациюопреде- леннойиностраннойтемылиборазработкууникальногошаблона,специ- ально созданного для вашего сайта. Если вы обратитесь с подобным за- казомнаоднуизкрупныхинтернет-биржфрилансеров(например,
www.
free lance.ru
),тобезтруданайдетеисполнителязавполнескромныеденьги.
Далеемыпоговоримобизменениях,которыеможноосуществитьстеку- щейактивнойтемой—TwentyTen.
Настройка дизайн-темы Twenty Ten
Начинаясверсии3.0,WordPressпоставляетсясновойтемойпоумолча- нию(такназываемой«дефолтной»темой)—TwentyTen.Этооченька- чественныйисовременныйшаблон,которыйможнолегконастраивать
именятьеговнешнийвид.Побольшомусчету,есликдизайнусайтаувас
нет повышенных требований, то вполне возможно оставить в качестве

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

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

232
Глава 7. Дизайн сайта
Рис. 7.19. Страница управления виджетами
Для того чтобы разобраться с терминологией и показать, как имен- но используются виджеты, приведем поясняющую иллюстрацию
(рис.7.20).
Основнаяобластьдлявыводавиджетов—этобоковаяколонка(«сайд- бар»).Наданныймоментнасайтев
Основной

области
используетсятри
виджета:
Ссылки
,
Области

меток
и
Архивы
.Выможетедобавитьв
Основную

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

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

233
Управление виджетами
Рис. 7.20. Схема сайта
Вкратцерассмотримдоступныевиджеты,размещенныевлевойчасти
страницы,показаннойнарис.7.19.
RSS


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


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


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


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

234
Глава 7. Дизайн сайта
Свежие комментарии


 — вывод текста последних комментариев,
опубликованных на сайте, их количество и объем отображаемого
текстаможнонастроитьприактивированиивиджета;
Страницы


 — ссылки на все созданные статичные страницы
сайта;
Архивы


—ссылкинаархивызаписейсайта,сгруппированныхпо
месяцам;
Мета


—служебныессылки(быстрыйвходвпанельуправления,
ссылка на RSS-поток сайта, ссылка на сайты проекта WordPress
ит.д.);
Поиск


—поисковаяформасайта;
Произвольное меню


—созданноевамименю(процесссозданиямы
рассматриваливыше);произвольныеменюможноотображатьна
сайтеиспомощьювиджетов;
Свежие записи


—заголовкипоследнихпубликацийсайта;количе- ствозаголовковможнонастроитьприактивированиивиджета;
Ссылки


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


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

области

иодинразв
Подвале

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

область
дваизтрехиспользуемых
сейчасвиджетов:
Ссылки
и
Архивы
.Дляэтогощелчкоммышираскройте
настройкидлякаждоговиджетаинажмитессылку
Удалить
(рис.7.21).
Рис. 7.21. Удаление виджета Ссылки из Основой области в боковой колонке
Далее, задействуем в
Основой

области
 еще три виджета:
Свежие

записи
,
Рубрики
и
Поиск
,ав
Дополнительной

области
—виджет
Календарь
.Дляэто- гопростоперетащитеэлементснужнымвиджетомизлевойчастивоб- ластьвиджетов(рис.7.22).
Рис. 7.22. Активация виджета Свежие записи

236
Глава 7. Дизайн сайта
Послеперемещениякаждоговиджетадлянегобудетразвернутоменю
дополнительныхнастроек.Еслинеобходимовнестиизменения(напри- мер,длясвежихзаписейвыводитьне5,а10последних),исправьтезна- ченияинажмитекнопку
Сохранить
.Дляизмененияпорядкавыводавид- жетовиспользуйтетотжеметодперетаскивания.Результатактивации
новыхвиджетоввыможетесразужепосмотретьнасайте,теперьбоко- ваяколонкавыглядитследующимобразом(рис.7.23).
Рис. 7.23. Сайдбар сайта теперь содержит пять виджетов
Теперьрассмотримприменениявиджета
Текст
,втомслучае,когдаон
содержитHTML-код.Дляэтогоперетащимвиджетв
Первую

область

под- вала
,назовемего
Статистика
идобавимвтекстовомполекоддляотобра- жениясчетчикапосещаемостисайта(рис.7.24).
ВНИМАНИЕ!
Неактивируйтеопцию
Автоматически

добавлять

абзацы
,если
вывставляетеHTML-код,анетекст.

237
Управление виджетами
Рис. 7.24. Добавление виджета с кодом счетчика статистики
После сохранения данных виджет будет активирован, и в подвале вы
сможете обнаружить только что появившийся счетчик посещаемости
сайта(рис.7.25).
СОВЕТ
Длятогочтобыполучитьсоответствующийкод,нужнопройти
несложную регистрацию на сайте Liveinternet (
http://www.
liveinternet.ru/add
),выбратьвнешнийвидсчетчикаископиро- ватьсгенерированныйHTML-код.

238
Глава 7. Дизайн сайта
Рис. 7.25. Счетчик статистики добавлен в «футер»
Аналогичным образом в подвал можно добавить еще несколько счет- чиков статистики, миникнопки на сайты партнеров, а также разме- ститьстандартнуюформулировкусправовойинформацией(например,
«©WordPressBook.ru,2010.Всеправазащищены»).Длявыводавсехэтих
элементовтакжеиспользуетсявиджет
Текст
Есливыактивироваливиджетинастроилиего,нопокаким-топричинам
хотитеубратьегоссайта,приэтомсохранивсделанныенастройки,ис- пользуйтеполевнизустраницыуправлениявиджетами(рис.7.26).
Рис. 7.26. Область неактивных виджетов
Неиспользуемыевиджетынужнопростоперетащитьизправойчасти
страницывэтуобласть.
Редактирование дизайн-темы
в HTML-режиме
РазработчикиWordPressсделаливсе,чтобыпользователи,необладаю- щиенавыкамивеб-программирования,моглинастраиватьсайтивидо- изменятьеговнешнийвидбезвмешательствависходныйпрограммный

239
Редактирование дизайн-темы в HTML-режиме
код. Для этого реализован функционал виджетов, настройки дизайна
темы,созданияпроизвольныхменю,публикацииссылоккакотдельного
типаконтентаит.д.
Однако,естественно,чтопредусмотретьвсевозможныезапросысосто- роныпользователейWordPressневозможно.Иногдабываетнужноре- шитьдовольнотривиальнуюзадачу,которую,темнеменее,средствами
существующихинструментовневыполнить.Например,вамненравит- ся,чтоприиспользованиитемыTwentyTenвлевойчастиподваласай- таещераздублируетсяегоназвание,ивыхотитеубратьэтунадпись.
ПроизвестиэтоизменениевстроеннымисредствамиWordPressнельзя,
нужноделатьэтовсоответствующемслужебномфайле,отвечающемза
формированиеподвалаиегоотображениенастраницахсайта.
Можнонайтинужныйфайлнасвоемкомпьютере(либоскопироватьего
ссервера),внестинужныеизменения,азатемвновьзагрузитьнасер- вер,заменивстаруюверсиюфайла.
ОднакоWordPressивданномслучаепредлагаетболееудобныйибы- стрый способ редактирования кода. В разделе управления темами су- ществует встроенный HTML-редактор, в котором можно изменить ис- ходныйкоддлялюбогослужебногофайлатекущейтемы.
СОВЕТ
Надеюсь,выпомните,чтодляредактированиякоданужноис- пользоватьспециальныйредактор,поддерживающийразлич- ныекодировки(например,UnicEdit),ноникакнестандартную
программуWindows
Блокнот
ВНИМАНИЕ!
Изменения,касающиесявнешнеговидасайта,производятся
только в файлах текущей дизайн-темы. Редактировать для
этого код исходных служебных файлов WordPress (они на- ходятсявкорневашейпубличнойпапкинасервере)нетолько
бессмысленно,ноиопасно,таккаквыможетенарушитьрабо- тоспособностьсамого«движка».Отом,гдеразмещеныфайлы
тем,мыужеговориливыше,вразделе«Установкаиактивация
тем».Например,длятемыTwentyTenэтодиректория
http://
mysite.ru/wp-content/themes/twentyten

240
Глава 7. Дизайн сайта
Для начала работы с редактором кода выберите пункт меню панели
управления
Внешний

вид
4
Редактор
(рис.7.27).
Рис. 7.27. HTML-редактор тем
Основную часть страницы занимает сам текстовый редактор с кодом
(этот код выглядел бы точно так же, как если бы вы открыли служеб- ныйфайлнасвоемкомпьютере,впрограммеUnicEdit).Вправойколонке
приведенвесьпереченьслужебныхфайловтемы,доступныхдляредак- тирования.Крометого,вверхуэтойколонки,враскрывающемсясписке
можновыбратьдляредактированиялюбуюдругуютемуизустановлен- ныхнасайте.Но,самособой,вынезаметитеникакихизмененийнасай- те,поканеактивируетеновуютему.
Соответственно, если вы внесли изменения, касающиеся
внешнеговидасайта,апозжеактивировалиновуютему,они
несохранятся,таккакбылизаписанывслужебныхфайлах
предыдущейиспользуемойтемы.Ксожалению,сэтимнельзя
ничегоподелать,иправкиповнешнемувидупридетсявновь
вноситьвпрограммныйкодновогошаблона.

241
Редактирование дизайн-темы в HTML-режиме
Поумолчаниювредактореоткрытодинизфайловстилевойразметки
(CSS,мыпоговоримонейниже),имяфайлавыводитсянадокномредак- тора,нарис.7.27это
editor-style-rtl.css
.Ненужноначинатьсредактирова- ниятогокода,которыйотобразитсяуваснаэкране,впервуюочередь,
необходимовыбратьнужныйнамфайлизагрузитьеговредактор.
Вправойколонкерядомсименамифайловприводятсяподсказки,кото- рыепомогутбыстросориентироватьсявименахфайловиихпредназна- чении.Причемвбольшинствеслучаевэтиименатипичныдлявсехтем
WordPress,поэтомувыбыстроразберетесьсними.
Напомню,чтомысобиралисьубратьизподвалафразусназваниемсай- та.Дляэтогонужнооткрытьвредакторефайл,отвечающийзаформи- рованиеподвала.Этофайл
footer.php
,ипослекликанаегоназванииис- ходныйкодбудетзагруженвокнередактора(рис.7.28).
Далее,вкоденужнонайтифрагмент,отвечающийзавыводименисай- та. В данном случае сложно дать какие-то конкретные рекомендации,
потому что код нужно научиться читать, быстро определяя, какие его
фрагментызачтоотвечают.Дляэтогоспервастоитбеглопознакомить- сясазамивеб-программированияиязыкамиHTMLиPHP.Либоможно
положитьсяназдравыйсмыслилогикуисделатьпредположение,что
таковым фрагментом могут являться строки, содержащие фразы
site-
info
и
bloginfo
Предположениеэтоверное,авесьфрагменткода,подлежащийудале- нию,выглядитследующимобразом(листинг7.1).
ВНИМАНИЕ!
Есливынеуверенывпредназначениитогоилииногофайла—
неменяйтеего!Вкрайнемслучае,передтемкакначатьправить
код,выделитеего,скопируйтевотдельныйтекстовыйдокумент
итолькопотомменяйтеисходныйкодиобновляйтеего.Вэтом
случаевсегдаможнобыстровернутьизначальныепараметры
служебногофайла.

242
Глава 7. Дизайн сайта
Рис. 7.28. Редактирование кода файла footer.php
листинг 7.1. Код вывода названия сайта в подвале

"
title="
get_bloginfo( 'name', 'display' ) ); ?>" rel="home">


КогдамырассматривалисозданиезаписейврежимеHTML-редактора,
тообращаливниманиенанеобходимостьзакрыватьтеги.Этоправило
справедливоивслучаесредактированиемисходногокодаслужебных
файлов—обратитевнимание,чтолистинг7.1содержитоткрывающий
тег


id="site-info">
изакрывающийтег


#site-info

-->

243
Редактирование дизайн-темы в HTML-режиме
Простоудалитефрагменткода,приведенныйвлистинге7.1,инажмите
кнопку
Обновить

файл
. Теперь название вашего сайта не будет отобра- жатьсявподвале.
Аналогичнымобразомможновидоизменятьидругиеслужебныефайлы
темы,новрамкахданнойкнигипереднаминестоитзадачаосвоитьвеб- программирование(аеговлюбомслучаепридетсяосвоить,еслитолько
вашиизменениянебудутноситьтотжехарактерминимальноговмеша- тельства,которыймытолькочторассмотрели).Нодажесамостоятельно
экспериментируясредактированиемкодаразличныхслужебныхфай- лов,выбыстроразберетесьвлогикеработыкода,научитесьегопони- матьивноситьнекоторыеизменения.
Другойтипслужебныхфайлов,которыеможноменятьчерезHTML- редактор,—этофайлыстилевойразметкиCSS.Вотличиеотосновного
наборафайлов,имеющихформат
.php
иотвечающихзавыводнастра- ницетогоилииногоструктурногоэлемента,файлыстилевойразметки
(срасширением
.css
)определяютвнешнийвидиоформлениеэтихэле- ментов.Например,именновфайлахCSSуказываютсяшрифты,исполь- зуемыенасайте,цветоваяразметкаразличныхэлементовит.д.
Вкачествепримерапроизведемследующееизменение.ВтемеTwenty
Tenприсутствуетдовольностранноедлясовременныхсайтовоформле- ниегиперссылок.Тессылки,которыевамиужепосещались,выделяют- сянеобычнымдлятемыцветом,афиолетовым.Врезультатепостоян- ныепосетителисайтабудутнаблюдатьдовольнопеструюмассуссылок,
половинакоторыхбудетчерной,автораяполовина—фиолетовой.
ПРИМЕЧАНИЕ
Междупрочим,коддлясчетчикастатистикиможнобылодо- бавитьвподваличерезHTML-редактор,точнотакжеотре- дактировавфайл
footer.php
ПРИМЕЧАНИЕ
Кстати, когда мы меняли фоновое изображение для сайта
(
Внешний

вид
4
Фон
),тоизменениязаписывалисьименновфайл
CSS,отвечающийзанастройкуэтогопараметра.

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

стилей
(
style.css
)инайдитевнемследующий
фрагменткода:
a:link {
color:#0066CC;
}
a:visited {
color:#743399;
}
Первыедвестрокиопределяютцветобычныхссылок,ачетвертаяипя- тая—посещенныхссылок.Соответственно,чтобыпривестицветовую
гаммукединообразию,скопируйтетекствторойстрокивпятую:
a:link {
color:#0066CC;
}
a:visited {
color:#0066CC;
}
Послеэтогонажмитекнопку
Обновить

файл
иубедитесь,чтоцветадля
гиперссылокбылиизмененыкорректно.
СОВЕТ
Файл
style.css
оченьобъемныйиискатьфрагментлучшеобыч- нымпоиском,спомощьюсочетанийклавиш
Ctrl+F

245
Г
лава
8.
Работа с плагинами
WordPress
В этой главе мы рассмотрим работу с плагинами WordPress, ко-
торые значительно расширяют функциональность сайта и по-
зволяют решить большинство встающих перед разработчиком
задач. Кроме того, мы дадим краткий обзор наиболее популяр-
ных плагинов, которые рекомендуется установить на любой
сайт, работающий на CMS WordPress.
Поиск и установка плагинов
9
Обзор плагина для защиты от спама Akismet
9
Основы поисковой оптимизации и использование плагина All in
9
One Seo Pack
Набор плагинов, рекомендуемых для сайта
9
Управление плагинами
Плагин (расширение)
—этодополнительныйпрограммныймодуль,ин- тегрируемыйв«движок»WordPressдлявыполненияопределеннойза- дачи,непредусмотреннойбазовымфункционаломCMS.
8
1   ...   4   5   6   7   8   9   10   11   12


написать администратору сайта