Notice: Undefined variable: pattern_callback in /var/www/html/travelbloggers.ru/public_html/include/parser.php on line 814

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

+2


Notice: Undefined variable: pattern_callback in /var/www/html/travelbloggers.ru/public_html/include/parser.php on line 814

2

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

Я пробовал Artisteer.

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

3

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

dane-mo пишет:

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

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

dane-mo пишет:

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

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

4

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

ajayver пишет:

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

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

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


Notice: Undefined variable: pattern_callback in /var/www/html/travelbloggers.ru/public_html/include/parser.php on line 814

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. В платных шаблонах часто все настройки доступны из специально сделанного меню.
Все так сложно, потому что большинство пользователей не меняют ширину сайта никогда, а те кто меняют, делают это всего один раз).


Notice: Undefined variable: pattern_callback in /var/www/html/travelbloggers.ru/public_html/include/parser.php on line 814

16

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

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


Notice: Undefined variable: pattern_callback in /var/www/html/travelbloggers.ru/public_html/include/parser.php on line 814

17

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

Art_gud пишет:

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

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

18

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

Pavel. пишет:

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

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

19

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

Здравствуйте,я только начинаю изучать создание сайтов, подскажите пожалуйста а через фотошоп ,если создать сайт-его дизайн,как потом его привязать к интернету,может конечно я неправильно выражаюсь,как полностью оформить сайт и вдохнуть в него жизнь?


Notice: Undefined variable: pattern_callback in /var/www/html/travelbloggers.ru/public_html/include/parser.php on line 814

20

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

vkangel пишет:

Здравствуйте,я только начинаю изучать создание сайтов, подскажите пожалуйста а через фотошоп ,если создать сайт-его дизайн,как потом его привязать к интернету,может конечно я неправильно выражаюсь,как полностью оформить сайт и вдохнуть в него жизнь?

если страницу рисовать в фотошопе, ее надо верстать потом. я сам новичек в этом деле и использую для тренировки готовый шаблон, его можно редактировать. нарисовать в том же фотошопе шапку, вставить на сайт вместо стандартной. в wordpress можно отредактировать ширину, высоту, цвет... мои друзья рисуют в фотошопе сайты, отдают верстальщикам и только после этого можно устанавливать на движок. вот для примера сайт, который клепали мои друзья - http://level-shop.ru/ это сайт моей фирмы. контент отсутствует, так как я закрыл фирму, и в левом сайдбаре отключены баннера, поэтому столбики торчат:) а внизу ссылка на блог моего производства:) слабенький.. тренируюсь на нем. Шапку и ширину я менял. картинку на стоке покупал.

21

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

спасибо за ответ,а без верстальщиков нельзя обойтись? и если без фотошопа в какой программе делается сайт?

22 Отредактировано Stasyan (17.02.2013 12:23)

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

vkangel пишет:

спасибо за ответ,а без верстальщиков нельзя обойтись? и если без фотошопа в какой программе делается сайт?

обойтись можно - учись верстать сам)) существует множество редакторов. Аджей давал ссылочку на хорошую програмку + обучалку к ней http://travelbloggers.ru/topic71-progra … atsya.html
внизу статьи написано ГРАФИЧЕСКИЙ РЕДАКТОР там ссылка для скачивания проги. я в нем немнго работал.
мой тебе совет - хочешь хороший дизайн, обращайся к специалистам.
хочешь верстку - обращайся туда же.. могу подсказать ребят дизайнеров, через них можно выйти на верстальщиков..
Или изучай подробно сам.. Аджей расписал как создать блог. я следуя его учебнику сделал сайт на вордпрессе. вот здесь можно купить хостинг не дорогой и удобный http://hostenko.com/ref=40748  теперь учусь работать с ним.. это занимает время, но дает опыт.. постепенно сделаешь то, к чему стремишься.

23

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

я то хочу стать сама специалистом вот и спрашиваю) мне нравится  в этом работать) спрашиваю советов так сказать у профессионалов)) чтоб изучить все сама)

+1

24

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

vkangel пишет:

я то хочу стать сама специалистом вот и спрашиваю) мне нравится  в этом работать) спрашиваю советов так сказать у профессионалов)) чтоб изучить все сама)

я не профессионал, но советую учиться самостоятельно. начни с чтения учебника Аджея. ознакомься хоть поверхностно, есть много литературы, которую следует почитать.. я трачу около 4-10 часов в сутки на изучение, чтение.. регистрируй хостинг по ссылочке в предыдущем посте (или в любом другом, мне советовали этот) там пробная версия на 14 дней. очень удобно потренироваться. потом выберешь тариф и можно оплатить через вебмани. так же можно не запариваться с доменом пока. на хостинге дадут возможность использовать их домен, который можно в любое время поменять на свой. на хостинге сразу установлен wordpress. это, пожалуй самый простой движок. в разделе "темы" предоставлено множество обложек для сайта. выбирай какая подходит/нравится и пробуй работать с ней. можно изменть как душе угодно. в интернете также куча бесплатных тем.


Notice: Undefined variable: pattern_callback in /var/www/html/travelbloggers.ru/public_html/include/parser.php on line 814

25

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

Шаблон рисуется в ФШ, затем слайсами "slice tool" режется на куски, которые можно заверстать используя даже обычный блокнот, но лучше использовать notepad++. Из прог, одна из известных Dreamweaver, но она при неумелом обращении оставляет кучу ненужного "мусора" кода. Дальше все просто 8), изучаешь базу (HTML, CSS + немного JS) и все эти куски кодом прописываешь, в сети куча видеоуроков и курсов.
Думаю рзберешься, удачи!

Цель: Филиппины г. Думагете.
Портфель

+1