• Главная
  • Карта сайта
Не найдено

Віджети в WordPress

  1. Як додати або видалити віджети (для початківців)
  2. Відключення стандартних віджетів WordPress
  3. Створення власного віджета
  4. Список плагінів з корисними віджетами
  5. Миша Рудрастих

Віджети - це одна з багатьох приголомшливих можливостей WordPress. Якщо для того, щоб редагувати контент сайту, ми використовуємо редактор і метабокси , То для зміни вмісту сайдбара або футера якраз-таки і потрібні віджети.

По суті віджети можна додавати куди завгодно на сторінках сайту, але це залежить від теми WordPress, яку ви використовуєте, точніше від кількості зареєстрованих в ній сайдбарі . Є теми, які і зовсім не підтримують віджети.

Як додати або видалити віджети (для початківців)

Щоб створити віджет в WordPress, для початку у вас повинен бути підключений хоча б один сайдбар, якщо у вас з цим труднощі, тоді вам слід прочитати докладний керівництво по роботі з сайдбарі (Там також описано, як додати підтримку віджетів в темі WordPress). Також віджети можна вивести на сайті безпосередньо через PHP-код за допомогою функції the_widget () .

Якщо з цим розібралися, переходимо в адмінки на сторінку Зовнішній вигляд> Віджети. Бачите список доступних віджетів? Для того, щоб додати віджет на сайт, потрібно перетягнути його в одну з областей праворуч (сайдбарі).

У більш пізніх версіях WordPress є й інший спосіб додавання віджету - вам достатньо клікнути по його заголовку і зі списку вибрати сайдбар, в який ви хочете додати:

Коли віджет буде додано, ми побачимо його налаштування. За допомогою міні «Календар» це заголовок:

Таким чином ми можемо додавати необмежену кількість віджетів в будь-яку з областей сайту, налаштовувати, редагувати їх, змінювати порядок перетягуванням.

Для того, щоб видалити віджет, натискаємо посилання «Видалити» (її видно на попередньому скріншоті). Якщо ж ви хочете лише тимчасово відключити віджет, зберігши його настройки, перетягуємо його в блок «Неактивні віджети», який знаходиться під блоком «Доступні віджети».

Відключення стандартних віджетів WordPress

Якщо ви не використовуєте і не плануєте використовувати будь-якої зі стандартних віджетів WordPress, ви можете повністю відключити його за допомогою функції unregister_widget () , Після чого віджет перестане відображатися в адмінки на сторінці Зовнішній вигляд> Віджети, також він зникне і зі сторінок сайту.

Для відключення віджетів можете скористатися готовим кодом нижче:

  1. Вставте код в файл functions.php поточної теми.
  2. Видаліть або закоментуйте рядки з тими віджетами, які видаляти не потрібно.
  3. І тільки потім можете зберегти файл.
