begin主题正文社交功能整合

  • A+
所属分类:建博笔记

第一部分 效果预览及整合原因

一、效果预览

为了更直观的表达本文描述的内容,先放几张效果图吧!

修改前:PC端完整效果预览移动端完整效果预览

修改后:PC端完整效果预览移动端完整效果预览、动态预览(请查看正文底部社交按钮)

 

二、整合原因

从上面修改前的效果图中不难看出,当我们在后台启用“我的微信”、“我的公众号”、“收藏”、“点赞”、“打赏”、“分享”这些功能后,这些功能在前台会占用大量的页面高度。而且,这仅仅只是开启了现有的这几个功能而已,还没加上熊掌号以及后续可能会增加的其他功能。另外,如果一篇文章还设置了文章标题幻灯、全局广告、正文头部广告、正文底部广告等,那么这个页面的高度可想而知。

而在移动端,由于移动设备本身宽度有限,所以正文内容本身的高度就已经比PC端的高度更高了,若是再启用上面这些功能以及文章标题幻灯和各种广告,那么整个页面就会更长,这对用户体验来说是非常不友好的,主要有三个理由:

  1. 当正文内容较短时,这些功能霸占了访客视线,有种喧宾夺主的感觉
  2. 当正文内容较长时,由于这些功能的启用,增加了整个页面的高度,若访客想看正文下面的内容(比如评论、页脚等),需要多次滚动鼠标方可到达,有种滚不完、到达不了的感觉
  3. 由于这些功能占用了较多的位置,会让人有种这些功能更像广告的错觉

所以,个人觉得当前的这种布局效果显然已不是最优方案,为了解决这个问题,故将这些功能整合成一行,既不影响这些功能的展示,又可以提升访客体验的效果。

说明

本文涉及文件较多,改动较大,建议仔细看完全文后再决定是否修改。如需修改,务必备份好相关文件。

 

第二部分 后台功能整合、功能控制、社交文件修改、js脚本添加及样式调整

三、后台功能整合

打开inc/options/begin-options.php文件,大约5084~5152行的位置,找到代码展开

  1. $options[] = array(
  2. 'name' => '正文末尾微信二维码',
  3. 'desc' => '显示',
  4. 'id' => 'single_weixin',
  5. 'class' => 'be_ico',
  6. 'std' => '1',
  7. 'type' => 'checkbox'
  8. );
  9. $options[] = array(
  10. 'name' => '',
  11. 'desc' => '只显示一个微信二维码',
  12. 'id' => 'single_weixin_one',
  13. 'std' => '0',
  14. 'class' => 'hidden',
  15. 'type' => 'checkbox'
  16. );
  17. $options[] = array(
  18. 'name' => '',
  19. 'desc' => '微信文字',
  20. 'id' => 'weixin_h',
  21. 'std' => '我的微信',
  22. 'class' => 'hidden',
  23. 'type' => 'text'
  24. );
  25. $options[] = array(
  26. 'name' => '',
  27. 'desc' => '微信说明文字',
  28. 'id' => 'weixin_h_w',
  29. 'std' => '这是我的微信扫一扫',
  30. 'class' => 'hidden',
  31. 'type' => 'text'
  32. );
  33. $options[] = array(
  34. 'name' => '',
  35. 'desc' => '上传微信二维码图片(<240px)',
  36. 'id' => 'weixin_h_img',
  37. 'class' => 'hidden',
  38. 'std' => "$blogpath/random/1.jpg",
  39. 'type' => 'upload'
  40. );
  41. $options[] = array(
  42. 'name' => '',
  43. 'desc' => '微信公众号文字',
  44. 'id' => 'weixin_g',
  45. 'std' => '我的微信公众号',
  46. 'class' => 'hidden',
  47. 'type' => 'text'
  48. );
  49. $options[] = array(
  50. 'name' => '',
  51. 'desc' => '微信公众号说明文字',
  52. 'id' => 'weixin_g_w',
  53. 'std' => '我的微信公众号扫一扫',
  54. 'class' => 'hidden',
  55. 'type' => 'text'
  56. );
  57. $options[] = array(
  58. 'name' => '',
  59. 'desc' => '上传微信公众号二维码图片(<240px)',
  60. 'id' => 'weixin_g_img',
  61. 'class' => 'hidden',
  62. 'std' => "$blogpath/random/2.jpg",
  63. 'type' => 'upload'
  64. );
  65. $options[] = array(
  66. 'id' => 'clear'
  67. );
  68. $options[] = array(
  69. 'name' => '社交选项',
  70. 'class' => 'be_ico'
  71. );
  72. $options[] = array(
  73. 'name' => '',
  74. 'desc' => '启用正文底部点赞分享按钮',
  75. 'id' => 'zm_like',
  76. 'std' => '1',
  77. 'type' => 'checkbox'
  78. );
  79. $options[] = array(
  80. 'name' => '',
  81. 'desc' => '启用百度分享',
  82. 'id' => 'share',
  83. 'std' => '1',
  84. 'type' => 'checkbox'
  85. );
  86. $options[] = array(
  87. 'name' => '',
  88. 'desc' => '本地调用百度分享',
  89. 'id' => 'share_l',
  90. 'std' => '0',
  91. 'type' => 'checkbox'
  92. );
  93. $options[] = array(
  94. 'id' => 'clear'
  95. );
  96. $options[] = array(
  97. 'name' => '打赏(赞助)按钮设置',
  98. 'desc' => '自定义按钮文字,留空则不显示弹窗',
  99. 'id' => 'alipay_name',
  100. 'class' => 'be_ico',
  101. 'std' => '赏',
  102. 'type' => 'text'
  103. );
  104. $options[] = array(
  105. 'name' => '',
  106. 'desc' => '自定义提示文字',
  107. 'id' => 'alipay_t',
  108. 'std' => '赞助本站',
  109. 'type' => 'text'
  110. );
  111. $options[] = array(
  112. 'name' => '',
  113. 'desc' => '自定义弹窗标题文字,留空则不显示',
  114. 'id' => 'alipay_h',
  115. 'std' => '您可以选择一种方式赞助本站',
  116. 'type' => 'text'
  117. );
  118. $options[] = array(
  119. 'name' => '',
  120. 'desc' => '上传支付宝二维码图片(<240px)',
  121. 'id' => 'qr_a',
  122. "std" => "",
  123. 'type' => 'upload'
  124. );
  125. $options[] = array(
  126. 'name' => '',
  127. 'desc' => '自定义支付宝二维码图片文字说明,留空则不显示',
  128. 'id' => 'alipay_z',
  129. 'std' => '支付宝扫一扫赞助',
  130. 'type' => 'text'
  131. );
  132. $options[] = array(
  133. 'name' => '',
  134. 'desc' => '上传微信钱包二维码图片(<250px)',
  135. 'id' => 'qr_b',
  136. "std" => "",
  137. 'type' => 'upload'
  138. );
  139. $options[] = array(
  140. 'name' => '',
  141. 'desc' => '自定义微信钱包二维码图片文字说明,留空则不显示',
  142. 'id' => 'alipay_w',
  143. 'std' => '微信钱包扫描赞助',
  144. 'type' => 'text'
  145. );
  146. $options[] = array(
  147. 'id' => 'clear'
  148. );

