效果展示
教程开始:
1.将以下css代码复制到ripro-v2主题文件css中
.tkm-cooper {}
.tkm-cooper h3 {
font-size: 24px;
margin-bottom: 40px;
text-align: center;
}
.tkm-cooper h3 b {
display: inline-block;
position: relative;
}
.tkm-cooper h3 b:after {
content: "";
width: 60px;
height: 2px;
position: absolute;
background: linear-gradient(270deg,#61b1ff,#04f);
bottom: -10px;
left: 50%;
margin-left: -30px;
}
.tkm-cooper .item {
text-align: center;
margin-bottom: 35px;
height: 100px;
background: #fff;
}
.tkm-cooper .item .item-logo {}
.tkm-cooper .item .item-logo img {
max-height: 100%;
}
.tkm-cooper .item:hover {
box-shadow: 0 5px 15px 0 rgba(62,130,255,.13);
}
@media (max-width: 767px){
.tkm-cooper h3 {
font-size: 18px;
}
.tkm-cooper .item {
height: 60px;
margin-bottom: 10px;
}
}
2.将以下代码添加到ripro-v2/inc/options/widget-options.php底部
<?php
/**
* 合作伙伴
*/
CSF::createWidget('ripro_v2_module_partners', array(
'title' => esc_html__('RI-首页模块 : 合作伙伴', 'ripro-v2'),
'classname' => 'ripro_v2-widget-partners',
'description' => esc_html__('VAN主题 a 合作伙伴', 'ripro-v2'),
'fields' => array(
array(
'id' => 'home_mode_partners',
'type' => 'fieldset',
'title' => '',
'fields' => array(
array(
'id' => '_title',
'type' => 'text',
'title' => '标题',
'default' => '合作伙伴',
),
array(
'id' => 'partnerscms',
'type' => 'group',
'title' => '新建案例展示(至多8个)',
'max' => 8,
'fields' => array(
array(
'id' => 'partners_title',
'type' => 'text',
'title' => '网站标题',
'default' => '源分享',
),
array(
'id' => 'partners_href',
'type' => 'text',
'title' => '网站地址',
'default' => 'https://www.yfxw.cn/',
'desc' => '记得填写完整地址哟!!!示例:https://www.yfxw.cn/',
),
array(
'id' => 'partners_logo',
'type' => 'upload',
'button_title' => '上传',
'remove_title' => '删除',
'default' => trailingslashit(get_stylesheet_directory_uri()).'assets/images/partners_logo.png',
'title' => '网站LOGO',
),
),
),
),
),
),
));
if (!function_exists('ripro_v2_module_partners')) {
function ripro_v2_module_partners($args, $instance)
{
if (!is_page_template_modular()) {
return false;
} //非模块页面不显示
echo $args['before_widget'];
//案例CSS
wp_enqueue_style('partners_style', trailingslashit(get_stylesheet_directory_uri()) . 'assets/css/partners.css?van_ver=' . VAN_VER);?>
<section class="tkm-cooper">
<h3>
<b><?php echo $instance['home_mode_partners']['_title'] ?></b>
</h3>
<div class="row">
<?php if (!empty($instance['home_mode_partners']['partnerscms']))
foreach ($instance['home_mode_partners']['partnerscms'] as $k => $item) {
?>
<div class="col-6 col-lg-3">
<div class="item">
<div class="item-logo">
<a href="<?php echo $item['partners_href'] ?>" ><img src="<?php echo $item['partners_logo'] ?>" alt="<?php echo $item['partners_title'] ?>" /></a>
</div>
</div>
</div>
<?php
}
?>
</div>
</section>
<?php
echo @$args['after_widget'];
}
}
3.外观-小工具,拖动到显示的位置,添加相应数据即可
本站声明:
1.资源来自于网络,版权争议与本站无关,版权归原创者所有!
2.本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用。
3.本站所发布的文章以及附件仅限用于学习和研究目的;不得将上述内容资源用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!
4.如果运营棋牌游戏请合法取得相关资质,切勿违法犯罪!
5.本站默认解压密码:www.028sf.cn丨www.bxym8.com丨www.8xym.cc
速发源码网 » 程Riprov2小工具教学-合作伙伴小工具
