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)
507 lines
12 KiB
Text
507 lines
12 KiB
Text
1
|
|
00:00:00,000 --> 00:00:04,800
|
|
In today's session, we will discuss choosing and installing the right theme for you.
|
|
|
|
2
|
|
00:00:05,800 --> 00:00:08,500
|
|
Here are the learning objectives for this workshop.
|
|
|
|
3
|
|
00:00:08,500 --> 00:00:11,529
|
|
To differentiate between the four different types of themes,
|
|
|
|
4
|
|
00:00:11,529 --> 00:00:13,751
|
|
to find and evaluate themes,
|
|
|
|
5
|
|
00:00:13,751 --> 00:00:16,376
|
|
to install and update your theme
|
|
|
|
6
|
|
00:00:16,376 --> 00:00:18,800
|
|
and lastly to access support for your theme.
|
|
|
|
7
|
|
00:00:18,800 --> 00:00:20,500
|
|
Let's get going.
|
|
|
|
8
|
|
00:00:20,500 --> 00:00:26,000
|
|
In short, a theme is basically a website template with a certain layout and design.
|
|
|
|
9
|
|
00:00:27,000 --> 00:00:32,000
|
|
When you use WordPress, your content is completely separated from its presentation.
|
|
|
|
10
|
|
00:00:32,000 --> 00:00:38,274
|
|
This means that the look and feel of your site can change completely by just using a different theme,
|
|
|
|
11
|
|
00:00:38,274 --> 00:00:40,500
|
|
while your content will remain the same.
|
|
|
|
12
|
|
00:00:40,500 --> 00:00:42,500
|
|
Let's look at an example.
|
|
|
|
13
|
|
00:00:42,500 --> 00:00:46,500
|
|
Here I am using the 2023 default theme.
|
|
|
|
14
|
|
00:00:50,500 --> 00:00:55,905
|
|
And in the next example, I have installed and activated the bounce theme,
|
|
|
|
15
|
|
00:00:55,905 --> 00:00:58,500
|
|
which has a very different look and feel to it.
|
|
|
|
16
|
|
00:00:58,500 --> 00:01:01,500
|
|
But the content remains the same.
|
|
|
|
17
|
|
00:01:04,500 --> 00:01:11,500
|
|
It is also important to highlight that your site won't look the same as the thumbnail or example pages of the theme you install and activate.
|
|
|
|
18
|
|
00:01:11,500 --> 00:01:15,100
|
|
It is merely an example of what can be achieved
|
|
|
|
19
|
|
00:01:15,100 --> 00:01:20,500
|
|
and sometimes requires specific plugins to be installed to achieve the initial appearance.
|
|
|
|
20
|
|
00:01:20,500 --> 00:01:25,474
|
|
There are thousands of free themes available in WordPress,
|
|
|
|
21
|
|
00:01:25,474 --> 00:01:29,500
|
|
but there are also premium themes available outside of the theme repository.
|
|
|
|
22
|
|
00:01:29,500 --> 00:01:34,500
|
|
But please take note, many free versions also offer premium packages.
|
|
|
|
23
|
|
00:01:35,500 --> 00:01:39,500
|
|
You might be asking, what type of themes are there?
|
|
|
|
24
|
|
00:01:39,500 --> 00:01:42,500
|
|
There are four types of themes to take note of.
|
|
|
|
25
|
|
00:01:42,500 --> 00:01:48,500
|
|
Block themes, classic themes, hybrid themes and universal themes.
|
|
|
|
26
|
|
00:01:48,500 --> 00:01:52,593
|
|
It might be helpful to mention that block themes and classic themes are most commonly used
|
|
|
|
27
|
|
00:01:52,593 --> 00:01:56,500
|
|
and that block themes are the future of WordPress.
|
|
|
|
28
|
|
00:01:57,500 --> 00:02:00,500
|
|
Let's then start by looking at block themes.
|
|
|
|
29
|
|
00:02:00,500 --> 00:02:08,500
|
|
A block theme uses blocks for all parts of a site, including navigation menus, headers, content and footers.
|
|
|
|
30
|
|
00:02:08,500 --> 00:02:14,500
|
|
Block themes allow you to edit and customize all parts of your site within the site editor.
|
|
|
|
31
|
|
00:02:15,500 --> 00:02:18,500
|
|
Let's see a block theme in action.
|
|
|
|
32
|
|
00:02:18,500 --> 00:02:22,500
|
|
I will make my way to appearance and click on themes.
|
|
|
|
33
|
|
00:02:23,500 --> 00:02:30,012
|
|
I have activated a block-based theme called 2023 and in the left sidebar,
|
|
|
|
34
|
|
00:02:30,012 --> 00:02:33,500
|
|
you will notice we have access to the editor.
|
|
|
|
35
|
|
00:02:33,500 --> 00:02:39,500
|
|
If we click on editor, we will be taken to the site editor
|
|
|
|
36
|
|
00:02:39,500 --> 00:02:43,500
|
|
and here you are able to create and edit pages.
|
|
|
|
37
|
|
00:02:44,500 --> 00:02:50,500
|
|
You can create a draft page or edit one of your existing pages.
|
|
|
|
38
|
|
00:02:50,500 --> 00:02:55,598
|
|
Next, we can also change the site-wide styles of our site
|
|
|
|
39
|
|
00:02:55,598 --> 00:03:01,500
|
|
or we can customize the appearance of specific blocks for the whole site.
|
|
|
|
40
|
|
00:03:02,500 --> 00:03:07,500
|
|
The site editor also allows you to set up templates.
|
|
|
|
41
|
|
00:03:08,500 --> 00:03:15,500
|
|
You can add new templates or edit the templates that come with your theme.
|
|
|
|
42
|
|
00:03:19,500 --> 00:03:22,588
|
|
And lastly, you can also manage a variety of patterns,
|
|
|
|
43
|
|
00:03:22,588 --> 00:03:27,412
|
|
patterns that you have created yourself or header and footer template part patterns
|
|
|
|
44
|
|
00:03:27,412 --> 00:03:30,500
|
|
that we of course add to templates.
|
|
|
|
45
|
|
00:03:31,500 --> 00:03:36,346
|
|
I realized that some folks might be unfamiliar with terms like styles, templates, etc.
|
|
|
|
46
|
|
00:03:36,346 --> 00:03:40,500
|
|
So please check out the resources below this video to learn more.
|
|
|
|
47
|
|
00:03:41,500 --> 00:03:47,500
|
|
There is also a wonderful new feature that allows you to preview a block theme before switching.
|
|
|
|
48
|
|
00:03:47,500 --> 00:03:52,500
|
|
When you hover over the block theme, you will see a button live preview.
|
|
|
|
49
|
|
00:03:53,500 --> 00:03:58,500
|
|
When you click on live preview, you will be taken into the site editor.
|
|
|
|
50
|
|
00:03:58,500 --> 00:04:01,731
|
|
So not only are you able to preview the site
|
|
|
|
51
|
|
00:04:01,731 --> 00:04:04,500
|
|
but you also get a taste of the site editor.
|
|
|
|
52
|
|
00:04:05,500 --> 00:04:12,500
|
|
And now you can go ahead and make any changes or customizations as you please.
|
|
|
|
53
|
|
00:04:12,500 --> 00:04:20,500
|
|
I will for example change the style variation and also change the font of the text.
|
|
|
|
54
|
|
00:04:20,500 --> 00:04:27,500
|
|
And now we can explore our pages, our templates, etc.
|
|
|
|
55
|
|
00:04:30,500 --> 00:04:35,750
|
|
And if you like what you see, you even have the option to activate and save the theme
|
|
|
|
56
|
|
00:04:35,750 --> 00:04:37,500
|
|
and the changes you have made.
|
|
|
|
57
|
|
00:04:39,500 --> 00:04:45,500
|
|
A classic theme does not use the block editor to manage the site layout beyond posts and pages.
|
|
|
|
58
|
|
00:04:45,500 --> 00:04:50,500
|
|
These use the customizer, menus and widgets to make changes to theme settings.
|
|
|
|
59
|
|
00:04:50,500 --> 00:04:55,500
|
|
And since classic themes have been around the longest, there are many more to choose from.
|
|
|
|
60
|
|
00:04:55,500 --> 00:04:59,500
|
|
Let's take a closer look at an example of a classic theme.
|
|
|
|
61
|
|
00:04:59,500 --> 00:05:02,661
|
|
When we make our way to appearance and click on themes,
|
|
|
|
62
|
|
00:05:02,661 --> 00:05:06,500
|
|
you will notice I have activated the 2016 theme.
|
|
|
|
63
|
|
00:05:06,500 --> 00:05:11,500
|
|
And in the sidebar settings, you will have access to the customizer and more.
|
|
|
|
64
|
|
00:05:12,500 --> 00:05:19,500
|
|
And when you open the customizer, you will be able to change all your theme settings from year.
|
|
|
|
65
|
|
00:05:22,500 --> 00:05:28,500
|
|
Please note block themes on the other hand provide great flexibility for designing and customizing your website.
|
|
|
|
66
|
|
00:05:30,500 --> 00:05:36,500
|
|
A hybrid theme is a classic theme that adopts some features of site editing like the template editor.
|
|
|
|
67
|
|
00:05:36,500 --> 00:05:41,337
|
|
A hybrid theme such as Excel still uses the customizer to make changes,
|
|
|
|
68
|
|
00:05:41,337 --> 00:05:44,500
|
|
while also being able to create your own custom templates.
|
|
|
|
69
|
|
00:05:45,500 --> 00:05:50,500
|
|
So let's make our way to pages, open one of your pages and go to the sidebar settings on the right.
|
|
|
|
70
|
|
00:05:51,500 --> 00:05:57,588
|
|
Click on templates and here you are able to assign a page to a different template
|
|
|
|
71
|
|
00:05:57,588 --> 00:06:00,500
|
|
or go to a different page.
|
|
|
|
72
|
|
00:06:00,500 --> 00:06:08,500
|
|
And here you are able to assign a page to a different template or create a custom template.
|
|
|
|
73
|
|
00:06:10,500 --> 00:06:14,500
|
|
And lastly, a universal theme is a theme that can be configured completely either way,
|
|
|
|
74
|
|
00:06:14,500 --> 00:06:18,500
|
|
as a block theme or classic theme.
|
|
|
|
75
|
|
00:06:19,500 --> 00:06:26,583
|
|
In this example, I have installed the universal theme emulsion and as you will notice,
|
|
|
|
76
|
|
00:06:26,583 --> 00:06:29,500
|
|
you have access to the customizer as well as the editor.
|
|
|
|
77
|
|
00:06:30,500 --> 00:06:34,500
|
|
Next, let's talk about searching and adding a new theme.
|
|
|
|
78
|
|
00:06:36,500 --> 00:06:43,500
|
|
To add a new theme, go to appearance and click on themes and at the top click on add new.
|
|
|
|
79
|
|
00:06:44,500 --> 00:06:49,218
|
|
You can search for the most popular themes, the latest themes that's been added
|
|
|
|
80
|
|
00:06:49,218 --> 00:06:52,500
|
|
and there's even a designated area for block themes.
|
|
|
|
81
|
|
00:06:53,500 --> 00:06:59,944
|
|
When you click on a theme, you will be able to see more details about the theme
|
|
|
|
82
|
|
00:06:59,944 --> 00:07:01,500
|
|
as well as a preview.
|
|
|
|
83
|
|
00:07:03,500 --> 00:07:06,339
|
|
When you click on feature filter,
|
|
|
|
84
|
|
00:07:06,339 --> 00:07:11,500
|
|
you will be able to search for themes according to subject, features and layout.
|
|
|
|
85
|
|
00:07:12,500 --> 00:07:14,500
|
|
What makes a good theme?
|
|
|
|
86
|
|
00:07:15,500 --> 00:07:19,140
|
|
To review a theme, make your way to WordPress.org,
|
|
|
|
87
|
|
00:07:19,140 --> 00:07:22,500
|
|
hover over download and extend and then click on themes.
|
|
|
|
88
|
|
00:07:23,500 --> 00:07:26,500
|
|
Here you can search for a variety of themes.
|
|
|
|
89
|
|
00:07:28,500 --> 00:07:30,265
|
|
Once you find the theme you are looking for,
|
|
|
|
90
|
|
00:07:30,265 --> 00:07:33,500
|
|
click on more info to find out more about the specific theme.
|
|
|
|
91
|
|
00:07:34,500 --> 00:07:38,500
|
|
On the right hand side, you will find all the information you need to make an informed decision.
|
|
|
|
92
|
|
00:07:38,500 --> 00:07:42,571
|
|
When you look at the version updates, active installations and ratings,
|
|
|
|
93
|
|
00:07:42,571 --> 00:07:47,500
|
|
it will give you a good sense of the overall experience others have had with this theme.
|
|
|
|
94
|
|
00:07:48,500 --> 00:07:50,500
|
|
How do I install a theme?
|
|
|
|
95
|
|
00:07:51,500 --> 00:07:57,500
|
|
To install a new theme, make your way to appearance, click on themes and select add new.
|
|
|
|
96
|
|
00:08:00,500 --> 00:08:04,500
|
|
Once you find the theme you are looking for, click on install.
|
|
|
|
97
|
|
00:08:05,500 --> 00:08:09,500
|
|
And once installed, don't forget to click on activate.
|
|
|
|
98
|
|
00:08:10,500 --> 00:08:14,500
|
|
If you have a theme in the form of a zip file, you can install it manually.
|
|
|
|
99
|
|
00:08:15,500 --> 00:08:20,500
|
|
Click on add new and then at the top, select upload theme.
|
|
|
|
100
|
|
00:08:23,500 --> 00:08:25,500
|
|
And then you can upload it from your computer.
|
|
|
|
101
|
|
00:08:27,500 --> 00:08:29,500
|
|
What about updates?
|
|
|
|
102
|
|
00:08:30,500 --> 00:08:32,362
|
|
If there are updates available,
|
|
|
|
103
|
|
00:08:32,362 --> 00:08:36,500
|
|
you will be notified in the top menu bar as well as the dashboard menu.
|
|
|
|
104
|
|
00:08:37,500 --> 00:08:43,500
|
|
You can navigate to the updates page and scroll down.
|
|
|
|
105
|
|
00:08:44,500 --> 00:08:48,500
|
|
And here you will find a single theme or a list of themes that have updates available.
|
|
|
|
106
|
|
00:08:49,500 --> 00:08:54,500
|
|
And from this page, you can choose to update individual themes or all at once.
|
|
|
|
107
|
|
00:08:54,500 --> 00:09:00,500
|
|
Remember to back up your site before making any updates or you can consider using a child theme.
|
|
|
|
108
|
|
00:09:01,500 --> 00:09:05,845
|
|
A child theme is a sub-theme that inherits the look and feel of the main theme
|
|
|
|
109
|
|
00:09:05,845 --> 00:09:07,500
|
|
and all of its functions.
|
|
|
|
110
|
|
00:09:08,500 --> 00:09:11,403
|
|
Using a child theme lets you upgrade the parent theme
|
|
|
|
111
|
|
00:09:11,403 --> 00:09:14,500
|
|
without affecting the customizations you've made to your site.
|
|
|
|
112
|
|
00:09:15,500 --> 00:09:18,000
|
|
Customizations are kept separate from the main theme's files,
|
|
|
|
113
|
|
00:09:18,000 --> 00:09:20,500
|
|
but I'll add a link to this in the resources below.
|
|
|
|
114
|
|
00:09:21,500 --> 00:09:25,233
|
|
Another option is to make your way to appearance, click on themes
|
|
|
|
115
|
|
00:09:25,233 --> 00:09:28,500
|
|
and go to the theme that needs to be updated.
|
|
|
|
116
|
|
00:09:29,500 --> 00:09:34,500
|
|
And at the top, you will have the option to select update now or click on theme details.
|
|
|
|
117
|
|
00:09:35,500 --> 00:09:37,500
|
|
And at the top, you will also be able to update.
|
|
|
|
118
|
|
00:09:38,500 --> 00:09:43,500
|
|
And lastly, you also have the option to enable auto updates for this specific theme.
|
|
|
|
119
|
|
00:09:44,500 --> 00:09:46,500
|
|
How do I delete a theme?
|
|
|
|
120
|
|
00:09:46,500 --> 00:09:51,000
|
|
To delete a theme, select the relevant theme
|
|
|
|
121
|
|
00:09:51,000 --> 00:09:55,500
|
|
and at the bottom right, you will have the option to delete.
|
|
|
|
122
|
|
00:09:56,500 --> 00:09:58,500
|
|
And lastly, how do I get support?
|
|
|
|
123
|
|
00:09:59,500 --> 00:10:02,879
|
|
To get support, make your way to the theme directory,
|
|
|
|
124
|
|
00:10:02,879 --> 00:10:06,500
|
|
select the relevant theme and scroll down to support.
|
|
|
|
125
|
|
00:10:07,500 --> 00:10:12,689
|
|
The best way to get help with a theme is by going to the themes related support forum
|
|
|
|
126
|
|
00:10:12,689 --> 00:10:15,500
|
|
to ask questions or view other tickets.
|
|
|
|
127
|
|
00:10:16,500 --> 00:10:20,500
|
|
I trust you will find the right theme that meets all your needs.
|