Шаблон страницы – Как создать свой шаблон страницы для сайта на WordPress

Содержание

30 бесплатных html5 шаблонов корпоративного сайта / HTML шаблоны / Постовой

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

Смотрите также:
30 бесплатных WordPress шаблонов корпоративного сайта

Flatter

Шаблон в зеленом цвете для корпоративного сайта дизайн-студии. Главная страница с полноэкранным изображение, описанием, списком сотрудников и контактной информацией. Также страницы портфолио и блог.

Tesla

Стильная HTML5 тема корпоративного сайта на автомобильную тематику. Выполнена в виде «изображение-описание». Содержит лайтбокс галерею и поддерживает видео.

4Team Consulting

Качественная тема в стиле Flat для корпоративного сайта компании или веб-студии. Особенности: полноэкранный слайдер изображений с различной анимацией смены картинки, поддерживает шрифтовые иконки Font Awesome, Google Fonts, плавная прокрутка, lightbox галерея c фильтром по темам и многое другое.

My Charity

Шаблон в плоском стиле для сайта благотворительности. Содержит страницы: главная, описание, проекты, блог, события, галерея и контакты. Довольно мощный по функционалу шаблон.

Elegant

Шаблон в современном стиле для модельеров и дизайнеров. Содержит главную, about, услуги, портфолио с лайтбокс галереей и контактную страницы. Имеет две цветовые схемы: темную и светлую.

vOne

Шаблон HTML5 в современном стиле. Содержит такие страницы: домашнюю, «о нас», услуги, портфолио, и контакты. Выполнен в черном, белом и желтом цветах. Подходит для бизнес-сайта, корпоративного сайта, творческой группы или личного сайта.

Professional

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

One

Тема в плоском стиле. Ориентирована для корпоративного бизнес-сайта и включает в себя 4 страницы: главная, о нас, услуги и контакты.

Gelios

Корпоративный шаблон HTML5 в голубом цвете для креативных агенств. Содержит полноэкранное изображение со слайдером, страницу about с различными графиками, фото с описаниями, страницу с услугами, в ней же находится прайс, а также блог, портфолио и контакты.

Corlate

Классный шаблон в современном стиле для корпоративного сайта компании. Поддерживает Font Awesome и CSS3-анимацию, включает Bootstrap слайдер, портфолио, блог и другие элементы и страницы. Также поддерживает Retina мониторы.

Trudge

Шаблон для корпоративного сайта туристической тематики. Особенности: изображение на всю ширину на главной, поддержка видео, есть блог и фото-галерея.

Studeon

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

Aptes

Тема для корпоративного сайта в стиле Flat. Содержит логотип и меню навигации по страницам: главная, about, услуги, портфолио, блог и контакты. Оформлен в светлых тонах и выглядит очень пристижно. Подойдет для бизнес-компании.

Power Grid

Шаблон корпоративного сайта для индустриальной компании. Содержит домашнюю страницу, страницу услуг, описание, проекты и контакты. Основные цвета: красный, белый и черный.

Otoc

Шаблон можно использовать для корпоративного сайта компании и веб-студии. Поддерживает Retina мониторы. Также есть блог.

Alchemist

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

Rangers

Rangers — это шаблон корпоративного сайта на спортивную тематику, также это может быть сайт спортивных новостей. Активно используются красный, белый и черный цвета. Особенности: lightbox галерея (для навигации используется клавиатура) с фильтром изображений, новостной блог, контактная форма и др.

United Comms

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

Payroll

Шаблон содержит слайдер, список услуг, портфолио, отзывы клиентов и виджет-панель в футере. Для портфолио есть отдельная страница с галереей и сортировкой работ. Также имеет блог.

Hiking

Шаблон корпоративного сайта на спортивную тематику. Включает в себя логотип, навигацию по сайту, слайдер текста и список предстоящих событий. Также есть страницы about, новости, события, блог и контакты.

Machine

Шаблон корпоративного сайта на HTML5 для сферы индустрии. Содержит полноэкранный слайдер изображений, отзывы клиентов, портфолио со списком продукции и ее описанием, также список услуг, контакты и блог.

Maguwohost

Шаблон в стиле Flat для веб-хостинга. Включает логотип, меню навигации, изображение и форму проверки доменного имени, особенности, список клиентов и отзывы.

Jetro

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

Ion

Корпоративный сайт в стиле минимализм. Выполнен довольно просто. Имеет галерею с описанием работ и блог. Можно использовать для туристической фирмы или блога путешественника.

