一、效果比对
从图片上很难看出有什么变化,只是多了一个搜索功能而已。确实是这样,因为这里讲的“优化”并不只是单纯的针对样式做调整,而是通过后台更加灵活的控制每个小工具的开关功能。
换句话说,如果你不想让某个小工具出现在前台的话,可以在后台单独设置其为关闭。
二、后台添加开关选项
打开【inc/options/begin-options.php】文件,在适当位置添加
$options[] = array( 'name' => '', 'desc' => '返回顶部按钮', 'id' => 'scroll_h', 'std' => '1', 'type' => 'checkbox' ); $options[] = array( 'id' => 'clear' ); $options[] = array( 'name' => '', 'desc' => '转到底部按钮', 'id' => 'scroll_b', 'std' => '1', 'type' => 'checkbox' ); $options[] = array( 'id' => 'clear' ); $options[] = array( 'name' => '', 'desc' => '跟随搜索按钮', 'id' => 'scroll_s', 'std' => '1', 'type' => 'checkbox' ); $options[] = array( 'id' => 'clear' ); $options[] = array( 'name' => '', 'desc' => '跟随评论按钮', 'id' => 'scroll_c', 'std' => '1', 'type' => 'checkbox' ); $options[] = array( 'id' => 'clear' ); $options[] = array( 'name' => '', 'desc' => '显示简繁体转换按钮', 'id' => 'gb2', 'std' => '1', 'type' => 'checkbox' ); $options[] = array( 'id' => 'clear' );
我加在了【主题选项--辅助功能】里,添加后就可以在对应位置看到这几个选项了。
三、修改对应的scroll.php文件
打开【template/scroll.php】文件,用下面的代码替换文件中原有代码
<ul id="scroll"> <li class="log log-no"> <a class="log-button" title="<?php _e( '文章目录', 'begin' ); ?>"> <i class="be be-menu"></i> </a> <div class="log-prompt"> <div class="log-arrow"><?php _e( '文章目录', 'begin' ); ?> <i class="be be-playarrow"></i> </div> </div> </li> <?php if (zm_get_option('scroll_z')) { ?> <?php if (is_singular() || is_category()) { ?> <li> <a class="scroll-home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php _e( '首页', 'begin' ); ?>" rel="home"> <i class="be be-home"></i> </a> </li> <?php } ?> <?php } ?> <?php if (zm_get_option('scroll_h')) { ?> <li> <a class="scroll-h" title="<?php _e( '返回顶部', 'begin' ); ?>"> <i class="be be-arrowup"></i> </a> </li> <?php } ?> <?php if (zm_get_option('scroll_c')) { ?> <?php if (is_single() || is_page()) { ?> <li> <a class="scroll-c" title="<?php _e( '评论', 'begin' ); ?>"> <i class="be be-speechbubble"></i> </a> </li> <?php } ?> <?php } ?> <?php if (zm_get_option('scroll_b')) { ?> <li> <a class="scroll-b" title="<?php _e( '转到底部', 'begin' ); ?>"> <i class="be be-arrowdown"></i> </a> </li> <?php } ?> <?php if (zm_get_option('scroll_s')) { ?> <li> <a class="scroll-search" title="<?php _e( '搜索', 'begin' ); ?>"> <i class="be be-search"></i> </a> </li> <?php } ?> <?php if (zm_get_option('gb2')) { ?> <li class="gb2-site"><a id="gb2big5"><span>繁</span></a></li> <?php } ?> <?php if (zm_get_option('qq_online')) { ?> <?php get_template_part( 'template/qqonline' ); ?> <?php } ?> <?php if (zm_get_option('qr_img')) { ?> <li class="qr-site"> <a href="javascript:void(0)" class="qr" title="<?php _e( '本页二维码', 'begin' ); ?>"> <i class="be be-qr-code"></i> <span class="qr-img"> <span id="output"> <img class="alignnone" src="<?php echo zm_get_option('qr_icon'); ?>" alt="icon"/> </span> <span class="arrow arrow-z"> <i class="be be-playarrow"></i> </span> <span class="arrow arrow-y"> <i class="be be-playarrow"></i> </span> </span> </a> </li> <script type="text/javascript"> $(document).ready(function(){ if(!+[1,]){ present="table"; } else { present="canvas"; } $('#output').qrcode({ render:present, text:window.location.href, width:"150", height:"150" }); }); </script> <?php } ?> </ul>
四、添加搜索功能的js脚本
打开【js/script.js】文件,找到代码
// 搜索 $(".nav-search").click(function() { // $ (this).toggleClass ("off-search"); $("#search-main").fadeToggle(300); }); $(".off-search, .off-search-a, .off-search-b").click(function() { $("#search-main").fadeToggle(300); });
将其替换成
// 搜索 $(".nav-search").click(function() { // $ (this).toggleClass ("off-search"); $("#search-main").fadeToggle(300); }); $(".scroll-search").click(function() { $("#search-main").fadeToggle(300) }); $(".off-search, .off-search-a, .off-search-b").click(function() { $("#search-main").fadeToggle(300); });
即可。
由于这个地方我自己做了修改,可能与你的不太一样,那么你只要在原来的基础上增加下面这条代码即可:
$(".scroll-search").click(function() { $("#search-main").fadeToggle(300) });
五、选择性启用功能
完成上面的操作后,就可以在【主题选项】中按照自己的需求,个性化启用一个或多个功能啦。
继续阅读
如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!