主题正文社交功能整合

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

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

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

一、效果预览

 

二、整合原因

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

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

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

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

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

 

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

三、后台功能整合

打开【inc/options/begin-options.php】文件,找到代码展开

$options[] = array(
    'name' => '正文末尾微信二维码',
    'desc' => '显示',
    'id' => 'single_weixin',
    'class' => 'be_ico',
    'std' => '1',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '只显示一个微信二维码',
    'id' => 'single_weixin_one',
    'std' => '0',
    'class' => 'hidden',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '微信文字',
    'id' => 'weixin_h',
    'std' => '我的微信',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '微信说明文字',
    'id' => 'weixin_h_w',
    'std' => '这是我的微信扫一扫',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '上传微信二维码图片(<240px)',
    'id' => 'weixin_h_img',
    'class' => 'hidden',
    'std' => "$blogpath/random/1.jpg",
    'type' => 'upload'
);

$options[] = array(
    'name' => '',
    'desc' => '微信公众号文字',
    'id' => 'weixin_g',
    'std' => '我的微信公众号',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '微信公众号说明文字',
    'id' => 'weixin_g_w',
    'std' => '我的微信公众号扫一扫',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '上传微信公众号二维码图片(<240px)',
    'id' => 'weixin_g_img',
    'class' => 'hidden',
    'std' => "$blogpath/random/2.jpg",
    'type' => 'upload'
);

$options[] = array(
    'id' => 'clear'
);

$options[] = array(
    'name' => '社交选项',
    'class' => 'be_ico'
);

$options[] = array(
    'name' => '',
    'desc' => '启用正文底部点赞分享按钮',
    'id' => 'zm_like',
    'std' => '1',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '启用百度分享',
    'id' => 'share',
    'std' => '1',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '本地调用百度分享',
    'id' => 'share_l',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'id' => 'clear'
);

$options[] = array(
    'name' => '打赏(赞助)按钮设置',
    'desc' => '自定义按钮文字,留空则不显示弹窗',
    'id' => 'alipay_name',
    'class' => 'be_ico',
    'std' => '赏',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义提示文字',
    'id' => 'alipay_t',
    'std' => '赞助本站',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义弹窗标题文字,留空则不显示',
    'id' => 'alipay_h',
    'std' => '您可以选择一种方式赞助本站',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '上传支付宝二维码图片(<240px)',
    'id' => 'qr_a',
    "std" => "",
    'type' => 'upload'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义支付宝二维码图片文字说明,留空则不显示',
    'id' => 'alipay_z',
    'std' => '支付宝扫一扫赞助',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '上传微信钱包二维码图片(<250px)',
    'id' => 'qr_b',
    "std" => "",
    'type' => 'upload'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义微信钱包二维码图片文字说明,留空则不显示',
    'id' => 'alipay_w',
    'std' => '微信钱包扫描赞助',
    'type' => 'text'
);

$options[] = array(
    'id' => 'clear'
);

将其修改成展开

$options[] = array(
    'name' => '正文底部社交按钮',
    'desc' => '启用',
    'id' => 'social',
    'class' => 'be_ico',
    'std' => '1',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '启用打赏',
    'id' => 'shang',
    'std' => '1',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义打赏图标,留空则不显示',
    'id' => 'shang_ico',
    'class' => 'hidden',
    'std' => '',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义打赏按钮文字,留空则显示“打赏”',
    'id' => 'shang_name',
    'class' => 'hidden',
    'std' => '打赏',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义打赏提示文字',
    'id' => 'shang_title',
    'class' => 'hidden',
    'std' => '赞助本站',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义打赏弹窗标题文字,留空则不显示',
    'id' => 'shang_title_header',
    'class' => 'hidden',
    'std' => '您可以选择一种方式赞助本站',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '上传打赏支付宝二维码图片(建议140px x 140px)',
    'id' => 'alipay_qr',
    'class' => 'hidden',
    "std" => "",
    'type' => 'upload'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义打赏支付宝二维码图片文字说明,留空则不显示',
    'id' => 'alipay_qr_str',
    'class' => 'hidden',
    'std' => '支付宝扫一扫赞助',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '上传打赏微信钱包二维码图片(建议140px x 140px)',
    'id' => 'wechat_qr',
    'class' => 'hidden',
    "std" => "",
    'type' => 'upload'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义打赏微信钱包二维码图片文字说明,留空则不显示',
    'id' => 'wechat_qr_str',
    'class' => 'hidden',
    'std' => '微信钱包扫描赞助',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '启用百度分享',
    'id' => 'share',
    'std' => '1',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义百度分享图标,留空则使用默认图标',
    'id' => 'share_ico',
    'class' => 'hidden',
    'std' => '',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义百度分享按钮文字,留空则显示“分享”',
    'id' => 'share_name',
    'std' => '分享',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义百度分享提示文字,留空则不显示',
    'id' => 'share_title',
    'std' => '分享文章',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '本地调用百度分享',
    'id' => 'share_l',
    'class' => 'hidden',
    'std' => '0',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '启用微信',
    'id' => 'wechat',
    'class' => 'be_ico',
    'std' => '1',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义微信图标,留空则不显示',
    'id' => 'wechat_ico',
    'class' => 'hidden',
    'std' => '',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义微信按钮文字,留空则显示“我的微信”',
    'id' => 'wechat_name',
    'std' => '我的微信',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义微信说明文字,留空则不显示',
    'id' => 'wechat_title',
    'std' => '这是我的微信扫一扫',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '上传微信二维码图片(建议140px x 140px)',
    'id' => 'wechat_img',
    'class' => 'hidden',
    'std' => "$blogpath/random/1.jpg",
    'type' => 'upload'
);

$options[] = array(
    'name' => '',
    'desc' => '启用公众号',
    'id' => 'wechat_public',
    'class' => 'be_ico',
    'std' => '1',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义公众号图标,留空则不显示',
    'id' => 'wechat_public_ico',
    'class' => 'hidden',
    'std' => '',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义公众号按钮文字,留空则显示“我的公众号”',
    'id' => 'wechat_public_name',
    'std' => '我的公众号',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义公众号说明文字,留空则不显示',
    'id' => 'wechat_public_title',
    'std' => '这是我的公众号,欢迎关注',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '上传公众号二维码图片(建议140px x 140px)',
    'id' => 'wechat_public_img',
    'class' => 'hidden',
    'std' => "$blogpath/random/1.jpg",
    'type' => 'upload'
);

$options[] = array(
    'name' => '',
    'desc' => '启用点赞',
    'id' => 'zm_like',
    'std' => '1',
    'type' => 'checkbox'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义点赞图标,留空则使用默认图标',
    'id' => 'like_ico',
    'class' => 'hidden',
    'std' => '',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义点赞按钮文字,留空则显示“点赞”',
    'id' => 'like_name',
    'std' => '点赞',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'name' => '',
    'desc' => '自定义点赞说明文字,留空则不显示',
    'id' => 'like_title',
    'std' => '点赞',
    'class' => 'hidden',
    'type' => 'text'
);

$options[] = array(
    'id' => 'clear'
);

 

四、功能控制

打开【inc/options/includes/themes-options.php】文件,找到代码

jQuery('#single_weixin').click(function() {
    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);
});

if (jQuery('#single_weixin:checked').val() !== undefined) {
    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();
}

将其修改为

jQuery('#shang').click(function() {
    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);
});

if (jQuery('#shang:checked').val() !== undefined) {
    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();
}

jQuery('#share').click(function() {
    jQuery('#section-share_ico, #section-share_title, #section-share_name, #section-share_l').fadeToggle(400);
});

if (jQuery('#share:checked').val() !== undefined) {
    jQuery('#section-share_ico, #section-share_title, #section-share_name, #section-share_l').show();
}

jQuery('#wechat').click(function() {
    jQuery('#section-wechat_ico, #section-wechat_name, #section-wechat_title, #section-wechat_img').fadeToggle(400);
});

