Делаем виджет с брендами авто

Всем привет!

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

Логика работы виджета:

— каждый бренд является рубрикой записей wordpress;
— каждый бренд должен содержать картинку-логотип, а снизу — расшифровка логотипа;
— необходимо выводить 12 брендов, остальные выводятся по нажатию на кнопку «Показать все»;
— дополнительно — скрыть ссылки от инексации.

За основу взят виджет бренды боковой колонки одного из сайтов:

Постановки задачи:

Решено использовать стандартный виджет произвольного меню. Будет создано меню, каждому пункту из которых можно присвоить картинку, а потом вывести в боковой колонке сайта.

Реализация:

1) Чтобы присваивать пунктам меню картинки, выбран бесплатный и официальный плагин wordpress Nav Menu Images. Как помните, я не советую использовать nulled темы и плагины.

2) Создано несколько рубрик и новое меню, где, благодаря плагину Nav Menu Images, появилась возможность присваивать картинки пунктам меню. Далее плагин выведен в боковую колонку.

3) Чтобы отображались надписи под картинками (это названия пунктов меню), через FTP-клиент заходим в папку плагина Nav Menu Images и открываем файл nav-menu-images.php.

Находим:

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' =&gt; $content, 'title' =&gt; $content ) ), $item_id, $content );
return $content;
}

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;

}

Меняем на:

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;
}

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 создаем скрипт:

<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>

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 код:

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
});

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

});

Результат можно посмотреть перейдя по ссылке Обновленный кроссовер Акура МДХ порадует своим функционалом, где бренды обосновались в боковой колонке.

Всем удачи!

Похожие записи:

Добавить комментарий