Skate

Шаблон для корпоративного сайта горнолыжного курорта и в целом для сайтов спортивной тематики. Страницы: главная, описание, портфолио, блог и контакты. На главной прикольно оформлена галерея в виде слайдера. Активный цвет на сайте — зеленый.

Cleaning

Шаблон в стиле минимализм в светлом оформлении. Подойдет для корпоративного сайта сферы услуг. Сайт содержит слайдер тематических изображений, список услуг, горячее предложение, галерею, списки цен и контакты. Демка представлена в формате jpg.

postovoy.net

Базовый HTML5 шаблон для любого проекта

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

В данном проекте мы будем писать наш код с нуля и объяснять каждую его часть. Было бы невозможно создать такой проект, в котором были бы использованы все существующие новые элементы и техники, поэтому также мы объясним, какие вещи не подойдут под наш проект. Таким образом, у вас будет большой выбор вариантов, как создать свой HTML5 и CSS3 сайт или веб-приложение. Данной статьей можно будет пользоваться, как справочником для ряда техник. Начнем с пустой HTML5 страницы:

<!doctype html> <html lang=»en»> <head> <meta charset=»utf-8″> <title>The HTML5 Herald</title> <meta name=»description» content=»The HTML5 Herald»> <meta name=»author» content=»SitePoint»> <link rel=»stylesheet» href=»css/styles.css?v=1.0″> <!—[if lt IE 9]> <script src=»//html5shiv.googlecode.com/svn/trunk/html5.js»></script> <![endif]—> </head> <body> <script src=»js/scripts.js»></script> </body> </html>

<!doctype html>

<head>

<title>The HTML5 Herald</title>

<!—[if lt IE 9]>

<![endif]—>

</head>

<body>

</body>

</html>

Вот наш базовый шаблон. Теперь давайте разберем отдельные части разметки и посмотрим, как они записывались до HTML5.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Doctype

Первая часть — Document Type Declaration (объявление типа документа) или doctype. Это просто способ сказать браузеру, или любому другому парсеру, какой тип документа рассматривается. Для HTML файлов необходимо указывать версию HTML. Doctype всегда объявляется первым в самом верху HTML документа. Давным-давно объявление типа документа было трудно запоминаемым и сложным занятием. Пример строгого объявления XHTML 1.0:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»

«http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

Переходной HTML4:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

«http://www.w3.org/TR/html4/loose.dtd»>

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

Просто и понятно. Doctype можно записывать в верхнем регистре, нижнем или вообще вперемешку, не имеет значения. Также вы могли обратить внимание, что в объявлении странным образом отсутствует цифра 5. Текущее поколение веб-разметки известно нам под номером «HTML5», но на самом деле это всего лишь результат эволюции предыдущих HTML стандартов. Будущие спецификации также будут просто развитием сегодняшних технологий.

Так как браузеры обязаны поддерживать все существующие типы контента в Интернете, то нельзя полностью полагаться только лишь на doctype. Другими словами, один doctype не делает вашу страницу HTML5 совместимой. Все зависит от браузера. На самом деле, можно вообще использовать один из doctype’ов выше с новыми HTML5 элементами, и страница будет отображаться точно так же, как и с новым типом документа.

Тег html

Следующий по списку в любом HTML документе – тег html. В HTML5 он несильно изменился. В нашем примере выше в этом теге мы добавили атрибут lang со значением en, что означает, что наш документ будет на английском языке. При использовании синтаксиса XHTML необходимо добавлять атрибут xmlns. В HTML5 этого делать больше не нужно, и даже атрибут lang стал необязательным. Документ пройдет валидацию и без этого атрибута. На данный момент мы имеем:

<!doctype html> <html lang=»en»> </html>

<!doctype html>

</html>

Тег head

Следующая часть страницы – секция head. Первая строка внутри тега задает кодировку символом документа. Данный метатег был упрощен и на данный момент опциональный, но рекомендуемый. Раньше нужно было записывать что-то типа:

В HTML5 объявление кодировки свели к минимуму:

Почти в 100% случаев вы будете использовать значение utf8. Подробное объяснение различий в кодировках выходит за рамки данной главы, да и оно, скорее всего, будет вам неинтересно. Но если же вам все-таки интересно, можете почитать о кодировках на W3C или WHATWG.

