Поддержка Проблемы и решения Закладки для виджетов социальных сетей

  • Здравствуйте, подскажите как сделать закладки для виджетов из групп соц. сетей?, чтоб между виджетами разных групп в соц. сетях можно было переключатся.

    Возможно есть подходящий плагин или скрипт.

Просмотр 9 ответов — с 1 по 9 (всего 9)
  • Не совсем понятно. Можете пример такого виджета на каком либо сайте показать?

    Автор rootey

    (@rootey)

    http://www.kinopoisk.ru — на этом сайте есть виджеты социальных сетей вконтакте и фейсбук. Как добавить виджет группы я знаю, интересует как можно сделать, чтоб между этими виджетами можно было переключатся…

    Вот скрин, на котором красным цветом выделил закладки, которые переключают виджеты между контактом и фейсбуком, интересует как сделать такие закладки, для виджетов из социальных сетей.
    http://i062.radikal.ru/1405/07/6e95dee8f821.png

    Здравствуйте, подскажите как сделать закладки для виджетов из групп соц. сетей?, чтоб между виджетами разных групп в соц. сетях можно было переключатся.

    Вам нужен плагин, создающий так называемые ТАБЫ или АККОРДИОНЫ. На скриншоте используется ТАБ. Аккордион примерно тоже самое, но вертикально. При этом одна из вкладок аккордиона обычно остаётся раскрытой.
    Вот один из очень продвинутых плагинов для табов\аккордионов. https://wordpress.org/plugins/wp-ui/
    Более простой (по внешнему виду) но зато на русском https://wordpress.org/plugins/shortcodes-ultimate/

    Помимо табов\аккордионов в нем куча других полезных фишек для сайта.

    rootey, если вам нужно именно как в приведенном примере, то используйте это руководство.
    В приведенном примере в файле wpb-tabber-widget.php вместо

    <?php
    // Enter code for tab 1 here.
    ?>
    ...
    <?php
    // Enter code for tab 2 here.
    ?>
    ...
    <?php
    // Enter code for tab 3 here.
    ?>

    вставляете виджеты ваших социалок. Единственное, стили нужно будет под тему настроить.

    Автор rootey

    (@rootey)

    удалось закладки установить, как сменить надпись закладок разобрался, а вот как добавить туда маленькую картинку к примеру значок ВК и фейсбука? то-есть чтоб вместо надписи была картинка

    Типа такого

    <ul class="tabs">
    <li class="active"><a href="#tab1"><img src="vkontakte.png"
      width="90" height="30" alt="Вконтакте"></a></li>
    <li><a href="#tab2"><a href="#tab1"><img src="odnoklassniki.png"
      width="90" height="30" alt="Одноклассники"></a></li>
    </ul>

    http://htmlbook.ru/html/img

    Автор rootey

    (@rootey)

    В плагине закладок походу это реализовать не выйдет, вот код, который выводит закладки.

    [su_tabs]
    [su_tab title=»Tab 1″] Tab 1 content [/su_tab]
    [su_tab title=»Tab 2″] Tab 2 content [/su_tab]
    [/su_tabs]

    Вы мой способ не смотрели? Там делов на 10 минут, для примера в сайдбаре посмотрите на kuchugury.ru

    Автор rootey

    (@rootey)

    Не получается вывести картинку, посмотрите код файла (wpb-tabber-widget.php)возможно, есть ошибка… может дело в самой картинке… на данный момент вывел только 1 виджет. Я так понял что нужно заменить вот этот кусок кода:

    <ul class="tabs">
    	<li class="active"><a href="#tab1">Tab 1</a></li>
    	<li><a href="#tab2">Tab 2</a></li>
    	<li><a href="#tab3">Tab 3</a></li>
    	</ul>

    на этот:

    <ul class="tabs">
    <li class="active"><a href="#tab1"><img src="vkontakte.png"
      width="90" height="30" alt="Вконтакте"></a>
    
    <li><a href="#tab2"></a><a href="#tab1"><img src="odnoklassniki.png"
      width="90" height="30" alt="Одноклассники"></a></li>
    -----------------------------------------------------
    к слову сказать сама картинка выводится без проблем через код:

    <img src=»http://filmsplay.ru/vk.png&#187;
    width=»30″ height=»30″`
    на данный момент установленный виджет и эта картинка под ним на моем тестовом сайте filmsplay.ru
    —————————————
    Вот полностью код из файла wpb-tabber-widget.php. с заменой и добавленным виджетом.

    <?php
    /* Plugin Name: WPBeginner jQuery Tabber Widget
    Plugin URI: http://www.wpbeginner.com
    Description: A simple jquery tabber widget.
    Version: 1.0
    Author: WPBeginner
    Author URI: http://www.wpbeginner.com
    License: GPL2
    */
    
    // creating a widget
    class WPBTabberWidget extends WP_Widget {
    
    function WPBTabberWidget() {
    		$widget_ops = array(
    		'classname' => 'WPBTabberWidget',
    		'description' => 'Simple jQuery Tabber Widget'
    );
    $this->WP_Widget(
    		'WPBTabberWidget',
    		'WPBeginner Tabber Widget',
    		$widget_ops
    );
    }
    function widget($args, $instance) { // widget sidebar output
    
    function wpb_tabber() { 
    
    // Now we enqueue our stylesheet and jQuery script
    
    wp_register_style('wpb-tabber-style', plugins_url('wpb-tabber-style.css', __FILE__));
    wp_register_script('wpb-tabber-widget-js', plugins_url('wpb-tabber.js', __FILE__), array('jquery'));
    wp_enqueue_style('wpb-tabber-style');
    wp_enqueue_script('wpb-tabber-widget-js');
    
    // Creating tabs you will be adding you own code inside each tab
    ?>
    
    <ul class="tabs">
    <li class="active"><a href="#tab1"><img src="http://filmsplay.ru/vk.png"
      width="30" height="30" alt="Вконтакте"></a>
    
    <li><a href="#tab2"></a><a href="#tab1"><img src="http://filmsplay.ru/vk.png"
      width="30" height="30" alt="Одноклассники"></a></li>
    <div class="tab_container">
    
    <div id="tab1" class="tab_content">
    <?php
    // Enter code for tab 1 here.
    ?>
    <script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>
    
    <!-- VK Widget -->
    <div id="vk_groups"></div>
    <script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 0, width: "200", height: "280", color1: 'e3e3e3', color2: '2B587A', color3: '465c6f'}, 61886385);
    </script>
    </div>
    
    <div id="tab2" class="tab_content" style="display:none;">
    <?php
    // Enter code for tab 2 here.
    ?>
    </div>
    
    <div id="tab3" class="tab_content" style="display:none;">
    <?php
    // Enter code for tab 3 here.
    ?>
    </div>
    
    </div>
    
    <div class="tab-clear"></div>
    
    <?php
    
    }
    
    extract($args, EXTR_SKIP);
    // pre-widget code from theme
    echo $before_widget;
    $tabs = wpb_tabber();
    // output tabs HTML
    echo $tabs;
    // post-widget code from theme
    echo $after_widget;
    }
    }
    
    // registering and loading widget
    add_action(
    'widgets_init',
    create_function('','return register_widget("WPBTabberWidget");')
    );
    ?>
Просмотр 9 ответов — с 1 по 9 (всего 9)
  • Тема «Закладки для виджетов социальных сетей» закрыта для новых ответов.