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

Скачать исходники для статьи можно ниже

Для того, чтобы горизонтальная прокрутка работала на вашем сайте, необходимо иметь небольшую высоту странички – это исключит появление вертикальной прокрутки, которая конфликтует с горизонтальной, поэтому нам нужно будет убрать со странички не только сайдбар (боковую колонку), но подвал или шапку, а может и то и другое – главное, чтобы у вас не появилась вертикальная прокрутка.
Но по моему мнению все таки стоит оставить шапку или подвал, чтобы сохранить единый стиль с остальной частью сайта.

Приступим к созданию отдельного файла для шаблона страницы.

За отображение внешнего вида страниц отвечают следующие файлы шаблона вашей темы: page.php, index.php.

Поэтому чтобы не писать код индивидуального шаблона с нуля, просто скопируем файл page.php и будем исправлять в нем код, после переименуем его например в файл shirokiishablon.php (можно придумать и другое название данного файла).

Для этого заходим через программу FileZilla на FTP-cервер вашего сайта, далее входим в вашу текущую тему:

/public_html (или WWW)/wp-content/themes – в этой папке находится все установленные на вашем сайте темы.

В данном примере моя текущая тема будет называться iGames, поэтому я вхожу в папку /iGames.

Далее находим здесь файл page.php и перекидываем его на своей компьютер (в FileZilla просто перетащите его в левое окошко в нужную папку).

После открываем данный файл с помощью редактора кода, ну например: Notepad++ и в самом начале вставляем следующий код:

<?php
/*
Template Name: shirokii
*/
?>

Здесь строка “Template Name:” нужна, чтобы wordpress распознал файл как индивидуальный шаблон, “shirokii” – это название вашего будущего индивидуального шаблона.

Далее убираем ненужные части шаблона: сайдбар (sidebar, боковая колонка),  форуму комментариев и если не влазим по высоте, то удаляем еще подвал (футер) и шапку (хэдер).

Sidebars подключаются в шаблоне вашей страницы с помощью следующего кода:

<PHP get_sidebar ();?>

Находим данную строчку в коде и если нужно удаляем.

Форма комментариев подключается с помощью следующего кода:

<?php comments_template(); ?>

Находим данную строчку и если нужно удаляем.

Подвал подключается к шаблону следующим кодом:

<?php get_footer(); ?>

Находим данную строчку и если нужно удаляем.

Следующий шаг – это подключения для данного индивидуального шаблона javascript для горизонтальной прокрутки колесиком мышки.

Скачать его можно по следующей ссылке:

http://webkolbasa.com/sites/default/files/horizontal_tiny_scrolling.zip

Распаковываем данный архив и закачиваем файл horizontal_tiny_scrolling.js , например, в корневую папку вашего сайта.

После того как вы закачали javascript на свой сайт, вам необходимо его подключить, для этого вставляем вначале кода индивидуального шаблона следующий код:

	
<script type="text/javascript" src="horizontal_tiny_scrolling.js"></script>

, где в параметре “scr” необходимо указать путь до скрипта, например если я закачаю его в корневую папку своего сайта на mnogoblog.ru, то вышеуказанный параметр необходимо записать следующим образом: “scr=https://mnogoblog.ru/horizontal_tiny_scrolling.js”.

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

– нарисовать все, например в графическом редакторе Photoshop (читайте следующую статью: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-wickedly-cool-horizontally-oriented-website-design/ )
– создать широкую таблицу, с большим количеством столбцов.
– разбить контент на множество колонок (здесь тоже можно использовать javascript)

Но если вы оставили на страничке и шапку и подвал, то советую вам выбрать первый вариант, то есть нарисовать контент в графическом редакторе.

Как создать контент с помощью таблицы я описывал в предыдущей статье: Создаем сайты с горизонтальной прокруткой.