将其修改展开

  1. $options[] = array(
  2. 'name' => '正文底部社交按钮',
  3. 'desc' => '启用',
  4. 'id' => 'social',
  5. 'class' => 'be_ico',
  6. 'std' => '1',
  7. 'type' => 'checkbox'
  8. );
  9. $options[] = array(
  10. 'name' => '',
  11. 'desc' => '启用打赏',
  12. 'id' => 'shang',
  13. 'std' => '1',
  14. 'type' => 'checkbox'
  15. );
  16. $options[] = array(
  17. 'name' => '',
  18. 'desc' => '自定义打赏图标,留空则不显示',
  19. 'id' => 'shang_ico',
  20. 'class' => 'hidden',
  21. 'std' => '',
  22. 'type' => 'text'
  23. );
  24. $options[] = array(
  25. 'name' => '',
  26. 'desc' => '自定义打赏按钮文字,留空则显示“打赏”',
  27. 'id' => 'shang_name',
  28. 'class' => 'hidden',
  29. 'std' => '打赏',
  30. 'type' => 'text'
  31. );
  32. $options[] = array(
  33. 'name' => '',
  34. 'desc' => '自定义打赏提示文字',
  35. 'id' => 'shang_title',
  36. 'class' => 'hidden',
  37. 'std' => '赞助本站',
  38. 'type' => 'text'
  39. );
  40. $options[] = array(
  41. 'name' => '',
  42. 'desc' => '自定义打赏弹窗标题文字,留空则不显示',
  43. 'id' => 'shang_title_header',
  44. 'class' => 'hidden',
  45. 'std' => '您可以选择一种方式赞助本站',
  46. 'type' => 'text'
  47. );
  48. $options[] = array(
  49. 'name' => '',
  50. 'desc' => '上传打赏支付宝二维码图片(建议140px x 140px)',
  51. 'id' => 'alipay_qr',
  52. 'class' => 'hidden',
  53. "std" => "",
  54. 'type' => 'upload'
  55. );
  56. $options[] = array(
  57. 'name' => '',
  58. 'desc' => '自定义打赏支付宝二维码图片文字说明,留空则不显示',
  59. 'id' => 'alipay_qr_str',
  60. 'class' => 'hidden',
  61. 'std' => '支付宝扫一扫赞助',
  62. 'type' => 'text'
  63. );
  64. $options[] = array(
  65. 'name' => '',
  66. 'desc' => '上传打赏微信钱包二维码图片(建议140px x 140px)',
  67. 'id' => 'wechat_qr',
  68. 'class' => 'hidden',
  69. "std" => "",
  70. 'type' => 'upload'
  71. );
  72. $options[] = array(
  73. 'name' => '',
  74. 'desc' => '自定义打赏微信钱包二维码图片文字说明,留空则不显示',
  75. 'id' => 'wechat_qr_str',
  76. 'class' => 'hidden',
  77. 'std' => '微信钱包扫描赞助',
  78. 'type' => 'text'
  79. );
  80. $options[] = array(
  81. 'name' => '',
  82. 'desc' => '启用百度分享',
  83. 'id' => 'share',
  84. 'std' => '1',
  85. 'type' => 'checkbox'
  86. );
  87. $options[] = array(
  88. 'name' => '',
  89. 'desc' => '自定义百度分享图标,留空则使用默认图标',
  90. 'id' => 'share_ico',
  91. 'class' => 'hidden',
  92. 'std' => '',
  93. 'type' => 'text'
  94. );
  95. $options[] = array(
  96. 'name' => '',
  97. 'desc' => '自定义百度分享按钮文字,留空则显示“分享”',
  98. 'id' => 'share_name',
  99. 'std' => '分享',
  100. 'class' => 'hidden',
  101. 'type' => 'text'
  102. );
  103. $options[] = array(
  104. 'name' => '',
  105. 'desc' => '自定义百度分享提示文字,留空则不显示',
  106. 'id' => 'share_title',
  107. 'std' => '分享文章',
  108. 'class' => 'hidden',
  109. 'type' => 'text'
  110. );
  111. $options[] = array(
  112. 'name' => '',
  113. 'desc' => '本地调用百度分享',
  114. 'id' => 'share_l',
  115. 'class' => 'hidden',
  116. 'std' => '0',
  117. 'type' => 'checkbox'
  118. );
  119. $options[] = array(
  120. 'name' => '',
  121. 'desc' => '启用微信',
  122. 'id' => 'wechat',
  123. 'class' => 'be_ico',
  124. 'std' => '1',
  125. 'type' => 'checkbox'
  126. );
  127. $options[] = array(
  128. 'name' => '',
  129. 'desc' => '自定义微信图标,留空则不显示',
  130. 'id' => 'wechat_ico',
  131. 'class' => 'hidden',
  132. 'std' => '',
  133. 'type' => 'text'
  134. );
  135. $options[] = array(
  136. 'name' => '',
  137. 'desc' => '自定义微信按钮文字,留空则显示“我的微信”',
  138. 'id' => 'wechat_name',
  139. 'std' => '我的微信',
  140. 'class' => 'hidden',
  141. 'type' => 'text'
  142. );
  143. $options[] = array(
  144. 'name' => '',
  145. 'desc' => '自定义微信说明文字,留空则不显示',
  146. 'id' => 'wechat_title',
  147. 'std' => '这是我的微信扫一扫',
  148. 'class' => 'hidden',
  149. 'type' => 'text'
  150. );
  151. $options[] = array(
  152. 'name' => '',
  153. 'desc' => '上传微信二维码图片(建议140px x 140px)',
  154. 'id' => 'wechat_img',
  155. 'class' => 'hidden',
  156. 'std' => "$blogpath/random/1.jpg",
  157. 'type' => 'upload'
  158. );
  159. $options[] = array(
  160. 'name' => '',
  161. 'desc' => '启用公众号',
  162. 'id' => 'wechat_public',
  163. 'class' => 'be_ico',
  164. 'std' => '1',
  165. 'type' => 'checkbox'
  166. );
  167. $options[] = array(
  168. 'name' => '',
  169. 'desc' => '自定义公众号图标,留空则不显示',
  170. 'id' => 'wechat_public_ico',
  171. 'class' => 'hidden',
  172. 'std' => '',
  173. 'type' => 'text'
  174. );
  175. $options[] = array(
  176. 'name' => '',
  177. 'desc' => '自定义公众号按钮文字,留空则显示“我的公众号”',
  178. 'id' => 'wechat_public_name',
  179. 'std' => '我的公众号',
  180. 'class' => 'hidden',
  181. 'type' => 'text'
  182. );
  183. $options[] = array(
  184. 'name' => '',
  185. 'desc' => '自定义公众号说明文字,留空则不显示',
  186. 'id' => 'wechat_public_title',
  187. 'std' => '这是我的公众号,欢迎关注',
  188. 'class' => 'hidden',
  189. 'type' => 'text'
  190. );
  191. $options[] = array(
  192. 'name' => '',
  193. 'desc' => '上传公众号二维码图片(建议140px x 140px)',
  194. 'id' => 'wechat_public_img',
  195. 'class' => 'hidden',
  196. 'std' => "$blogpath/random/1.jpg",
  197. 'type' => 'upload'
  198. );
  199. $options[] = array(
  200. 'name' => '',
  201. 'desc' => '启用点赞',
  202. 'id' => 'zm_like',
  203. 'std' => '1',
  204. 'type' => 'checkbox'
  205. );
  206. $options[] = array(
  207. 'name' => '',
  208. 'desc' => '自定义点赞图标,留空则使用默认图标',
  209. 'id' => 'like_ico',
  210. 'class' => 'hidden',
  211. 'std' => '',
  212. 'type' => 'text'
  213. );
  214. $options[] = array(
  215. 'name' => '',
  216. 'desc' => '自定义点赞按钮文字,留空则显示“点赞”',
  217. 'id' => 'like_name',
  218. 'std' => '点赞',
  219. 'class' => 'hidden',
  220. 'type' => 'text'
  221. );
  222. $options[] = array(
  223. 'name' => '',
  224. 'desc' => '自定义点赞说明文字,留空则不显示',
  225. 'id' => 'like_title',
  226. 'std' => '点赞',
  227. 'class' => 'hidden',
  228. 'type' => 'text'
  229. );
  230. $options[] = array(
  231. 'id' => 'clear'
  232. );

代码说明

  • 用来将这些功能整合在同一个设置项内
  • 这一部分不是必须的,但由于对代码中的参数做了修改,所以建议修改。如果不修改,则需要手动修改后面涉及的代码里的各种参数(比如idclass

 

四、功能控制

打开inc/options/includes/themes-options.php文件,大约549行的位置,找到代码

  1. jQuery('#single_weixin').click(function() {
  2. jQuery('#section-single_weixin_one, #section-weixin_h, #section-weixin_h_w, #section-weixin_h_img, #section-weixin_g, #section-weixin_g_w, #section-weixin_g_img').fadeToggle(400);
  3. });
  4. if (jQuery('#single_weixin:checked').val() !== undefined) {
  5. jQuery('#section-single_weixin_one, #section-weixin_h, #section-weixin_h_w, #section-weixin_h_img, #section-weixin_g, #section-weixin_g_w, #section-weixin_g_img').show();
  6. }

将其替换

  1. jQuery('#shang').click(function() {
  2. jQuery('#section-shang_ico, #section-shang_name, #section-shang_title, #section-shang_title_header, #section-alipay_qr, #section-alipay_qr_str, #section-wechat_qr, #section-wechat_qr_str').fadeToggle(400);
  3. });
  4. if (jQuery('#shang:checked').val() !== undefined) {
  5. jQuery('#section-shang_ico, #section-shang_name, #section-shang_title, #section-shang_title_header, #section-alipay_qr, #section-alipay_qr_str, #section-wechat_qr, #section-wechat_qr_str').show();
  6. }
  7. jQuery('#share').click(function() {
  8. jQuery('#section-share_ico, #section-share_title, #section-share_name, #section-share_l').fadeToggle(400);
  9. });
  10. if (jQuery('#share:checked').val() !== undefined) {
  11. jQuery('#section-share_ico, #section-share_title, #section-share_name, #section-share_l').show();
  12. }
  13. jQuery('#wechat').click(function() {
  14. jQuery('#section-wechat_ico, #section-wechat_name, #section-wechat_title, #section-wechat_img').fadeToggle(400);
  15. });
  16. if (jQuery('#wechat:checked').val() !== undefined) {
  17. jQuery('#section-wechat_ico, #section-wechat_name, #section-wechat_title, #section-wechat_img').show();
  18. }
  19. jQuery('#wechat_public').click(function() {
  20. jQuery('#section-wechat_public_ico, #section-wechat_public_name, #section-wechat_public_title, #section-wechat_public_img').fadeToggle(400);
  21. });
  22. if (jQuery('#wechat_public:checked').val() !== undefined) {
  23. jQuery('#section-wechat_public_ico, #section-wechat_public_name, #section-wechat_public_title, #section-wechat_public_img').show();
  24. }
  25. jQuery('#zm_like').click(function() {
  26. jQuery('#section-like_ico, #section-like_name, #section-like_title').fadeToggle(400);
  27. });
  28. if (jQuery('#zm_like:checked').val() !== undefined) {
  29. jQuery('#section-like_ico, #section-like_name, #section-like_title').show();
  30. }

代码说明

  • 给每个单独的功能添加显示/隐藏设置,不启用某个功能时,该功能下的相关设置将被隐藏
  • 这一步不是必须的,若不想操作这一步,则需修改前一步中各个$options[] = array(内的'class' => 'hidden','class' => 'be_ico',

完成以上操作后,后台应该是这样的:

begin主题正文社交功能整合

功能说明

  • 每个功能可单独控制启用或不启用
  • 若启用某个功能,需先勾选启用选项
  • 勾选某个功能后,展开这个功能中的相关设置项,默认隐藏

 

五、修改社交文件

打开template/social.php文件,使用下面的代码替换原来的内容展开

  1. <div class="clear"></div>
  2. <div id="social">
  3. <ul class="social-main">
  4. <?php if (zm_get_option('shang')) { ?>
  5. <li class="shang">
  6. <?php if ( zm_get_option('shang_name') == '' ) { ?>
  7. <a href="javascript:void(0)" title="<?php echo zm_get_option('shang_title'); ?>">
  8. <?php if (zm_get_option('shang_ico')) { ?>
  9. <i class="<?php echo zm_get_option('shang_ico'); ?>"></i>
  10. <?php } ?><?php _e( '打赏', 'begin' ); ?>
  11. </a>
  12. <?php } else { ?>
  13. <a href="javascript:void(0)" title="<?php echo zm_get_option('shang_title'); ?>">
  14. <?php if (zm_get_option('shang_ico')) { ?>
  15. <i class="<?php echo zm_get_option('shang_ico'); ?>"></i>
  16. <?php } ?><?php echo zm_get_option('shang_name'); ?>
  17. </a>
  18. <?php } ?>
  19. <div class="shang-main">
  20. <?php if ( zm_get_option('shang_title_header') == '' ) { ?><?php } else { ?>
  21. <h4>
  22. <i class="be be-favorite" aria-hidden="true"></i><?php echo zm_get_option('shang_title_header'); ?>
  23. </h4>
  24. <?php } ?>
  25. <?php if ( zm_get_option('alipay_qr') == '' ) { ?><?php } else { ?>
  26. <div class="shang-img">
  27. <img src="<?php echo zm_get_option('alipay_qr'); ?>" alt="alipay"/>
  28. <?php if ( zm_get_option('alipay_qr_str') == '' ) { ?><?php } else { ?>
  29. <h4><?php echo zm_get_option('alipay_qr_str'); ?></h4>
  30. <?php } ?>
  31. </div>
  32. <?php } ?>
  33. <?php if ( zm_get_option('wechat_qr') == '' ) { ?><?php } else { ?>
  34. <div class="shang-img">
  35. <img src="<?php echo zm_get_option('wechat_qr'); ?>" alt="weixin"/>
  36. <?php if ( zm_get_option('wechat_qr_str') == '' ) { ?><?php } else { ?>
  37. <h4><?php echo zm_get_option('wechat_qr_str'); ?></h4>
  38. <?php } ?>
  39. </div>
  40. <?php } ?>
  41. </div>
  42. </li>
  43. <?php } ?>
  44. <?php if (zm_get_option('share')) { ?>
  45. <li class="share">
  46. <?php if ( zm_get_option('share_name') == '' ) { ?>
  47. <a href="javascript:void(0)" title="<?php echo zm_get_option('share_title'); ?>">
  48. <?php if (zm_get_option('share_ico')) { ?>
  49. <i class="<?php echo zm_get_option('share_ico'); ?>"></i>
  50. <?php } ?><?php _e( '分享', 'begin' ); ?>
  51. </a>
  52. <?php } else { ?>
  53. <a href="javascript:void(0)" title="<?php echo zm_get_option('share_title'); ?>">
  54. <?php if (zm_get_option('share_ico')) { ?>
  55. <i class="<?php echo zm_get_option('share_ico'); ?>"></i>
  56. <?php } ?><?php echo zm_get_option('share_name'); ?>
  57. </a>
  58. <?php } ?>
  59. <div id="share">
  60. <div class="bdsharebuttonbox">
  61. <a title="更多" class="bds_more be be-addbox" data-cmd="more" onclick="return false;" href="#"></a>
  62. <a title="分享到QQ空间" class="be be-qzone" data-cmd="qzone" onclick="return false;" href="#"></a>
  63. <a title="分享到新浪微博" class="be be-stsina" data-cmd="tsina" onclick="return false;" href="#"></a>
  64. <a title="分享到腾讯微博" class="be be-tqq" data-cmd="tqq" onclick="return false;" href="#"></a>
  65. <a title="分享到人人网" class="be be-renren" data-cmd="renren" onclick="return false;" href="#"></a>
  66. <a title="分享到微信" class="be be-weixin" data-cmd="weixin" onclick="return false;" href="#"></a>
  67. </div>
  68. </div>
  69. </li>
  70. <?php } ?>
  71. <?php if (zm_get_option('wechat')) { ?>
  72. <li class="wechat">
  73. <?php if ( zm_get_option('wechat_name') == '' ) { ?>
  74. <a href="javascript:void(0)" title="<?php echo zm_get_option('wechat_title'); ?>">
  75. <?php if (zm_get_option('wechat_ico')) { ?>
  76. <i class="<?php echo zm_get_option('wechat_ico'); ?>"></i>
  77. <?php } ?><?php _e( '我的微信', 'begin' ); ?>
  78. </a>
  79. <?php } else { ?>
  80. <a href="javascript:void(0)" title="<?php echo zm_get_option('wechat_title'); ?>">
  81. <?php if (zm_get_option('wechat_ico')) { ?>
  82. <i class="<?php echo zm_get_option('wechat_ico'); ?>"></i>
  83. <?php } ?><?php echo zm_get_option('wechat_name'); ?>
  84. </a>
  85. <?php } ?>
  86. <div class="wechat-main">
  87. <?php if ( zm_get_option('wechat_title') == '' ) { ?><?php } else { ?>
  88. <h4><?php echo zm_get_option('wechat_title'); ?></h4>
  89. <?php } ?>
  90. <?php if ( zm_get_option('wechat_img') == '' ) { ?><?php } else { ?>
  91. <div class="wechat-img">
  92. <img src="<?php echo zm_get_option('wechat_img'); ?>" alt="wechat"/>
  93. </div>
  94. <?php } ?>
  95. </div>
  96. </li>
  97. <?php } ?>
  98. <?php if (zm_get_option('wechat_public')) { ?>
  99. <li class="wechat-public">
  100. <?php if ( zm_get_option('wechat_public_name') == '' ) { ?>
  101. <a href="javascript:void(0)" title="<?php echo zm_get_option('wechat_public_title'); ?>">
  102. <?php if (zm_get_option('wechat_public_ico')) { ?>
  103. <i class="<?php echo zm_get_option('wechat_public_ico'); ?>"></i>
  104. <?php } ?><?php _e( '我的公众号', 'begin' ); ?>
  105. </a>
  106. <?php } else { ?>
  107. <a href="javascript:void(0)" title="<?php echo zm_get_option('wechat_public_title'); ?>">
  108. <?php if (zm_get_option('wechat_public_ico')) { ?>
  109. <i class="<?php echo zm_get_option('wechat_public_ico'); ?>"></i>
  110. <?php } ?><?php echo zm_get_option('wechat_public_name'); ?>
  111. </a>
  112. <?php } ?>
  113. <div class="wechat-public-main">
  114. <?php if ( zm_get_option('wechat_public_title') == '' ) { ?><?php } else { ?>
  115. <h4><?php echo zm_get_option('wechat_public_title'); ?></h4>
  116. <?php } ?>
  117. <?php if ( zm_get_option('wechat_public_img') == '' ) { ?><?php } else { ?>
  118. <div class="wechat-public-img">
  119. <img src="<?php echo zm_get_option('wechat_public_img'); ?>" alt="wechat-public"/>
  120. </div>
  121. <?php } ?>
  122. </div>
  123. </li>
  124. <?php } ?>
  125. <?php if (zm_get_option('zm_like')) { ?>
  126. <li class="like">
  127. <?php if ( zm_get_option('like_name') == '' ) { ?>
  128. <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" title="<?php echo zm_get_option('like_title'); ?>" class="dingzan<?php if(isset($_COOKIE['zm_like_'.$post->ID])) echo ' done';?>">
  129. <?php if (zm_get_option('like_ico')) { ?>
  130. <i class="<?php echo zm_get_option('like_ico'); ?>"></i>
  131. <?php }else{ ?>
  132. <i class="be be-thumbs-up-o"></i>
  133. <?php } ?><?php _e( '点赞', 'begin' ); ?>
  134. <i class="count">
  135. <?php if( get_post_meta($post->ID,'zm_like',true) ){
  136. echo get_post_meta($post->ID,'zm_like',true);
  137. } else {
  138. echo '0';
  139. }?>
  140. </i>
  141. </a>
  142. <?php } else { ?>
  143. <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" title="<?php echo zm_get_option('like_title'); ?>" class="dingzan<?php if(isset($_COOKIE['zm_like_'.$post->ID])) echo ' done';?>">
  144. <?php if (zm_get_option('like_ico')) { ?>
  145. <i class="<?php echo zm_get_option('like_ico'); ?>"></i>
  146. <?php }else{ ?>
  147. <i class="be be-thumbs-up-o"></i>
  148. <?php } ?><?php echo zm_get_option('like_name'); ?>
  149. <i class="count">
  150. <?php if( get_post_meta($post->ID,'zm_like',true) ){
  151. echo get_post_meta($post->ID,'zm_like',true);
  152. } else {
  153. echo '0';
  154. }?>
  155. </i>
  156. </a>
  157. <?php } ?>
  158. </li>
  159. <?php } ?>
  160. <div class="clear"></div>
  161. </ul>
  162. </div>

代码说明

  • 代码基本框架没变,只是调整了原有的标签,替换成<ul></ul>标签布局
  • 每个功能由一个<li></li>标签组成,若想调整前台各个功能的前后位置,可直接调整各个<li></li>标签的前后位置
  • 修改后的代码已集成了template/share.phptemplate/weixin.php这两个文件,因此这两个文件可在修改后删除(也可不删除)

 

六、添加JS脚本

打开js/script.js文件,大约141行的位置,找到代码

  1. // 分享
  2. if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
  3. $('.share-sd').click(function() {
  4. $('#share').animate({
  5. opacity: 'toggle',
  6. top: '-80px'
  7. },
  8. 500).animate({
  9. top: '-60px'
  10. },
  11. 'fast');
  12. return false;
  13. });
  14. } else {
  15. $(".share-sd").mouseover(function() {
  16. $(this).children("#share").show();
  17. });
  18. $(".share-sd").mouseout(function() {
  19. $(this).children("#share").hide();
  20. });
  21. }

将其替换展开

  1. //正文底部社交按钮
  2. if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
  3. $(".social-main").find("i").hide();
  4. };
  5. //打赏
  6. if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
  7. $('.shang').click(function() {
  8. $('.shang-main').animate({
  9. opacity: 'toggle',
  10. top: '-250px',
  11. right:'-10%'
  12. },
  13. 500).animate({
  14. top: '-240px',
  15. right:'-10%'
  16. },
  17. 'fast');
  18. return false;
  19. });
  20. } else {
  21. $(".shang").mouseover(function() {
  22. $(this).children(".shang-main").show();
  23. });
  24. $(".shang").mouseout(function() {
  25. $(this).children(".shang-main").hide();
  26. });
  27. }
  28. // 分享
  29. if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
  30. $('.share').click(function() {
  31. $('#share').animate({
  32. opacity: 'toggle',
  33. top: '-70px',
  34. right:'-10%'
  35. },
  36. 500).animate({
  37. top: '-60px',
  38. right:'-10%'
  39. },
  40. 'fast');
  41. return false;
  42. });
  43. } else {
  44. $(".share").mouseover(function() {
  45. $(this).children("#share").show();
  46. });
  47. $(".share").mouseout(function() {
  48. $(this).children("#share").hide();
  49. });
  50. }
  51. // 我的微信
  52. if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
  53. $('.wechat').click(function() {
  54. $('.wechat-main').animate({
  55. opacity: 'toggle',
  56. top: '-230px'
  57. },
  58. 500).animate({
  59. top: '-220px'
  60. },
  61. 'fast');
  62. return false;
  63. });
  64. } else {
  65. $(".wechat").mouseover(function() {
  66. $(this).children(".wechat-main").show();
  67. });
  68. $(".wechat").mouseout(function() {
  69. $(this).children(".wechat-main").hide();
  70. });
  71. }
  72. // 我的公众号
  73. if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
  74. $('.wechat-public').click(function() {
  75. $('.wechat-public-main').animate({
  76. opacity: 'toggle',
  77. top: '-230px',
  78. right:'-10%'
  79. },
  80. 500).animate({
  81. top: '-220px',
  82. right:'-10%'
  83. },
  84. 'fast');
  85. return false;
  86. });
  87. } else {
  88. $(".wechat-public").mouseover(function() {
  89. $(this).children(".wechat-public-main").show();
  90. });
  91. $(".wechat-public").mouseout(function() {
  92. $(this).children(".wechat-public-main").hide();
  93. });
  94. }
  95. // 点赞
  96. $.fn.postLike = function() {
  97. if (jQuery(this).hasClass("done")) {
  98. alert('您已赞过啦!');
  99. return false;
  100. } else {
  101. $(this).addClass("done");
  102. var d = $(this).data("id"),
  103. c = $(this).data("action"),
  104. b = jQuery(this).children(".count");
  105. var a = {
  106. action: "zm_ding",
  107. um_id: d,
  108. um_action: c
  109. };
  110. $.post(wpl_ajax_url, a,
  111. function(e) {
  112. jQuery(b).html(e)
  113. });
  114. return false
  115. }
  116. };
  117. $(document).on("click", ".dingzan",
  118. function() {
  119. $(this).postLike()
  120. });

