优化正文页右侧的返回顶部、转到底部等小功能

一、效果比对

• 优化前：点击这里
• 优化后：点击这里

从图片上很难看出有什么变化，只是多了一个搜索功能而已。确实是这样，因为这里讲的“优化”并不只是单纯的针对样式做调整，而是通过后台更加灵活的控制每个小工具的开关功能。

换句话说，如果你不想让某个小工具出现在前台的话，可以在后台单独设置其为关闭。

 

二、后台添加开关选项

打开【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)
});

 

五、选择性启用功能

完成上面的操作后，就可以在【主题选项】中按照自己的需求，个性化启用一个或多个功能啦。