When building a new custom theme from scratch, it's important to start out right. In this chapter, we're going to set up the core of the theme, including the theme metadata, functions, web fonts, and basic CSS to create a starting point for our design. I always like to start with the metadata to make my freshly downloaded version of underscores truly my own. Now you'll remember when we first created this new custom theme from underscores.me, I input some information in the form on underscores.me. And that information is now stored inside my theme.
To see it, I can go to the back end of WordPress, go to Appearance and Themes. Here I will find my custom theme, Popperscores, is currently active, and if I click on theme details, I get all that metainformation. Here I have the screenshot, which currently does not exist. We will add the screenshot at the very end of this course. And then we have the metainformation. It is the current theme, the name is Popperscores. It is currently version 1.0.0. Now this is the default version you get any time you download underscores.
The theme is created by me, Morten Rand-Hendriksen, and if I click on this link, I'll go to the Lynda page for all my courses. And there's a short description of the theme. This information is very rudimentary, and there is more information we can add to the theme and more information we need to augment once the theme goes live. So let me show you where all this information is stored. If this is the first time you're working with a WordPress theme, you may be surprised to know that theme details are actually stored in the style sheet. So if we go to our theme, Popperscores, and go to style.css, you'll see here at the very top, we have this metainformation, Theme Name: Popperscores, Author: Morten Rand-Hendricksen, Author URI, my URI, Description, and so on.
What you'll also see is that some of this information needs to be updated. The theme URI, for example, is currently pointing at underscores.me and that's because we had no fields to insert that information. Here I'm going to provisionally change it to lynda.com so it points to the course library, and later on, when I finish the theme and publish it on GitHub, I will change this again to point to the actual place where you can find the theme itself. The author information and author URI information is correct, so I'll move on to Description. Here I'm not going to put in a longer description right now.
I may do it later, but I just want to point out, that this description field allows you to put in HTML. So you can put in block quotes or links or whatever you want in this field. Just remember to mark up your HTML properly. The version number from underscores is always 1.0.0. And for a new theme, I don't think that makes any sense, so I'm going to change it to 0.0.1 and then we'll update it as we go along. WordPress is published under the GPL, or General Public License, and a part of the GPL states that any code that is a derivative off the original works, that would be a derivative off WordPress, so in our case a theme, automatically inherits the same license.
Here you can see that the license is specified in the theme, and there is also a URI to the license, in case a user of the theme wants to get more information. That leaves us with these two last items: Text Domain and Tags. The Text Domain is relevant to our course, in that you'll see me use it throughout the course any time I place text strings into my themes. So anytime I want specific text to display in my theme, I will always append the text domain to it using a translation function. This is so that the theme is internationalized, meaning that someone can apply a translation to the entire theme and create custom translations.
That way, if someone installs say, a Norwegian version of WordPress on their own site, and want to use a Norwegian version of my custom theme, they can simply create a new translation file that hooks into this text domain and automatically translates all the strings. I'll explain this further when we get to text strings that need to be translated, but just keep in mind that the text domain in our theme is the same as the folder name for the theme, Popperscores. The last item here is Tags, and this only pertains to themes that are going to be published in the WordPress theme directory on wordpress.org.
When you publish a theme on wordpress.org, you need to describe that theme using tags like accessibility-ready, or left-aligned, or two columns, or white, or black, or blue, and things like that. Now these tags are restricted, and they're only used on wordpress.org's theme directory. So if you don't plan on publishing your theme there, there's no point filling in tags. That's all the information you need for the metadata. This next section here just describes what the theme is, the fact that it comes from underscores.me, and that we are normalizing styles using code created by Nicolas Gallagher and Jonathan Neal.
Now before we move on, let me just quickly draw your attention to the table of contents. You see, the styles in underscores are very sparse, and they're laid out in a very logical way so they're easy to work with. And as we work through the course, we'll be adding more content to the style sheet, and therefore more content to the table of contents. The table of contents makes it easy to navigate through the style sheet. And here you can see that everything is laid out in a nice and logical way. I want to draw your attention to three specific things within the style sheet and show you how to navigate it using this table of contents.
The first thing is Elements. So if we search for Elements, you'll see we first get the hit on table of contents, and when you click next, you'll go to Elements themselves. Here you can see that both the HTML wrapper and all content within your page has box-sizing set to border-box. That means any time you're adding padding or borders to any content using CSS, the container itself does not grow. Instead, the space for the contents within the container shrinks.
This is a setting that overrides the default setting in most browsers, and it's a common thing to do on websites these days. However, if you're used to working the other way and you want to get rid of it, this is where you would do that. Next is accessibility. Accessibility is one of the core tendons of the web, and any time you build a website it needs to be fully accessible. The theme we're going to build in this course will be fully accessible and meet all the WordPress accessibility standards. And I just want to draw your attention to this particular class here, called screen-reader-text.
This is a class that's required in all WordPress themes, and it allows the theme developer to quickly hide text from visual browsers, so a browser that you would see on a screen. That way, you can put text into the theme that is only available if you are using a text-to-speech browser, or some other form of communication. That way you can create a button that just has an arrow, but if you use a screen reader, it would read out the actual button name and so on. So anytime we're hiding text in this course, we'll be using this screen-reader-text class.
And you'll see that happen several times. Finally, take a look at Alignments. These are the classes that are used to left, center, or right align images in WordPress. And we're also going to use these same classes to align block quotes later on in the course. It's important to know that these already exist, and know that they have a standardized format. Because when you go and look at your theme unit test data, you'll notice that even though the theme overall is not styled, there are some things that have styles and those include image alignments.
And here you'll find those styles. Before we continue, I want you to open style.css, make the changes to the metainformation to fit with your custom theme, and also take a look at the table of contents and the styles that are in style.css right now. That way you'll have a better understanding of how the style sheet is structured before we continue.
Không có nhận xét nào:
Đăng nhận xét