Не совсем понятно. Можете пример такого виджета на каком либо сайте показать?
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.
?>
вставляете виджеты ваших социалок. Единственное, стили нужно будет под тему настроить.
удалось закладки установить, как сменить надпись закладок разобрался, а вот как добавить туда маленькую картинку к примеру значок ВК и фейсбука? то-есть чтоб вместо надписи была картинка
Типа такого
<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
В плагине закладок походу это реализовать не выйдет, вот код, который выводит закладки.
[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
Не получается вывести картинку, посмотрите код файла (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»
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");')
);
?>
