Puock主题-开源多风格自适应

Puock主题是憧憬点滴记忆开发的一款免费开源主题。主题大气精美，笔者亲测好用，遂推荐给大家。

演示站点：https://licoy.cn

本站也是：https://jishusongshu.com

Puock主题-开源多风格自适应

主要功能

Puock主题-开源多风格自适应

21个主要功能

Puock主题-开源多风格自适应

小工具与模板

简明的设置界面

Puock主题-开源多风格自适应

底部两栏设置方式

缺点：兼容性有待提高，有部分WordPress插件的功能无法使用，比如：Wechat Social登录弹窗无法显示，pure-highlight代码高亮插件、Hermit X音乐插件、Smartideo视频插件、Clipboard文字复制插件无法使用。如果你依赖的插件比较少，且有耐心找到冲突插件的替代方案，这款主题还是非常合适的。真的勇士永远不怕折腾（因为笔者的插件实在是多，这个主题我用了八天就溜了，然后又溜回来了）

Puock主题-开源多风格自适应

右下按钮

<div id="share">		
	<a class="fgzh" onclick="showgzh()" title="公众号"></a>	
	<?php if((!is_home()) && (!is_user_logged_in())) { ?>
		<img id="qr_img" src="https://www.jishusongshu.com/images/qr_img.png" style="display:block">
		<?php }else{ ?>
		<img id="qr_img" src="https://www.jishusongshu.com/images/qr_img.png" >	
	<?php } ?>
	<a href="https://jq.qq.com/?_wv=1027&k=5KYuhQa" target="_blank" class="tencent" title="加QQ群"></a>
	<a class="mnpg" onclick="showpg()" title="小程序"></a>	
	<img id="pg_img" src="https://www.jishusongshu.com/images/pg_img.png" >
</div>

<script type="text/javascript">
function showpg(){ 
  if(document.getElementById("pg_img").style.display=="block"){ 
    document.getElementById("pg_img").style.display="none"; 
  }
  else{
    document.getElementById("pg_img").style.display="block"; 
  } 
  if(document.getElementById("qr_img").style.display=="block"){ 
    document.getElementById("qr_img").style.display="none"; 
  }
}
function showgzh(){ 
  if(document.getElementById("qr_img").style.display=="block"){ 
    document.getElementById("qr_img").style.display="none"; 
  }
  else{
    document.getElementById("qr_img").style.display="block"; 
  } 
  if(document.getElementById("pg_img").style.display=="block"){ 
    document.getElementById("pg_img").style.display="none"; 
  }
}
</script>

#return-top-bottom{bottom:160px}
#share{position:fixed;bottom:50px;right:12px;width:30px;zoom:1;z-index:99;}
#share a{background-image:url(https://www.jishusongshu.com/images/share-bar.png);background-repeat:no-repeat;display:block;width:32px;height:32px;overflow:hidden;text-indent:-999px;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
#share .mnpg{background-position:0 0;position:absolute;bottom:0px;border-radius:3px;cursor: pointer;box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);}
#share a.mnpg:hover{background-position:-32px 0px;border-radius:3px;}
#share .tencent{background-position:0px -32px;position:absolute;bottom:74px;border-radius:3px;cursor: pointer;box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);}
#share a.tencent:hover{background-position:-32px -32px;}
#share .fgzh{background-position:0px -64px;position:absolute;bottom:37px;border-radius:3px;cursor: pointer;box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);}
#share a.fgzh:hover{background-position:-32px -64px;}  
#qr_img{position:absolute;bottom:50px;left:-183px;display:none;max-width: 300px;z-index:9999}
#pg_img{position:absolute;bottom:18px;left:-183px;display:none;max-width: 300px;z-index:9997}

首页展示友情链接，其他页面展示信息

Puock主题-开源多风格自适应

修改footer.php的部分代码