代码说明

  • 第一段代码主要用来在移动设备下隐藏各个按钮及模块中的<i></i>标签,不然五个功能都启用的话,一行放不下
  • 后面的代码主要用来对每个单独的功能对移动设备的判断和调用
  • 最后一段代码//点赞部分,可以选择不添加,因为原来的文件里已经有这段代码了,只是为了将这些功能集中在一起,所以我就把他剪切过来了。如果你在这里添加了,则需要删除原来文件中大约693行的位置//喜欢部分的代码

 

七、样式调整

打开style.css文件,大约3040行的位置,找到代码展开

  1. /** 微信 **/
  2. .s-weixin {
  3. width: 80%;
  4. margin: 10px auto 20px;
  5. }
  6. .s-weixin ul {
  7. float: left;
  8. width: 48%;
  9. text-align: center;
  10. padding: 10px 0 0 0;
  11. border: 1px dashed #ccc;
  12. }
  13. .s-weixin img {
  14. height: auto;
  15. width: auto;
  16. max-width: 70%;
  17. padding: 10px 0;
  18. }
  19. .weimg1 {
  20. margin: 0 2% 0 0;
  21. }
  22. .weimg2 {
  23. margin: 0 0 0 2%;
  24. }
  25. .s-weixin-one {
  26. width: 400px;
  27. margin: 10px auto 20px;
  28. }
  29. @media screen and (max-width: 480px) {
  30. .s-weixin-one {
  31. width: 100%;
  32. }
  33. }
  34. .weimg-one {
  35. padding: 5px;
  36. border: 1px dashed #ccc;
  37. }
  38. .weimg-one img {
  39. float: left;
  40. width: 30%;
  41. height: auto;
  42. margin: 0 10px 0 0;
  43. }
  44. .weimg-one .weixin-h, .weimg-one .weixin-h-w {
  45. float: left;
  46. width: 65%;
  47. }
  48. .weimg-one .weixin-h-w {
  49. color: #999;
  50. }

