• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

WordPress主题修改简单教程

WordPress 云落 3年前 (2014-10-21) 999次浏览 已收录 7个评论
文章目录[隐藏]

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

image

前言

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

软件篇

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

火狐浏览器

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

代码编辑器 Editplus/notepad++

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

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

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

FTP 管理器

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

在线工具篇

站长工具 CSS 在线编辑器

首先提到的就是这个,这玩意虽然界面渣渣,但是还是挺实用的,可视化编辑,然后自动生成 CSS 代码,对于我们这种不熟悉 CSS 代码的 WordPress 新人来说很实用。
CSS 在线编辑器

Getmirx

这玩意是啥呢?这个是一个非常优秀的网站优化指导工具,WordPress 官方推荐的工具,这里主要是用他来检测我们更改的过程中有木有什么违背前端设计规则的地方,发现一些不正确的地方。
Getmirx 测试

响应式测试工具

我们的网站现在很多都是响应式,所以不能只考虑电脑版本,还要考虑手机的版本,但是总是用手机看还是有点不方便的,这个就是模拟手机浏览的工具,在这里,你可以模拟五种设备,在测试的差不多了,最后可以再使用手机浏览看看。
响应式测试工具

CSS 3 Marker

不会使用 CSS?没关系,使用这个在线功能,你可以在线生成很多不错的实用的 css 代码,我们一般也就用到这些代码了,自动生成就可以了,代码拿走,我们直接用。
CSS 3 Marker

HTML/CSS/javascript 测试 RunJS

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

基础知识库

要修改 WordPress 主题,一些必要的知识库还是必须要知道的,下面我就列出来一些我们可能会需要的
WordPress 函数速查表    HTML 知识库   CSS 知识库    javascript 知识库    PHP 知识库

基本的 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 文档结构就介绍到这里了 :oops:

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,我们首先需要确定自己先改哪里,然后根据网站的地点然后确定要修改哪个文件,看下面我画的图,简单的介绍一下网站结构

图应该能看懂吧???不懂得,额。。。。。。。 :evil: :evil: :evil: :evil:

熟悉火狐开发工具

WordPress 主题修改简单教程
我们首先 F12,打开火狐开发工具,启用各种功能,有的可能会需要重启

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

开始实战修改主题

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


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress 主题修改简单教程
喜欢 (15)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)个小伙伴在吐槽
  1. sublime也很好用啊!
    mjever2014-11-26 09:50 回复 Windows 7 | Chrome 31.0.1650.63
    • 云落
      ST我个人觉得适合大牛使用
      云落2014-11-26 11:24 回复 Android 4.4.4 | WordPress客户端 android
  2. 感谢楼猪,又涨姿势了 :mrgreen:
    chaopin2014-11-19 22:11 回复 Windows 7 | Chrome 33.0.1750.146
  3. 应该是notepad
    giuem2014-10-18 18:04 回复 Linux | Safari浏览器 537.36
    • 云落
      表在意这些细节-_-||
      云落2014-10-19 08:22 回复 Android 4.4.4 | WordPress客户端 android
  4. 沙发~ :idea: 火前留名
    威威丶ww2014-10-14 17:51 回复 Windows 7 | 搜狗浏览器 2.X