<?php if((is_home())&&(!wp_is_mobile())) { ?>
            <div class="col-md-6">
                <div><span class="t-md pb-2 d-inline-block border-bottom border-primary"><i class="czs-link-l"></i> <?php _e('友情链接', PUOCK) ?></span></div>
                <div class="more-link mt20 t-md">
                    <?php
                    $link_cid = pk_get_option('index_link_id','');
                    if(!empty($link_cid)){
                        preg_match_all('/<a .*?>.*?<\/a>/', wp_list_bookmarks(array(
                            'category'=>$link_cid,
                            'category_before'=>'',
                            'title_li'=>'',
                            'show_images'=>0,
                            'echo'=>0                            
                        )), $links);
                        foreach ($links[0] as $link){
                            echo $link;
                        }
                    }
                    $link_page_id = pk_get_option('link_page','');
                    if(!empty($link_page_id)){
                        echo '<a target="_blank" href="'.get_page_link($link_page_id).'">'.__('更多链接', PUOCK).'</a>';
                    }
                    ?>                    
                </div>
            </div> 
            <?php }else{ ?>
            <div class="col-md-6">
                <div><span class="t-md pb-2 d-inline-block border-bottom border-primary"><i class="czs-link-l"></i> <?php _e('关注我们', PUOCK) ?></span></div>
                <div class="more-link mt20 t-md">                    
                    <div class="footer-col footer-col-sns">
                    <div class="footer-sns">     
                        <a href="https://github.com/songshuxiao" target="_blank" rel="nofollow">
                            <i class="fa fa-github"></i>
                        </a>              
                        <a href="https://jq.qq.com/?_wv=1027&k=5KYuhQa" target="_blank" rel="nofollow">
                            <i class="fa fa-qq"></i>
                        </a>
                        <a class="sns-wx" href="javascript:;">
                            <i class="fa fa-wechat"></i>
                            <span style="background-image:url(https://www.jishusongshu.com/img/jsssgzh.jpg);"></span>
                        </a>
                        <a href="https://weibo.com/yangchunniaoyu" target="_blank" rel="nofollow">
                        <i class="fa fa-weibo"></i>
                        </a>
                        <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=jishusongshu@qq.com" target="_blank" rel="nofollow">
                            <i class="fa fa-envelope"></i>
                        </a>
                    </div>
                    </div>
                </div>
            </div> 
<?php } ?>

注意如果你想展示的友链图片显示，请把'show_images'=>0,删除

.footer-sns .fa {
	display:inline-block;
	position:relative;
	width:40px;
	height:40px;
	font-size:20px;
	line-height:40px;
	border-radius:50%;
	text-align:center;
	background:rgba(255,255,255,.1);
	color:hsl(0deg 0% 100%);
	z-index:0;
}
.sns-wx {
	position:relative;
	overflow:hidden;
}
.sns-wx span,.sns-wx:hover span {
	-webkit-transition:all .2s ease-out .1s;
	-o-transition:all .2s ease-out .1s;
	transition:all .2s ease-out .1s;
}
.sns-wx span {
	position:absolute;
	z-index:1;
	top:-170px;
	left:0;
	margin-left:-57px;
	width:150px;
	height:150px;
	background-color:#fff;
	background-size:95% auto;
	background-position:50%;
	background-repeat:no-repeat;
	-webkit-box-shadow:0 0 5px 1px rgba(0,0,0,.3);
	box-shadow:0 0 5px 1px rgba(0,0,0,.3);
	opacity:0;
	filter:alpha(opacify=0);
}
.sns-wx span:after {
	position:absolute;
	bottom:-16px;
	left:50%;
	width:0;
	height:0;
	margin-left:-8px;
	line-height:0;
	border:8px solid transparent;
	border-top-color:#fff;
	content:"";
}
.sns-wx:hover {
	overflow:visible;
}
.sns-wx:hover span {
	top:-165px;
	opacity:1;
	filter:alpha(opacify=100);
}
.footer-col {
	display:inline-block;
	font-size:0;
	vertical-align:middle;
	color:#ffffff;
}
.footer-col hover {
	color:#6199F9;
}
.footer-sns {
	display:inline-block;
	margin-top:-10px;
	font-size:0;
}
.footer-sns a,.sec-panel-head small {
	display:inline-block;
	vertical-align:top;
}
.footer-sns a {
	margin:7px 0 7px 10px;
}
.footer-sns .fa {
	display:inline-block;
	position:relative;
	width:40px;
	height:40px;
	font-size:20px;
	line-height:40px;
	border-radius:50%;
	text-align:center;
	background:rgba(255,255,255,.1);
	color:hsl(0deg 0% 100%);
	z-index:0;
}
.footer-sns .fa svg,.footer-sns .fa:before {
	position:relative;
	z-index:1;
}
.footer-sns .fa:after {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#3380ff;
	border-radius:50%;
	content:"";
	opacity:0;
	filter:alpha(opacify=0);
	-webkit-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
}
.footer-sns .fa.material-icons:after {
	z-index:-1;
}
.footer-sns .fa:hover {
	color:#fff;
}
.footer-sns .fa:hover:after {
	-webkit-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
	opacity:1;
	filter:alpha(opacify=100);
	-webkit-transition:all .5s cubic-bezier(.3,0,0,1.3) 0s;
	-o-transition:all .5s cubic-bezier(.3,0,0,1.3) 0s;
	transition:all .5s cubic-bezier(.3,0,0,1.3) 0s;
}