if (jQuery('#wechat:checked').val() !== undefined) {
    jQuery('#section-wechat_ico, #section-wechat_name, #section-wechat_title, #section-wechat_img').show();
}

jQuery('#wechat_public').click(function() {
    jQuery('#section-wechat_public_ico, #section-wechat_public_name, #section-wechat_public_title, #section-wechat_public_img').fadeToggle(400);
});

if (jQuery('#wechat_public:checked').val() !== undefined) {
    jQuery('#section-wechat_public_ico, #section-wechat_public_name, #section-wechat_public_title, #section-wechat_public_img').show();
}

jQuery('#zm_like').click(function() {
    jQuery('#section-like_ico, #section-like_name, #section-like_title').fadeToggle(400);
});

if (jQuery('#zm_like:checked').val() !== undefined) {
    jQuery('#section-like_ico, #section-like_name, #section-like_title').show();
}

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

主题正文社交功能整合

功能说明

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

 

五、修改社交文件

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

<div class="clear"></div>
<div id="social">
    <ul class="social-main">
        <?php if (zm_get_option('shang')) { ?>
            <li class="shang">
                <?php if ( zm_get_option('shang_name') == '' ) { ?>
                    <a href="javascript:void(0)" title="<?php echo zm_get_option('shang_title'); ?>">
                        <?php if (zm_get_option('shang_ico')) { ?>
                            <i class="<?php echo zm_get_option('shang_ico'); ?>"></i>
                        <?php } ?><?php _e( '打赏', 'begin' ); ?>
                    </a>
                <?php } else { ?>
                    <a href="javascript:void(0)" title="<?php echo zm_get_option('shang_title'); ?>">
                        <?php if (zm_get_option('shang_ico')) { ?>
                            <i class="<?php echo zm_get_option('shang_ico'); ?>"></i>
                        <?php } ?><?php echo zm_get_option('shang_name'); ?>
                    </a>
                <?php } ?>

                <div class="shang-main">
                    <?php if ( zm_get_option('shang_title_header') == '' ) { ?><?php } else { ?>
                        <h4>
                            <i class="be be-favorite" aria-hidden="true"></i>
                            <?php echo zm_get_option('shang_title_header'); ?>
                        </h4>
                    <?php } ?>
                    <?php if ( zm_get_option('alipay_qr') == '' ) { ?><?php } else { ?>
                        <div class="shang-img">
                            <img src="<?php echo zm_get_option('alipay_qr'); ?>" alt="alipay"/>
                            <?php if ( zm_get_option('alipay_qr_str') == '' ) { ?><?php } else { ?>
                                <h4><?php echo zm_get_option('alipay_qr_str'); ?></h4>
                            <?php } ?>
                        </div>
                    <?php } ?>
                    <?php if ( zm_get_option('wechat_qr') == '' ) { ?><?php } else { ?>
                        <div class="shang-img">
                            <img src="<?php echo zm_get_option('wechat_qr'); ?>" alt="weixin"/>
                            <?php if ( zm_get_option('wechat_qr_str') == '' ) { ?><?php } else { ?>
                                <h4><?php echo zm_get_option('wechat_qr_str'); ?></h4>
                            <?php } ?>
                        </div>
                    <?php } ?>
                </div>
            </li>
        <?php } ?>

        <?php if (zm_get_option('share')) { ?>
            <li class="share">
                <?php if ( zm_get_option('share_name') == '' ) { ?>
                    <a href="javascript:void(0)" title="<?php echo zm_get_option('share_title'); ?>">
                        <?php if (zm_get_option('share_ico')) { ?>
                            <i class="<?php echo zm_get_option('share_ico'); ?>"></i>
                        <?php } ?><?php _e( '分享', 'begin' ); ?>
                    </a>
                <?php } else { ?>
                    <a href="javascript:void(0)" title="<?php echo zm_get_option('share_title'); ?>">
                        <?php if (zm_get_option('share_ico')) { ?>
                            <i class="<?php echo zm_get_option('share_ico'); ?>"></i>
                        <?php } ?><?php echo zm_get_option('share_name'); ?>
                    </a>
                <?php } ?>

                <div id="share">
                    <div class="bdsharebuttonbox">
                        <a title="更多" class="bds_more be be-addbox" data-cmd="more" onclick="return false;" href="#"></a>
                        <a title="分享到QQ空间" class="be be-qzone" data-cmd="qzone" onclick="return false;" href="#"></a>
                        <a title="分享到新浪微博" class="be be-stsina" data-cmd="tsina" onclick="return false;" href="#"></a>
                        <a title="分享到腾讯微博" class="be be-tqq" data-cmd="tqq" onclick="return false;" href="#"></a>
                        <a title="分享到人人网" class="be be-renren" data-cmd="renren" onclick="return false;" href="#"></a>
                        <a title="分享到微信" class="be be-weixin" data-cmd="weixin" onclick="return false;" href="#"></a>
                    </div>
                </div>
            </li>
        <?php } ?>

        <?php if (zm_get_option('wechat')) { ?>
            <li class="wechat">
                <?php if ( zm_get_option('wechat_name') == '' ) { ?>
                    <a href="javascript:void(0)" title="<?php echo zm_get_option('wechat_title'); ?>">
                        <?php if (zm_get_option('wechat_ico')) { ?>
                            <i class="<?php echo zm_get_option('wechat_ico'); ?>"></i>
                        <?php } ?><?php _e( '我的微信', 'begin' ); ?>
                    </a>
                <?php } else { ?>
                    <a href="javascript:void(0)" title="<?php echo zm_get_option('wechat_title'); ?>">
                        <?php if (zm_get_option('wechat_ico')) { ?>
                            <i class="<?php echo zm_get_option('wechat_ico'); ?>"></i>
                        <?php } ?><?php echo zm_get_option('wechat_name'); ?>
                    </a>
                <?php } ?>

                <div class="wechat-main">
                    <?php if ( zm_get_option('wechat_title') == '' ) { ?><?php } else { ?>
                        <h4><?php echo zm_get_option('wechat_title'); ?></h4>
                    <?php } ?>
                    <?php if ( zm_get_option('wechat_img') == '' ) { ?><?php } else { ?>
                        <div class="wechat-img">
                            <img src="<?php echo zm_get_option('wechat_img'); ?>" alt="wechat"/>
                        </div>
                    <?php } ?>
                </div>
            </li>
        <?php } ?>

        <?php if (zm_get_option('wechat_public')) { ?>
            <li class="wechat-public">
                <?php if ( zm_get_option('wechat_public_name') == '' ) { ?>
                    <a href="javascript:void(0)" title="<?php echo zm_get_option('wechat_public_title'); ?>">
                        <?php if (zm_get_option('wechat_public_ico')) { ?>
                            <i class="<?php echo zm_get_option('wechat_public_ico'); ?>"></i>
                        <?php } ?><?php _e( '我的公众号', 'begin' ); ?>
                    </a>
                <?php } else { ?>
                    <a href="javascript:void(0)" title="<?php echo zm_get_option('wechat_public_title'); ?>">
                        <?php if (zm_get_option('wechat_public_ico')) { ?>
                            <i class="<?php echo zm_get_option('wechat_public_ico'); ?>"></i>
                        <?php } ?><?php echo zm_get_option('wechat_public_name'); ?>
                    </a>
                <?php } ?>

                <div class="wechat-public-main">
                    <?php if ( zm_get_option('wechat_public_title') == '' ) { ?><?php } else { ?>
                        <h4><?php echo zm_get_option('wechat_public_title'); ?></h4>
                    <?php } ?>
                    <?php if ( zm_get_option('wechat_public_img') == '' ) { ?><?php } else { ?>
                        <div class="wechat-public-img">
                            <img src="<?php echo zm_get_option('wechat_public_img'); ?>" alt="wechat-public"/>
                        </div>
                    <?php } ?>
                </div>
            </li>
        <?php } ?>

        <?php if (zm_get_option('zm_like')) { ?>
            <li class="like">
                <?php if ( zm_get_option('like_name') == '' ) { ?>
                    <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';?>">
                        <?php if (zm_get_option('like_ico')) { ?>
                            <i class="<?php echo zm_get_option('like_ico'); ?>"></i>
                        <?php }else{ ?>
                            <i class="be be-thumbs-up-o"></i>
                        <?php } ?><?php _e( '点赞', 'begin' ); ?>
                        <i class="count">
                            <?php if( get_post_meta($post->ID,'zm_like',true) ){
                                echo get_post_meta($post->ID,'zm_like',true);
                            } else {
                                echo '0';
                            }?>
                        </i>
                    </a>
                <?php } else { ?>
                    <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';?>">
                        <?php if (zm_get_option('like_ico')) { ?>
                            <i class="<?php echo zm_get_option('like_ico'); ?>"></i>
                        <?php }else{ ?>
                            <i class="be be-thumbs-up-o"></i>
                        <?php } ?><?php echo zm_get_option('like_name'); ?>
                        <i class="count">
                            <?php if( get_post_meta($post->ID,'zm_like',true) ){
                                echo get_post_meta($post->ID,'zm_like',true);
                            } else {
                                echo '0';
                            }?>
                        </i>
                    </a>
                <?php } ?>
            </li>
        <?php } ?>
        <div class="clear"></div>
    </ul>
</div>

修改后的代码已集成了【template/share.php】和【template/weixin.php】这两个文件,因此这两个文件可在修改后删除(也可不删除)。

 

六、添加JS脚本

打开【js/script.js】文件,找到代码

// 分享
if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
    $('.share-sd').click(function() {
        $('#share').animate({
            opacity: 'toggle',
            top: '-80px'
        },
        500).animate({
        top: '-60px'
        },
        'fast');
    return false;
    });
} else {
    $(".share-sd").mouseover(function() {
        $(this).children("#share").show();
    });
    $(".share-sd").mouseout(function() {
        $(this).children("#share").hide();
    });
}

将其替换成展开

//正文底部社交按钮
if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
    $(".social-main").find("i").hide();
};

//打赏
if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
    $('.shang').click(function() {
        $('.shang-main').animate({
            opacity: 'toggle',
            top: '-250px',
            right:'-10%'
        },
        500).animate({
            top: '-240px',
            right:'-10%'
        },
        'fast');
        return false;
    });
} else {
    $(".shang").mouseover(function() {
        $(this).children(".shang-main").show();
    });
    $(".shang").mouseout(function() {
        $(this).children(".shang-main").hide();
    });
}

// 分享
if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
    $('.share').click(function() {
        $('#share').animate({
            opacity: 'toggle',
            top: '-70px',
            right:'-10%'
        },
        500).animate({
            top: '-60px',
            right:'-10%'
        },
        'fast');
        return false;
    });
} else {
    $(".share").mouseover(function() {
        $(this).children("#share").show();
    });
    $(".share").mouseout(function() {
        $(this).children("#share").hide();
    });
}