Обратите внимание: Объявление кодировки

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Чтобы все браузеры правильно считывали кодировку символов, объявление кодировки должно быть среди первых 512 символов документа. Также она должна быть объявлена до любого тега, выводящего контентна экран (типа title, который в нашем примере идет как раз следом после кодировки).

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

<title>The HTML5 Herald</title> <meta name=»description» content=»The HTML5 Herald»> <meta name=»author» content=»SitePoint»> <link rel=»stylesheet» href=»css/styles.css?v=1.0″>

<title>The HTML5 Herald</title>

Данные строки мало отличаются от предыдущего синтаксиса. Заголовок страницы объявляется как обычно, а метатеги мы записали просто для примера, чтобы вы знали, где их нужно размещать. В данной секции можно разместить сколько угодно много валидных тегов meta.

Самое главное в коде выше это объявление стилей, которые задаются через обычный тег link. Кроме href и rel тегу link не нужны больше никакие атрибуты. Атрибут type необязателен, да и раньше он не нужен был для объявления типа контента стилей.

Поддержка старых браузеров

Перед объявлением следующего элемента разметки необходимо немного рассказать про него. В спецификации HTML5 появилось много новых элементов, таких как article и section, которые мы рассмотрим позже. Вам может показаться, что основная проблема для старых браузеров это поддержка нераспознанных тегов, но это не так. Большей части браузеров откровенно все равно, какие теги вы используете. Если в HTML документ добавить тег recipe или ziggy и задать им стили, к примеру, то почти все браузеры нормально прочитают разметку и применят стили без ошибок.

Данный документ, естественно, не пройдет валидацию и в нем будут проблемы с доступностью, зато отрисуется он нормально почти во всех браузерах – за исключением старых версий IE. В версиях до IE9 к нераспознанным тегам стили не применяются. Движок их видит как «unknown elements», так что вы не сможете присвоить им стили или как-то изменить их поведение. Это относится не только к тегам, которые мы придумали, но и ко всем тегам, которые были разработаны после выхода данных версий браузера. А значит, ко всем новым тегам в HTML5.

Хорошая новость в том, что на момент написания статьи большая часть людей, кто еще пользуется IE, сидят на IE9 и выше. Так что для большинства разработчиков данная проблема отпадает сама собой. Однако если большой процент ваших пользователей сидит на IE8 и старше, вам просто придется сделать что-то, чтобы дизайн не развалился на части.

К нашему счастью есть выход из этой ситуации, и это небольшой код на JavaScript, написанный John Resig. Вдохновленный идеей Sjoerd Visscher, John Resig написал код, с помощью которого можно стилизовать HTML5 теги в старых версиях IE.

В нашей разметке так называемый «HTML5 shiv» подключен как тег script внутри условного комментария. Условные комментарии были специально разработаны для IE9 и ниже. С их помощью можно определить версию браузера IE и применить к ней стили или скрипты. Комментарий ниже станет частью разметки только, если пользователь сидит через IE9 и ниже:

<!—[if lt IE 9]> <script src=»//html5shiv.googlecode.com/svn/trunk/html5.js»></script> <![endif]—>

<!—[if lt IE 9]>

<![endif]—>

Также стоит отметить, что если вы используете JS библиотеки, которые работают с HTML5 свойствами или новыми API, то они уже могут содержать в себе скрипт, активирующий HTML5. Если это так, то ссылку на этот скрипт нужно удалить. Один из примеров – JS библиотека Modernizr, которая определяет поддержку современных HTML тегов и свойств CSS. На сайте Modernizr можно выбрать вариант библиотеки с кодом поддержки HTML5 тегов в старых версиях IE. Более подробно Modernizr мы рассматриваем в Appendix A.

Обратите внимание: HTML5 Shiv не решает всех проблем

Всегда есть группа пользователей, для которых HTML5 Shiv бесполезен: те люди, кто по той или иной причине отключил JS и сидит через IE8 или ниже. Как веб-дизайнеры, мы постоянно говорим, что контент нашего сайта должен быть полностью доступен для всех пользователей, даже для тех, кто отключил JS. Но все не так плохо, как кажется. Множество исследований показали, что число людей, отключающих JS настолько мало, чтобы его учитывать, особенно если эти люди вдобавок еще и сидят через IE8 или ниже.

В результатах исследования, опубликованных в 2013 году сайт UK Government Digital Service показал, что число людей, пользующихся государственными веб-сервисами с отключенным JS составляет 1.1%. По результатам другого исследования, проводимого на сайте Yahoo Developer Network (опубликовано в октябре 2010) количество пользователей с отключенным JS составляет 1% от мирового трафика.

