我使用的主题是Yusi。扁平化主题,但是随着时间长,侧栏边上的小白块,越看越不爽。那个小白快是放置社交信息。一开始想把那个小白块的代码删掉,又想了想决定把他改造。 最近查资料看见好多博客都有侧栏头像什么的,决定把小白块改装一下。找到了侧栏的文件,看了一眼。
<aside class="sidebar">
<div class="widget widget_text"><div class="textwidget"><div class="social">
<?php if( dopt('d_tqq_b') || dopt('d_weibo_b') || dopt('d_facebook_b') || dopt('d_twitter_b') ){ ?>
<?php if( dopt('d_weibo_b') ) echo '<a href="'.dopt('d_weibo').'" rel="external nofollow" title="新浪微博" target="_blank"><i class="sinaweibo fa fa-weibo"></i></a>'; ?>
<?php if( dopt('d_tqq_b') ) echo '<a href="'.dopt('d_tqq').'" rel="external nofollow" title="腾讯微博" target="_blank"><i class="tencentweibo fa fa-tencent-weibo"></i></a>'; ?>
<?php if( dopt('d_twitter_b') ) echo '<a href="'.dopt('d_twitter').'" rel="external nofollow" title="Twitter" target="_blank"><i class="twitter fa fa-twitter"></i></a>'; ?>
<?php if( dopt('d_facebook_b') ) echo '<a href="'.dopt('d_facebook').'" rel="external nofollow" title="Facebook" target="_blank"><i class="facebook fa fa-facebook"></i></a>'; ?>
<?php if( dopt('d_weixin_b') ) echo '<a class="weixin"><i class="weixins fa fa-weixin"></i><div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title">订阅号“'.dopt('d_weixin').'”</div><div class="popover-content"><img src="'.get_bloginfo('template_url').'/img/weixin.gif" ></div></div></div></a>';?>
<?php if( dopt('d_emailContact_b') ) echo '<a href="'.dopt('d_emailContact').'" rel="external nofollow" title="Email" target="_blank"><i class="email fa fa-envelope-o"></i></a>'; ?>
<?php if( dopt('d_qqContact_b') ) echo '<a href="'.dopt('d_qqContact').'" rel="external nofollow" title="联系QQ" target="_blank"><i class="qq fa fa-qq"></i></a>'; ?>
<?php echo'<a href="'.dopt('d_rss').'" rel="external nofollow" target="_blank" title="订阅本站"><i class="rss fa fa-rss"></i></a>'; ?>
<?php } ?>
</div></div></div>
<?php
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_sitesidebar')) : endif;
if (is_single()){
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_postsidebar')) : endif;
}
else if (is_page()){
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_pagesidebar')) : endif;
}
else if (is_home()){
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_sidebar')) : endif;
}
else {
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_othersidebar')) : endif;
}
?>
</aside>
本来想直接删掉这段代码然后想自己填充的
<?php if( dopt('d_tqq_b') || dopt('d_weibo_b') || dopt('d_facebook_b') || dopt('d_twitter_b') ){ ?>
<?php if( dopt('d_weibo_b') ) echo '<a href="'.dopt('d_weibo').'" rel="external nofollow" title="新浪微博" target="_blank"><i class="sinaweibo fa fa-weibo"></i></a>'; ?>
<?php if( dopt('d_tqq_b') ) echo '<a href="'.dopt('d_tqq').'" rel="external nofollow" title="腾讯微博" target="_blank"><i class="tencentweibo fa fa-tencent-weibo"></i></a>'; ?>
<?php if( dopt('d_twitter_b') ) echo '<a href="'.dopt('d_twitter').'" rel="external nofollow" title="Twitter" target="_blank"><i class="twitter fa fa-twitter"></i></a>'; ?>
<?php if( dopt('d_facebook_b') ) echo '<a href="'.dopt('d_facebook').'" rel="external nofollow" title="Facebook" target="_blank"><i class="facebook fa fa-facebook"></i></a>'; ?>
<?php if( dopt('d_weixin_b') ) echo '<a class="weixin"><i class="weixins fa fa-weixin"></i><div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title">订阅号“'.dopt('d_weixin').'”</div><div class="popover-content"><img src="'.get_bloginfo('template_url').'/img/weixin.gif" ></div></div></div></a>';?>
<?php if( dopt('d_emailContact_b') ) echo '<a href="'.dopt('d_emailContact').'" rel="external nofollow" title="Email" target="_blank"><i class="email fa fa-envelope-o"></i></a>'; ?>
<?php if( dopt('d_qqContact_b') ) echo '<a href="'.dopt('d_qqContact').'" rel="external nofollow" title="联系QQ" target="_blank"><i class="qq fa fa-qq"></i></a>'; ?>
<?php echo'<a href="'.dopt('d_rss').'" rel="external nofollow" target="_blank" title="订阅本站"><i class="rss fa fa-rss"></i></a>'; ?>
<?php } ?>
又想了想,我是不是可以废物利用呢。对于腾讯微博我已经删除账号了,联系QQ和邮箱什么的感觉也没什么用,决定利用这三个储存头像什么之类的信息,省得每次修改都要修改文件。我把腾讯微博改成头像地址,联系QQ当成昵称,邮箱为个性签名,或者介绍。
<?php if( dopt('d_tqq_b') || dopt('d_weibo_b') || dopt('d_facebook_b') || dopt('d_twitter_b') ){ ?>
<div class=""><a href="/" ><img src="https://aimuz.me/wp-content/themes/yusi1.0/timthumb.php?src=<? echo dopt('d_tqq');?>&h=160&w=160&q=90&zc=1&ct=1"></a>
<h1><a href="/" style="color: inherit;"><? echo dopt('d_qqContact');?></a></h1>
<span><? echo dopt('d_emailContact');?></span>
</div>
<?php if( dopt('d_weibo_b') ) echo '<a href="'.dopt('d_weibo').'" rel="external nofollow" title="新浪微博" target="_blank"><i class="sinaweibo fa fa-weibo"></i></a>'; ?>
<?php if( dopt('d_twitter_b') ) echo '<a href="'.dopt('d_twitter').'" rel="external nofollow" title="Twitter" target="_blank"><i class="twitter fa fa-twitter"></i></a>'; ?>
<?php if( dopt('d_facebook_b') ) echo '<a href="'.dopt('d_facebook').'" rel="external nofollow" title="Facebook" target="_blank"><i class="facebook fa fa-facebook"></i></a>'; ?>
<?php if( dopt('d_weixin_b') ) echo '<a class="weixin"><i class="weixins fa fa-weixin"></i><div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title">订阅号“'.dopt('d_weixin').'”</div><div class="popover-content"><img src="'.get_bloginfo('template_url').'/img/weixin.gif" ></div></div></div></a>';?>
<?php echo'<a href="'.dopt('d_rss').'" rel="external nofollow" target="_blank" title="订阅本站"><i class="rss fa fa-rss"></i></a>'; ?>
<?php } ?>
</div></div></div>
<?php
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_sitesidebar')) : endif;
if (is_single()){
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_postsidebar')) : endif;
}
else if (is_page()){
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_pagesidebar')) : endif;
}
else if (is_home()){
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_sidebar')) : endif;
}
else {
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_othersidebar')) : endif;
}
?></pre><pre class="lang:default decode:true ">https://aimuz.me/wp-content/themes/yusi1.0/timthumb.php?src=<? echo dopt('d_tqq');?>&h=160&w=160&q=90&zc=1&ct=1"></a>
<? echo dopt('d_tqq');?>
也可以直接这样使用
效果图
当然也是要修改css文件的,不然样式不对。
.social div {
padding: 10px 0;
}
.social a {
width: 37px;
height: 37px;
margin-right: 6.5px;
margin-left: 6.5px;
position: relative;
color: #fff;
}
.social i {
font-size: 23px;
width: 23px;
height: 23px;
padding: 7px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 50%;
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
}
最后的效果图就是那样的。 当然这里修改了,后台怎么能不修改,不然看着很别扭。后台文件位于 yusi1.0/admin
<tr>
<td class="d_tit">名字</td>
<td>
<label class="checkbox inline">
<input type="checkbox" id="d_qqContact_b" name="d_qqContact_b" <?php if(dopt('d_qqContact_b')) echo 'checked="checked"' ?>>开启
</label>
昵称:<input class="d_inp_short" name="d_qqContact" id="d_qqContact" type="text" value="<?php echo dopt('d_qqContact'); ?>">
</td>
</tr>
<tr>
<td class="d_tit">个性签名</td>
<td>
<label class="checkbox inline">
<input type="checkbox" id="d_emailContact_b" name="d_emailContact_b" <?php if(dopt('d_emailContact_b')) echo 'checked="checked"' ?>>开启
</label>
文本:<input class="d_inp_short" name="d_emailContact" id="d_emailContact" type="text" value="<?php echo dopt('d_emailContact'); ?>">
</td>
</tr>
<tr>
<td class="d_tit">头像地址</td>
<td>
<label class="checkbox inline">
<input type="checkbox" id="d_tqq_b" name="d_tqq_b" <?php if(dopt('d_tqq_b')) echo 'checked="checked"' ?>>开启
</label>
网址:<input class="d_inp_short" name="d_tqq" id="d_tqq" type="text" value="<?php echo dopt('d_tqq'); ?>">
</td>
</tr>
<tr>
<td class="d_tit">新浪微博</td>
<td>
<label class="checkbox inline">
<input type="checkbox" id="d_weibo_b" name="d_weibo_b" <?php if(dopt('d_weibo_b')) echo 'checked="checked"' ?>>开启
</label>
网址:<input class="d_inp_short" name="d_weibo" id="d_weibo" type="text" value="<?php echo dopt('d_weibo'); ?>">
</td>
</tr>
<tr>
<td class="d_tit">腾讯微信</td>
<td>
<label class="checkbox inline">
<input type="checkbox" id="d_weixin_b" name="d_weixin_b" <?php if(dopt('d_weixin_b')) echo 'checked="checked"' ?>>开启
</label>
订阅号:<input class="d_inp_short" name="d_weixin" id="d_weixin" type="text" value="<?php echo dopt('d_weixin'); ?>"><span class="d_tip">微信图片直接替换主题同名weixin.gif图片即可。</span>
</td>
</tr>
<tr>
<td class="d_tit">Facebook</td>
<td>
<label class="checkbox inline">
<input type="checkbox" id="d_facebook_b" name="d_facebook_b" <?php if(dopt('d_facebook_b')) echo 'checked="checked"' ?>>开启
</label>
网址:<input class="d_inp_short" name="d_facebook" id="d_facebook" type="text" value="<?php echo dopt('d_facebook'); ?>">
</td>
</tr>
<tr>
<td class="d_tit">Twitter</td>
<td>
<label class="checkbox inline">
<input type="checkbox" id="d_twitter_b" name="d_twitter_b" <?php if(dopt('d_twitter_b')) echo 'checked="checked"' ?>>开启
</label>
网址:<input class="d_inp_short" name="d_twitter" id="d_twitter" type="text" value="<?php echo dopt('d_twitter'); ?>">
</td>
</tr>
最后效果是这样的(截取部分)