function true_remove_default_widget () {unregister_widget ( 'WP_Widget_Archives'); // Архіви unregister_widget ( 'WP_Widget_Calendar'); // Календар unregister_widget ( 'WP_Widget_Categories'); // Рубрики unregister_widget ( 'WP_Widget_Meta'); // Мета unregister_widget ( 'WP_Widget_Pages'); // Сторінки unregister_widget ( 'WP_Widget_Recent_Comments'); // Свіжі коментарі unregister_widget ( 'WP_Widget_Recent_Posts'); // Свіжі записи unregister_widget ( 'WP_Widget_RSS'); // RSS unregister_widget ( 'WP_Widget_Search'); // Пошук unregister_widget ( 'WP_Widget_Tag_Cloud'); // Облік міток unregister_widget ( 'WP_Widget_Text'); // Текст unregister_widget ( 'WP_Nav_Menu_Widget'); // Довільний меню} add_action ( 'widgets_init', 'true_remove_default_widget', 20);

Ця функція дозволяє видаляти не тільки стандартні віджети. Як параметр функції ви можете вказати назву класу будь-якого віджета (наприклад який був зареєстрований в будь-якому плагін).

Якщо у вас є які-небудь налаштовані віджети на сайті, врахуйте, при видаленні віджета також втечуть і всі його настройки, тому якщо ви раптом потім вирішите, що віджет, який ви відключили, вам потрібен, то його доведеться налаштовувати заново.

Створення власного віджета

Додати свій віджет з настройками в WordPress зовсім не важко, але звичайно для цього не завадило б хоч трохи розбиратися в PHP. Описувати як працює PHP-код в цій посаді я не буду, просто задайте своє питання в коментарях, якщо у вас виникнуть будь-які труднощі з кодом.

А зараз ми будемо створювати віджет популярних постів - виведемо відсортовані за кількістю коментарів записи через WP_Query .

За своєю структурою наш віджет буде схожий на стандартний віджет WordPress « свіжі записи », Т е він матиме схожі параметри (заголовок і кількість відображуваних постів) і схожий HTML-шаблон для виведення постів (заголовки записів з посиланнями у вигляді <ul> -спіска).

Вставляємо цей код в functions.php:

<? Php class trueTopPostsWidget extends WP_Widget {/ * * створення віджета * / function __construct () {parent :: __ construct ( 'true_top_widget', 'Популярні пости', // заголовок віджета array ( 'description' => 'Дозволяє вивести пости, відсортовані за кількістю коментарів в них. ') // опис); } / * * Фронтенд віджета * / public function widget ($ args, $ instance) {$ title = apply_filters ( 'widget_title', $ instance [ 'title']); // до заголовку застосовуємо фільтр (необов'язково) $ posts_per_page = $ instance [ 'posts_per_page']; echo $ args [ 'before_widget']; if (! empty ($ title)) echo $ args [ 'before_title']. $ Title. $ Args [ 'after_title']; $ Q = new WP_Query ( "posts_per_page = $ posts_per_page & orderby = comment_count"); if ($ q -> have_posts ()):?&gt; <ul> <? php while ($ q -> have_posts ()): $ q -> the_post (); ?&gt; <Li> <a href=" <?php the_permalink () ?&gt; "> <? Php the_title ()?&gt; </a> </ li> <? Php endwhile; ?> </ Ul> <? Php endif; wp_reset_postdata (); echo $ args [ 'after_widget']; } / * * Бекенда віджета * / public function form ($ instance) {if (isset ($ instance [ 'title'])) {$ title = $ instance [ 'title']; } If (isset ($ instance [ 'posts_per_page'])) {$ posts_per_page = $ instance [ 'posts_per_page']; }?> <P> <label for = "<? Php echo $ this -> get_field_id ( 'title');?>"> Заголовок </ label> <input class = "widefat" id = "<? Php echo $ this -> get_field_id ( 'title');?> "name =" <? php echo $ this -> get_field_name ( 'title');?> "type =" text "value =" <? php echo esc_attr ($ title );?> "/> </ p> <p> <label for =" <? php echo $ this -> get_field_id ( 'posts_per_page');?> "> Кількість постів: </ label> <input id =" <? php echo $ this -> get_field_id ( 'posts_per_page');?> "name =" <? php echo $ this -> get_field_name ( 'posts_per_page');?> "type =" text "value =" <? php echo ($ posts_per_page)? esc_attr ($ posts_per_page): '5';?> "size =" 3 "/> </ p> <? php} / * * збереження налаштувань віджета * / public function update ($ new_instance, $ old_instance) {$ instance = array (); $ Instance [ 'title'] = (! Empty ($ new_instance [ 'title']))? strip_tags ($ new_instance [ 'title']): ''; $ Instance [ 'posts_per_page'] = (is_numeric ($ new_instance [ 'posts_per_page']))? $ New_instance [ 'posts_per_page']: '5'; // за замовчуванням виводяться 5 постів return $ instance; }} / * * Реєстрація віджета * / function true_top_posts_widget_load () {register_widget ( 'trueTopPostsWidget'); } Add_action ( 'widgets_init', 'true_top_posts_widget_load');

Я перетягнув цей код «як є» (природно видаливши перший рядок <? Php) в файл functions.php стандартної теми TwentyTwelve, в результаті в списку віджетів на сторінці Зовнішній вигляд> Віджети ми бачимо наш віджет:

Давайте перетягнемо його в який-небудь сайдбар справа:

Ось і все, вказуємо заголовок віджета (якщо потрібно), кількість постів, яке ми хочемо вивести і натискаємо «Зберегти» - після цього віджет з'явиться на сайті.

Список плагінів з корисними віджетами

Звичайно, необов'язково створювати кожен віджет самому, ви можете скористатися вже готовими рішеннями для конкретних завдань.

Для того, щоб додати будь-якої з цих плагінів до себе на сайт, копіюєте його назву, переходите в адмінці в Модулі> Додати новий і вставляєте в форму пошуку скопійоване назва.

Детально описувати кожен плагін я не буду - опис майже кожного з них тягне на новий пост. Встановлюйте, дивіться, тестируйте (на момент публікації цього поста кожен з полігонів був протестований мною особисто і все працювало відмінно).

  • Beautiful Yahoo Weather - віджет прогнозу погоди, досить непоганий і красивий у порівнянні з аналогами. Але для цих цілей напевно краще використовувати текстовий віджет WordPress в зв'язці з інформерамі від Gismeteo, Яндекса і т.д.
  • NextGEN Gallery - плагін для створення і управління галереями зображень в WordPress, одна з функцій якого - віджет галереї.
  • Search by Google - форма пошуку по сайту від Google (Google Custom Search).
  • Slick Contact Forms - віджет форми зворотного зв'язку.
  • Tabbed Login Widget - віджет авторизації, зроблений у вигляді трьох вкладок - «Вхід», «Реєстрація», «Забули пароль», вельми зручний.
  • WP Currency Converter - конвертер валют.
  • WP Editor Widget - використовуйте редактор WordPress для заповнення цього віджета.
  • WP-Cumulus - додає флеш-хмара тегів і / або категорій.
  • WP-Polls - зручний плагін для створення опитувань на сайті.
  • Yet Another Related Posts Plugin (YARPP) - потужний плагін для виведення схожих записів.
  • Youtube Channel Gallery - віджет зі свіжими відео з каналу на YouTube. Віджет виглядає дуже красиво, добре і легко налаштовується.

Згодом список буде поповнюватися.

Я не стану розглядати всі інші віджети соціальних мереж (Facebook, Вконтакте, Twitter і т.д.) - в принципі офіційні віджети цілком зручні - просто копіюємо код, який нам дають і вставляємо його в вордпрессовскій віджет « текст ».

Миша Рудрастих

Вперше познайомився з WordPress в 2009 році. З 2014 року мене можна зустріти на WordCamp - офіційної конфе по WordPress, іноді там виступаю. Також в даний час веду курси по WordPress в Epic Skills .

Якщо вам потрібна допомога з вашим сайтом або може навіть розробка з нуля - пишіть мені .

Бачите список доступних віджетів?
Args [ 'after_title']; $ Q = new WP_Query ( "posts_per_page = $ posts_per_page & orderby = comment_count"); if ($ q -> have_posts ()):?
Gt; <ul> <?
Php while ($ q -> have_posts ()): $ q -> the_post (); ?
Gt; <Li> <a href=" <?
Php the_permalink () ?
Gt; "> <?
Php the_title ()?
Gt; </a> </ li> <?
Php endwhile; ?
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью