Before we get started building any WordPress Theme, we’re going to need to get our development tools in place. In this post, we’ll run through the best of the best and build ourselves a cross-platform WordPress Theme test environment that would do a professional Theme developer proud.

着手构建WordPress主题之前,我们需要安装一些工具,本文中,将使用一些最好的开发工具,以构建我们的跨平台WordPress主题测试环境。

A Local Test Server: XAMPP or MAMP

The best place to develop your custom WordPress Theme is off the web, on your home computer. To do that though, you’ll need to turn your computer into a “local server”, essentially approximating the program suite on a regular web server (Apache, MySQL and PHP). This means you can install WordPress on your home computer.

Installing these separate server programs can be technically challenging, but luckily for us there are a couple of free programs that will install and manage all this for us.

If you’re on a Windows computer, you’ll want to try out XAMPP.

If you’re running a Mac, you’ll want to download MAMP. It’s what I use and it does the trick.

Developing on a remote server

If you would prefer to develop on a remote server (such as at HostGator, Blue Host, etc), you’ll need to access your site with an FTP client. For more help with FTP, visit the WordPress Codex page on the subject: http://codex.wordpress.org/FTP_Clients

Don’t have an FTP client? You’ll need to install one. Here are some free possibilities:

CyberDuck – for Mac and Windows. FileZilla – This works on Macs, PCs and Linux. After you’ve downloaded and installed an FTP client, you need to connect to your website through it. Refer to your chosen client’s documentation to learn how to do this.

Once connected to your site, you’re ready to install WordPress!

WordPress
Of course, we’ll need to download the latest version of WordPress and get it correctly installed on your local test server.

If you’re using XAMPP, follow these instructions for installing WordPress on your local test server.

If you’re using MAMP, follow these instructions for installing WordPress on your local test server.

If you’re using a remote server, follow these instructions for uploading WordPress to a remote host.

Dummy Content
Your WordPress installation is going to need some sample, or dummy, content. Something to theme. In your WordPress admin, navigate to Tools > Import and choose WordPress from the list of options. Now we only need a WXR post data file to import.

There are a couple of options:

The Theme Unit Test data WPCandy Sample Content Each of these test data sets has their pluses and minuses. One thing I like to do is import all the dummy content I can. Everything. That way nothing gets missed. When you think you’re done with your theme, use the post navigation to browse through each post. Check out the archives for the month and year and category. With robust dummy content, it’ll be easy to see if something’s amiss.

Add some “real” content, too!

In addition to dummy content, it’s also a good idea to have real content. Actual, live content that’s not just “Lorem Ipsum” or “Little Blind Text” repeated over and over. Grab some of your real content — from your blog if you have one, or from a document on your computer — and create some posts out of them. Less predictable than the standard dummy fare, real content paints a far more accurate picture of how your theme will function in a live environment (for a related read, check out Don’t let Lorem Ipsum decide the fonts used in your WordPress Themes by our own Takashi Irie).

Development Guidelines
If you’re interested in developing with current best practices, the Theme Review Guidelines Codex page is a great place to start.

Essential plugins

You’ll want to grab a copy of the Developer Plugin, brought to you by Code Wranglers at Automattic. Upon activation, it’ll suggest a ton of additional plugins that you can install at the click of a button to help you optimize your WordPress development environment and test your WordPress themes for best coding practices. Check out our brief overview of the Developer Plugin for more information.

The Monster Widget, written by our very own Michael Fields, is another must-have plugin for theme developers. By dragging just one monster widget onto your sidebar, you can test all of the WordPress core widgets in your theme at once!

A Text Editor
You won’t need any special graphics software for creating WordPress Themes — just a plain old text editor. But some are better than others, of course.

For Windows, you can try Notepad++. It’s free and open-source, and comes recommended by Lifehacker.

For the Mac, I recommend Text Wrangler.

Firefox
Of course, you can use any browser for web development but the one I recommend is Firefox. Especially with the following 2 add-ons that will make your life a whole lot easier when it comes to developing with WordPress.

The Web Developer Add-on for Firefox adds a toolbar that gives you a whole host of options for inspecting and debugging your code, from disabling all CSS styles to validating local HTML (that’s the stuff happening on the browser screen of your test server).

The Firebug Add-on for Firefox is indispensable. With Firebug enabled, you can right-click on any element in your browser window and see—in a window at the bottom of the screen—how it looks in the source code. You’ll also be able to view every single style rule that is affecting that particular element. You can turn style rules off and on to see the effect. You can even add or modify rules and see the changes in real time.

Firefox versions 10 and higher have a built-in web inspector that, like Firebug, also lets you click on an element to view a window with the source code. This web inspector, while useful, does not fully replace the features and power of Firebug.

推荐使用FireFox调试, Chrome和Safari也可以。

Safari and Chrome
If Firefox is not your cup of tea, Safari and Google Chrome are worthy alternatives. Both contain built-in development tools similar to Firebug. You can read more about Safari’s web development tools here, and here is documentation about the development tools in Chrome.

