wordpress主题的样式修改应该是最常见的一种需求了，相对于来说其实是最简单的需求了。那么修改样式需要有哪些工具呢？

• 非IE的任何浏览器：推荐如谷歌、火狐、360之类，太奇葩的，我也没用过。
• 编辑器：相对于修改样式，我们不需要太高端的编辑器，我自己在用的是 Hbuilder，如果以后你经常要看我的教程，建议你也选择这款编辑器。了解一下

工具有了，接下来，需要你知道的是，一个主题的样式都是那些东西来控制的：

1、你可以查看任何html文件，一般在类似div这些代码中会紧跟着class或id，如<div class="col-lg-3 col-md-4 course-sidebar">....</div>    ，其中col-lg-3 所对应的css就是我们要修改的。

2、css在哪个文件里？

• 一般情况下，wordpress的css都会在主题根目录的style.css里。
• 二般情况下，css可能在目标所在页面的PHP文件里，当遇到这种情况的时候，你一般需要在对应的PHP文件和footer.php、header.php这三个文件里面搜索<style type=”css”></style>这样的内容。
• 三般情况下，css可以在一个单独的css文件里。
• 不管一二三般哪种情况下，我们都可以通过浏览器的审查元素来获取到信息。

---

案例一：

其实上面的都是废话，你只需要了解就行了，下面实例来说一下：

• 网站：股市百科（www.gsbaike.com）
• 浏览器：360浏览器

比如说，我想修改一下首页股市百科这个大标题的字体大小

首先，在股市百科这四个字的位置点击右键，在弹窗中选择审查元素以后，你会看到这样的界面

按照箭头的顺序，中间的选项卡中，我们找到<h1 id="股市百科">股市百科</h1>，然后对应第三个选项卡中，我们可以看到.markdown-section h1这个css名，这个css里面的就是我们需要修改的，即font-size:2em，我们将2修改为1，就会发现字体变小了。

预览效果后，发现字体大小还可以，比较理想了。这个时候，我们就应该去找所在css文件，具体修改了。再看第三个选项卡，我们可以在.markdown-section h1后面看到style.css：161，这是什么意思呢，就是说这个css在主题文件夹下style.css的第161行，我们找到这个文件后，在161行找到：

.markdown-section h1 {
    font-size: 2em;
}

只要将这个2em改成1em，然后通过FTP 进行上传覆盖，就可以了。

---

案例二：

案例一是不是很简单？那么再来一个复杂情况的例子吧？

• 网站：http://wpsenlin.com/zhutidingzhi
• 浏览器：360

比如，我想修改一下，“WP森林高端定制”这几个字和“更好也更靠谱的服务模式”这几个字的间距。

首先，和上面讲的一样，鼠标放到这两行字任何一行上，点击鼠标右键，在弹出框中选择审查元素，可以看到下面这个界面：

我们可以在第二个选项卡中看到：深蓝色标的行，如图，

<div class="banner_content">
	<p class="t_slogan">
		 WP森林<i></i>高端定制<span>BETA</span>
	</p>
	<div class="industry_design_type">
		 更好也更靠谱的服务模式
	</div>
	<a href="#zxsale" class="free_match start_match" id="free_match"><span>立即开始</span></a>
</div>

通过鼠标放到p标签和div标签上对比，我们可以发现，div标签（即更好的服务模式这些文字所在div）有一个顶外边距（图片中的黄色部分），我们通过修改这个顶外边距就可以达到我们想要的结果。

然后，我们在第三个选项卡中，可以看到上面说的div标签的class .industry_design_type所对应的是.free_match_creatives .fmc_banner_wrap .banner_content .industry_design_type，其内容中，我们可以发现，有一个外边距属性margin：25px auto 0，我们修改数字25为100，然后预览第一个选项卡中的效果：

这一看，哇塞！好看多（个）了（屁）。接下来，我们就要修改文件了，这个时候你发现.free_match_creatives .fmc_banner_wrap .banner_content .industry_design_type后面 是zhutidingzhi:2这样的东西（姑且称为东西），显然这不是一个css文件，我们在第二个选项卡中，下拉页面，会发现上面说到的二般情况

如果你对主题的各个文件比较了解的话，你就可以轻易的找到这个文件，但是小白一般对wordpress基础都不了解，更别提主题文件了。那这个时候怎么办呢？

哼，请打开我给你们推荐的这个hbuider这个编辑器（新建WEB项目，然后把主题解压后文件复制到这个项目里），随便打开一个php文件，然后鼠标ctrl+F在底部你可以看到如下选项卡

将我们需要找到的css名输入（.free_match_creatives .fmc_banner_wrap .banner_content .industry_design_type），然后在右下角的范围下拉中选择当前项目，然后点击查找，这个时候，你会发现多了一个搜索的选项卡，其中：

结果就标明所在文件哟，如果这个时候你再说你找不到，就不合适了。

---

注意：

• 单独上传文件的时候，FTP软件一定要选择二进制模式，不会的请百度，或者找找我的教程，虽然截止写这篇教程的时候，我还没写。
• 在遇到自适应主题的时候，不一定是唯一的地方，也许你需要修改多个css，就如上图，一下搜到了四处，这个时候你就需要更多css知识了（四行的最后一行就是手机端的样式）。
• 小编非专科毕业，对部分东西的专业名称不知道，只能按我这业余水平和业余知识告诉你是哪个东西。这个东西，就要你自己悟了。

总之呢，修改样式——就是修改css，步奏一般就是这样的，初期可能你一头雾水，慢慢接触的多了，你也就懂了。就酱！