Все остальное уже история

В оставшейся части нашего шаблона располагается открывающий и закрывающий тег body, закрывающий тег html, а также ссылка на скрипт. Как и с тегом link, тегу script не нужен атрибут type. Если вы писали на XHTML, то должны помнить, как там записывался скрипт:

Так как JS является единственным сценарным языком программирования в Интернете, который используется во всех практических целях, а также учитывая тот факт, что все браузеры предполагают, что вы используете JS, даже если это явно не задано, в HTML5 документах атрибут type необязателен:

Следуя лучшим практикам, мы поместили тег script в самый низ страницы. Данный подход связан со скоростью загрузки страницы: когда браузер видит тег script, он останавливает загрузку и рендеринг страницы, пока не распарсит файл скрипта. Это сильно сказывается на скорости загрузки страницы, особенно при подключении больших файлов скриптов в верхней части еще до контента. Именно поэтому большая часть скриптов должна размещаться в самом низу страницы, чтобы они загружались уже после загрузки страницы.

В некоторых случаях приходится размещать скрипты в теге head (как с HTML5 shiv), если нужно, чтобы скрипт начал работать еще до рендеринга страницы.

Автор: Louis Lazaris

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

Шаблоны страниц в WordPress — WP Magazine

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

Что такое шаблоны страниц

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

Выбор шаблона страницы в WordPress

Разные темы могут предоставлять разные шаблоны страниц, например шаблон для страницы во всю ширину экрана (без боковой колонки), с левой боковой колонкой вместо правой и прочее. Отсутствие этой опции при редактировании страниц означает, что тема не объявила дополнительные шаблоны.

Шаблоны страниц можно использовать более чем для одной страницы, а некоторые темы создают вполне специфические шаблоны, предназначенные для использования всего один раз. Как например шаблон избранного содержимого в стандартной теме Twenty Eleven:

Шаблон избранного содержимого в Twenty Eleven

Этот шаблон отображает прилепленные записи с их миниатюрами в небольшом слайдере. Страницу с таким шаблоном можно легко использовать вместо главной страницы сайта, изменив настройки в разделе Параметры → Чтение.

Как создать собственный шаблон страницы

Согласно иерархии шаблонов для вывода страниц в WordPress по умолчанию используются файлы темы page.php или page-*.php. Если же для текущей страницы установлен свой шаблон, то ядро WordPress будет использовать его.

Шаблоны страниц в темах WordPress это отдельные файлы, которые могут находится как в корневой директории темы, так и в субдиректории. Название файла шаблона может быть любым, но мы советуем избегать зарезервированных префиксов, как например page-*.php и single-*.php, которые могут конфликтовать с другими файлами.

Для простоты рекомендуем использовать префикс template-*.php и/или хранить все шаблоны страниц в субдиректории, например:

my-theme/templates/full-width.php
my-theme/templates/front-page.php
my-theme/templates/left-sidebar.php

Все шаблоны страниц в WordPress должны иметь специальный заголовок, который необходимо разместить в начале файла:

<?php
/**
 * Template Name: My Custom Template Name
 */

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

После специального заголовка вы можете писать произвольный код PHP и HTML, который будет использоваться для вывода страниц с вашим шаблоном. Для соблюдения структуры сайта (заголовок, подвал, боковые колонки) за основу можно взять шаблон page.php вашей темы.

Для примеров советуем также просмотреть шаблоны contributors.php и full-width.php стандартной темы Twenty Fourteen, и front-page.php стандартной темы Twenty Twelve.

Дочерние темы

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

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

Когда не следует использовать шаблоны страниц

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

В WordPress есть вспомогательная функция body_class(), которая используется в большинстве существующих тем. С помощью классов выводимых данной функцией, вы можете изменить стиль одной любой страницы используя CSS код:

/* Спрятать боковую колонку на странице 123 */
body.page-id-123 #secondary {
    display: none;
}

Шаблоны страниц так же не следует использовать, чтобы изменить параметры основного цикла WordPress, например для добавления произвольного типа записей или исключения категории. Для таких целей есть специальный фильтр pre_get_posts в WP_Query().

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

wpmag.ru

Шаблон простой страницы подписки – редактируем под себя

