wordpress网站ripro主题美化纯代码修改首页幻灯片为三合一样式 并添加后台控制教程

好久没发ripro主题美化教程了,今晚捣鼓了一下这个ripro三合一幻灯片教程,并不是很麻烦,但是需要注意下细节。

最终效果图如下:
wordpress网站ripro主题美化纯代码修改首页幻灯片为三合一样式 并添加后台控制教程

本教程适合不想升级ripro主题不想使用美化包及插件等等的朋友。本教程适合所有ripro版本!

教程开始:

1、找到\ripro\inc\codestar-framework\options.php 将以下代码添加到最下面:


//
// 全库网
//
CSF::createSection($prefix, array(
    'id'          => 'ztmbk_ui_develop',
    'title'       => '二次开发',
    'icon'        => 'fa fa-magic',
    'description' => '二次开发',
));
//
// Banner:幻灯片模块样式
//
CSF::createSection($prefix, array(
    'parent' => 'ztmbk_ui_develop',
    'title'  => '幻灯片',
    'icon'   => 'fa fa-film',
    'description' => '幻灯片设置,请确认已在 “ <font color="red">首页设置-首页布局</font> ” 中显示!',
    'fields' => array(
    	// Banner-Advert
        array(
            'id'      => 'dict_ui_banenr_advert',
            'type'    => 'switcher',
            'title'   => '是否演示轮播图右下角广告图',
            'default' => true,
        ),
        array(
            'id'         => 'dict_ui_advert',
            'type'       => 'fieldset',
            'title'      => '广告背景',
            'fields'     => array(
                
                array(
                    'id'      => 'bgimg',
                    'type'    => 'upload',
                    'title'   => '背景图',
                    'default' => '/wp-content/themes/ripro-child/assets/images/nesw_css_split.png',
                ),
                
            ),
            'dependency' => array('dict_ui_banenr_advert', '==', 'true'),
        ),
        // 三合一幻灯片左侧轮播
        array(
            'id'      => 'dict_ui_banenr',
            'type'    => 'switcher',
            'title'   => '是否已在 “ <font color="red">首页设置-首页布局</font> ” 中显示</br>三合一幻灯片',
            'default' => true,
        ),
        array(
            'id'     => 'dict_ui_banenr_pz',
            'type'   => 'fieldset',
            'title'  => '幻灯片左侧轮播参数配置',
            'fields' => array(

                array(
                    'id'         => 'dict_ui_banenr_data',
                    'type'       => 'repeater',
                    'title'      => '新建自定义幻灯片',
                    'max'     => '5',
                    'fields'     => array(
                        array(
                            'id'      => '_Recommend',
                            'type'    => 'text',
                            'title'   => 'new',
                            'default' => '推荐',
                        ),
                        array(
                            'id'      => '_title',
                            'type'    => 'text',
                            'title'   => '标题',
                            'default' => '全库网美化',
                        ),
                        array(
                            'id'          => '_img',
                            'type'        => 'upload',
                            'title'       => '上传幻灯片',
                            'library'     => 'image',
                            'placeholder' => 'http://',
                            'default'     => get_template_directory_uri() . '/assets/images/thumb/full.jpg',
                        ),
                        array(
                            'id'      => '_blank',
                            'type'    => 'switcher',
                            'title'   => '新窗口打开链接',
                            'label'   => '',
                            'default' => true,
                        ),
                        array(
                            'id'      => '_href',
                            'type'    => 'text',
                            'title'   => '链接地址',
                            'default' => 'https://www.qkuser.com',
                        ),
                    ),
                ),
            ),
            'dependency' => array('dict_ui_banenr', '==', 'true'),
        ),
        // 三合一幻灯片右上推荐
        array(
            'id'     => 'dict_ui_banner_left_up',
            'type'   => 'fieldset',
            'title'  => '幻灯片右侧推荐(上)',
            'fields' => array(
                array(
                    'id'      => '_title',
                    'type'    => 'text',
                    'title'   => '幻灯片右侧(上)标题',
                    'desc'    => '',
                    'default' => '全库网美化(上)',
                ),
                array(
                    'id'      => '_link',
                    'type'    => 'text',
                    'title'   => '幻灯片右侧(上)链接地址',
                    'desc'    => '',
                    'default' => 'https://www.qkuser.com',
                ),
                array(
                    'id'          => 'dict_ui_banner_up_logo',
                    'type'        => 'upload',
                    'title'       => '背景图片',
                    'library'     => 'image',
                    'placeholder' => 'http://',
                    'default'     => get_template_directory_uri() . '/assets/images/thumb/full.jpg',
                ),
            ),
            'dependency' => array('dict_ui_banenr', '==', 'true'),
        ),
        // 三合一幻灯片右下推荐
        array(
            'id'     => 'dict_ui_banner_left_lower',
            'type'   => 'fieldset',
            'title'  => '幻灯片右侧推荐(下)',
            'fields' => array(
                array(
                    'id'      => '_title',
                    'type'    => 'text',
                    'title'   => '幻灯片右侧(下)标题',
                    'desc'    => '',
                    'default' => '全库网美化(下)',
                ),
                array(
                    'id'      => '_link',
                    'type'    => 'text',
                    'title'   => '幻灯片右侧(下)链接地址',
                    'desc'    => '',
                    'default' => 'https://www.qkuser.com',
                ),
                array(
                    'id'          => 'dict_ui_banner_lower_logo',
                    'type'        => 'upload',
                    'title'       => '背景图片',
                    'library'     => 'image',
                    'placeholder' => 'http://',
                    'default'     => get_template_directory_uri() . '/assets/images/thumb/full.jpg',
                ),
            ),
            'dependency' => array('dict_ui_banenr', '==', 'true'),
        ),
       
    ),
));

2、同样打开\ripro\inc\codestar-framework\options.php 搜索 'disabled' => array( 然后在下面添加代码:


'ztmbk.banner' => '三合一幻灯片',

如图所示:
wordpress网站ripro主题美化纯代码修改首页幻灯片为三合一样式 并添加后台控制教程

SVIP免费

已有84人支付

7、刷新网站后台,进入主题设置-首页布局 重置当前分区,切记是当前分区,然后就能看到三合一幻灯片了。

8、进入主题设置-二开功能-幻灯片设置-设置相关参数就可以了。

9、清除浏览器缓存,看一下效果吧。一定要清除浏览器缓存!!!一定要清除浏览器缓存!!!一定要清除浏览器缓存!!!

1. 全库网所有资源均来源于用户上传和网络,如有侵权请发送邮箱联系站长处理!
2. 如果你有好的资源或者原创教程,可以到审核区投稿发布,分享会有钻石奖励和额外收入!
3. 全库网所有的源码、教程等其它资源均源于用户上传发布,如有疑问,可直接联系发布作者处理
4. 如有链接无法下载、失效或广告,请联系全库网管理员核实处理!
5. 通过发布原创教学视频或优质源码资源可以免费获得全库网站内SVIP会员噢
6.全库网管理猿邮箱地址:[email protected],我们会在收到您的邮件后三个工作日内完成处理!
7. 如遇到加密压缩包,默认解压密码为"qkuser.com",如遇到无法解压的请联系管理员!

全库网 » wordpress网站ripro主题美化纯代码修改首页幻灯片为三合一样式 并添加后台控制教程