博客升级计划(一)

二 8th, 2013

趁着春节前夕,工作还算比较闲。我打算将博客进行一次整体的升级,主要涉及到下面的几个方面:

  • 1. wordpress升级至3.5.1中文版  (完成)
  • 2. 修改下博客的字体类型和大小   (完成,中文支持还是不好看,再找找其它字体)
  • 3. 将博客满屏展示,最好能够进行宽屏和普屏进行切换 (完成满屏展示,切换功能后续再弄)
  • 4. 菜单栏上增加微博,github的链接  (完成)
  • 5. 新增一个豆瓣读书的页面     (完成,后续再优化页面)
  • 6. jiaThis的优化                       (完成,样式再调整下)
  • 7. 站内搜索功能的修复和完善        (未开始)
  • 8. 增加一个图片库,用于站内图片的链接     (完成)
  • 9. 下载页面的优化,将电子书上传到云服务提供下载   (完成)

1. wordpress升级至3.5.1中文版

        注意做好数据备份和插件的备份,后续考虑下备份机制,每月对数据库进行一次备份(可写一个脚本配,自动执行)。

2. 修改下博客的字体类型和大小

       修改style.css
字体增加"Century Gothic"
font-family:"Century Gothic",Verdana,Tahoma,"BitStream vera Sans",Arial,Helvetica,sans-serif;
h2标题的修改:
h2 {
    font-size:15px;
    color:white;
    padding:5px;
    background-color:gray;
} 

3. 将博客满屏展示

       切换成百分比的,可以全屏展示

/* layout START */
#wrap {
    text-align:left;
    margin:0 auto;
    width:100%;
}
#container {
    background:#D6D6D6;
    padding:0 1px 1px;
    width:99%;
} 
/* sidebar START */
#sidebar {
    width:20%;
    margin:10px 0 0;
    float:right;
    overflow:hidden;
} 

4. 菜单栏上增加微博,github的链接 

      现在实现的是文本的链接,如下:

       image

      后续考虑再修改为图标链接,如下:

      51410503 

      修改header.php :

<div>
      <a title="<?php _e('Follow me!', 'blocks2'); ?>" class="twitterlink" href="http://www.weibo.com/yuxiong1985"><?php _e('微博', 'blocks2'); ?></a>
</div> 

       并需要注意style.css文件中是否有对应class的样式

.twitterlink {
    float:right;
    padding:5px 10px;
    border-right:1px solid #FFF;
    margin-right:-1px;
    position:relative;
} 

         如果新增GitHub的链接,可参考微博。

5. 新增一个豆瓣读书的页面

       在博客后台新建一个页面 ,然后去豆瓣收藏秀

<h2>我在看的:</h2>
<script type="text/javascript" src="http://www.douban.com/service/badge/metaboy/?show=dolist&amp;n=8&amp;columns=4&amp;picsize=medium&amp;hidelogo=yes&amp;hideself=yes&amp;cat=book" ></script>
<br />
<h2>我想看的:</h2>
<script type="text/javascript" src="http://www.douban.com/service/badge/metaboy/?show=wishlist&amp;n=12&amp;columns=4&amp;picsize=medium&amp;hidelogo=yes&amp;hideself=yes&amp;cat=book" ></script>
<br />
<h2>我看过的:</h2>
<script type="text/javascript" src="http://www.douban.com/service/badge/metaboy/?show=collection&amp;n=12&amp;columns=4&amp;picsize=medium&amp;hidelogo=yes&amp;hideself=yes&amp;cat=book" ></script>

的页面:http://www.douban.com/service/badgemakerjs

6. jiaThis的优化

<!– JiaThis Button BEGIN –>

<div class="jiathis_style_24x24">

        <a class="jiathis_button_fb"></a>

        <a class="jiathis_button_twitter"></a>

    <a class="jiathis_button_qzone"></a>

    <a class="jiathis_button_tsina"></a>

    <a class="jiathis_button_tqq"></a>

    <a class="jiathis_button_renren"></a>

    <a class="jiathis_button_kaixin001"></a>

    <a href="http://www.jiathis.com/share?uid=1741201" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>

    <a class="jiathis_counter_style"></a>

</div>

<script type="text/javascript">

var jiathis_config = {data_track_clickback:‘true’};

</script>

<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1360077579826124" charset="utf-8"></script>

<!– JiaThis Button END –>

还存在一个问题需要修改,如果放在文章上面会和文章的正文冲突,显示不太好,现在先放在文章的下面 ,google+ 是需要增加还在确认中。

94692154

7. 站内搜索功能的修复和完善

52220804

8. 增加一个图片库

      暂时通过一个插件进行管理,Gallery。使用起来还是蛮麻烦的,后续考虑换个方式处理。

9. 电子书下载页面

     9.1 下载一个插件WordPress Download Monitor,安装后可以在设置页面看到这样的一个选项

        image

         可以通过这个菜单项进行上传文件。通过这个插件上传的文件会存放在 wp-content/uploads/downloads 这个路径下,按照上传的月份进行分类存储。

    9.2  新添加一个页面,将类目id传给页面来显示。如图,download_cat#4表示显示类目4下面所有的文件

<strong> 测试技术:</strong>
<blockquote>

</blockquote>

image





除非注明,本站文章均为原创。本文基于 BY-NC-SA 协议进行授权,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 metaboy(包含链接).

本文链接地址: http://blog.wangyuxiong.com/archives/51760

订阅本站:http://www.wangyuxiong.com/feed

分类: 生活心情         标签: , ,

无觅相关文章插件,快速提升流量