Привет, друзья! Приготовила для вас простой и лаконичный шаблон страницы подписки в html-формате для загрузки на хостинг. И, конечно же, инструкцию по его редактированию.

Шаблон адаптивен под разные устройства, состоит из:

• заголовка и подзаголовка,
• 3D коробки инфопродукта для визуализации,
• списка выгод (буллитов),
• формы подписки – по емейл и через ВК,
• подвала с важной информацией (ссылки на ваш сайт или группу ВК, политику конфиденциальности, соцсети).

Пример данного шаблона:

А здесь видеоурок по его редактированию:

Также размещаю текстовую инструкцию по редактированию ниже.

1) Сначала скачайте шаблон по ссылке.

2) Он запакован в архив, после скачивания его нужно распаковать в обычную папку. Кликаете по архиву правой кнопкой мыши и выбираете «Извлечь в текущую папку».

У вас на компьютере должен быть установлен архиватор!

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

3) Сделайте копию папки с шаблоном. Зачем? Чтобы шаблон у вас остался, а с текущей копией вы продолжили работу по редактированию.

Нажмите по папке правой кнопкой мыши, выберите «Копировать».

Затем кликните по рабочему столу правой кнопкой мыши и выберите «Вставить».

4) Откройте двойным кликом мыши скопированную папку, внутри у вас будет два файла. Файл index.html и папка assets. Начнем с редактирования index.html – это и есть наш шаблон. А в папке assets нам понадобится только подпапка с картинками – images. Я покажу, как вам в ней заменить макет 3D коробки вашей обложкой продукта.

Другие папки трогать не надо – они отвечают за стили, скрипты и корректное отображение страницы на разных устройствах.

Для редактирования файла index.html понадобится скачать и установить бесплатный блокнот Notepad++.

Вот так выглядит его иконка.

После установки кликните правой кнопкой мыши по файлу index.html и выберите «Открыть в блокноте». Вы откроете код шаблона.

Что мы здесь редактируем?

Во-первых, заголовок (title), который отображается в браузере – просто напишите свой текст вместо текущего.

Далее редактируется текст заголовка и подзаголовка непосредственно на подписной странице. Вы пишите название вашего оффера и в подзаголовке конкретизируете, что именно предлагаете за подписку.

нажимайте на скриншоты для увеличения

Показываю на примере своего словарика начинающего партнера.

Ниже идет кнопочка «ПОЛУЧИТЬ ДОСТУП», при нажатии на которую человека перекидывает в конец странички на форму подписки. Здесь вы можете написать свое название на кнопке вместо текущего.

Далее редактируем заголовок «Чем вам будет полезен данный материал?» и список выгод вашей бесплатности – буллиты.

Просто подставляете ваш текст вместо моего.

Здесь важно описать, какие ценности, пользу, выгоды получит подписчик от вашей бесплатности. И лучше всего это работает в виде вот такого списка – четко по пунктам.

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

нажимайте на скриншоты для увеличения

Далее вставляете этот скопированный код после 3-го тега </div> , сделав пробел. Меняете цифру пункта 4 на 5 и пишите пятую выгоду. Смотрите внимательно в коде:

Таким образом, можно скопировать и добавить нужное вам количество пунктов.

Если, наоборот, нужно удалить пункт, то точно также выделяете блок, как на скриншоте:

И жмете на клавиатуре Delete. Лишний пробел в коде тоже можно удалить с помощью клавиши Backspace (Back).

Важно: эта часть работы с кодом посложнее, поэтому она больше не для новичков. 4 пункта в списке – оптимальные количество выгод на подписной, поэтому можете ничего не удалять и не добавлять в коде!

Теперь нам нужно заменить форму подписки. Здесь проще, так как часть кода, которую будем менять, помечена комментариями <!—Formbuilder Form—>. Нам полностью нужно удалить содержимое между двумя комментариями и вставить код формы подписки от своего сервиса рассылок.

нажмите на скриншот для увеличения

В моем случае это Джастклик. Я предварительно создала форму подписки в разделе «CRM» – «Формы подписки».

Теперь просто копирую ее код для вставки на подписную страницу.

И вставляю вместо текущего кода – полностью выделяю этот фрагмент и сочетанием клавиш Ctrl+V вставляю код моей формы.

нажимайте на скриншоты для увеличения

Текст над формой «Введите свой email в форму ниже…» тоже можно заменить.

Важно: чтобы сохранять внесенные изменения, не забывайте периодически нажимать на иконку дискеты «Сохранить» в блокноте Notepad++.

