Здравствуйте, сегодня рассмотрим wordpress плагин, который позволит создать на определенной странице, записи (пост) горизонтальную прокрутку контента.
Скачать исходники для статьи можно ниже
PS: Статья в процессе написания…
Плагин горизонтальной прокрутки можно скачать с моего сайта по следующей ссылке – плагин горизонтальная прокрутка или же скачать с репозитория – “github.com/pommiegranit/horizontal”.
Установка плагина:
– скачиваем zip архив плагина на свой компьютер;
– заходим в панель управления wordpress, выбираем пункт “Плагины” и его подпункт “Добавить новый”, далее жмем на ссылку “Загрузить плагин” и выбираем скаченный zip архив с плагином, устанавливаем и активируем.
Для того, чтобы применить горизонтальную прокрутку к конкретной записи (пост, страница), необходимо:
1. Зайти в “Редактор записи” (в админке wordpress выбираем пункт “Записи” и подпункт “Все записи”, выбираем нужную запись к которой хотим применить горизонтальную прокрутку).
2. Отображаем окошко “Произовльные поля”:
Для этого в правом верхнем углу жмем на ссылку “Настройки экрана”:
И ставим галочку напротив “Произвольные поля”:
3. Добавляем произвольное поле с именем horizontal и значением true
Как добавить произвольное поле?
Под визуальным редактором записи находим окошко ” Произвольные поля”:
Жмем ссылку “Введите новое” и вводим Имя и Значение Произвольного поля:
И жмем на кнопку “Добавить произвольное поле”.
4. Добавляем произвольное поле с именем post_style и в значении данного поля указываем стиль оформления контента (какой стиль указать будет описано в данной статье ниже).
5. Используйте шорткоды section, чтобы разделить контент по горизонтали.
Пример 1: Простой текст в 2 колонки.
Колонки не создаются автоматически – они образуются благодаря шорткоду block.
Как будет выглядеть контант:
[section] <h2>Секция 1</h2> [block]Китай, (кит. Чжунго, буквально: «срединное государство»; о происхождении русского названия см. Китай (этимология)), официальное название Кита́йская Наро́дная Респу́блика (кит. Чжунхуа Жэньминь Гунхэго), сокращенно КНР — государство в Восточной Азии, крупнейшее по численности населения государство мира (свыше 1,3 млрд., большинство населения — этнические китайцы, самоназвание — хань); занимает третье место в мире по территории, уступая России и Канаде. Со времени провозглашения Китайской Народной Республики в 1949 правящей является Коммунистическая партия Китая. Несмотря на формальное наличие восьми партий КНР фактически является однопартийным тоталитарным государством.[/block] [block]Китайская цивилизация — одна из старейших в мире. По утверждениям китайских учёных, её возраст может составлять пять тысяч лет, при этом имеющиеся письменные источники покрывают период не менее 3500 лет. Давнее наличие систем административного управления, которые совершенствовались сменявшими друг друга династиями, создавало очевидные преимущества для китайского государства, экономика которого основывалась на развитом земледелии, по сравнению с более отсталыми соседями-кочевниками и горцами. Ещё более укрепило китайскую цивилизацию введение конфуцианства в качестве государственной идеологии (I век до н. э.) и единой системы письма (II век до н. э.).[/block] [/section]
То есть:
Произвольное поле post_style должно иметь следующее значение:
#section1 .block {
width: 48%;
margin-right: 20px;
float: left;
}
А произвольные поля будут выглядеть так:
В итоге у вас получиться следующее:
Пример 2:Полноэкранное изображение с наложением текста.
Контент:
[section]<h2>Секция 2</h2> Китайская цивилизация — одна из старейших в мире. По утверждениям китайских учёных, её возраст может составлять пять тысяч лет, при этом имеющиеся письменные источники покрывают период не менее 3500 лет. Давнее наличие систем административного управления, которые совершенствовались сменявшими друг друга династиями, создавало очевидные преимущества для китайского государства, экономика которого основывалась на развитом земледелии, по сравнению с более отсталыми соседями-кочевниками и горцами. Ещё более укрепило китайскую цивилизацию введение конфуцианства в качестве государственной идеологии (I век до н. э.) и единой системы письма (II век до н. э.).[/section]
Произвольное поле post_style должно иметь следующее значение:
#section2 {
background-color: #000000;
color: #ffffff;
background: url(https://wptest.io/demo/wp-content/uploads/2013/03/captain-america-676x1024.jpg) 50% 40%;
background-size: cover;
}
#section2 .section-content {
width: 30%;
color: #ffffff;
font-weight: bold;
}
Здесь в теге background – указан путь до картинки.
Если соединить Пример №1 с Примером №2, то получим следующее:
Контент:
[section] <h2>Секция 1</h2> [block]Китай, (кит. Чжунго, буквально: «срединное государство»; о происхождении русского названия см. Китай (этимология)), официальное название Кита́йская Наро́дная Респу́блика (кит. Чжунхуа Жэньминь Гунхэго), сокращенно КНР — государство в Восточной Азии, крупнейшее по численности населения государство мира (свыше 1,3 млрд., большинство населения — этнические китайцы, самоназвание — хань); занимает третье место в мире по территории, уступая России и Канаде. Со времени провозглашения Китайской Народной Республики в 1949 правящей является Коммунистическая партия Китая. Несмотря на формальное наличие восьми партий КНР фактически является однопартийным тоталитарным государством.[/block] [block]Китайская цивилизация — одна из старейших в мире. По утверждениям китайских учёных, её возраст может составлять пять тысяч лет, при этом имеющиеся письменные источники покрывают период не менее 3500 лет. Давнее наличие систем административного управления, которые совершенствовались сменявшими друг друга династиями, создавало очевидные преимущества для китайского государства, экономика которого основывалась на развитом земледелии, по сравнению с более отсталыми соседями-кочевниками и горцами. Ещё более укрепило китайскую цивилизацию введение конфуцианства в качестве государственной идеологии (I век до н. э.) и единой системы письма (II век до н. э.).[/block] [/section] [section] <h2>Секция 2</h2> Китай, (кит. Чжунго, буквально: «срединное государство»; о происхождении русского названия см. Китай (этимология)), официальное название Кита́йская Наро́дная Респу́блика (кит. Чжунхуа Жэньминь Гунхэго), сокращенно КНР — государство в Восточной Азии, крупнейшее по численности населения государство мира (свыше 1,3 млрд., большинство населения — этнические китайцы, самоназвание — хань); занимает третье место в мире по территории, уступая России и Канаде. Со времени провозглашения Китайской Народной Республики в 1949 правящей является Коммунистическая партия Китая. Несмотря на формальное наличие восьми партий КНР фактически является однопартийным тоталитарным государством. [/section]
Произвольное поле post_style должно иметь следующее значение:
#section1 .block {
width: 48%;
margin-right: 20px;
float: left;
}
#section2 {
background-color: #000000;
color: #ffffff;
background: url(https://wptest.io/demo/wp-content/uploads/2013/03/captain-america-676x1024.jpg) 10% 10%;
background-size: cover;
}
#section2 .section-content {
width: 30%;
color: #ffffff;
font-weight: bold;
}
Пример 3: Изображение слева на полстраницы
Контент:
[section]<h2>Секция 3</h2> Китайская цивилизация — одна из старейших в мире. По утверждениям китайских учёных, её возраст может составлять пять тысяч лет, при этом имеющиеся письменные источники покрывают период не менее 3500 лет. Давнее наличие систем административного управления, которые совершенствовались сменявшими друг друга династиями, создавало очевидные преимущества для китайского государства, экономика которого основывалась на развитом земледелии, по сравнению с более отсталыми соседями-кочевниками и горцами. Ещё более укрепило китайскую цивилизацию введение конфуцианства в качестве государственной идеологии (I век до н. э.) и единой системы письма (II век до н. э.).[/section]
Произвольное поле post_style должно иметь следующее значение:
#section3 {
background-color: #000000;
background: url(https://wptest.io/demo/wp-content/uploads/2013/03/captain-america-676x1024.jpg) top left no-repeat;
background-size: 50%;
}
#section3 .section-content {
width: 46%;
margin-left: 50%;
padding: 20px;
}
Пример 4: Изображение справа от текста на полстраницы
Контент:
[section]<h2>Секция 4</h2> Китайская цивилизация — одна из старейших в мире. По утверждениям китайских учёных, её возраст может составлять пять тысяч лет, при этом имеющиеся письменные источники покрывают период не менее 3500 лет. Давнее наличие систем административного управления, которые совершенствовались сменявшими друг друга династиями, создавало очевидные преимущества для китайского государства, экономика которого основывалась на развитом земледелии, по сравнению с более отсталыми соседями-кочевниками и горцами. Ещё более укрепило китайскую цивилизацию введение конфуцианства в качестве государственной идеологии (I век до н. э.) и единой системы письма (II век до н. э.).[/section]
Произвольное поле post_style должно иметь следующее значение:
#section4 {
background-color: #000000;
background: url(https://wptest.io/demo/wp-content/uploads/2013/03/captain-america-676x1024.jpg) top right no-repeat;
background-size: 50%;
}
#section4 .section-content {
width: 46%;
padding: 20px;
}
Пример 5: Фоновое изображение с наложением полупрозрачного текстового блока
Контент:
[section]<h2>Секция 5</h2> Китайская цивилизация — одна из старейших в мире. По утверждениям китайских учёных, её возраст может составлять пять тысяч лет, при этом имеющиеся письменные источники покрывают период не менее 3500 лет. Давнее наличие систем административного управления, которые совершенствовались сменявшими друг друга династиями, создавало очевидные преимущества для китайского государства, экономика которого основывалась на развитом земледелии, по сравнению с более отсталыми соседями-кочевниками и горцами. Ещё более укрепило китайскую цивилизацию введение конфуцианства в качестве государственной идеологии (I век до н. э.) и единой системы письма (II век до н. э.).[/section]
Произвольное поле post_style должно иметь следующее значение:
#section5 {
background-color: #000000;
background: url(https://wptest.io/demo/wp-content/uploads/2013/03/captain-america-676x1024.jpg) 50% 50%;
background-size: cover;
}
#section5 .section-content {
background-color: #ffffff;
opacity: 0.70;
width: 40%;
margin-left: 20px;
padding: 20px;
}