大约6765行的位置,找到代码展开

  1. /** 喜欢分享 **/
  2. #social {
  3. position: relative;
  4. margin: 50px auto;
  5. }
  6. .social-main {
  7. position: relative;
  8. margin: 0 auto;
  9. width: 243px;
  10. }
  11. .social-main span {
  12. float: left;
  13. }
  14. .social-main a {
  15. color: #999;
  16. line-height: 36px;
  17. border-radius: 2px;
  18. }
  19. .share-s a, .shang-s a {
  20. text-align: center;
  21. }
  22. .like a {
  23. float: left;
  24. padding-left: 15px;
  25. }
  26. .social-main a:hover {
  27. background: #f1f1f1;
  28. color: #444;
  29. transition: all 0.2s ease-in 0s;
  30. }
  31. .like a {
  32. background: #fff;
  33. width: 120px;
  34. display: block;
  35. border: 1px solid #ddd;
  36. }
  37. .share-s a {
  38. background: #fff;
  39. width: 120px;
  40. display: block;
  41. padding-left: 15px;
  42. border: 1px solid #ddd;
  43. }
  44. .social-main i {
  45. color: #999;
  46. margin: 0 5px 0 0;
  47. }
  48. /** 赏 **/
  49. .shang-empty {
  50. position: absolute;
  51. left: 90px;
  52. top: 0px;
  53. width: 62px;
  54. height: 38px;
  55. overflow: hidden;
  56. }
  57. .shang-empty span {
  58. background: #fff;
  59. width: 60px;
  60. height: 60px;
  61. display: block;
  62. margin: -10px 0 0 0;
  63. border-radius: 60px;
  64. border: 1px solid #ddd;
  65. }
  66. .shang-p a {
  67. position: absolute;
  68. background: #fff;
  69. left: 96px;
  70. top: -5px;
  71. width: 48px;
  72. height: 48px;
  73. font-size: 16px;
  74. line-height: 45px;
  75. display: block;
  76. border: 1px solid #ddd;
  77. border-radius: 40px;
  78. left: 101px\9;
  79. top: 0\9;
  80. width: 38px\9;
  81. height: 38px\9;
  82. line-height: 35px\9;
  83. }
  84. .shang-s {
  85. height: 37px;
  86. }
  87. #shang {
  88. width: 280px;
  89. display: block;
  90. }
  91. .shang-img {
  92. float: left;
  93. }
  94. .shang-img img {
  95. width: 140px;
  96. height: auto;
  97. }
  98. .shang-main h4 {
  99. font-size: 15px;
  100. font-size: 1.5rem;
  101. text-align: center;
  102. margin-bottom: 10px;
  103. }
  104. .shang-main i {
  105. color: #ff0000;
  106. }
  107. /** 分享 **/
  108. #share {
  109. position: absolute;
  110. top: -60px;
  111. rightright: -29px;
  112. width: 302px;
  113. height: 68px;
  114. display: none;
  115. z-index: 999;
  116. }
  117. #share a {
  118. float: left;
  119. background: #999;
  120. font-size: 20px !important;
  121. color: #fff;
  122. width: 40px;
  123. height: 40px;
  124. line-height: 40px;
  125. margin-left: 4px;
  126. padding-left: 0;
  127. text-align: center;
  128. border-radius: 3px;
  129. background: rgba(128, 128, 128, 0.9);
  130. }
  131. #share .be-addbox:hover {
  132. background: #7ab951 !important;
  133. }
  134. #share .be-qzone:hover {
  135. background: #ff7400 !important;
  136. }
  137. #share .be-stsina:hover {
  138. background: #ff0000 !important;
  139. }
  140. #share .be-tqq:hover {
  141. background: #46c0e6 !important;
  142. }
  143. #share .be-renren:hover {
  144. background: #3b68ac !important;
  145. }
  146. #share .be-weixin:hover {
  147. background: #006f1d !important;
  148. }
  149. .bd_weixin_popup {
  150. height: 250px !important;
  151. }
  152. .bd_weixin_popup_foot {
  153. display: none;
  154. }