// 我的微信
if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
    $('.wechat').click(function() {
        $('.wechat-main').animate({
            opacity: 'toggle',
            top: '-230px'
        },
        500).animate({
            top: '-220px'
        },
        'fast');
        return false;
    });
} else {
    $(".wechat").mouseover(function() {
        $(this).children(".wechat-main").show();
    });
    $(".wechat").mouseout(function() {
        $(this).children(".wechat-main").hide();
    });
}

// 我的公众号
if(/iphone|ipod|ipad|ipad|mobile/i.test(navigator.userAgent.toLowerCase())){
    $('.wechat-public').click(function() {
        $('.wechat-public-main').animate({
            opacity: 'toggle',
            top: '-230px',
            right:'-10%'
        },
        500).animate({
            top: '-220px',
            right:'-10%'
        },
        'fast');
        return false;
    });
} else {
    $(".wechat-public").mouseover(function() {
        $(this).children(".wechat-public-main").show();
    });
    $(".wechat-public").mouseout(function() {
        $(this).children(".wechat-public-main").hide();
    });
}

// 点赞
$.fn.postLike = function() {
    if (jQuery(this).hasClass("done")) {
        alert('您已赞过啦!');
        return false;
    } else {
        $(this).addClass("done");
        var d = $(this).data("id"),
            c = $(this).data("action"),
            b = jQuery(this).children(".count");
        var a = {
            action: "zm_ding",
            um_id: d,
            um_action: c
    };
    $.post(wpl_ajax_url, a,
    function(e) {
        jQuery(b).html(e)
    });
    return false
    }
    };
    $(document).on("click", ".dingzan",
    function() {
        $(this).postLike()
});

 

