hosting tutorials WeChat Top

👋🏼Welcome to my WP-Host blog where I am excited to share my knowledge and expertise on WordPress hosting and website construction tutorials with you. Let’s connect and learn from each other! You can reach me at info@yrshare.com.

Email Me

(如果你会中文,可以点击微信图标与我联系。)

扫一扫加我

注:因个人英文水平有限,所以暂时只能为懂中文的朋友提供wordpress建站服务

微信:18200592859 或 yrwordpress

Beautify the default H tag style of WordPress (3 steps)

2023032310161276

Beautify the default H tag style of WordPress (3 steps): The default CSS styles for WordPress websites are generally relatively simple. If you think this is beautiful enough, you can use CSS to add styles to it to make your WordPress website more beautiful. Today’s WordPress website will share implementation methods with you.

【WP-Host/悦然wordpress建站】

Continue to share the wordpress website building tutorial. Today we modify the default H tag style of the wordpress site to make it look better. If the content of your website articles is relatively long, then there is a high probability that you will use H tags, at least H2 tags, or H3 tags, which can make the content of the website more organized and have many benefits for website SEO optimization.

But the default H tag style of wordpress is rather ugly, there is only one big and thick style.
Next, we will start to simply beautify the H tag style.

Step 1: Find the H tag style of the current website

Someone may have tried to directly use the CSS style shared by others, but it did not take effect when used directly, because different websites have different themes, and the original CSS style ID is different, so we need to find the H tag of the current website first CSS styles.

2023032310165292

First open an article containing the H tag, press F12 to enter the developer mode while browsing, select the H tag, and find the CSS style of the current H tag from the code, as shown on the right side of the above figure, we have determined that the H2 style ID of the current website is【.blog-details.details-content h2】. Then we just need to add the written CSS style into it. In the same way, we can find the H3 tag as 【.blog-details .details-content h3】.

Step 2: Write CSS styles

Next, we can directly debug the CSS style in the browser. If you don’t understand it, you can directly find someone else’s written one to modify it. Finally, 【WP-Host/悦然wordpress建站】 The finalized style is as follows:

.blog-details .details-content h2 {
    font-size: 22px;
    margin-top: 20px;
    padding-left: 10px;
    position: relative;
    border-bottom: 1px #eee solid;
    border-left: 5px solid #fcab03;
    margin-bottom: 10px;
}

.blog-details .details-content h3 {
    font-size: 18px;
    margin-top: 20px;
    padding-left: 10px;
    position: relative;
    border-bottom: 1px #eee solid;
    border-left: 3px solid #fcab03;
    margin-bottom: 10px;
}

Step 3: Add CSS code

Finally, we only need to add the above CSS code to the currently used wordpress website building theme.

2023032310350449

Here【WP-Host/Yueran wordpress website building】recommended to add additional CSS code, do not directly modify the CSS file of the theme. The above code can be directly added to the [Additional CSS] function of the theme, or added to other CSS plugins. For example, you can install the Simple Custom CSS plugin.

Simple Custom CSS

https://wordpress.org/plugins/simple-custom-css/
2023032310381851

The final H tag effect is shown in the figure above, which are the effects of H2 and H3 tags, which will look better than the original H tag style.

Summarize

Today’s wordpress tutorial is shared here. Here is a reminder that although CSS styles can achieve many beautiful effects, if it is not necessary, you should not have too many CSS styles, otherwise it will affect the effect.

继续分享wordpress建站教程,今天我们给wordpress站点默认的H标签修改样式,让它好看一点。如果你的网站文章内容比较长,那么大概率会用到H标签,至少会有H2标签,或者是H3标签,这样可以让网站内容显得更有条理,对网站SEO优化也有不少好处。但是wordpress默认的H标签样式是比较难看的,只有一个又大又粗的样式。接下来我们就开始对H标签样式进行简单的美化。

步骤一:找到当前网站的H标签样式

有人可能尝试过直接用别人分享出来的CSS样式,但是直接使用时却没有生效,因为不同的网站不同的主题,它原来的CSS样式ID是不一样的,所以我们需要先找到当前网站的H标签CSS样式。

2023032310165292

先打开一篇含有H标签的文章,浏览中按F12进入开发者模式,选中H标签,从代码中找到当前H标签的CSS样式,如上图右边,我们确定了当前网站的H2样式ID为【.blog-details .details-content h2】。然后我们只需要把写好的CSS样式添加进去就可以了。同样的方法我们可以找到H3标签为【.blog-details .details-content h3】。

步骤二:编写CSS样式

接下来我们可以直接在浏览器调试CSS样式,如果不懂也可以直接找别人写好的来修改,最终【WP-Host/悦然wordpress建站】确定好的样式如下:

.blog-details .details-content h2 {
    font-size: 22px;
    margin-top: 20px;
    padding-left: 10px;
    position: relative;
    border-bottom: 1px #eee solid;
    border-left: 5px solid #fcab03;
    margin-bottom: 10px;
}

.blog-details .details-content h3 {
    font-size: 18px;
    margin-top: 20px;
    padding-left: 10px;
    position: relative;
    border-bottom: 1px #eee solid;
    border-left: 3px solid #fcab03;
    margin-bottom: 10px;
}

步骤三:添加CSS代码

最后我们只需要把上面的CSS代码添加到当前使用的wordpress建站主题中即可。

2023032310350449

这里【WP-Host/悦然wordpress建站】推荐添加额外的CSS代码,不要直接修改主题的CSS文件。上面的代码可以直接添加到主题的【额外CSS】功能中,或者是添加到其它的CSS插件中。比如你可以安装Simple Custom CSS这个插件。

Simple Custom CSS

https://wordpress.org/plugins/simple-custom-css/
2023032310381851

最终的H标签效果如上图所示,上面分别是H2和H3标签的效果,这样会比原来的H标签样式好看一些。

总结

今天的wordpress建站教程就分享到这里。这里要提醒一点,虽然CSS样式可以实现很多漂亮的效果,但是如非必要,CSS样式还是不要太多,多了反而影响效果。

WordPress Hosting / 悦然wordpress建站

WordPress Hosting / 悦然wordpress建站

【WordPress Hosting / 悦然wordpress建站】I am a WordPress hobby from China, and I like to communicate with friends from all over the world to learn WordPress website building and maintenance related knowledge.