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. 自定义带有uitableview的alertview对话框

    #import <UIKit/UIKit.h> typedef void(^MyCompleteHandler) (NSString *selectString); @interface ...

  2. 【python,threading】python多线程

    使用多线程的方式 1.  函数式:使用threading模块threading.Thread(e.g target name parameters) import time,threading def ...

  3. Android中“再按一次返回键退出程序”实现

    private long exitTime = 0; @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyC ...

  4. Java学习笔记——显示当前日期的三种方式

    一.Date类:这是一种过时的表达方式 import java.util.Date; Date date = new Date(); System.out.println((1900+date.get ...

  5. oracle PL/SQL(procedure language/SQL)程序设计(续集)之PL/SQL函数

    PL/SQL函数 examples:“ 构造一个邮件地址 v_mailing_address := v_name||CHR(10)||                                 ...

  6. 【转】ConcurrentHashMap完全解析(JDK6/7、JDK8)

    转自http://my.oschina.net/hosee/blog/675884 并发编程实践中,ConcurrentHashMap是一个经常被使用的数据结构,相比于Hashtable以及Colle ...

  7. C#基础回顾以及if语句

    一.输入和输出Console.Write("字符串")Console.WriteLine("字符串")string s = Console.ReadLine() ...

  8. 【CSS3】---属性选择器

    在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新 ...

  9. 深入浅出ExtJS 第三章 表格控件

    3.1 表格的特性简介 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能; >.表格由类Ext.grid.GridPanel定义,继承自 ...

  10. Android ViewPager的简单实现

    研究了两天ViewPager,看了几篇网上的帖子,但总的来说看得一头雾水,理不清头绪,偶然发现了一篇简单易懂的帖子,讲的调理比较清晰,原文链接附在文后.   在本例中使用ViewPager + Fra ...