А чтобы просматривать в браузере, как меняется ваша подписная – просто открывайте в папке файл index.html, дважды кликнув по нему левой кнопкой мыши (так вы открываете предпросмотр шаблона в браузере).

Также вы можете выбрать, в каком браузере открыть файл, если нажмете на него правой кнопкой мыши. Выберите «Открыть с помощью» и нажмите в списке по нужному браузеру (если у вас их несколько).

Дальше в коде шаблона идет кнопка подписки через ВК – в нее вы просто вставляете ссылку на подписку на вашу бесплатность через Вконтакте. К примеру, в Senler нужно предварительно создать группу подписчиков под эту бесплатность и скопировать ссылку подписки на группу.

Затем вставить ее в кнопку вместо значка # между кавычками. Надпись на кнопке, как и текст «Или получите материал во Вконтакте» вы тоже можете поменять.

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

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

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

Ниже идут кнопочки социальных сетей, вместо ссылок на мои соцсети между кавычками укажите ссылки на ваши.

Если какую-то соцсеть хотите убрать, например Ютуб, выделите фрагмент кода и нажмите Delete на клавиатуре.

И в самом низу вместо текста Ваши ФИО напишите свои данные.

А теперь заменим 3D обложку инфопродукта на подписной. Для этого вам понадобится создать вашу обложку. Если вы не знаете, как это сделать, то рекомендую посмотреть мой урок.

Размер итоговой картинки желательно уменьшить, так как при создании в рекомендуемом мной сервисе она получается большой (размер можно менять в любом редакторе изображений, в том числе онлайн). А формат картинки должен быть png.

Например, я уменьшила размер с 1500Х1500 пикселей вполовину.

Готовую картинку нужно поместить в папку images, которая находится папке assets – обязательно дав ей такое же название, как у текущей обложки – maket, а мою картинку удалить.

То есть вам нужно заменить текущую картинку вашей, но обязательно с таким же названием и форматом. Повторюсь, ваша картинка должна называться maket и формат у нее должен быть png!

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

Как добавить Яндекс.Метрику или код пикселя от Вконтакте на подписную?

Очень просто, Метрику или пиксель можно разместить в коде перед тегом< /head>, сделав пробел. Если размещаете и то, и то, можно сразу друг после друга.

Пример:

В конце не забудьте еще раз сохранить в шаблоне все ваши изменения!

Когда шаблон отредактирован – самое время отправить страницу подписки на хостинг, чтобы опубликовать ее в интернете.

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

Я назову папку с шаблоном primer1. Кликаю по ней правой кнопкой мыши и выбираю «Переименовать».

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

Этот архив нам и нужно загрузить на хостинг в корневую папку своего сайта.

После загрузки и архив, и папку с компьютера можно удалить.

Далее рассмотрим процесс на примере хостинга Таймвеб. Заходим в «Файловый менеджер» – здесь двойным кликом мыши открываем корневую папку нашего сайта, куда собираемся грузить шаблон.

Я выбрала свой сайт – likens.ru.

Внутри этой папки двойным кликом мыши открываем папку public_html. Именно в нее и загружаем наш архив с подписной страницей.

Делается это через вкладку «Файл» – «Загрузить на сервер».

o-zarabotkeonline.ru

Шаблоны страниц и типов записей в WordPress

Страницы — это один из типов постов WP. По умолчанию все страницы выглядят одинаково, возможно вам и нужно, чтобы они выглядели одинаково (только с разным контентом разумеется), если же нет — читайте этот пост.

Средствами WordPress вы можете сделать страницы вашего сайта уникальными. Например создать страницу с картой, создать HTML-карту сайта, страницу с формой, лендинги и т.д. Всё это можно реализовать при помощи шаблонов страниц.

Установка шаблона для страницы

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

Для того, чтобы это проверить:

Переходим в Страницы > Добавить новую.
В метабоксе «Атрибуты страницы» выбираем один из шаблонов.

Если ваша тема не имеет ни одного шаблона страниц, то выпадающий список шаблонов просто будет отсутствовать.
Опции быстрого (Свойства, Quick Edit) и массового (Bulk Edit) редактирования также имеют возможность задавать шаблоны для страниц.

