webdonsk.ruКак сделать красивую страницу wordpress
Добавил пользователь Alex Обновлено: 10.09.2024
Шаблоны страниц в WordPress являются отличным способом изменить структуру страниц или добавить им функциональности. Создание собственного шаблона страниц может быть не простым делом, особенно для новичков, поэтому мы постараемся детально осветить этот процесс. Наличие базовых знаний HTML, CSS и PHP поможет вам быстрее усвоить урок, хотя это и не требуется, если вы будете делать все по образцу. Вы сможете создавать и развертывать столько различных шаблонов, сколько потребуется, что открывает поистине множество возможностей для тонкой настройки вашего сайта на WordPress.
Зачем это может понадобиться?
Собственный шаблон будет полезен, если вы хотите получить на выходе страницу, которая выглядит совершенно иначе, чем остальной ваш сайт, но которая по-прежнему будет работать под управлением WordPress CMS. Это может быть домашняя страница, landing page (целевая/посадочная/рекламная страница), страница контактов, страница тарифных планов и т.д. Создание уникальной шаблонной страницы позволит расширить имеющийся функционал WordPress и изменить отображение содержимого на сайте по своему усмотрению. Например, вы хотите страницу с другими шрифтами, шапкой и футером, нежели на других страницах – все это возможно с собственным шаблоном ВордПресс страницы.
Как это работает?
Пользовательские шаблоны страниц в WordPress имеют специальный заголовок, который размещается в начале файла, указывающий движку свое системное имя.
Например,
, где Custom Page Template – системное название шаблона (и поэтому оно заккоментировано – т.е. не видно обычным посетителям сайта).
Теперь, если движок увидит, что странице присвоен этот шаблон – он выведет на экран именно его. По значению переменной Template Name, wordpress узнает о том, что этот файл нужно воспринимать как шаблон для страницы.
Практика: создаем новый шаблон страницы
Есть несколько способов:
- создать совершенно новый шаблон
- взять за основу имеющиеся шаблоны в теме
Мы пойдем по второму пути – возьмем за основу шаблонный файл page.php из темы Twenty Fifteen, которая идет в комплекте с последней версией WordPress (4.1 – на момент написания урока), и немного его подкорректируем.
Давайте посмотрим на уже готовый шаблон, а потом подробно его разберем. Вот, что у меня получилось:
А теперь пройдемся по пунктам.
1. Создаем пустой файл в текстовом редакторе Notepad++ и вставляем имя шаблона в самый верх:
Имя шаблона здесь включено в php-код, вызывающий шаблон хедера (header.php)
Выбираем кодировку: в Notepad++ идем Кодировки – Кодировать в UTF-8 (без BOM)
Сохраняем страницу в формате .php (в нашем примере template-custom.php) в папку с темой по адресу /wp-content/themes/ВАША-ТЕМА/. Вы можете использовать свое название, главное чтобы оно отличалось от уже имеющихся в вашей теме.
2. Добавляем html-разметку для контента и задаем условие для вывода контента:
3. Подключаем шаблон сайдбара (sidebar.php) — если нам нужна боковая колонка на сайте.
4. Закрываем шаблон, подключив футер
В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.
Добавление темы
Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.jpg.
Предварительный осмотр
Структура страниц
Большинство руководств по созданию тем для WordPress ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на WordPress в рамках предоставленных макетов.
Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.
После добавления, список страниц должен выглядеть вот так:
Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.
Header.php и Footer.php
Шапка в терминологии WordPress, это не только визуальная шапка на макете сайта. По сути, она содержит весь общий код, который встречается в начале всех страниц сайта. Давайте создадим файл header.php в папке нашего шаблона и наполним его содержимым.
Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:
В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.
Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.
Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.
Шаблон страницы
Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:
Здесь мы подключили наши файлы шапки и футера, создали блок названия страницы и в теге section вставили стандартный блок вывода контента страниц и постов.
Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.jpg и images /h1-bg.jpg. Далее добавьте немного базовых стилей в файл style.css:
В результате должна получиться вот такая картина:
Логотип
После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.jpg. В шаблон шапки, в файле header.php вставьте разметку для логотипа:
Форма поиска
WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:
А в файл стилей запишите стили для формы:
Всё, что осталось сделать – это подключить searchform.php внутри header.php.
Навигация
Добавить навигацию на страницу можно разными способами, например через функцию wp_list_pages, но более современным способом будет добавление через админку. По умолчанию функционал добавления меню не активирован, для того, чтобы это сделать, добавьте в файл темы functions.php следующий код:
Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:
После этого меню уже появится на страницах но без стилей. Стилизуем его:
Футер
Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images
images/footer-logo.jpg – логотип футера
images/social.jpg – спрайты больших иконок
images/social-small.jpg – спрайты маленьких иконок
Далее делаем вёрстку в файле footer.php:
И прописываем стили в style.css:
В итоге главная страница сайта должна выглядеть вот так:
Главная страница
Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.
WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.
Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:
Он отличается от кода page.php только тем, что в нем нет заголовка страницы.
То, что мы будем делать дальше, уже выходит за рамки создания темы WordPress, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самой темы.
Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:
home-1.jpg
home-2.jpg
home-3.jpg
home-4.jpg
home-5.jpg
clients-1.jpg
clients-2.jpg
clients-3.jpg
clients-4.jpg
clients-5.jpg
clients-6.jpg
clients-7.jpg
Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:
Теперь осталось стилизовать данный код.
Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:
После этого, главная страница должна отобразиться правильно.
Сайдбар
Теперь, когда главная страница готова, давайте вернемся к шаблону внутренних страниц и добавим в него сайдбар.
Для этого создайте файл sidebar.php и поместите в него следующий код:
Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.
После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:
Далее нам нужно добавить стили для вёрстки:
Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.
Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:
about-1.jpg
about-2.jpg
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg
Далее перейдите в редактирование страницы в панели администратора и добавьте код:
И стили в style.css:
Шаблон поста
После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:
Этот шаблон аналогичен предыдущим шаблонам с той лишь разницей, что здесь мы сначала отображаем контент поста, а затем комментарии к нему.
В самом начале, когда мы создавали шаблон шапки мы добавили в него поиск, однако страницы для отображения результатов поиска у нас еще нет. Создайте в папке темы файл search.php и добавьте в него содержимое:
От других шаблонов этот отличается тем, что мы выводим заголовок с текстом поиска, а затем список результатов поиска.
В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.
Заключение
На этом создание шаблона WordPress закончено. Готовый проект можно скачать здесь.
Привет! Пришла пора разобраться со вторым типом основного контента, который можно создавать на сайте WordPress. Называют его страницы или pages. Они имеют принципиальные отличия от статей (записей) сайта.
Отличие страниц от записей
Классическим вариантом для блога, сделать главную страницу из последних записей. В таком варианте она будет динамично обновляться с выходом новых записей (постов).
Второй вариант главной страницы, сделать её в виде статической страницы сайта. Такая главная страница будет оставаться неизменной и её можно назвать, витриной сайта или портфолио или резюме, вариантов масса.
Нельзя назначить статистическую страницу сайта из записей. Для этих целей служат только заранее созданные страницы сайта.
Еще одним отличием станиц от постов, является отсутствие создания и выбора рубрик и меток для страниц. То есть, страницы не участвуют в таксономии сайта.
Однако страницы можно организовать по подчинению родитель-дочка. Например, у вас о туризме. Для описания городов стран вы можете сделать такие страницы:
Города России (родитель)
Вывод 1
Как создать страницу WordPress
Опубликовать
Здесь можно запланировать выход страницы по дате и времени, положить страницу в черновики или оставить страницу на утверждении. Если ты пользователь с ролью автор, то ты сможешь только оставить страницу на утверждении.
Атрибуты страницы
Этот модуль позволяет указать родителя страницы и тем самым построить страницы по подчинённости. Это не обязательно, но такая возможность есть.
Некоторые шаблоны в атрибутах страниц, позволяют менять их формат, убирая или добавляя сайдбары на странице. Вот пример.
Изображение страницы
Стандартный модуль, присутствующий на добавлении записи, позволяющий добавить к странице миниатюру.
Как показать страницы WordPress на сайте
Чтобы показать страницы на сайте, существуют две возможности (кроме главной страницы):
- Показать страницы в меню;
- Показать страницы в виджете.
На вкладке Внешний вид>>Меню ты можешь создавать сколько угодно меню сайта. Однако показывать на сайте можно столько меню, сколько предусмотрено областей для меню в шаблоне.
Создав меню по названию, ты можешь положить в него любое количество заранее созданных страниц сайта. При этом построить их в подчиненном виде.
После сборки меню останется выбрать для него область показа и нужные страницы сайта будут на сайте в виде меню.
Вывод
Главная страница — это входная дверь вашего сайта. Выполнив действия, описанные в этом руководстве, вы можете сделать главной любую созданную вами страницу.
Если у вас уже имеется новая страница, которую предполагается использовать как главную, пропустите этот шаг и переходите к шагу 2.
Шаг 2: Настройка статической главной страницы
Чтобы установить новую страницу в качестве главной страницы сайта, выполните следующие действия.
Чтобы появилась эта опция, у сайта должна быть как минимум одна опубликованная страница.
- Выберите опцию Статическая страница, затем выберите только что созданную страницу в раскрывающемся меню Главная страница.
В окне предварительной настройки новая выбранная страница будет отображаться как начальная страница вашего сайта.
Если вы планируете вести блог, можно настроить отдельную страницу, на которой будут отображаться все ваши записи в блоге.
Шаг 4. Создание меню
После того как страницы созданы, можно настроить меню навигации сайта. Нажмите эту кнопку, чтобы узнать, как это сделать
Дополнительные возможности настройки
Шаблоны главной страницы и ваша тема
У разных тем могут быть разные макеты главной страницы. В зависимости от инструкций к теме вам может потребоваться изменить шаблон страницы или настроить области избранного содержимого.
Кроме того, в некоторых темах для главной страницы не предусмотрены области отображения виджетов на боковой панели. Вы можете быть уверены, что при переходе на одну из таких тем содержимое, созданное вами на боковой панели не пропадёт, — оно просто не будет отображаться на главной странице.
Привет всем! Каждый, кто работает над дизайном и функциональной частью своего блога, в какой-то момент задумывается над тем, как можно ускорить и упростить этот процесс. Данной цели служат фреймворки. Это специальные библиотеки, которые дают возможность использовать уже прописанные заготовки кода, отличающегося валидностью и кроссбраузерностью . Сегодня вашему вниманию я хочу представить одно из таких решений – Бутстрап. В рамках этой статьи мы не будем детально изучать все тонкости работы с ним. Наша задача – узнать о его основных преимуществах, как подключить Bootstrap к WordPress и как с помощью данного фреймворка редактировать стили и структуру блога.
Здравствуйте, друзья! Наша сегодняшняя тема будет интересна тем из вас, для кого актуален вопрос редактирования шрифтов на блоге Вордпресс. Большинство бесплатных шаблонов имеет весьма ограниченные возможности в управлении настройками типографики. Поэтому сегодня мы рассмотрим несколько универсальных способов, как изменить и подключить шрифт на сайте WordPress, и познакомимся со специальным плагином шрифтов.
Обратите внимание, в рамках данной статьи мы не будем подробно останавливаться на том, каким образом редактируются тема Вордпресс и стили CSS. Если вам не известны эти процессы, рекомендую предварительно ознакомиться с материалом о структуре шаблона и о файле style.css.
Сегодняшняя статья является продолжением предыдущей про настройку rss ленты с помощью FeedBurner. Фид мы зажгли, все настройки RSS сделали и получили код формы, который сейчас будем добавлять на сайт. Но только добавить недостаточно, еще надо отредактировать и украсить, об этом я тоже напишу.
Сегодня я расскажу про оформление цитаты в WordPress разными способами. Посты о дизайне уже были на блоге, читайте, например, как сделать уголок на сайт.
Содержание статьи:
Зачем оформлять цитаты на сайте
Предположим, вы хотите использовать в статье великое изречение или чью-то понравившуюся мысль. А может быть просто выдержку из понравившегося поста на другом сайте. Просто заключите данный фрагмент текста в html тег
Привет всем! Приступим к сегодняшнему уроку, он будет творческим, дизайнерским:)
Речь пойдет о том, как сделать уголок для сайта. Такие уголки часто используют для привлечения внимания посетителя к чему-либо (конкурс, акция, интересный пост и т.п.). На моем блоге использовался такой уголок для конкурса комментаторов, и от него был эффект! Посты о дизайне еще обязательно будут, поэтому подпишитесь на RSS, чтобы их не пропустить.
Украсить блог можно по-разному, все зависит от фантазии и технических знаний блоггера и конечно свободного времени. В этой статье я предложу вам свои идеи.
Здравствуйте, дорогие друзья!
Сегодня расскажу, как установить favicon на сайт, а так же как его создать. Если вы заметили, у моего блога теперь новый фавикон. Пора и вам этому научиться. Из данной статьи вы узнаете, как сделать иконку с помощью favicon online generator или нарисовать самостоятельно, какого она должна быть размера и почему она так необходима каждому сайту. Если на вашем WordPress блоге до сих пор не установлен фавикон, сделаете это прямо сейчас.
Сегодня я расскажу вам, как сделать в сайдбаре 3d кнопки подписки. Вы уже наверное знаете, чтобы привлечь как можно больше подписчиков, на блоге просто обязательно должны быть кнопки подписки. Если у Вас их до сих пор нет, то Вы скорее потеряли много подписчиков!
Привет! сегодня поговорим о том, как сделать заворот страницы на WordPress, такую фишку можно часто встретить на многих блогах, где предлагают видео курсы или услуги. Делают это для того чтобы привлечь внимание посетителя, когда человек наводит на отгибающийся уголок за ним можно спрятать какой-то подарок в обмен на e-mail подписку.
Читайте также: