• 给网站增加一个离线缓存功能
  • 明天我们家宝宝满月了
  • 一晚上忙了好几个小时,终于把支付前台通知解决了
  • 原计划要增加另外一种支付方案,现在可能要被搁置了
  • 今天上午刚刚注册了华为云,然后刚刚华为云的客服小姐姐就来电话了,小姐姐声音挺好听的
  • 今天无意中注册了华为云,然后发现跟阿里云基本一个模样,甚至连价格都一样
  • 继续测试一下
  • 发现一个问题就是,微信语音发送说说的时候,不要拦截没有UA的数据请求
  • 测试一下连接
  • 终于下雪了

WordPress主题修改简单教程

WordPress 云落 4年前 (2014-10-21) 1056次浏览 已收录 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:

熟悉火狐开发工具

2014-10-22_181243
我们首先F12,打开火狐开发工具,启用各种功能,有的可能会需要重启

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

开始实战修改主题

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


-- 完 --
weinxin
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送WordPress小技巧,你可以随时退订,欢迎订阅哦~

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用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