我吧，一有个什么事情，兴趣上来了，怎么着都得先完成，憋不住。昨天花了一下午的时间，更新了网站的主题Tangstyle two，很漂亮。

更新的过程中，总结了下面几个经验，记录和分享一下：

1. 安装tangstyle two
2. 更新头像、公众号、打赏二维码，以及网站icon。
3. 设置左侧边栏导航条
4. 修改css样式，美化文章排版
5. 首页文章列表，增加缩略图
6. 添加wiki文库
7. 标签云的颜色

1

主题的安装还是非常的简单的，把主题文件copy到wp-content/themes里，然后在wordpress后台【外观】里，就能找到这个主题了。

导致上传主题的过程有些曲折，主要是服务器供应商那边的问题，就不啰嗦了。

2

主题安装好并设置新主题后，很多信息默认还是tangstyle two作者唐杰老师的，需要我们自己设置一下。

2.1 头像、公众号、打赏二维码

头像、公众号、打赏二维码，这些更新起来还是比较简单的。

在WordPress后台，找到【外观】选项，里面会有一个【JieStyle设置】的子菜单，可以设置头像、公众好、打赏二维的图片链接。

把你的图片信息，上传到空间里，然后更新一下图片链接就好了。

2.2 网站icon

网站的icon默认也是唐杰老师的（就是网页标签上那个浅蓝色的“杰”字），这个改起来有一点小复杂，在【JieStyle设置】里找不到，需要我们手动覆盖图片文件。

在wp-content/themes/JieStyle-Two-master/images文件夹中，有4个名为icon_***.png的文件，这几个就对应着网站的图标。把我们自己的网站icon修改成对应的尺寸，然后替换这些图片就好了，注意名称要完全一致。

3

网站左边的导航条，同样可以在WordPress后台进行设置，在【外观】->【菜单】选项中，可以添加下面这些菜单选项：

• 页面：就是我们自己定义的页面，也创建一篇文章类似，可以自己编写页面的内容。
• 文章：可以是一篇文章，就是把文章的链接放到导航菜单中。
• 自定义链接：添加一个自定义的链接，比如要外链到我的另外一个网站，可以用这个选项。
• 分页目录：像我的Box2D、Nape系列文章，就是把分类目录，添加到菜单中的。

最后在最下面有一个选项【JieStyle】导航菜单，勾选这个选项，点击【保存菜单】就可以了。

4

这个就复杂了，主要是修改了wp-content/themes/JieStyle-Two-master/style.css这个文件，零零散散修改了很多，慢慢更新。

方法大概就是，在chrome使用开发人员模式，查看需要修改模块对应的id或者class名称，然后再再style.css里找对应的样式设置，进行修改。

4.1 修改文章列表的边框

模块名称：article-list-1。

修改内容如下：

.article-list-1 {
	margin-bottom: 30px;
	border-bottom: 1px solid #e0e0e0; 
	/*2017-09-20 ladeng6666*/
	border-radius: 0;
	padding: 10px 15px 20px 15px;
	background: #FFF
}

 

4.2 设置段落对其为justify

这是在学习PPT设计时，养成的一个习惯，设置段落分散对齐，会让整个段落看起来像个方块，非常的整齐。涉及到的模块有：

• .view-content p
• .post-content p
• .view-content ul
• .view-content ol

.view-content ul , .view-content ol{
	padding-left: 2em;
	font-size: 15px;
	margin: 16px 0;
	text-align: justify;
}

4.3 图片居中对其

在style.css没有设置图片样式的css代码，需要自己添加：

.view-content img {
	max-width: 100%;
	margin: 10px auto;
	display: block;
}

 

这里没有直接使用text-align，而是使用的margin auto的方法。

4.4 更改文章列表标题颜色

模块名称： .post-title a

把标题颜色改为蓝色，更醒目一些。

.article-list-1 .post-title a {
	color: #337ab7;
	-webkit-transition: color .3s;
	transition: .3s;
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
}

 

因为鼠标滑过的样式，是bootstrap定义的，所以我在style.css中，又重新定义了滑过的颜色为黑色：

.article-list-1 .post-title a:hover {
	color: #1c1c1c !important;
}

5

在首页文章列表中，添加文章缩略图，是我跟emanule feronato大神学的，一直保留了这个习惯。但是tangstyle这个主题没有这个功能，于是我就修改了index.php中的部分内容。

1. 首先在目录wp-content/themes/JieStyle-Two-master/index.php，打开index文件。
2. 添加下面高光部分的代码。

<?php get_header(); ?>

<div id="main">
    <div class="row box">
        <div class="col-md-8">
        <?php while ( have_posts() ) : the_post(); ?>
            <?php if ( is_sticky() && $paged <= 1) : ?>
                <h2 class="uptop"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i> <a href="<?php the_permalink() ?>" target="_blank"><?php the_title(); ?></a></h2>
            <?php else : ?>
                <article class="article-list-1 clearfix">
                    <header class="clearfix">
                        <h1 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
                        <div class="post-meta">
                            <span class="meta-span"><i class="fa fa-calendar"></i> <?php the_time('m月d日') ?></span>
                            <span class="meta-span"><i class="fa fa-folder-open-o"></i> <?php the_category(',') ?></span>
                            <span class="meta-span"><i class="fa fa-commenting-o"></i> <?php comments_popup_link ('没有评论','1条评论','%条评论'); ?></span>
                            <span class="meta-span hidden-xs"><i class="fa fa-tags" aria-hidden="true"></i> <?php the_tags('',',',''); ?></span>
                        </div>
                    </header>
                    <?php if (has_post_thumbnail()) { ?><div class="thumbnail"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div><?php } ?>
                    <div class="post-content clearfix">
                        <p><?php echo mb_strimwidth(strip_tags(apply_filters('content', $post->post_content)), 0, 200,"..."); ?></p>
                    </div>
                </article>
            <?php endif; ?>
            <?php endwhile; ?>
            <nav style="float:right">
                <?php pagination($query_string); ?>
            </nav>
        </div>
        <div class="col-md-4 hidden-xs hidden-sm">
            <?php get_sidebar(); ?>
        </div>
    </div>
</div>

<?php get_footer(); ?>

这样文章列表中就会显示出，我们发布文章时设置好的【特色图像】（就是文章标题封面）。

但是这个时候，每个图片的尺寸不一样，显示出来的效果不同；而且，有点图片特别长，会把页面撑起来特别丑。这样就需要在style.css中，设置一下缩略图的尺寸：

.thumbnail{
	border: none;
	height: 150px;
	overflow-y: hidden;
}
.thumbnail img{
	width: 100%;
}

上面的样式表中，我设置图片的高度为150px，宽度100%填充，如果图片太高，超出了150px，就自动隐藏。

6

这个wiki文库，我用的是amwiki框架，具体可以查看它官方的介绍，编写这个wiki非常的简单，只要安装一个atom，会写markdown就可以了。

markdown真是个好东西，现在我写文章，写公众号，都用markdown了，谁用谁知道。

7

标签云之前我一直都不喜欢用，因为五颜六色的太丑，这一次，我没删掉，只是把颜色都改成了黑色。

实现这个效果，需要修改wp-content/themes/JieStyle-Two-master/function.php中的代码。打开这个文件，搜索colorCloudCallback函数，然后修改下面高亮部分的代码就可以了。

function colorCloudCallback($matches) {
    $text = $matches[1];
    $color = dechex(rand(0,16777215));
    $pattern = '/style=(\'|\")(.*)(\'|\")/i';
    // $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
    $text = preg_replace($pattern, "style=\"color:#404040;$2;\"", $text);
    return "<a $text>";
}