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

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