studio
4cfcf09a97
Sources: video-subtitle-pipeline artifacts/beginner-wordpress-user/ - subtitles/: en, zh, bilingual SRT/ASS (100 files) - platform/: youtube SRT + bilibili BCC per video (75 files) - manifests/: per-video manifest.json (25 files) - quality/: quality reports (50 files)
319 lines
8.1 KiB
Text
319 lines
8.1 KiB
Text
1
|
|
00:00:00,000 --> 00:00:05,000
|
|
In this lesson, we will take a closer look at using template parts.
|
|
|
|
2
|
|
00:00:05,000 --> 00:00:11,889
|
|
By the end of this tutorial, you'll be able to describe what template parts are, and how they work,
|
|
|
|
3
|
|
00:00:11,889 --> 00:00:17,000
|
|
edit a template part, and replace a template part on a template.
|
|
|
|
4
|
|
00:00:17,000 --> 00:00:24,000
|
|
If you visit a well-designed website, you'll notice that one of its strengths is its consistency.
|
|
|
|
5
|
|
00:00:24,000 --> 00:00:29,909
|
|
Its headers, footers, and sidebars often have the same or very similar content
|
|
|
|
6
|
|
00:00:29,909 --> 00:00:37,000
|
|
to make it easy for viewers to find the information they are looking for, no matter where they are on a website.
|
|
|
|
7
|
|
00:00:37,000 --> 00:00:45,000
|
|
To get this effect, do web designers have to build their headers, footers, and sidebars from scratch on every page in their website?
|
|
|
|
8
|
|
00:00:45,000 --> 00:00:53,000
|
|
The short answer is no. With WordPress block themes, you will use a feature known as template parts.
|
|
|
|
9
|
|
00:00:53,000 --> 00:00:56,000
|
|
Firstly, what are template parts?
|
|
|
|
10
|
|
00:00:56,000 --> 00:01:03,179
|
|
Template parts are groups of blocks that you can use to create repeated parts of your template,
|
|
|
|
11
|
|
00:01:03,179 --> 00:01:06,000
|
|
like the header, footer, and a sidebar.
|
|
|
|
12
|
|
00:01:06,000 --> 00:01:11,600
|
|
Let's see this in action when you're in your WordPress dashboard,
|
|
|
|
13
|
|
00:01:11,600 --> 00:01:14,000
|
|
make your way to appearance, and then click on editor.
|
|
|
|
14
|
|
00:01:14,000 --> 00:01:19,128
|
|
This will take us to the site editor, and then we'll open up one of our templates,
|
|
|
|
15
|
|
00:01:19,128 --> 00:01:22,000
|
|
in this case the blog home template.
|
|
|
|
16
|
|
00:01:22,000 --> 00:01:29,000
|
|
And within a template, we create and modify our header and footer template parts.
|
|
|
|
17
|
|
00:01:29,000 --> 00:01:35,692
|
|
Some block themes provide more or fewer options, but almost all come pre-packaged with the header and footer
|
|
|
|
18
|
|
00:01:35,692 --> 00:01:41,000
|
|
like you see here as part of the 2024 theme.
|
|
|
|
19
|
|
00:01:41,000 --> 00:01:45,773
|
|
WordPress has made it even more simple by providing header and footer patterns
|
|
|
|
20
|
|
00:01:45,773 --> 00:01:48,000
|
|
that are ready to be used and modified.
|
|
|
|
21
|
|
00:01:48,000 --> 00:01:55,000
|
|
So when you click on the three vertical dots of the header template part and select replace header,
|
|
|
|
22
|
|
00:01:55,000 --> 00:01:59,000
|
|
you will notice at the top existing template parts.
|
|
|
|
23
|
|
00:01:59,000 --> 00:02:03,000
|
|
And these are template parts that I've already created.
|
|
|
|
24
|
|
00:02:03,000 --> 00:02:08,000
|
|
And then below that, we will find header template part patterns.
|
|
|
|
25
|
|
00:02:08,000 --> 00:02:10,640
|
|
And now of course, you will be able to select
|
|
|
|
26
|
|
00:02:10,640 --> 00:02:14,000
|
|
any of these patterns that come with your theme.
|
|
|
|
27
|
|
00:02:14,000 --> 00:02:19,000
|
|
And as mentioned, some themes might provide more, some less.
|
|
|
|
28
|
|
00:02:19,000 --> 00:02:24,000
|
|
And this works exactly the same for footers.
|
|
|
|
29
|
|
00:02:24,000 --> 00:02:27,000
|
|
Let's start by editing a header template part.
|
|
|
|
30
|
|
00:02:27,000 --> 00:02:30,068
|
|
When you click on edit in the blog toolbar,
|
|
|
|
31
|
|
00:02:30,068 --> 00:02:36,000
|
|
you can work on your header template part in editing mode without any other distractions.
|
|
|
|
32
|
|
00:02:36,000 --> 00:02:39,000
|
|
Firstly, let's open our list view.
|
|
|
|
33
|
|
00:02:39,000 --> 00:02:45,000
|
|
And then I'll go ahead and add my site logo to my header template part.
|
|
|
|
34
|
|
00:02:45,000 --> 00:02:48,857
|
|
So once I select the site logo block,
|
|
|
|
35
|
|
00:02:48,857 --> 00:02:54,000
|
|
I can upload an image from my media library or from my computer.
|
|
|
|
36
|
|
00:02:54,000 --> 00:03:02,000
|
|
Next, I'll select the site title block and add the site title for this website.
|
|
|
|
37
|
|
00:03:02,000 --> 00:03:09,000
|
|
Then I will save my header template part and return to my blog home template.
|
|
|
|
38
|
|
00:03:09,000 --> 00:03:16,000
|
|
Just a reminder, template parts are synced and will update everywhere it has been used.
|
|
|
|
39
|
|
00:03:16,000 --> 00:03:22,000
|
|
You will notice that the color purple indicates when a pattern is synced.
|
|
|
|
40
|
|
00:03:22,000 --> 00:03:26,000
|
|
Let's go to one of our other templates to see this in practice.
|
|
|
|
41
|
|
00:03:26,000 --> 00:03:29,200
|
|
So when we open our page template for example,
|
|
|
|
42
|
|
00:03:29,200 --> 00:03:32,000
|
|
we'll see the header is exactly the same.
|
|
|
|
43
|
|
00:03:32,000 --> 00:03:39,381
|
|
Or when we open up our 404 template, we'll see that the changes have also applied here
|
|
|
|
44
|
|
00:03:39,381 --> 00:03:42,000
|
|
because template parts are synced.
|
|
|
|
45
|
|
00:03:42,000 --> 00:03:45,871
|
|
What if you wanted a different header on say your home page for example,
|
|
|
|
46
|
|
00:03:45,871 --> 00:03:50,000
|
|
but you would like the rest of your website to have a standard header.
|
|
|
|
47
|
|
00:03:50,000 --> 00:03:56,519
|
|
In this case, you would want to create a new header template part or replace the header with a pattern
|
|
|
|
48
|
|
00:03:56,519 --> 00:04:01,000
|
|
and add it to your blog home template or your front page template.
|
|
|
|
49
|
|
00:04:01,000 --> 00:04:04,250
|
|
I'm going to modify my blog home template
|
|
|
|
50
|
|
00:04:04,250 --> 00:04:09,000
|
|
as I've selected my posts page as my home page display.
|
|
|
|
51
|
|
00:04:09,000 --> 00:04:12,800
|
|
So I will make sure I select my header, click on the three vertical dots
|
|
|
|
52
|
|
00:04:12,800 --> 00:04:15,000
|
|
and then select replace header.
|
|
|
|
53
|
|
00:04:15,000 --> 00:04:21,000
|
|
And now you can replace your home page header by using a pattern or an existing template part.
|
|
|
|
54
|
|
00:04:21,000 --> 00:04:30,000
|
|
I will replace the header with an existing header template part which I've already created called banner header.
|
|
|
|
55
|
|
00:04:30,000 --> 00:04:35,000
|
|
And now my home page will have its own unique header.
|
|
|
|
56
|
|
00:04:35,000 --> 00:04:42,941
|
|
And once I've saved, we can view our other templates
|
|
|
|
57
|
|
00:04:42,941 --> 00:04:50,000
|
|
to double check that they still have the standard header in place.
|
|
|
|
58
|
|
00:04:50,000 --> 00:04:55,000
|
|
Lastly, let's talk about creating a template part from scratch.
|
|
|
|
59
|
|
00:04:55,000 --> 00:05:03,000
|
|
Make your way to patterns and then scroll down to template parts.
|
|
|
|
60
|
|
00:05:03,000 --> 00:05:11,000
|
|
Here you can view all your existing headers, footers and general template parts.
|
|
|
|
61
|
|
00:05:11,000 --> 00:05:17,286
|
|
To create a new template part, click on the plus icon next to patterns
|
|
|
|
62
|
|
00:05:17,286 --> 00:05:21,000
|
|
and then select create template part.
|
|
|
|
63
|
|
00:05:21,000 --> 00:05:27,170
|
|
And from here, you can select a general template part which is not tied to any particular area,
|
|
|
|
64
|
|
00:05:27,170 --> 00:05:31,000
|
|
a header template part or a footer template part.
|
|
|
|
65
|
|
00:05:31,000 --> 00:05:35,000
|
|
In this case, we are going to create a footer template part.
|
|
|
|
66
|
|
00:05:35,000 --> 00:05:40,385
|
|
So firstly, we need to name it appropriately, in this case, a four column footer
|
|
|
|
67
|
|
00:05:40,385 --> 00:05:44,908
|
|
and then we can click create and this will take us into focus mode again
|
|
|
|
68
|
|
00:05:44,908 --> 00:05:49,000
|
|
and from here, we can start building from scratch.
|
|
|
|
69
|
|
00:05:49,000 --> 00:05:54,000
|
|
I'm going to take a shortcut and actually grab a pattern from the patterns directory.
|
|
|
|
70
|
|
00:05:54,000 --> 00:06:01,440
|
|
So make your way to WordPress.org, click on extend and select patterns
|
|
|
|
71
|
|
00:06:01,440 --> 00:06:06,000
|
|
and from here, you can select from thousands of patterns.
|
|
|
|
72
|
|
00:06:06,000 --> 00:06:16,000
|
|
I will select community contributions, click on footers and then you can search for the right pattern.
|
|
|
|
73
|
|
00:06:16,000 --> 00:06:25,000
|
|
Once you find a pattern that appeals to you, you can copy the pattern, return to your website and paste
|
|
|
|
74
|
|
00:06:25,000 --> 00:06:31,000
|
|
and now you can start modifying it to meet your needs.
|
|
|
|
75
|
|
00:06:31,000 --> 00:06:35,333
|
|
And once updated, we can return to the patterns area
|
|
|
|
76
|
|
00:06:35,333 --> 00:06:40,533
|
|
and you will notice that your new footer is part of your existing template parts
|
|
|
|
77
|
|
00:06:40,533 --> 00:06:44,000
|
|
and you can add it to any template.
|
|
|
|
78
|
|
00:06:44,000 --> 00:06:52,727
|
|
When you select manage all template parts, you will be able to rename and delete custom template parts
|
|
|
|
79
|
|
00:06:52,727 --> 00:06:59,000
|
|
or clear the customizations of template parts that were provided by your theme.
|
|
|
|
80
|
|
00:06:59,000 --> 00:07:06,000
|
|
I trust you now feel comfortable editing your templates and creating a header and footer for your site.
|