七、样式调整

打开【style.css】文件,找到代码展开

/** 微信 **/
.s-weixin {
    width: 80%;
    margin: 10px auto 20px;
}

.s-weixin ul {
    float: left;
    width: 48%;
    text-align: center;
    padding: 10px 0 0 0;
    border: 1px dashed #ccc;
}

.s-weixin img {
    height: auto;
    width: auto;
    max-width: 70%;
    padding: 10px 0;
}

.weimg1 {
    margin: 0 2% 0 0;
}

.weimg2 {
    margin: 0 0 0 2%;
}

.s-weixin-one {
    width: 400px;
    margin: 10px auto 20px;
}

@media screen and (max-width: 480px) {
    .s-weixin-one {
        width: 100%;
    }
}

.weimg-one {
    padding: 5px;
    border: 1px dashed #ccc;
}

.weimg-one img {
    float: left;
    width: 30%;
    height: auto;
    margin: 0 10px 0 0;
}

.weimg-one .weixin-h, .weimg-one .weixin-h-w {
    float: left;
    width: 65%;
}

.weimg-one .weixin-h-w {
    color: #999;
}

展开

/** 喜欢分享 **/
#social {
    position: relative;
    margin: 50px auto;
}

.social-main {
    position: relative;
    margin: 0 auto;
    width: 243px;
}

.social-main span {
    float: left;
}

.social-main a {
    color: #999;
    line-height: 36px;
    border-radius: 2px;
}

.share-s a, .shang-s a {
    text-align: center;
}

.like a {
    float: left;
    padding-left: 15px;
}

.social-main a:hover {
    background: #f1f1f1;
    color: #444;
    transition: all 0.2s ease-in 0s;
}

.like a {
    background: #fff;
    width: 120px;
    display: block;
    border: 1px solid #ddd;
}

.share-s a {
    background: #fff;
    width: 120px;
    display: block;
    padding-left: 15px;
    border: 1px solid #ddd;
}

.social-main i {
    color: #999;
    margin: 0 5px 0 0;
}

/** 赏 **/
.shang-empty {
    position: absolute;
    left: 90px;
    top: 0px;
    width: 62px;
    height: 38px;
    overflow: hidden;
}

.shang-empty span {
    background: #fff;
    width: 60px;
    height: 60px;
    display: block;
    margin: -10px 0 0 0;
    border-radius: 60px;
    border: 1px solid #ddd;
}

.shang-p a {
    position: absolute;
    background: #fff;
    left: 96px;
    top: -5px;
    width: 48px;
    height: 48px;
    font-size: 16px;
    line-height: 45px;
    display: block;
    border: 1px solid #ddd;
    border-radius: 40px;
    left: 101px\9;
    top: 0\9;
    width: 38px\9;
    height: 38px\9;
    line-height: 35px\9;
}

.shang-s {
    height: 37px;
}

#shang {
    width: 280px;
    display: block;
}

.shang-img {
    float: left;
}

.shang-img img {
    width: 140px;
    height: auto;
}

.shang-main h4 {
    font-size: 15px;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 10px;
}

.shang-main i {
    color: #ff0000;
}

/** 分享 **/
#share {
    position: absolute;
    top: -60px;
    rightright: -29px;
    width: 302px;
    height: 68px;
    display: none;
    z-index: 999;
}

#share a {
    float: left;
    background: #999;
    font-size: 20px !important;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-left: 4px;
    padding-left: 0;
    text-align: center;
    border-radius: 3px;
    background: rgba(128, 128, 128, 0.9);
}

