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)
399 lines
9.6 KiB
Text
399 lines
9.6 KiB
Text
1
|
|
00:00:00,000 --> 00:00:04,050
|
|
In this lesson, we are going to apply what we've learned thus far,
|
|
|
|
2
|
|
00:00:04,050 --> 00:00:09,000
|
|
by setting up our pages, posts, site logo and navigation menu.
|
|
|
|
3
|
|
00:00:11,000 --> 00:00:13,000
|
|
First up, let's create our pages.
|
|
|
|
4
|
|
00:00:13,000 --> 00:00:17,000
|
|
I'll make my way to pages, click on add new page.
|
|
|
|
5
|
|
00:00:17,000 --> 00:00:21,421
|
|
And then once I do that, I will be able to add or select a pattern
|
|
|
|
6
|
|
00:00:21,421 --> 00:00:24,000
|
|
that comes with my theme.
|
|
|
|
7
|
|
00:00:24,000 --> 00:00:26,000
|
|
And I'm using the 2024 default theme.
|
|
|
|
8
|
|
00:00:26,000 --> 00:00:31,000
|
|
So I'll go ahead and select a pattern that appeals to me.
|
|
|
|
9
|
|
00:00:31,000 --> 00:00:34,000
|
|
And name it home.
|
|
|
|
10
|
|
00:00:34,000 --> 00:00:41,000
|
|
After publishing, I'll make my way back to pages and add my next page.
|
|
|
|
11
|
|
00:00:41,000 --> 00:00:46,000
|
|
This time, I'm not going to choose a pattern and I'll name this page blog.
|
|
|
|
12
|
|
00:00:48,000 --> 00:00:53,000
|
|
Next, I'm going to create an about page and select the relevant pattern.
|
|
|
|
13
|
|
00:00:57,000 --> 00:01:03,000
|
|
And lastly, I will also create a contact page without choosing a pattern.
|
|
|
|
14
|
|
00:01:07,000 --> 00:01:09,000
|
|
Now I have my pages in place.
|
|
|
|
15
|
|
00:01:10,000 --> 00:01:15,000
|
|
So next, I'm going to make my way to settings and click on reading.
|
|
|
|
16
|
|
00:01:16,000 --> 00:01:21,000
|
|
And for my homepage display, I will select a static page
|
|
|
|
17
|
|
00:01:21,000 --> 00:01:25,000
|
|
and set my home page as my static home page.
|
|
|
|
18
|
|
00:01:27,000 --> 00:01:30,000
|
|
And my blog page as my posts page.
|
|
|
|
19
|
|
00:01:31,000 --> 00:01:36,887
|
|
Just a reminder, if you have selected your latest posts for your homepage display,
|
|
|
|
20
|
|
00:01:36,887 --> 00:01:44,000
|
|
you will modify the blog home template for this homepage or front page, as no page has been created.
|
|
|
|
21
|
|
00:01:45,000 --> 00:01:51,417
|
|
Please note, when we open up our static homepage and open the settings sidebar,
|
|
|
|
22
|
|
00:01:51,417 --> 00:01:59,000
|
|
we will notice that this page has been assigned to the page template or the default page template.
|
|
|
|
23
|
|
00:02:01,000 --> 00:02:06,091
|
|
And my blog page or posts page has been assigned to the blog home template
|
|
|
|
24
|
|
00:02:06,091 --> 00:02:08,000
|
|
and this cannot be changed.
|
|
|
|
25
|
|
00:02:10,000 --> 00:02:17,200
|
|
And then we'll also notice that my other pages have also been assigned to the general or default page template,
|
|
|
|
26
|
|
00:02:17,200 --> 00:02:19,000
|
|
the same as my home page.
|
|
|
|
27
|
|
00:02:23,000 --> 00:02:30,558
|
|
Next, let's shift our attention to posts and as you will notice,
|
|
|
|
28
|
|
00:02:30,558 --> 00:02:36,000
|
|
I've already created two posts as well as categories and tags.
|
|
|
|
29
|
|
00:02:37,000 --> 00:02:41,929
|
|
Just a reminder, categories are used to classify content into main topics or sections
|
|
|
|
30
|
|
00:02:41,929 --> 00:02:46,000
|
|
and tags are like labels that give specific details about content.
|
|
|
|
31
|
|
00:02:48,000 --> 00:02:52,815
|
|
As an example, I'm going to go ahead and add a new post.
|
|
|
|
32
|
|
00:02:52,815 --> 00:02:58,000
|
|
The post is about New York and then I will add some dummy content.
|
|
|
|
33
|
|
00:02:59,000 --> 00:03:05,000
|
|
Thereafter, I will open up the settings sidebar and select the relevant category.
|
|
|
|
34
|
|
00:03:06,000 --> 00:03:07,000
|
|
In this case, travel.
|
|
|
|
35
|
|
00:03:11,000 --> 00:03:14,000
|
|
And I will add a new tag, namely city.
|
|
|
|
36
|
|
00:03:16,000 --> 00:03:19,000
|
|
Lastly, I will set the featured image or the post thumbnail.
|
|
|
|
37
|
|
00:03:20,000 --> 00:03:23,000
|
|
The featured image is of course the representative image for your post.
|
|
|
|
38
|
|
00:03:25,000 --> 00:03:31,905
|
|
And once set, we can hit publish and then view our three posts
|
|
|
|
39
|
|
00:03:31,905 --> 00:03:35,000
|
|
with their relevant categories and tags.
|
|
|
|
40
|
|
00:03:37,000 --> 00:03:41,645
|
|
Next, let's take a closer look at the navigation menu and make our way to appearance
|
|
|
|
41
|
|
00:03:41,645 --> 00:03:43,000
|
|
and then click on editor.
|
|
|
|
42
|
|
00:03:44,000 --> 00:03:46,000
|
|
This will open up the site editor.
|
|
|
|
43
|
|
00:03:47,000 --> 00:03:50,261
|
|
And on the right, we will notice our homepage
|
|
|
|
44
|
|
00:03:50,261 --> 00:03:57,000
|
|
and if we open up our homepage, we will see the dummy content or the pattern that we added when we created the page.
|
|
|
|
45
|
|
00:03:58,000 --> 00:04:02,000
|
|
And at the top, we see the header pattern provided by our theme.
|
|
|
|
46
|
|
00:04:03,000 --> 00:04:06,231
|
|
And if we try to edit this header, we will see a message
|
|
|
|
47
|
|
00:04:06,231 --> 00:04:09,000
|
|
that says edit your template to edit this block.
|
|
|
|
48
|
|
00:04:10,000 --> 00:04:12,000
|
|
So let's go ahead and click on edit template.
|
|
|
|
49
|
|
00:04:13,000 --> 00:04:16,000
|
|
And now we can edit the header for the page template.
|
|
|
|
50
|
|
00:04:17,000 --> 00:04:20,000
|
|
Please note this header will also be found on the blog home template.
|
|
|
|
51
|
|
00:04:21,000 --> 00:04:25,800
|
|
So if we make any changes to this header in the page template,
|
|
|
|
52
|
|
00:04:25,800 --> 00:04:29,000
|
|
it will also automatically update in the blog home template.
|
|
|
|
53
|
|
00:04:30,000 --> 00:04:32,000
|
|
As we can see, we have our navigation menu top right.
|
|
|
|
54
|
|
00:04:33,000 --> 00:04:39,000
|
|
And the great thing is this navigation menu was added automatically when we created our pages.
|
|
|
|
55
|
|
00:04:40,000 --> 00:04:44,154
|
|
When we select our navigation menu and open up the list view,
|
|
|
|
56
|
|
00:04:44,154 --> 00:04:49,000
|
|
we will notice that the navigation items are still part of a page list.
|
|
|
|
57
|
|
00:04:50,000 --> 00:04:54,524
|
|
So to change this, click on edit in your settings sidebar
|
|
|
|
58
|
|
00:04:54,524 --> 00:05:00,000
|
|
to detach the page list so that you can manage navigation items individually.
|
|
|
|
59
|
|
00:05:01,000 --> 00:05:06,600
|
|
Once detached, you can use the list view to reorder navigation items.
|
|
|
|
60
|
|
00:05:06,600 --> 00:05:15,000
|
|
Or you can use the arrows of the navigation block toolbar to reposition items where you want them.
|
|
|
|
61
|
|
00:05:16,000 --> 00:05:21,000
|
|
Next, I've decided to add social links to my navigation menu.
|
|
|
|
62
|
|
00:05:22,000 --> 00:05:25,477
|
|
So when I click on the insert of the navigation block,
|
|
|
|
63
|
|
00:05:25,477 --> 00:05:31,000
|
|
I will insert a social icons block and then select the relevant social media platforms.
|
|
|
|
64
|
|
00:05:31,000 --> 00:05:35,000
|
|
In this case, X and Instagram.
|
|
|
|
65
|
|
00:05:36,000 --> 00:05:39,000
|
|
And don't forget to add the relevant URLs.
|
|
|
|
66
|
|
00:05:43,000 --> 00:05:48,778
|
|
When you select the navigation block, you can click on the three vertical dots in your settings sidebar
|
|
|
|
67
|
|
00:05:48,778 --> 00:05:53,000
|
|
to create a new menu or select one of your existing menus.
|
|
|
|
68
|
|
00:05:54,000 --> 00:05:59,897
|
|
When you select settings, you will be able to change the justification or alignment
|
|
|
|
69
|
|
00:05:59,897 --> 00:06:03,000
|
|
as well as the orientation of your navigation menu.
|
|
|
|
70
|
|
00:06:04,000 --> 00:06:06,919
|
|
Below that, you can also select a hamburger menu
|
|
|
|
71
|
|
00:06:06,919 --> 00:06:10,000
|
|
that will appear when your site is viewed on a smaller device.
|
|
|
|
72
|
|
00:06:11,000 --> 00:06:16,000
|
|
When you click on styles, you have a variety of options to style your navigation menu further.
|
|
|
|
73
|
|
00:06:17,000 --> 00:06:20,000
|
|
Next, let's talk about the site logo block.
|
|
|
|
74
|
|
00:06:21,000 --> 00:06:26,000
|
|
As you will notice, the header pattern that was provided by my theme includes a site logo block.
|
|
|
|
75
|
|
00:06:27,000 --> 00:06:30,706
|
|
Click on the site logo block to add a new image from your media library
|
|
|
|
76
|
|
00:06:30,706 --> 00:06:33,000
|
|
or to upload one directly from your computer.
|
|
|
|
77
|
|
00:06:34,000 --> 00:06:38,000
|
|
I will go ahead and upload a logo that I've already added to my desktop.
|
|
|
|
78
|
|
00:06:40,000 --> 00:06:43,000
|
|
And then I will enlarge it slightly.
|
|
|
|
79
|
|
00:06:44,000 --> 00:06:49,000
|
|
Next, I would also like to add my navigation menu to my footer.
|
|
|
|
80
|
|
00:06:50,000 --> 00:06:56,200
|
|
So when we scroll down, we will notice that there are some dummy content below Quick Links,
|
|
|
|
81
|
|
00:06:56,200 --> 00:07:00,000
|
|
which was part of my default footer pattern that came with my theme.
|
|
|
|
82
|
|
00:07:01,000 --> 00:07:05,354
|
|
So when I open the list view and select the navigation block,
|
|
|
|
83
|
|
00:07:05,354 --> 00:07:12,000
|
|
I can click on the three vertical dots in my settings sidebar and then select the relevant navigation menu.
|
|
|
|
84
|
|
00:07:14,000 --> 00:07:19,000
|
|
Now my navigation menus are in place in my header and footer.
|
|
|
|
85
|
|
00:07:20,000 --> 00:07:24,800
|
|
And as mentioned before, if we make our way to the blog home template,
|
|
|
|
86
|
|
00:07:24,800 --> 00:07:32,000
|
|
which is the template for my posts page, we will see that the header and the footer are the same.
|
|
|
|
87
|
|
00:07:35,000 --> 00:07:37,690
|
|
Once we have all these elements in place,
|
|
|
|
88
|
|
00:07:37,690 --> 00:07:41,000
|
|
we want to decide on an overall style for our website.
|
|
|
|
89
|
|
00:07:42,000 --> 00:07:45,355
|
|
So when we make our way to styles,
|
|
|
|
90
|
|
00:07:45,355 --> 00:07:50,000
|
|
you can customize the typography, colors and layout of your site.
|
|
|
|
91
|
|
00:07:51,000 --> 00:07:54,000
|
|
Or if you click on browse styles,
|
|
|
|
92
|
|
00:07:54,000 --> 00:08:00,000
|
|
you'll be able to see a zoomed out view of all the different style combinations that come with your theme.
|
|
|
|
93
|
|
00:08:05,000 --> 00:08:08,000
|
|
I will go ahead and select the rust style as an example.
|
|
|
|
94
|
|
00:08:12,000 --> 00:08:20,351
|
|
Now that we have our pages, posts, navigation menu, site logo and style in place,
|
|
|
|
95
|
|
00:08:20,351 --> 00:08:29,000
|
|
we can go ahead and start adding content to our pages and modifying some of the patterns that we've added.
|
|
|
|
96
|
|
00:08:31,000 --> 00:08:37,000
|
|
And for a page like our contact page with no pattern, we can start building from scratch.
|
|
|
|
97
|
|
00:08:38,000 --> 00:08:42,286
|
|
And to modify how we want our posts to be displayed,
|
|
|
|
98
|
|
00:08:42,286 --> 00:08:46,000
|
|
we need to make our way to the blog home template.
|
|
|
|
99
|
|
00:08:48,000 --> 00:08:51,130
|
|
And when we open up our blog home template,
|
|
|
|
100
|
|
00:08:51,130 --> 00:09:01,000
|
|
we can customize our blog page as well as the query loop block to decide how we want our blog posts or dynamic content to be displayed.
|