wordpress主题的动态调用修改，说的是PHP调用相关的调用（如你需要修改文章列表显示的内容、增加文章内容作者信息显示等）。当然不排除有些主题是固定文字，这种情况就更简单，直接替换文字就可以了。

这篇就是教大家替换php文件中固定内容的。。。

我个人认为，对于新手小白来说，最难的还是找到这个东西所在的文件。所以怎样找到这个东西所在的文件呢？

案例一：

• 网站：股市百科（www.gsbaike.com）
• 浏览器：360浏览器

我需要修改首页的logo图片（想修改logo的话，找不到源码可以直接替换本地的图片。一般都是在本地的。）上方搜索里面的搜索这两个字：

• 方法一：直接用我们的hbuilder编辑器进行整个项目搜索——“搜索”这两个字。【输入搜索，然后范围选择当前项目，点击搜索】。在右侧搜索选项卡中，我们就可以看到搜索所在的文件是header.php的第20行，然后打开header.php这个文件夹，我们在第20行就可以看到这两个字了，修改成自己想要的，然后单独上传这个文件进行覆盖就可以了。

• 方法二，这就需要你对主题文件比较了解了。比如我想修改“最后更新于”这个几个字为“最后编辑于”。

网页：https://www.gsbaike.com/cgrm/7.html

首先，我们分析这个页面是属于文章页面，如果你对wordpress主题的结构比较了解，你就可以清楚的知道，这个是single.php控制页面，所有文章内容都会在这个页面进行调用。

直接打开single.php，发现这个PHP文件内容如下：

<?php get_header(); ?>
	<div class="page-wrapper">
		<div class="page-inner">
			<section class="normal markdown-section">
				<h1><?php the_title(); ?></h1>
				<p><span class="sa-last-update-time">最后更新于：<?php the_modified_time('Y-m-d H:i l'); ?></span></p>
				<?php while( have_posts() ): the_post();?>
				<?php the_content(); ?>
				<?php endwhile; ?>	
				<div class="sw-modBox mt15">
			       <p>编辑：<a style="color:#333">七号</a> @ <a href="http://www.gsbaike.com/" target="_blank" style="color:#333">股市百科</a> - 新手炒股入门教程</p>
			       <p>对本文有疑问或想更深入交流炒股经验。</p><p>欢迎来<a href="http://www.gsbaike.com/" target="_blank" >炒股交流</a>群交流互相学习，QQ群:652323122。</p>
			    </div>	
			</section>
		</div>
	</div>
<?php get_footer(); ?>

一眼就可以看到“最后更新于”这几个字。接下来按照之前的步奏，替换覆盖就可以了。

---

本想在这里教教大家修改PHP函数，但是想了想，对于新手来说现在直接说这个，还是有点难度。以后出教程慢慢教吧。。。见谅。

本节就酱！

关于JS的修改，其实比较蛋疼，小编在刚开始接触这个东西的时候，就无从下手，也没有想到什么可以让你快速入门的方法。所以这边，我只能给大家说说我自己的一点点经验。

首先，我们需要知道，js的效果动作一般是要绑定到一个标签的ID或CLASS上的，我们要修改效果，只要找准了这个ID或者CLASS名所在的JS文件或者script标签所在的PHP文件，然后各种百度自己要改的效果的函数等。

怎么说呢，对于什么都不懂的小白来说，JS部分确实很蛋疼和无奈。

---

案例一：

• 浏览器：火狐
• 网页：http://www.dowebok.com/demo/2014/93/

这是一个比较常见的幻灯片插件，我自己做幻灯片的时候，用的这个JS插件也是比较多的。这边我以我不知道这个插件，也不懂这个插件的前提来跟大家说明怎么来修改这个幻灯片的展示效果。

首先，和之前的步奏一样，我们在幻灯片的图片位置点击邮件审查元素，我们会看到以下的界面

如图，我们在右侧选项卡中可以看到深蓝色部分，这个是我们刚才右键地方的位置，接着往上层查看，我们可以发现，所有的项目都在id="owl-demo"这个所在div标签里包含，且我们明显在这个div标签可以看到有一个ev标志。发现这个以后，我们应该大概能判断出，这个js的控制器大概是绑定在了这个owl-demo的id上或者是后面class里面的某一个。

接下来，我们在浏览器的展示选项卡里的任何地方，右键选择查看页面源码按钮，然后页面整个搜索 owl-demo，结果如下：

其中红框部分，在script标签包含的内容就是我们要找的。找到了目标，我们需要知道这是一个什么东西，对吧，我们直接百度owlCarousel发现这是一个js的效果插件，通过阅读js说明手册或者演示，你会发现，它的效果控制只需要在owlCarousel后面的括号里新增就可以了，如我将上面的红框里内容修改如下：

$(function(){
   $('#owl-demo').owlCarousel({
      items: 1,
      autoPlay: true
   });
});

效果就变成了一页显示一个，且自动播放，如：

至此，就算修改成功了。

注意：

• 演示网站给出的这个插件算是个老版本，查看调用手册的时候，要注意对应版本。不同版本的参数可能不同。

---

案例二

除了上面说的情况（在PHP页面控制的js），还有一种是在一个新的JS页面控制的情况。

这种情况，我们的修改操作也是一样的，通过右键审查元素，来找到目标绑定的ID或CLASS。然后通过HBUILDER的当前项目搜索，来寻找。

没有合适的案例，我就不举例了。

大家自己多折腾折腾，就明白了。本节就酱。