将这两段代码注释删除掉,然后在这两段代码原来的位置(哪里都可以)插入下面的代码展开

  1. /** 正文末尾社交按钮 **/
  2. .social-main {
  3. position: relative;
  4. display: table;
  5. margin-left: auto;
  6. margin-right: auto;
  7. }
  8. .social-main li {
  9. display: inline-block;
  10. margin: 0 2px 50px 2px;
  11. }
  12. .social-main i {
  13. margin: 0 5px;
  14. font-size: 16px;
  15. }
  16. .social-main a {
  17. display: block;
  18. background: #fff;
  19. border: 1px solid #ddd;
  20. line-height: 36px;
  21. text-align: center;
  22. color: #444;
  23. border-radius: 4px;
  24. padding: 0 8px;
  25. }
  26. .social-main a:hover {
  27. background: #3690cf;
  28. color: #fff;
  29. transition: all 0.2s ease-in 0s;
  30. border: 1px solid #3690cf;
  31. }
  32. /** 打赏 **/
  33. .shang-main {
  34. position: absolute;
  35. top: -240px;
  36. width: 342px;
  37. display: none;
  38. padding: 10px 10px 0 10px;
  39. z-index: 999;
  40. background: #ddd;
  41. border-radius: 8px;
  42. border: 1px solid #ddd;
  43. }
  44. .shang-main h4 {
  45. font-size: 15px;
  46. font-size: 1.5rem;
  47. text-align: center;
  48. }
  49. .shang-main i {
  50. color: #ff0000;
  51. }
  52. .shang-img {
  53. float: left;
  54. padding: 10px;
  55. }
  56. .shang-img img {
  57. width: 140px;
  58. height: 140px;
  59. }
  60. /** 分享 **/
  61. #share {
  62. position: absolute;
  63. top: -60px;
  64. width: 300px;
  65. height: 70px;
  66. display: none;
  67. z-index: 999;
  68. }
  69. #share a {
  70. float: left;
  71. background: #999;
  72. font-size: 20px !important;
  73. color: #fff;
  74. width: 40px;
  75. height: 40px;
  76. line-height: 40px;
  77. padding: 0;
  78. text-align: center;
  79. border-radius: 3px;
  80. background: rgba(128, 128, 128, 0.9);
  81. border: 0;
  82. }
  83. #share .be-addbox:hover {
  84. background: #7ab951 !important;
  85. }
  86. #share .be-qzone:hover {
  87. background: #ff7400 !important;
  88. }
  89. #share .be-stsina:hover {
  90. background: #ff0000 !important;
  91. }
  92. #share .be-tqq:hover {
  93. background: #46c0e6 !important;
  94. }
  95. #share .be-renren:hover {
  96. background: #3b68ac !important;
  97. }
  98. #share .be-weixin:hover {
  99. background: #006f1d !important;
  100. }
  101. .bd_weixin_popup {
  102. height: 250px !important;
  103. }
  104. .bd_weixin_popup_foot {
  105. display: none;
  106. }
  107. /*我的微信和我的公众号*/
  108. .wechat-main {
  109. position: absolute;
  110. top: -220px;
  111. width: 180px;
  112. display: none;
  113. padding: 10px 10px 0 10px;
  114. z-index: 999;
  115. background: #ddd;
  116. border-radius: 8px;
  117. border: 1px solid #ddd;
  118. }
  119. .wechat-public-main {
  120. position: absolute;
  121. top: -220px;
  122. width: 180px;
  123. display: none;
  124. padding: 10px 10px 0 10px;
  125. z-index: 999;
  126. background: #ddd;
  127. border-radius: 8px;
  128. border: 1px solid #ddd;
  129. }
  130. .wechat-main h4, .wechat-public-main h4 {
  131. font-size: 15px;
  132. font-size: 1.5rem;
  133. text-align: center;
  134. }
  135. .wechat-img, .wechat-public-img {
  136. float: left;
  137. padding: 10px;
  138. }
  139. .wechat-img img, .wechat-public-img img {
  140. width: 140px;
  141. height: 140px;
  142. }

