Делаем виджет с брендами авто
Всем привет!
Попалась мне задача не из легких, которая заключалась в оформлении в боковой колонке меню брендов автомобилей.
Первым делом отправился на поиски готового плагина-виджета, однако покопавшись в интернете ничего подобного не нашел.
Логика работы виджета:
— каждый бренд является рубрикой записей wordpress;
— каждый бренд должен содержать картинку-логотип, а снизу — расшифровка логотипа;
— необходимо выводить 12 брендов, остальные выводятся по нажатию на кнопку «Показать все»;
— дополнительно — скрыть ссылки от инексации.
За основу взят виджет бренды боковой колонки одного из сайтов:
Постановки задачи:
Решено использовать стандартный виджет произвольного меню. Будет создано меню, каждому пункту из которых можно присвоить картинку, а потом вывести в боковой колонке сайта.
Реализация:
1) Чтобы присваивать пунктам меню картинки, выбран бесплатный и официальный плагин wordpress Nav Menu Images. Как помните, я не советую использовать nulled темы и плагины.
2) Создано несколько рубрик и новое меню, где, благодаря плагину Nav Menu Images, появилась возможность присваивать картинки пунктам меню. Далее плагин выведен в боковую колонку.
3) Чтобы отображались надписи под картинками (это названия пунктов меню), через FTP-клиент заходим в папку плагина Nav Menu Images и открываем файл nav-menu-images.php.
Находим:
1 2 3 4 5 | public function menu_item_content( $content, $item_id ) { if ( has_post_thumbnail( $item_id ) ) $content = apply_filters( 'nmi_menu_item_content', get_the_post_thumbnail( $item_id, 'full', array( 'alt' => $content, 'title' => $content ) ), $item_id, $content ); return $content; } |
Меняем на:
1 2 3 4 5 6 7 8 9 | public function menu_item_content( $content, $item_id ) { $zag = $content; if ( has_post_thumbnail( $item_id ) ) $content = apply_filters( 'nmi_menu_item_content', get_the_post_thumbnail( $item_id, 'full', array( 'alt' => $content, 'title' => $content ) ), $item_id, $content ); $content .= ' '; $content .= $zag; return $content; } |
4. Работаем со стилями (индивидуально, не получается — пишем комментарии).
5. Добавляем кнопку «Показать все». Для этого в footer.php создаем скрипт:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> jQuery(function($) { $('input#cse-search-box').attr('placeholder', 'custom text here'); $('.menu-item-object-category.has-image:gt(11)').hide().last().after( $('<div class="rub_more"><a href="#">Показать все</a></div>').click(function(){ var a = this; $('.menu-item-object-category.has-image:not(:visible):lt(100)').fadeIn(function(){ if ($('.menu-item-object-category.has-image:not(:visible)').length == 0) $(a).remove(); }); return false; }) ); }); </script> |
Вероятно ваши стили могут отличаться. За помощью — пишем комментарии.
6. Скрываем стили от индексации скриптом и nofollow. Прописываем в footer.php код:
1 2 3 4 5 6 7 8 9 10 | jQuery(function($) { $(".menu-rubriki-container a").each(function() { var $this = $(this); var _href = $this.attr("href"); $this.attr("href", "javascript:goPage('" + _href + "')"); }); }); jQuery(function($) { // this signifies when the DOM is ready $('.menu-rubriki-container a').attr('rel', 'nofollow'); // this will add it to }); |
Результат можно посмотреть перейдя по ссылке Обновленный кроссовер Акура МДХ порадует своим функционалом, где бренды обосновались в боковой колонке.
Всем удачи!
Добавить комментарий