Также важно отметить, что один шаблон может использоваться для нескольких страниц одновременно.
Создание собственного шаблона страницы
Для того, чтобы создать любой шаблон страниц, всегда нужно сделать два шага:
В папке с темой создать какой-нибудь файл, так, чтобы его название не перекликалось с условными названиями файлов темы WordPress. Если не уверены, то придумайте такое название, которое кроме вас больше никому не прийдет в голову 🙂 например misha123.php.
Файл шаблона также может располагаться в папке с родительской темой, папке с дочерней темой и, начиная с версии WP 3.4, в директории темы вы можете создать любую подпапку для шаблонов страниц.
В начале вашего файла нужно обязательно указать название шаблона — после этого WordPress его «увидит»:
<?php /* Template Name: Мой Супер-шаблон */
Далее в шаблоне вы можете использовать абсолютно любой код, не хотите подключать get_header() и get_footer() сайта? — да пожалуйста, можете вообще просто один <iframe> туда засунуть и будет норм.
Имейте ввиду, что если тему, которая стоит на вашем сайте, разрабатывали не вы, то после её обновления все ваши созданные шаблоны страниц могут исчезнут (сам не проверял, но официальная документация говорит, что да). Поэтому, для таких целей рекомендуется создавать дочерние темы, а уже в них — шаблоны страниц.
Иерархия и порядок подключения файлов страниц
Тут конечно можно было бы соорудить какую-нибудь инфографику, но я, в связи нехваткой времени, решил ограничиться простым упорядоченным списком.
Этот список показывает приоритет задействования файлов темы для отображения типа записей «Страницы».
custom-template.php (если файл шаблона существует и выставлен для данной страницы в её настройках)
page-{ярлык страницы}.php (если существует)
page-{ID страницы}.php (если существует)
page.php (наиболее распространённое решение практически во всех темах)
index.php (используется, если все вышеперечисленные файлы отсутствуют в папке с темой)
Я уже писал про иерархию в одном из моих предыдущих постов.
Шаблоны страниц для записей произвольного типа
Эта потрясающая функция появилась в версии WordPress 4.7, мне нравится, как плавно и постепенно WordPress расширяет возможности, внедряя только то, что действительно необходимо 😊 🎉
Шаблон для типов постов (записи тоже сюда относятся) создаётся точно так же, как и для страниц, только помимо параметра Template name:, нам ещё на следующей строке нужно указать параметр Template post type:, в котором можно указать название типа поста, или несколько названий через запятую, например я захочу использовать свой шаблон и для записей и для страниц, в этом случае он будет начинаться так:
<?php /* * Template name: Мой Супер-шаблон * Template post type: post, page */
Если у вас уже был какой-то шаблон для страниц и он уже использовался на сайте, то, после того, как вы добавите туда параметр Template post type: и укажите какой-то другой тип записей там, то уже существующие страницы, использующий этот шаблон не перестанут работать, однако при редактировании там уже будет указан Базовый шаблон.
А для соответствующего типа записи сразу появится такой блок, у меня для записей он появился под рубриками и называется Свойства записи:

В меню быстрого редактирования он тоже появится.
Видеоурок по шаблонам страниц
Миша
Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю, но с 2019 выступаю только на тех, которые сам организовываю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.
misha.blog
23 HTML шаблона адаптивных страниц-заглушек / HTML шаблоны / Постовой