HTML and CSS
I won’t lie, a passing familiarity with basic HTML and CSS will help you out. I recommend reading through the HTML Dog HTML Beginner Tutorial and the HTML Dog CSS Beginner Tutorial. To get up to speed on HTML 5, take a look at the Element Index from HTML5 Doctor. Reading through these tutorials is completely optional, but it won’t hurt and will help you grasp some basic concepts.

PHP

But what about PHP? Don’t you need to know PHP to create a WordPress Theme? Well, yes, you do. But I’ll be teaching you enough to be dangerous with a WordPress Theme as we go along. If you want to be a keener—always recommended—you can start reading through PHP 101: PHP for the Absolute Beginner. Again, completely optional. You’ll only need to pick up the basic concepts really.

WordPress 主题开发 - (三) 开发工具 待翻译的更多相关文章

  1. WordPress 主题开发 - (五)WordPress 主题模板及目录结构 待翻译

    While the most minimal of WordPress Themes really only need an index.php template and a style.css fi ...

  2. wordpress 主题开发

    https://yusi123.com/3205.html https://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tut ...

  3. WordPress 主题开发 - (一) 前言 待翻译

    原文出自: http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/ THE TH ...

  4. 决定如何开发你的WordPress主题框架

    在本系列教程的第一部分,我介绍了不同类型的主题框架并解释了它们是如何工作的. 在你开始建立你的主题框架之前,你需要考虑它是如何工作的,以及它将会被用来做什么,这样你才能从一开始就找到最合适的开发途径. ...

  5. 开发wordpress主题

    查看我的wordpress站点 第一步:下载wordpress安装包 官网下载==> 第二步:本地安装开发环境 官网给出的环境要求: 可以选择安装wamp/xampp集成PHP开发环境,安装很简 ...

  6. 从无到有开发自己的Wordpress博客主题---Wordpress主题的构造

    在这篇教程中,主要是对Wordpress的主题的构造进行分析,以方便今后的开发工作. 本来打算就引用一下别人已经有的文档就好了,但还是想从头到尾捋一遍,也方便自己梳理学习. 1.Wordpress主题 ...

  7. 大牛们是如何开发 WordPress 主题的?

    自己算是写过一个主题,目前也在用( 这里 -> http://udonmai.com/ ),所以多少想说两句. 当初走上web开发的路之后最想干的事情就是写个自己的WP主题...所以网上搜罗了很 ...

  8. WordPress 主题开发:从入门到精通(必读)

    本专栏介绍如何开发设计你自己的 WordPress 主题.如果你希望了解更多如何安装和应用主题的内容,请参阅应用主题文档.本文的内容不同于应用主题,因为所讨论的是编写代码去构建你自己的主题的技术内容, ...

  9. 黄聪:《跟黄聪学WordPress主题开发》

    又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...

随机推荐

  1. UIScrollView做循环图片

    #import "ViewController.h" #define IMAGE_COUNT 6 @interface ViewController () { UIImageVie ...

  2. nodejs的mysql模块学习(七)连接池事件

    连接池事件 connection 当建立连接的时候就会触发 pool.on('connection' function(connection){ connection.query('SET SESSI ...

  3. 【高德地图开发4】---增加覆盖物setMapTextZIndex

    高德地图 Android SDK 允许用户将添加的线.面等覆盖物设置在地图底图文字的上方或下方. 具体实现是使 用 AMap 类的 setMapTextZIndex() 方法来设置地图底图文字的z轴指 ...

  4. 利用Android手机里的摄像头进行拍照

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 1.在API Guides中找到Camera,里面讲解了如何使用系统自带的摄像头进行工作,之后我会试着翻 ...

  5. 友盟分享各平台URL设置

    首先,想要进项友盟分享,需要到各平台去申请ID和KEY 比如想进行微信分享,就到微信开发者平台去创建应用,拿到对应的id和appScreat,然后进行设置: 参考资料

  6. [转]div 让文字或图片居中

    本文转自:http://qsfwy.iteye.com/blog/250206 在div 中让 文字或图片居中,请参考以下代码1: - - - - - - - - - - - - - - - - - ...

  7. 转: Android入门及效率开发

    评注: android第三方开源框架介绍不错 转:https://segmentfault.com/a/1190000004495351 入门 Android官方培训课程中文版:http://huka ...

  8. hihocoder 1037 数字三角形

    #1037 : 数字三角形 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 问题描述 小Hi和小Ho在经历了螃蟹先生的任务之后被奖励了一次出国旅游的机会,于是他们来到了大洋彼岸 ...

  9. ASP.Net 验证控件 RegularExpressionValidator

    定义和用法 RegularExpressionValidator 控件用于验证输入值是否匹配指定的模式. 注释:除非浏览器不支持客户端验证或 EnableClientScript 属性被设置为 fal ...

  10. js中关于数据类型的转换

    * 一.转化为数字*/console.log(‘123123’*1.0); /* 二.从一个值中提取另一中类型的值,并完成转化工作 */console.log(parseInt(‘1233zxhag’ ...