Шаблон сайта — что это такое, зачем он нужен, как его выбрать, установить и изменить под потребности своего сайта?
Шаблон сайта — это совокупность файлов, используемых CMS (системой управления сайтом) для формирования внешнего вида сайта и определяющих форму отображения информации на сайте.
Иное название шаблона — тема.
Шаблон содержит файлы различных изображений (как для шапки, так и других частей сайта), файл стилей отображения style.css, другие файлы CSS, файлы формирования частей сайта, подключаемые и другие файлы.
Шаблоны облегчают деятельность разработчиков сайтов и позволяют им сосредоточить усилия на множестве более важных проблем, возникающих при создании сайтов.
Сразу отмечу, поисковые системы анализируют содержимое сайта, а не шаблон, поэтому шаблон особо, пожалуй, не влияет на позицию сайта в выдаче поисковых систем.
Используя стандартный шаблон, Вы вместе с ним используете и прилагаемые к нему изображения, что отмечается поисковыми системами и, возможно, как-то хитро учитывается ими. Существуют специальные сервисы проверки уникальности изображений, имеет смысл воспользоваться ими и принять меры для того, чтобы все изображения на сайте были уникальными.
Желательно иметь уникальный шаблон сайта, чтобы он не был близнецом других сайтов в глазах посетителей. Вспоминаю, как я вздрогнул, когда наткнулся на сайт с тем же шаблоном, что и меня!
Пытался подобрать новый шаблон для сайта, даже пробовал устанавливать некоторые, но не нашёл подходящего.
Отмечу, что, по моему мнению, держать на сайте лишние шаблоны после опробования не следует, ибо они зря занимают много места на сервере хостинга.
Заказывать или делать самому шаблон сайта нерентабельно или неоправданно сложно для большинства создателей сайтов, поэтому приходится придавать уникальность шаблону сайта заменой изображений и изменением ряда параметров сайта (ширины отображения, шрифтов и их размера, …)
Собираюсь со временем воспользоваться фотоаппаратом, сделать сотню фотографий, отобрать восемь подходящих, вырезать из них изображения соответствующего размера и заменить изображения в шаблоне, сохранив имена изображений, чтобы не возиться с поиском и заменой имён изображений в базе данных.
Считаю, что вместо изображения в хедере шаблона красивых бесполезных картинок следует разместить рекламные баннеры, предназначенные как для саморекламы сайта, так и для размешения рекламы от прямых рекламодателей. Свои соображения по этому поводу изложил на странице Banners onto images.
В изначально выбранном шаблоне меня не устраивал ряд особенностей.
Самый главный из них — нерациональное использование ширины страницы. Мой ноутбук с экраном 14-ть дюймов имеет разрешение 1366*768, большинство пользователей сайта имеют экраны с 1024-ю пикселями по горизонтали, а многие и с большим.
Сайты солидных фирм умудряются использовать всю ширину экрана без нижней прокрутки экрана.
Я считаю, что в идеале шаблон должен быть адаптивным: сайт должен занимать всю ширину экрана, как это происходит, например, на административной странице сайта, сделанного на WordPress.
В шаблоне была выставлена, насколько я помню, ширина сайта 940-к пикселей, а ширина текста на странице сайта составляла 700-т пикселей.
Поэтому сначала поднял ширину отображения сайта до 980-ти, затем увеличил до 1024-х, потом уменьшил до 1014-ти, затем увеличил до 1140-ка. Для этого в файле style.css вносил изменения:
.single-attachment #content {
margin : 0 auto;
width : 1140px;
}
……
#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
margin : 0 auto;
width : 1140px;
}
…..
#access {
background : #000;
display : block;
float : left;
margin : 0 auto;
width : 1140px;
}
#access .menu-header, div.menu {
font-size : 13px;
margin-left : 12px;
width : 1140px;
}
После этого методом «научного тыка» пришлось изменить ещё некоторые параметры в файле стилей , чтобы страницы сайта выглядели нормально.
Как растянуть изображения в «хэдере»? Для этого в functions.php нужно изменить значение параметра width с 940-ка на 1140-к. Соответствующий фрагмент файла прилагаю:
// The custom header business starts here.
$custom_header_support = array(
// The default image to use.
// The %s is a placeholder for the theme template directory URI.
‘default-image’ => ‘%s/images/headers/path.jpg’,
// The height and width of our custom header. == было 940 — стало 1140 ==
‘width’ => apply_filters( ‘twentyten_header_image_width’, 1140 ),
‘height’ => apply_filters( ‘twentyten_header_image_height’, 198 ),
Теперь все изображения проходят процедуру автоматического масштабирования под размер 1140*198 пикселей.
Для облегчения процесса имеет смысл проводить пробные изменения, используя другой браузер, в котором открываем любую страницу сайта и запускаем режим Просмотр кода элемента, доступный в выпадающем меню по правой кнопке мыши.
Внизу страницы откроются два окна: в левом окне показан HTML-код страницы, а в правом окне после клика левой кнопки мыши по строке кода появляются функции, соответствующие строке кода. Наводя курсор мыши на строки кода, в верхнем окне видим, за какое поле верхнего окна отвечает строка.
Запустив поиск (по Ctrl+F), вписываем в окно поиска слово wrapper и переходим к строке с <div id=’wrapper’ … >
Наводим курсор мыши на эту строку и видим в верхнем окне, что именно эта строка кода отвечает за использование пространства экрана страницей сайта. Кликаем левой кнопкой по этой строке, затем переходим к правому окну. Находим функцию #wrapper с параметром width и выставляем width: 1140px; или иную ширину.
В верхнем окне видим изменение поля, отведенного странице сайта. Все вносимые изменения распространяются только на одну вкладку браузера, поэтому можно смело экспериментировать, находя нужные значения параметров функций.
К сожалению, комментарии функций шаблона не содержат информации, позволяющей осознанно проводить перестройку шаблона — приходится строить догадки по названиям функций и параметров, проверять их и затем вносить изменения в файлы шаблона в панели управления сайтом или на хостинге.
Скопировал в Excel из счётчика HotLog статистику разрешений экрана за тридцать дней, немного поколдовал с ней и пришёл к выводу, что надо настраивать шаблон сайта на ширину 1140-к пикселей, а ширину поля текста страницы — на 790-то пикселей. Пусть посетители с недостаточно широкими экранами пользуются не только вертикальной, но и горизонтальной прокруткой.
| Разрешение экрана | |||||
| Ширина | Высота | Посетителей | Проценты | 14855 | Доля |
| 1024 | 768 | 3920 | 26.39% | 14230 | 0,958 |
| 1920 | 1080 | 776 | 5.22% | ||
| 1920 | 1200 | 16 | 0.11% | ||
| 1680 | 1050 | 307 | 2.07% | ||
| 1600 | 900 | 446 | 3.00% | ||
| 1600 | 1200 | 7 | 0.05% | ||
| 1536 | 864 | 24 | 0.16% | ||
| 1440 | 900 | 440 | 2.96% | ||
| 1366 | 768 | 2476 | 16.67% | ||
| 1360 | 768 | 168 | 1.13% | ||
| 1280 | 1024 | 1550 | 10.43% | ||
| 1280 | 800 | 584 | 3.93% | ||
| 1280 | 720 | 131 | 0.88% | ||
| 1280 | 768 | 61 | 0.41% | ||
| 1280 | 960 | 54 | 0.36% | ||
| 1280 | 752 | 27 | 0.18% | ||
| 1152 | 864 | 108 | 0.73% | ||
| 1093 | 614 | 27 | 0.18% | ||
| 1024 | 600 | 211 | 1.42% | ||
| 1024 | 819 | 22 | 0.15% | ||
| 1024 | 552 | 10 | 0.07% | ||
| 980 | 1632 | 2865 | 19.29% | 14230 | 0,958 |
| 911 | 512 | 5 | 0.03% | ||
| 853 | 683 | 4 | 0.03% | ||
| 800 | 600 | 18 | 0.12% | ||
| 800 | 5000 | 5 | 0.03% | ||
| 800 | 1003 | 5 | 0.03% | ||
| 800 | 480 | 5 | 0.03% | 14272 | 0,961 |
Анализ показателей Доля на этой странице гарантирует, что в диапазоне 980 — 1920 пикселей находится 95,8 % посетителей сайта — они будут сразу видеть текст по ширине и гарантированно — левый край сайдбара. А в диапазоне 800 — 1920 пикселей находится 96,1 % посетителей сайта — они будут сразу видеть текст по ширине.
Если Вы попали в 3,9 % или у Вас плохо отображаются страницы сайта, просьба сообщить в Комментариях о том, как у Вас отображается сайт.
Приглашаю всех высказываться в Комментариях. Критику и обмен опытом одобряю и приветствую.
И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, расположенные под Комментариями.
Продолжение тут…