Рано или поздно все сталкиваются с необходимостью переделывать свои сайты или создавать новые. В начале разработки многие игнорирую создание страниц-заглушек и оставляют просто пустую страницу, в лучшем случае. Конечно же так делать нельзя, пользователь зайдя на ваш сайт не может знать, что вы делаете для него новые плюшки или супер модный дизайн и нужно вернуться немного позже. Это влечет за собой потерю постоянных посетителей и негативно сказывается на репутации компании. Поэтому отличным способом рассказать вашим посетителям, что сайт не умер, а находится в процессе реконструкции или разработки, будет создание заглушки. На такой странице вы можете рассказать, что в данный момент делаете с сайтом, когда он будет готов и предложить пользователям оставить свой Email, чтобы оповестить их об открытии сайта. Все это хорошо, но как всегда на разработку дизайна, верстку еще одной дополнительной страницы нет ни средств, ни времени. В такой ситуации можно воспользоваться уже готовыми решениями — шаблонами страниц-заглушек. В данной статье мы подготовили для вас подборку шаблонов которые могут быть использованы как в период технического обслуживания, так и перед запуском вашего сайта. И так, к вашему внимаю шаблоны для заглушек сделанные по последним тенденциям в веб-дизайне.
1. Coming Soon
Прекрасная анимированная страница-заглушка с броским дизайном. SEO оптимизированна и интегрирована с MailChimp.
5. New Year – Responsive Melody HTML Template
Новый год — адаптивный HTML шаблон с фоновой музыкой. Присутствует таймер обратного отсчета и модальное окно в котором представлена информация о компании и форма обратной связи.
6. Sunrise
7. Kite
Полнофункциональный шаблон с множеством функций и вариантов реализации. Подойдет как для творческого коллектива так и для компании. Имеет 4 варианта фона, 8 цветовых схем и параллакс эффект.
8. Zoon
Полностью адаптивный, простой и чистый шаблон страницы-заглушки с поддержкой мобильных устройств. В шаблоне есть таймер обратного отсчета, Google карта и раздел о компании. Легко настраиваемый и совместим с большинством современных браузеров.
9. UX – Free Responsive Template
Очень похож на шаблон “New Year”. Отличается стилевым оформлением и отсутствием фоновой музыки, интегрирован с Mailchimp.
10. AfterWork
Одностраничный HTML Bootstrap шаблон, идеально подходит для заглушки сайтов программного обеспечения. Из особенностей: таймер обратного отсчета, адаптивный, два стиля оформления (параллакс и слайдер), Google Maps, интегрирован с Twitter, форма подписки.
11. Magnitude
Контент равняется по центру как по горизонтали так и по вертикали.
12. One Luke
13. Mentor
14. Gravity
15. Progress
Из особенностей, плавное появление элементов при прокрутке и слайдер контента.
16. See Soon
Профессиональный и творческий шаблон с элегантными эффектами появления элементов страницы. Адаптивный, основан на Twitter Bootstrap3.
17. Beta Landing
Поставляется в двух вариантах, со слайдером полноэкранных фоновых изображений и без. В архиве, после скачивания, доступна документация.
18. AGMANA
AGMANA это адаптированный под Retina-разрешение адаптивный шаблон с использованием HTML canvas для создания фоновой анимации.
19. WeBuild
20. Vento
21. MAGISTER
22. Notify
Из особенностей полноэкранный слайдер фоновых изображений.
23. Trendset

postovoy.net
Шаблоны страницы для типов записей в WP 4.7
Поддержка шаблонов для постоянных страниц — записей типа page была неизменна аж 12 лет. И помогала разработчикам удобно создавать шаблоны для страниц, но была всегда ограничена только типом записи page. Однако с версии WordPress 4.7 положение дел изменилось и теперь можно создавать шаблоны для абсолютно любых типов записей.
Шаблоны для записей типа page
О том как создавать шаблоны для записей я писал в отдельной статье и там не только этот способ, а еще два. Этот способ идет там первым. Напомню: чтобы создать шаблон постоянной страницы, нужно в корне темы создать файл с любым названием, например, my-template.php и в нем указать php комментарий следующего вида:
<?php /* Template Name: Мой шаблон страницы */ ?> 
Файл шаблона можно поместить и во вложенную папку в корне темы, WP все равно его найдет.
Дополнение из комментария. Например, в корне темы можно создать папку templates и все шаблоны складывать туда.
После этого на странице редактирования постоянной страницы в разделе «Свойства страницы» появится возможность выбрать этот шаблон.

Шаблоны для записей произвольного типа
С версии WordPress 4.7 функционал шаблонов страниц расширился. И теперь можно создавать шаблоны для страниц любого типа.
Чтобы указать, что создаваемый файл шаблона поддерживается типом записи, название этого типа записи нужно указать в заголовке: Template Post Type:. Несколько типов записей можно указать через запятую.
Для примера давайте создадим шаблон, который будет поддерживать три типа записи: post, page, product. Для этого в начале файла добавим такой php комментарий:
<?php /* Template Name: Мой шаблон страницы Template Post Type: post, page, product */ // … остальной код шаблона
Теперь на страницах редактирования записей типов: post, page, product, можно будет выбрать шаблон «Мой шаблон страницы».
Шаблон страницы для типа записи post
Заметки разработчикам
Если хоть один шаблон существует для типа записи, то метабокс «Свойства страницы» (Post Attributes) появится автоматически на странице редактирования записи. Не обязательно включать поддержку 'page-attributes' при регистрации типа записи.
Заголовок «Свойства страницы» можно изменить при регистрации типа записи в параметре label > attributes.
wp-kama.ru
No related posts.