代码说明

  • PC端:鼠标移动到每个按钮上时,自动显示该按钮下的隐藏模块,鼠标移开按钮时隐藏该模块
  • 移动端:配合script.js文件,点击每个按钮时,显示该按钮下的隐藏模块,再次点击该按钮隐藏该模块
  • 由于每个功能可选择启用或不启用,所以为了控制整体效果,每个按钮中的隐藏模块没能更进一步的控制他们居中显示,但每个按钮启用或不启用,均在PC端和移动端做了测试,以保证他们均能完整显示在屏幕中

 

第三部分 前台内容模板文件修改

八、前台内容模板文件修改

这一部分主要针对调用social.php涉及到的几个文件做修改,具体如下:

在上面这些文件中找到代码

  1. <?php if (zm_get_option('single_weixin')) { ?>
  2. <?php get_template_part( 'template/weixin' ); ?>
  3. <?php } ?>
  4. <?php if (zm_get_option('zm_like')) { ?>
  5. <?php get_template_part( 'template/social' ); ?>
  6. <?php } else { ?>
  7. <div id="social"></div>
  8. <?php } ?>

将其替换

  1. <?php if (zm_get_option('social')) { ?>
  2. <?php get_template_part( 'template/social' ); ?>
  3. <?php } ?>

 

至此,所有的修改都已完成,最后进入后台--主题选项--辅助功能--正文底部社交按钮勾选启用选项,然后勾选你想启用的各个选项,并重新设置对应的设置项即可。

因为在最前面begin-options.php文件中,对id做了修改,所以原来对应的设置项中的设置会清除掉,重新设置一次即可。

 

第四部分 其他

  • 本来打算把收藏功能也整合进来的,但是由于这个功能涉及的文件代码比较复杂,目前还不会,所以这个功能单独放那里了,以后有能力再整合
  • 由于我的主题目前还没有熊掌号这个功能,因此也没有整合。若你有这个功能,也可以参照上面的方法将他们整合进来,并对样式做个简单的调整
  • 后续,有新的功能也可以参照这个方法整合,但要注意移动端的布局(由于移动端屏幕宽度限制,需要考虑同时启用所有选项时,部分按钮会不会浮动到下一行的问题)

 

以上就是本文的所有内容,感谢您的阅读!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: