Что такое виджеты, для чего они нужны и как их добавить в WordPress
Содержание статьи:
1. Наш клуб интернет предпринимателей ростет!
2. Мы перешагнули за 1 000 000 подписчиков!
3. Для чего используются виджеты WordPress
4. Простой способ добавления виджетов на WordPress
Видео: Как добавить виджет на WordPress
5. Сложный способ добавление виджетов (для продвинутых)
6. 1. Как инициализировать зону виджетов.
6.2. Как разместить область выведения виджета на WordPress
7. Какой способ лучше.
Здравствуйте, уважаемые читатели проекта «Анатомия бизнеса»! С Вами вебмастер Александр. Я рад представить Вам новую статью из цикла «Как создать сайт на WordPress». Если Вы ещё не смотрели предыдущие статьи этого цикла, сейчас самое время это сделать, потому что мы изучаем материал последовательно и для освоения следующего урока желательно пройти все предшествующие.
[warning]Вот ссылки на предыдущие уроки:
Бизнес на сайтах: как получать пассивный доход, не вложив ни рубля.
Урок 1. Что такое домен и хостинг
Урок 2. Установка WordPress на сайт
Урок 3. Как установить тему для WordPress
Урок 4. Как разместить статью на сайте
Урок 5. Как подключиться к сайту по FTP
Урок 6. Как перевести тему для WordPress на русский язык
Урок 7. Как создать рубрику в WordPress
Урок 8. Как сделать меню в WordPress[/warning]
Но перед тем как мы начнём занятие, я хотел бы поделиться с Вами очень хорошей новостью. Все мы понимаем, что социальные сети стали уже неотъемлемой частью современного мира. Я много об этом писал и даже посвятил этому вопросу целый цикл статей; он называется «Как начать бизнес в Интернете: пошаговая инструкция». И сегодня у нас очень радостный день, потому что сегодня произошли сразу два важных события.
Событие 1: Наш клуб интернет-предпринимателей ростет!
В моём блоге «Бизнес-клуб: интернет-бизнес шаг за шагом» появился трёхтысячный читатель! Спасибо, ребята, что читаете мои статьи!
Событие 2: Мы перешагнули за 1 000 000 подписчиков!
В одном из моих самых крупных проектов Woman’sPlace число подписчиков превысило миллион! Ура, товарищи! Я и Вам желаю, чтобы в скором времени Ваш проект в Интернете собрал 1 000 000 подписчиков.
Ну а теперь давайте наконец-то перейдём к теме нашего урока.
Для чего используются виджеты в WordPress
Как правило, на сайтах, работающих под управлением WordPress, виджеты используются для формирования левого и правого сайдбара. Функция эта очень полезная. Она позволяет без использования программирования менять расположение различных блоков в сайдбаре. Пусть, например, мы хотим поставить на первое место в правом сайдбаре какой-то баннер. С помощью виджетов мы сможем это сделать очень быстро, прямо из панели администрирования. Однако в этом деле есть два подхода: простой и сложный. Давайте подробно разберём каждый из них.
Простой способ добавления виджетов на WordPress
Заключается он в том, что нужно купить качественную тему для WordPress, в которой, помимо прочего, будут уже прописаны все основные виджеты. Я, например, покупаю темы только на сайте ThemeForest.net. Как приобрести тему на этом сайте, я подробно описал в статье «Как установить тему для WordPress». Вам я тоже советовал приобретать темы на этом сайте. Будем считать, что Вы прислушались к этому совету и на нашем сайте стоит качественная, профессионально сделанная тема. Например, на моём сайте biz-novostroy.ru установлена тема, которая называется Gazette. Когда я зашёл на главную страницу, то обнаружил, что в правой части есть место для сайдбара, но там ничего не отображается.
Из этого я сделал вывод, что данная область предназначена для вывода виджетов. Далее я выполняю следующие действия.
1) В панели администрирования заходим в раздел Внешний вид.
2) Выбираем подраздел Виджеты.
3) В правой части окна появляются непосредственно сами виджеты.
4-5) Находим интересующий нас виджет (в примере, показанном на рисунке, это виджет «Поиск») и перетаскиваем его мышью в область, предназначенную для отображения виджетов. На рисунке эта область называется HomepageWidgetArea, в Вашем случае название области может быть иным.
Таким образом я разместил в левом сайдбаре на главной странице сайта четыре виджета: «Поиск», «Свежие записи», «Рубрики» и «Календарь». Посмотрим результат.
Как видим, всё получилось.
Но некоторые наши товарищи не ищут лёгких путей. Допустим, Вы скачали бесплатную тему для WordPress, в которой функция виджетов не поддерживается, или же вообще хотите создать новую тему «с нуля». Как быть в таком случае?
Сложный способ добавления виджетов для WordPress
Очень часто начинающие веб-мастера хотят сэкономить и устанавливают на сайте бесплатную тему. Каково же бывает их удивление, когда оказывается, что в их теме функция виджетов попросту не прописана. Они заходят на панель администрирования и видят там следующую картину:
Тогда-то они и понимают, что лучше было бы купить нормальную тему, но раз уж установили ту, что есть, надо с ней что-то делать. Что именно – читайте далее.
Как инициализировать зону виджетов
Первое, что нужно сделать, это инициализировать зону виджетов. Для этого подключаемся к сайту по FTPи находим на нём файл Function.php. (Что такое FTP, я рассказал в статье «Подключение по FTP».) Файл Function.phpобычно находится в директории /wp_content/themes/имя_темы/. Откроем этот файл и вставим в него следующий код (перед изменением файла сделайте его резервную копию):
// Area 2, top of the sidebar WordPress.
register_sidebar(array(
‘name’=> __(‘Виджет №1′,’twentyten’),
‘id’=>’my-wid-area’,
‘description’=> __(‘Виджет’,’twentyten’),
‘before_widget’=>'<li id=»%1$s»>’,
‘after_widget’=>'</li>’,
‘before_title’=>'<h3>’,
‘after_title’=>'</h3>’,
));
Теперь давайте разбираться, что означает каждая строчка в этом коде.
Первая строчка
// Area 2, topofthesidebarWordPress.
– это просто комментарий, т. е. пояснительный текст. Комментарии в языке PHP начинаются с символов //. Все остальные символы, которые идут после них до самого конца строки, будут считаться комментарием. Комментарии никак не влияют на код и вводятся просто для удобства.
register_sidebar(array(
говорит о том, что далее пойдёт описание именно зоны виджетов, а не что-то другое.
‘name’=> __(‘Виджет №1′,’twentyten’),
мы указываем название виджета. В нашем примере он называется «Виджет №1». Второй параметр – это название нашей темы. Она в нашем случае называется ‘twentyten’. Название виджета отображается в панели администрирования.
‘id’=>’my-wid-area’,
мы задаём идентификатор, по которому в дальнейшем наша тема будет определять, где выводить поле виджета.
‘description’=> __(‘Виджет’,’twentyten’),
мы вводим описание виджета. Оно появится в области виджета сразу под названием. В данном случае описание виджета состоит всего из одного слова – «Виджет».
‘before_widget’=>'<liid=»%1$s»>’,
означает, что каждый виджет из области виджетов получит свой уникальный идентификатор. В дальнейшем, зная этот идентификатор, можно изменять цвета, шрифты и т. д. через файл CSS.
‘after_widget’=>'</li>’,
даёт команду: в конце виджета поставить тег <\li>.
‘before_title’=>'<h3>’,
даёт команду: в начале виджета, перед описанием поставить тег <h3>При желании можно также поставить тег
‘after_title’=>'</h3>’,
даёт команду: в конце виджета, после описания поставить тег. Тем самым мы закрываем тег, поставленный в начале виджета.
На следующем шаге мы должны указать теме, где именно она должна разместить новую область для выведения виджетов.
Как разместить область выведения виджетов в теме для WordPress
Это просто. Нужно только найти файл, который отвечает за ту зону, куда мы хотим вывести нашу область виджетов. Пускай это будет правый сайдбар. Соответствующий ему файл называется sidebar.phpили right-sidebar.php и находится он, как правило, в директории /wp_content/themes/имя_темы/. Открываем этот файл, предварительно сделав резервную копию, и вставляем в него следующий код:
<div id=»primary» role=»complementary»>
<ul>
<?php dynamic_sidebar(‘my-wid-area’);?>
</ul>
</div>
Готово! Теперь мы должны увидеть следующий результат.
Какой способ лучше?
Понятно, что второй способ займёт гораздо больше времени. Поскольку я в своей работе ориентируюсь прежде всего на скорость и качество, то лично мне проще купить профессиональную тему для WordPress, нежели часами сидеть и разбираться в тонкостях PHP. Конечно, выбрав второй способ, Вы неплохо поднатаскаете себя по PHP, но оно Вам надо? Я лучше потрачу это время на инвестирование новых проектов и написание статей для наших читателей.
Успехов Вам в интернет-бизнесе!
‘after_widget’=>'</li>’,‘before_title’=>'<h3>’,
‘after_title’=>'</h3>’,
));
Теперь давайте разбираться, что означает каждая строчка в этом коде.
Первая строчка
// Area 2, topofthesidebarWordPress.
– это просто комментарий, т. е. пояснительный текст. Комментарии в языке PHP начинаются с символов //. Все остальные символы, которые идут после них до самого конца строки, будут считаться комментарием. Комментарии никак не влияют на код и вводятся просто для удобства.
register_sidebar(array(
говорит о том, что далее пойдёт описание именно зоны виджетов, а не что-то другое.
‘name’=> __(‘Виджет №1′,’twentyten’),
мы указываем название виджета. В нашем примере он называется «Виджет №1». Второй параметр – это название нашей темы. Она в нашем случае называется ‘twentyten’. Название виджета отображается в панели администрирования.
‘id’=>’my-wid-area’,
мы задаём идентификатор, по которому в дальнейшем наша тема будет определять, где выводить поле виджета.
‘description’=> __(‘Виджет’,’twentyten’),
мы вводим описание виджета. Оно появится в области виджета сразу под названием. В данном случае описание виджета состоит всего из одного слова – «Виджет».
‘before_widget’=>'<liid=»%1$s»>’,
означает, что каждый виджет из области виджетов получит свой уникальный идентификатор. В дальнейшем, зная этот идентификатор, можно изменять цвета, шрифты и т. д. через файл CSS.
‘after_widget’=>'</li>’,
даёт команду: в конце виджета поставить тег <\li>.
‘before_title’=>'<h3>’,
даёт команду: в начале виджета, перед описанием поставить тег <h3>При желании можно также поставить тег
‘after_title’=>'</h3>’,
даёт команду: в конце виджета, после описания поставить тег. Тем самым мы закрываем тег, поставленный в начале виджета.
На следующем шаге мы должны указать теме, где именно она должна разместить новую область для выведения виджетов.
Как разместить область выведения виджетов в теме для WordPress
Это просто. Нужно только найти файл, который отвечает за ту зону, куда мы хотим вывести нашу область виджетов. Пускай это будет правый сайдбар. Соответствующий ему файл называется sidebar.phpили right-sidebar.php и находится он, как правило, в директории /wp_content/themes/имя_темы/. Открываем этот файл, предварительно сделав резервную копию, и вставляем в него следующий код:
<div id=»primary» role=»complementary»>
<ul>
<?php dynamic_sidebar(‘my-wid-area’);?>
</ul>
</div>
Готово! Теперь мы должны увидеть следующий результат.
Какой способ лучше?
Понятно, что второй способ займёт гораздо больше времени. Поскольку я в своей работе ориентируюсь прежде всего на скорость и качество, то лично мне проще купить профессиональную тему для WordPress, нежели часами сидеть и разбираться в тонкостях PHP. Конечно, выбрав второй способ, Вы неплохо поднатаскаете себя по PHP, но оно Вам надо? Я лучше потрачу это время на инвестирование новых проектов и написание статей для наших читателей.
Успехов Вам в интернет-бизнесе!
'>
Лендинг сейчас является одним из основных инструментов вебмастеров и специалистов ...
Контент — это основная составляющая каждого сайта. Это может быть ...
Рекламодатели иногда испытывают опасения при запуске рекламы в Яндексе из-за ...
Язык программирования Swift предназначен для написания игр, приложений и программ ...
