WordPress主题修改简单教程

Posted on1655WordPress
» WordPress » WordPress主题修改简单教程

最小白化的主题修改教程，不是正统的主题制作方法，但是可能是最适合小白的方法

WordPress主题修改简单教程-极客公园

前言

又准备挖坑了，是个长篇文章，从我自己本身出发，写一个很合适向我这种很小白的主题修改教程，如果您觉得我写的这篇文章对您很有用，欢迎点赞哈，如果您愿意给我扫码也可以。

软件篇

首先，要修改主题，首先需要几个不错的工具，有个这些工具再来修改主题就会起到事半功倍的作用。

火狐浏览器

浏览器有很多，但是在我看来最适合用作前段开发的一般也就火狐和chrome浏览器，chrome我个人用的不多，所以这里就暂时不说，本文所有方法均是在火狐下修改。

代码编辑器Editplus/notepad++

我目前使用的代码编辑器是editplus/notepad++，个人喜欢他的简单，软件自带FTP，直接从FTP打开远程文件，直接保存，这里个人极不推荐：

1，WordPress后台使用自带的主题编辑器编辑主题；
2，你不推荐使用温逗死自带的记事本编辑代码。

其他优秀的支持代码高亮的代码编辑器也可以。

FTP管理器

虽然代码编辑器自带了FTP功能，但是我们还是需要一个不错的FTP管理器的，FTP管理器自己百度一下，找一个不错的就可以了。我个人目前是用的是8UFTP，都是挺小巧的软件。

在线工具篇

站长工具CSS在线编辑器

首先提到的就是这个，这玩意虽然界面渣渣，但是还是挺实用的，可视化编辑，然后自动生成CSS代码，对于我们这种不熟悉CSS代码的WordPress新人来说很实用。
[bb href='http://tool.chinaz.com/Tools/CssDesigner.aspx']CSS在线编辑器[/bb]

Getmirx

这玩意是啥呢？这个是一个非常优秀的网站优化指导工具，WordPress官方推荐的工具，这里主要是用他来检测我们更改的过程中有木有什么违背前端设计规则的地方，发现一些不正确的地方。
[bb href='http://gtmetrix.com/']Getmirx测试[/bb]

响应式测试工具

我们的网站现在很多都是响应式，所以不能只考虑电脑版本，还要考虑手机的版本，但是总是用手机看还是有点不方便的，这个就是模拟手机浏览的工具，在这里，你可以模拟五种设备，在测试的差不多了，最后可以再使用手机浏览看看。
[bb href='http://jamus.co.uk/demos/rwd-demonstrations/']响应式测试工具[/bb]

CSS 3 Marker

不会使用CSS？没关系，使用这个在线功能，你可以在线生成很多不错的实用的css代码，我们一般也就用到这些代码了，自动生成就可以了，代码拿走，我们直接用。
[bb href='http://www.css3maker.com/index.html']CSS 3 Marker[/bb]

HTML/CSS/javascript测试RunJS

RunJS是开源中国出品的一款代码分享，代码测试的在线工具，国内访问特别快，支持代码输出，很不错的东西，我的网站已经有几个就是用runjs输出的代码，在获得到一些代码之后，我们可以在这里测试一下代码的有效性。
[bb href='http://runjs.cn/']RunJS[/bb]

基础知识库

要修改WordPress主题，一些必要的知识库还是必须要知道的，下面我就列出来一些我们可能会需要的
[bb href='https://gitcafe.net/cheatsheet']WordPress函数速查表[/bb]    [bb href='http://www.w3school.com.cn/html/index.asp']HTML知识库[/bb]   [bb href='http://www.w3school.com.cn/css/index.asp']CSS知识库[/bb]    [bb href='http://www.w3school.com.cn/js/index.asp']javascript知识库[/bb]    [bb href='http://www.w3school.com.cn/php/index.asp']PHP知识库[/bb]

基本的web知识

首先看一个比较基础的网页结构，比较好看懂的

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">button{border:1px solid #ccc;cursor:pointer;display:block;margin:auto;position:relative;top:100px}</style>
		<title>RunJS</title>
	</head>
	<body>
		<button onclick="javascript:say_hello();">Hello RunJS!</button>
		<script type="text/javascript">
		function say_hello(){
	 alert("Hello RunJS!");
}</script>
	</body>
</html>

html的基本结构

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我是标题</title>
</head>
<body>
我是网站内容
</body>
</html>

看下这个代码，这就是正常的html代码结构，head里面的内容都是我们看不到的，meta里面的都是一些特殊属性参数，这个一般也不搞，title就是浏览器标题显示的内容，body里面的才是网页的主体内容，一个网站的99.99%的内容都在这里面。好了，简单的html文档结构就介绍到这里了 😳

CSS代码的使用

CSS代码有三种使用方法，第一种方法是将样式直接嵌入html标签里面，比如下面这个

See the Pen zaBnh by 无法诉说的吟荡 (@) on CodePen.

这个方法是个样式代码很少的情况，嗯，很少很少

也可以在html标签外面用样式语法指定某个元素，使用下面这个语法格式元素{样式}，然后用

<style type="text/css">样式代码</style>

标签包围就可以了，下面看例子吧

See the Pen mciLI by 无法诉说的吟荡 (@) on CodePen.

这个方法适合很多的场景的，看情况，如果代码在20行以内的可以用这个方法

当然如果样式代码量很大的话，以上两个方法都不适合，这里就说最后一个方法，首先建立一个.css文件，然后再html文档头部引用就可以了，引用格式是

<link rel="stylesheet" type="text/css" href="css文件路径">

，下面举个例子。

WordPress主题就是采用的这个方法，css文件就是style.css文件

Javascript使用方法

javascript使用方法比较单一，一般就是用用以下标签包围就可以了

<script type="text/javascript">脚本代码</script>

WordPress基础结构

要修改WordPress，我们首先需要确定自己先改哪里，然后根据网站的地点然后确定要修改哪个文件，看下面我画的图，简单的介绍一下网站结构

图应该能看懂吧？？？不懂得，额。。。。。。。 👿 👿 👿 👿

熟悉火狐开发工具

WordPress主题修改简单教程-极客公园

我们首先F12，打开火狐开发工具，启用各种功能，有的可能会需要重启

火狐浏览器搭配以下两个扩展会变得“无比强大”
firebug：下载firebug
Web Developer中文版：下载 Web Developer

开始实战修改主题

上面讲了好多，现在开始进入实战吧，开始修改主题。这次修改拿我的测试网站来进行试验

-- 完 --

Published by 云落

无折腾，不生活，我是一个WordPress菜鸟，一个玩淘宝的卖家，欢迎你认识我，我是云落！

发表评论

电子邮件地址不会被公开。 必填项已用*标注

7 Replies to “WordPress主题修改简单教程”