This tutorial is written for children's shoes who want to personalize the Wordpress theme but are struggling to get started.
When I first came into contact with Wordpress children's shoes, I may be very interested in a variety of Wordpress themes. I have tried to find my favorite among thousands of different themes, but I will eventually find that almost no theme can fully meet my own heart. What should I do? I can only change it by myself, but I have no knowledge of web page production, so I can only sigh with admiration, or ask people everywhere, and often run into difficulties everywhere. Here is a brief introduction to the basic knowledge of Wordpress template modification and the required tools and skills, hoping to serve as an introduction for novices.
In fact, the modification and production of the theme is not as complicated as expected, except that you need to create a world shaking Wordpress theme.
First, let's talk about the knowledge needed to modify the Wordpress template. Most Wordpress functions can be used in WP Official Codex It can also be said that it is fixed. It does not require in-depth study. It is OK to know where a function begins and ends. It is unnecessary to make mistakes when modifying the theme. The key is to master DIV+CSS. There are a lot of online tutorials. It is enough to learn the principles of modifying Wordpress templates roughly, that is, a few sentences of attribute writing. Because I am still learning, there is no ugliness here, so I can find a tutorial for you.
A complete set of WordPress templates shall at least include the following documents:
- Style.css: style sheet file
- Index.php: homepage template
- Archive.php: article archive/category directory template
- 404.php: 404 template
- Comments. php: message/reply template
- Footer.php: bottom template
- Header.php: top template
- Sidebar.php: sidebar template
- Page.php: page template
- Single.php: article page template
- Functions. php: template functions
- Search.php: search results template
Of course, there may be more than these files for some themes. For example, there are hundreds of HotNews Pro theme template files, but the above files are necessary for each set of templates.
Knowing the function of the above template can let you know which corresponding template should be modified on the current page.
Here is the key point of this article: If you want to do a good job, you must first sharpen your tools!
When many people think of web page creation tools, they will think of Dreamweaver (DW for short) in the "Three Swordsmen of Web Pages", which is called "WYSIWYG". That means that it was popular to use Table tables to create web pages. Now it is the era of DIV+CSS, and WYSIWYG advantages are no longer available. This DW is almost useless (I think). In addition, Adobe GoLive was the most commonly used web production tool in foreign countries. Due to the late launch of the Chinese version, DW became popular in China. The large-scale software for DIV+CSS web production was also the first to launch Adobe GoLive. However, the development of this software has stopped, unfortunately. Today's recommended tools are not these two expensive and bulky software. Modifying and creating Wordpress themes does not require any professional software at all, but it is not like some people boast that you can write themes with the system's own notepad.
First of all, you need to build a local PHP test environment to facilitate the modification of the template. Of course, you can also modify it in the Wordpress background theme editing page. It is OK to use it temporarily, but it is not suitable for situations with many modifications. There are many online tutorials on how to set up a local test environment, which will not be detailed here. It is recommended to use Wamp or phpStudy to search for it yourself.
Prerequisite tool software:
■ text editor
EmEditor (charging software), EditPlus (charging software), Notepad++(free)
The first two are paid software, and the latter is free and has very good functions, which is suitable for novices. You must not edit template files, especially Chinese templates, with the system's own notepad, or else the template will be borrowed. The Chinese template code is UTF-8 without BOM.
■ Firefox
Some people will ask, why use Firefox, the Internet Explorer that comes with the system, to browse the website? Of course, we don't use Firefox to browse the website, but use its powerful expansion ability to guide us.
When we want to modify the style and structure of a certain part, we will directly open the Wordpress theme template file or edit the theme in the background. The dense code will make the theme author dizzy after reading it, so we will often add some comments on key parts,
Comments in php are generally: <!-- XXX -->
In css: /** XXX **/
But some annotations may only be known by the author himself. Therefore, it is difficult to find the part to be modified in the open template file. At this time, we will use Firefox extension: Firebug， Download address
IE browser also has a similar plug-in, but its function cannot be compared with that of Firefox extension. Some browsers integrate this function, such as Opera, which seems to be equally powerful.
Specific operation method
If you have installed Firefox and added Firebug extensions, you can continue to see how to modify the Wordpress theme.
■ Modify the text size of page elements
Take modifying the layout of HotNews Pro theme CMS and the text size of the latest article title as an example:
Mouse over the title of the latest article, right click to call up the menu and select "Use Firebug" to view the elements (as shown in the figure)
Then the Firebug window will be called up at the bottom of Firefox browser by default. The HTML structure of the current web page element is displayed on the left, and the style attribute of the current element selector, the file and the number of lines (as shown in the figure) are displayed on the right, in line 277 of the style.css file.
Using the text editing software described above, open the theme style.css file and find it on line 277:
- #post h3 {
- font-size : 13px ;
- font-weight : bold ;
- }
Modify the number 13 to the size you think is appropriate.
If there is no style in the current element selector Control font size font-size : 13px ; Attribute, but the global font size setting, which can be added separately font-size : 13px ; attribute
After looking at the above example, is it very simple? To modify the theme style, the key is to find the location where you need to modify the element selector name and style attribute.
I also use the same method to modify the theme template. Without Firebug extension, it is not easy to modify my own template.
■ How to determine the whole code of a certain web page element (module) for easy location adjustment.
Take HotNews Pro theme navigation menu moving to LOGO as an example:
First, use the above method to determine that the name of the outermost selector in the navigation menu is: top
Then, use the Notepad++text editor to open the template header.php at the top of the theme, search for the top location, and click the selector with the mouse. It will be found that Notepad++has clearly marked the beginning and end of the code for us (as shown in the figure):
The following is simple. Use the same method to find the end position of the outermost selector of the element under the navigation menu and move the code here.
The above are the basic methods and steps to modify the template. The so-called experts basically toss the template in this way. If you spend a day or two learning DIV+CSS, you will be more handy.
Another good extension is: Web Developer , we won't introduce it here. Please study it yourself.
Here's a reminder: it's not easy to make a theme. The author has spent countless hours and nights working hard for this. Please respect the author's hard work. Please keep the copyright link of the author when modifying the theme template. Don't be a shameless person who makes everyone BS.
Postscript: This blog was actually written at the beginning of last year, but I forgot to publish it. Today, I found it after background cleaning. I hope it will help you.
