1

Тема: Как устанавливать шаблоны и где их искать

http://travelbloggers.ru/uploads/images/create-a-blog/go-to-create-a-blog.jpg

Как устанавливать шаблоны WordPress и где их искать

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

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

Перед выбором шаблона, вам нужно решить, каким вы хотите видеть свой блог - будет он с одним или двумя сайдбарами, как они будут расположены, где будет ваш логотип и т.д.
Чтобы понять, какие элементы должны присутствовать на сайте и в каких местах, я советую почитать книгу Стивена Круга "Не заставляйте меня думать". Этот человек имеет огромный опыт работы в области юзабилити сайта и очень понятно описывает основные моменты построения сайтов, которые пользователю будет удобно читать. Не поленитесь прочитать эту книгу, она небольшая и читается за пару часов.

Пожалуйста, войдите или зарегистрируйтесь, чтобы увидеть скрытый текст.

Также вам нужно выбрать ширину вашего сайта. Она бывает "резиновой" (flexible), когда ширина сайта изменяется в зависимости от ширины окна браузера и фиксированной (fixed), когда сайт имеет определенную ширину и она неизменна.

Я считаю, что сайты фиксированной ширины, а так же нижний порог ширины резиновых сайтов не должен превышать 1008 пикселей.
Дело в том, что если этот параметр будет больше, то ваш сайт будет очень неудобно читать тем, у кого разрешение экрана 1024*768 и меньше. А таких людей довольно много, вот статистика посещений нашего блога за месяц:

http://travelbloggers.ru/uploads/images/wp/admin/theme/1.jpg

Как видно из таблички, около 15 процентов посетителей имеют разрешение в 1024 пикселя по ширине, а это тысячи людей. У меня у самого тоже такое разрешение экрана и я замечаю, что широкие сайты я избегаю, даже если они очень интересные. Просто не реально читать текст двигая ползунок вправо-влево на каждой строчке или фотке.

Обратите внимание, что когда вы просматриваете длинную страницу сайта, справа в браузере появляется полоса вертикальной прокрутки и она тоже занимает драгоценные пиксели. Поэтому сайт шириной 1024 пикселя все равно не поместится на экране и мы вынуждены делать ширину сайта не более 1008 пикселей.

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

После того, как вы более менее определились с элементами вашего сайта, откройте панель управления вашим блогом и зайдите в пункт "Темы" в разделе "Внешний вид".

http://travelbloggers.ru/uploads/images/wp/admin/theme/2.jpg

В следующем окне выберите вкладку "Установить темы" в правой верхней части экрана.

http://travelbloggers.ru/uploads/images/wp/admin/theme/3.jpg

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

http://travelbloggers.ru/uploads/images/wp/admin/theme/4.jpg

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

Когда выберете все параметры, жмите на кнопку "Найти темы".

Вы попадаете на окно результатов поиска.
Здесь вы можете просмотреть шаблоны и нажать на ссылку "Установить", если вам понравился такой дизайн. Не волнуйтесь, внешний вид вашего блога сразу не измениться - после установки у вас будет возможность "примерить" новый дизайн, при том, что посетители будут видеть старый, а уж потом применить этот шаблон к сайту.

http://travelbloggers.ru/uploads/images/wp/admin/theme/5.jpg

Жмем на кнопку установить:
http://travelbloggers.ru/uploads/images/wp/admin/theme/6.jpg
По сути установка просто скачивает архив с шаблоном и распаковывает его на хостинге - никаких изменений в коде сайта не происходит.

Когда установка завершится, вы сможете посмотреть на свой блог с новым дизайном и активировать тему, если все понравилось.
http://travelbloggers.ru/uploads/images/wp/admin/theme/7.jpg

На этом процесс установки темы закончен.

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

После скачивания шаблона со стороннего сайта, просто воспользуйтесь ссылкой "Загрузка" в меню установки тем или распакуйте архив с темой, и загрузите все эти файлы по FTP в папку wp-content/themes/. После этого шаблон будет доступен в меню управления темами.

Если вы не смогли нигде найти шаблон для своего сайта, то вы можете попробовать создать его сами, используя, например, программу Artisteer, которой я не пользовался и буду благодарен тому, кто опишет процесс работы с ней. Или воспользоваться одной из инструкций, или просто выбрать тот шаблон, который вам нравится больше других и подправить его там, где нужно. Об этом я позже немного расскажу, хотя всю науку дизайна и верстки я, естественно, тут изложить не смогу  :) .



http://travelbloggers.ru/uploads/images/create-a-blog/go-to-create-a-blog.jpg

+1

2

Re: Как устанавливать шаблоны и где их искать

Я пробовал Artisteer.

Очень удобная программа.
Минус - нельзя загрузить сторонний шаблон и изменить его в Аритистире. Приходится выбирать из предлагаемых. Где-то читал, что проще написать все руками - так будет гораздо понятней и компактней. Но это скорее для тех, кто уже знаком с html, php и проч.

3

Re: Как устанавливать шаблоны и где их искать

dane-mo пишет:

Минус - нельзя загрузить сторонний шаблон и изменить его в Аритистире.

Я так понял, что в платной версии можно сохранять и загружать проекты, хотя возможно сторонние шаблоны он не распознает.

dane-mo пишет:

Где-то читал, что проще написать все руками - так будет гораздо понятней и компактней.