#share .be-addbox:hover {
    background: #7ab951 !important;
}

#share .be-qzone:hover {
    background: #ff7400 !important;
}

#share .be-stsina:hover {
    background: #ff0000 !important;
}

#share .be-tqq:hover {
    background: #46c0e6 !important;
}

#share .be-renren:hover {
    background: #3b68ac !important;
}

#share .be-weixin:hover {
    background: #006f1d !important;
}

.bd_weixin_popup {
    height: 250px !important;
}

.bd_weixin_popup_foot {
    display: none;
}

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

/** 正文末尾社交按钮 **/
.social-main {
    position: relative;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.social-main li {
    display: inline-block;
    margin: 0 2px 50px 2px;
}

.social-main i {
    margin: 0 5px;
    font-size: 16px;
}

.social-main a {
    display: block;
    background: #fff;
    border: 1px solid #ddd;
    line-height: 36px;
    text-align: center;
    color: #444;
    border-radius: 4px;
    padding: 0 8px;
}

.social-main a:hover {
    background: #3690cf;
    color: #fff;
    transition: all 0.2s ease-in 0s;
    border: 1px solid #3690cf;
}

/** 打赏 **/
.shang-main {
    position: absolute;
    top: -240px;
    width: 342px;
    display: none;
    padding: 10px 10px 0 10px;
    z-index: 999;
    background: #ddd;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.shang-main h4 {
    font-size: 15px;
    font-size: 1.5rem;
    text-align: center;
}

.shang-main i {
    color: #ff0000;
}

.shang-img {
    float: left;
    padding: 10px;
}

.shang-img img {
    width: 140px;
    height: 140px;
}

/** 分享 **/
#share {
    position: absolute;
    top: -60px;
    width: 300px;
    height: 70px;
    display: none;
    z-index: 999;
}

#share a {
    float: left;
    background: #999;
    font-size: 20px !important;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
    border-radius: 3px;
    background: rgba(128, 128, 128, 0.9);
    border: 0;
}

#share .be-addbox:hover {
    background: #7ab951 !important;
}

#share .be-qzone:hover {
    background: #ff7400 !important;
}

#share .be-stsina:hover {
    background: #ff0000 !important;
}

#share .be-tqq:hover {
    background: #46c0e6 !important;
}

#share .be-renren:hover {
    background: #3b68ac !important;
}

#share .be-weixin:hover {
    background: #006f1d !important;
}

.bd_weixin_popup {
    height: 250px !important;
}

.bd_weixin_popup_foot {
    display: none;
}

/*我的微信和我的公众号*/
.wechat-main {
    position: absolute;
    top: -220px;
    width: 180px;
    display: none;
    padding: 10px 10px 0 10px;
    z-index: 999;
    background: #ddd;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.wechat-public-main {
    position: absolute;
    top: -220px;
    width: 180px;
    display: none;
    padding: 10px 10px 0 10px;
    z-index: 999;
    background: #ddd;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.wechat-main h4, .wechat-public-main h4 {
    font-size: 15px;
    font-size: 1.5rem;
    text-align: center;
}

.wechat-img, .wechat-public-img {
    float: left;
    padding: 10px;
}

.wechat-img img, .wechat-public-img img {
    width: 140px;
    height: 140px;
}

 

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

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

分别打开以下文件:

  • 【single-sites.php】
  • 【template/content.php】
  • 【template/content-aside.php】
  • 【template/content-image.php】
  • 【template/content-link.php】
  • 【template/content-quote.php】
  • 【template/content-video.php】
  • 【template/content-status.php】(如果你有这个文件的话

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

<?php if (zm_get_option('single_weixin')) { ?>
    <?php get_template_part( 'template/weixin' ); ?>
<?php } ?>

<?php if (zm_get_option('zm_like')) { ?>
    <?php get_template_part( 'template/social' ); ?>
<?php } else { ?>
    <div id="social"></div>
<?php } ?>

将其替换成

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

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

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

 

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

若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!

发表评论

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