Puock主题-开源多风格自适应

底部三栏

wp-content/themes/Puock/inc/fun/widget.php第599行开始修改row mt10块

<div class="mt10 author_count"> 
     <ul>                   
         <li><span>文章数</span><strong><?php the_author_posts(); ?></strong></li>
         <li><span>浏览量</span><strong><?php echo get_total_views() ?></strong></li>                    
         <li><span>评论数</span><strong><?php echo $comment_num ?></strong></li>
     </ul>
</div>

.author_count ul {display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;text-align:center;margin-left:0;}
.author_count ul li {float:left;list-style:none;width:33.333%;border-right:1px #efefef solid;padding:8px 0;font-weight:300;}
.author_count ul li:last-child {border-right:1px solid transparent;}
.author_count ul li span {display:block;font-size:14px;color:#999;}
.author_count ul li strong {font-weight:bold;}

未登录则顶栏显示登录选项

在wp-content/themes/Puock/inc/fun/core.php第684行修改代码

else{
    if(pk_is_checked('show_login_url')){
        $out .= '<li><a data-no-instant data-toggle="tooltip" title="用户登录" href="/wp-login.php"><i class="fa fa-user-circle-o" aria-hidden="true"></i></a></li>';
    }

主题自带的代码高亮虽然好看，但是比较小，而且无法自动复制代码。

那就把主题自带的代码高亮禁用掉，然后用 Prismatic 插件

禁用代码：Puock/inc/fun/core.php 约第550行

注释掉”对pre里面的内容进行转义函数” pk_tag_pre_encode 代码

然后代码的背景会变成黑白相间，类似下图

Puock主题-开源多风格自适应

然后修改Puock/assets/css/style.css文件，查找

.puock-light .modal-content,.puock-light .entry-content code,.puock-light .pagination a{background-color:#f3f5f7}

把代码 .puock-light .entry-content code, 删除

2021年7月3日 puock_v1.7

修复移动端外链无法打开的问题 #66
增加阅读量显示控制 #65
修复移动端点击文章目录无反应 #70
修复关于小工具文章链接获取失败 #46 #74
修复关于移动端多级菜单一级菜单为链接时无法打开 #73
增加jsdelivr的静态资源cdn支持 #77
优化标签云小工具，增加数量显示限制 #60
其他代码格式优化

官网：https://licoy.cn/

开源地址：https://github.com/Licoy/wordpress-theme-puock

附
件
下
载

文件名称：Puock_v1.7
适用版本：WordPress
更新日期：2021-07-03
文件大小：5.38M

提示：如遇问题或者链接失效请联系站长，本站欢迎捐赠！

点击下载

发表于：WP主题已收录已收录

2020-11-21

# WordPress免费主题 # 网站主题优化 # 网站优化

复制链接

Puock主题-开源多风格自适应

一、主题介绍

二、主题优化

1、添加悬浮按钮

1.1 主代码

1.2 JS代码

1.3 CSS样式

2、修改底部信息

2.1 修改页脚

2.2 添加样式

3、修改名片样式

3.1 修改侧栏文件

3.2 添加样式

4、顶栏登录选项

5、更换代码高亮

三、更新历史

四、官网与下载

最新文章

微软必应壁纸

NanaZip开源压缩工具，适配 Win 11右键菜单

spacedesk：电脑无线轻松扩展屏幕

节日头像生成器微信小程序源码

QTTabBar玩转资源管理器！

头像边框点缀，增加喜庆氛围

热门文章

效率神器：QuickLook

卸载神器Geek Uninstaller

图吧工具箱：电脑DIY

酷炫 Windows 鼠标指针！

超美二次元响应式引导页

小丸工具箱 + bilibili 压制工具

WordPress友情链接模板(附网址检测)

卡硬工具箱：一切如此简单！

网站信息统计

Puock主题-开源多风格自适应

一、主题介绍

二、主题优化

1、添加悬浮按钮

1.1 主代码

1.2 JS代码

1.3 CSS样式

2、修改底部信息

2.1 修改页脚

2.2 添加样式

3、修改名片样式

3.1 修改侧栏文件

3.2 添加样式

4、顶栏登录选项

5、更换代码高亮

三、更新历史

四、官网与下载

相关推荐

最新文章

热门文章

网站信息统计