Это так. Сам так и писал последний шаблон для нашего блога, но это был уже 4-ый редизайн и даже имея прошлый опыт, было довольно сложно.
Лучше сначала брать готовый шаблон и редактировать. Сначала просто style.css, потом можно и в остальных файлах покопаться.

4

Re: Как устанавливать шаблоны и где их искать

ajayver пишет:

Я считаю, что сайты фиксированной ширины, а так же нижний порог ширины резиновых сайтов не должен превышать 1008 пикселей.

Дело в том, что если этот параметр будет больше, то ваш сайт будет очень неудобно читать тем, у кого разрешение экрана 1024*768 и меньше.

А почему именно 1008, а не 1024?

5

Re: Как устанавливать шаблоны и где их искать

dane-mo пишет:

А почему именно 1008, а не 1024?

Оставшиеся 16 - ширина полосы вертикальной прокрутки.

+1

6

Re: Как устанавливать шаблоны и где их искать

mrchoo пишет:
dane-mo пишет:

А почему именно 1008, а не 1024?

Оставшиеся 16 - ширина полосы вертикальной прокрутки.

Спасибо. Оказывается в тексте так и написано - невнимательно прочитал=)

7

Re: Как устанавливать шаблоны и где их искать

mrchoo пишет:
dane-mo пишет:

А почему именно 1008, а не 1024?

Оставшиеся 16 - ширина полосы вертикальной прокрутки.

Кстати, в Internet Explorer полоса вертикальной прокрутки еще шире где-то на 3-4 пискеля и горизонтальная прокрутка все равно появляется даже при ширине сайта в 1008px. Но на читабельность сайта это не сильно влияет и я когда-то пришел к выводу, что IE лучше не поддерживать и не менять весь сайт под него, чтобы подталкивать людей к переходу на более современные браузеры.
Говорят, 9-ый IE имеет все шансы обогнать остальные браузеры по всем параметрам. Будем надеяться.

8

Re: Как устанавливать шаблоны и где их искать

Вообще, обычно, перестраховываясь, ширину сайта делают 980 пикселей. :)
Посмотрите готовые шаблоны под ВП с фиксированной шириной.

9

Re: Как устанавливать шаблоны и где их искать

Brim пишет:

Вообще, обычно, перестраховываясь, ширину сайта делают 980 пикселей. :)
Посмотрите готовые шаблоны под ВП с фиксированной шириной.

Да, это так. При такой схеме сайдбары и контент получаются более стандартных размеров.
Когда мы делали свой сайт, у нас была проблема в том, что фотографии имеют ширину 777 (окруляли до 780) пикселей, то есть если бы мы сделали сайт шириной 980, на сайдбар с учетом отступов осталось бы всего 160 пикселей (плюс padding и на содержимое сайдбара остается всего 140). Поэтому было решено сделать максимально возможную ширину.

10

Re: Как устанавливать шаблоны и где их искать

Для тех кто в танке.
Подскажите, пожалуйста, где вообще устанавливается фиксированная ширина сайта?
Спасибо!

11

Re: Как устанавливать шаблоны и где их искать

Alex-Zavodskiy пишет:

Подскажите, пожалуйста, где вообще устанавливается фиксированная ширина сайта?

Все зависит от выбранного шаблона. Некоторыми можно управлять из админки в разделе "Вид". У остальных внешний вид прописан в файле style.css в папке шаблона.
Более точно можно сказать только увидев шаблон.

12

Re: Как устанавливать шаблоны и где их искать

ajayver пишет:

Все зависит от выбранного шаблона. Некоторыми можно управлять из админки в разделе "Вид". У остальных внешний вид прописан в файле style.css в папке шаблона.
Более точно можно сказать только увидев шаблон.

У меня тема из примера "Twenty Ten 1.1".
Есть ли возможность изменять ширину сайта в этой теме не через style.css?
У меня админка на английском, поэтому напиши, пожалуйста, английские названия разделов.

13

Re: Как устанавливать шаблоны и где их искать

По английски раздел управления темами называется Appearance, но этот шаблон поддерживает только смену картинки в хедере и бэкграунда.
Ширина у него и так фиксированная, задается в файле style.css примерно на 163-й строке.

#wrapper {
    margin: 0 auto;
    width: 940px;
}

+1

14

Re: Как устанавливать шаблоны и где их искать

Понятно.
Как в style.css задавать этот параметр я уже разобрался, просто я думал, что существует какой-то более простой способ.
Выполнять все настройки через style.css по моему не удобно.
Благодарю за помощь;)

15

Re: Как устанавливать шаблоны и где их искать

Можно редактировать style.css в меню Appearance - Editor. В платных шаблонах часто все настройки доступны из специально сделанного меню.
Все так сложно, потому что большинство пользователей не меняют ширину сайта никогда, а те кто меняют, делают это всего один раз).

16

Re: Как устанавливать шаблоны и где их искать

Доброе время суток. Подскажите пожалуйста, может кто-то знает как сломать Artisteer или хотя-бы убрать из готовых шаблонов вотер-марки? У меня просто пока нет 50 долларов свободных?  :blush:

17

Re: Как устанавливать шаблоны и где их искать

Art_gud пишет:

У меня просто пока нет 50 долларов свободных?

воспользуйтесь другим бесплатным шаблоном, а лучше html поизучать - это не сложно и перспективно на будущее.

18

Re: Как устанавливать шаблоны и где их искать

Pavel. пишет:

воспользуйтесь другим бесплатным шаблоном, а лучше html поизучать - это не сложно и перспективно на будущее.

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