主题折腾笔记

发表于   |   作者 Aimuz   |   分类于 片段

我使用的主题是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') &amp;&amp; dynamic_sidebar('widget_sitesidebar')) : endif; 

if (is_single()){
    if (function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar('widget_postsidebar')) : endif; 
}
else if (is_page()){
    if (function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar('widget_pagesidebar')) : endif; 
}
else if (is_home()){
    if (function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar('widget_sidebar')) : endif; 
}
else {
    if (function_exists('dynamic_sidebar') &amp;&amp; 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://uploads.aimuz.me/wp-content/themes/yusi1.0/timthumb.php?src=<? echo dopt('d_tqq');?>&amp;h=160&amp;w=160&amp;q=90&amp;zc=1&amp;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://uploads.aimuz.me/wp-content/themes/yusi1.0/timthumb.php?src=<? echo dopt('d_tqq');?>&amp;h=160&amp;w=160&amp;q=90&amp;zc=1&amp;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>

最后效果是这样的（截取部分）请输入图片描述