首頁 » 程式語言 » CSS » 【WordPress教學】如何寫CSS更改WordPress標題樣式?3個實際範例教學

【WordPress教學】如何寫CSS更改WordPress標題樣式?3個實際範例教學

文章最後更新於

本篇文章要教你如何透過CSS語法,更改WordPress標題樣式。

最近有很多人問我,我的標題樣式是怎麼做的、有沒有推薦什麼外掛,我發現有很多人有這個疑問。

我沒有用任何CSS外掛,我只靠CSS語法!

【WordPress教學】如何寫CSS更改WordPress標題樣式?3個實際範例教學
【WordPress教學】如何寫CSS更改WordPress標題樣式?3個實際範例教學

CSS介紹

CSS(Cascading Style Sheets)中文為層疊樣式表,這是一種用來為結構化文件(HTML、XML),增加樣式的程式語言。

簡單來說就是你在網頁上看到的顏色、字型、背景、動畫等等,都是CSS做的。

但是CSS不能單獨存在,他本身並不會產生文字,如果只有CSS就什麼都沒有。

講這麼多,我們來舉一個範例比較快!

 

以下是一個簡單的HTML,可以新增一個文件,取名為 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Test</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
<h1>Welcome to Johntool-工具王阿璋!</h1>

    

This is my CSS example

  </body>
</html>

然後打開 index.html ,網頁的內容就會就會長成下面這樣:

html example
HTML 範例

 

 

接著在新增一個新文字文件,加上下面的CSS語法,把他改名成 style.css。

h1 {
color: lightblue;
background-color: gray;
border: 1px solid black;
}

p {
color: red;
}

這時候再開啟一次網頁,就會看到網頁變成下面這個樣子:

html+css
HTML+CSS 範例

 

這樣大家應該稍微了解 CSS的作用了吧!

接著要進入我們文章的重點了。

 

如何更改標題的CSS?

WordPress是一套很友善的系統,為什麼這樣說呢?因為他不用去主機內改程式碼,只需要透過後台就可以了。

我們先進入後台,選擇 外觀,然後點選 編輯CSS

如果在這裡找不到的話,可以參考這篇文章

編輯CSS
編輯CSS

然後就會看到下面的畫面,在左邊就可以新增CSS語法。

CSS 編輯畫面
CSS 編輯畫面

那大家剛進來的時候,這裡肯定是空的畫面。

然後就會問,我該在裡面打什麼?我想要的樣式怎麼做出來?

補充

在這裡編輯CSS是為了方面立即查看,但不是最好的方式!

正確的擺放位置請參考這篇文章:【WordPress教學】如何自訂WordPress語法?6個程式碼片段範例教學

所以接下來我會提供三個範例CSS給大家模仿使用。


範例一

首先,教大家改h1,h1比較特別,他在HTML語法中,通常會被視為標題,也就是你文章內的標題。

那我們要如何達成以下的樣式呢?

example1
範例一

在WordPress的設計中,標題會有一個class,叫做 entry-title ,那如果要改class,就要加一個 . ,加起來就是 .entry-title

程式碼如下:

.entry-title
{
/*
左邊界間隔5px
ridge代表凸線
rgba代表顏色以及透明度
*/
border-left: 5px ridge rgba(147,10,164,0.37);
/*邊界的角度,越大代表越圓*/
border-radius: 31px;
/*文字與文字的間距*/
padding:5px;
/*文字的顏色*/
color:red;
}

其中, 顏色或是寬度等等都可以自行調整,在編輯CSS這邊,可以馬上看到你的樣式改變的樣子。


範例二

接著我們示範 h2 ,h2~h6 的class都是一樣的,叫做 entry-content ,所以我們在使用的時候要用 .entry-content

但是光憑上面那樣,我們沒辦法去區分到底要改哪一個部分。

所以要打 .entry-content h2 ,如果是別的標題,就把h2改掉。

那我們這裡要達到的效果如下:

範例二
範例二

詳細的CSS語法如下:

.entry-content h2
{
/* 背景顏色 #eeeeee */
background-color:#eeeeee;
/*左側框線寬度(5px)、solid(實線)、顏色(orange)*/
border-left:5px solid orange; 
/*行內文字間距(5px)*/
padding:5px;
/*垂直置中*/
}

顏色的部分,有幾種方式可以打,直接打英文(orange)、#色號(#eeeeee)、RGB(rgb(255, 0, 0)),然後實線的部分可以參考這個網站改成你要的線條。


範例三

範例三我一樣拿h2來示範,但這個例子就比較炫砲一點,參考參考就好。

範例三
範例三

程式碼如下:

.entry-content h2
{
box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
font-weight:bold;
color:red;
}

如果這三個例子都不喜歡怎麼辦,繼續看下面的章節吧!

 

CSS語法產生器

我自己本身也不是一個太擅長CSS的人,所以我都是想到要什麼樣子才去查語法。

但是我也不是一個很有靈感的人,所以我就會去看CSS產生器有什麼有趣的樣式。

我推薦這個網站: HTML CSS JS generator

CSS語法產生器
CSS語法產生器

這個網站沒有什麼難度,就是進來之後,看到你想要的樣式,點進去就對了。

我舉一個例子,我先選擇 TEXT SHADOW,選好一個字型後,往下滑,按下藍色的Use This,就會產生語法。

Text Shadow
點選 Text Shadow,然後選一個你想要的字型,按下Use This

再來複製這段CSS的內容,記得複製 { } 裡面的內容就好,外面的demotext不要複製到。

然後將他複製進去 .entry-content h2 ,就可以看到這樣的效果,不過有時候還是會因為主題有點不太一樣,還有會多產生重複的字,看到驚嘆號把他刪掉就好。

貼過去的效果如下:

CSS 產生器範例
CSS 產生器範例

當然,如果缺少什麼可以在自己客製化就好。

 

結論

我不知道這樣的教學,對大家有沒有實質幫助,我盡可能的寫出讓不懂程式也能懂得圖文範例。

為什麼我不用外掛呢?

  • 因為我找不到我喜歡的外掛呀!
  • 外掛太多會造成網站的速度慢
  • 外掛不見得有我要的樣式

如果CSS產生器都沒有我要的樣式,我該怎麼辦?

  • 學習! 可以自己學習有哪些CSS語法可以用,甚至是更進階的動畫。

因為現在的主流是CSS3,所以我推薦一本書可以有完整的語法教學:CSS大全 

CSS大全
CSS大全

正如我在上一篇文章說到,學習程式語言的最好方式就是 讀一本完整架構的書籍

現在網路上雖然很多資源,但是大多都是沒有結構化的文章。

當然,如果只是要特定功能,去網路查查就好,但是如果要學習好一個程式語言,書是絕對少不了的。

WordPress 學習書籍推薦

WordPress 無敵架站手冊:架站新手都想擁有:教你打造個人專屬網站

WordPress 無敵架站手冊
WordPress 無敵架站手冊

書籍介紹

這本書教你從零開始建立起一個全功能的WordPress網站,從下載與安裝WordPress主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。甚至還有教你如何開發主題、外掛、小工具,從入門到進階的教學都很完整。

推薦原因

這本書原作者是波蘭人,原文是英文,後來經由免費資源網路社群的作者 Pseric 翻譯成中文書。WordPress 目前的中文書可說是少之又少,這本不僅是中文書,內容又非常完整,絕對是學習WordPress的首選書籍!

購買 WordPress 無敵架站手冊

WordPress Plugins百大外掛精選(火力加強版)

WordPress Plugins百大外掛精選(火力加強版)
WordPress Plugins百大外掛精選(火力加強版)

書籍介紹

這本書教你從基礎架站、備份保存到各式各樣的外掛主題,讓你想裝什麼就裝什麼,建置專屬自己獨一無二的多功能發佈平台。作者特別精選了各類型的外掛做介紹,只要你想的到的功能幾乎都在裡面,匯集了讀者們一直喜愛的外掛程式介紹,並且添加了最新的外掛程式,更貼近現在的讀者需求。

推薦原因

這本書作者是免費資源網路社群的作者 Pseric,他的網站知名度非常的高,也是透過 WordPress 架設而成,因此對於外掛的理解,絕對是數一數二。

購買 WordPress Plugins 百大外掛精選(火力加強版)

WordPress 架站推薦

新手架站:【架站教學】專門為WordPress打造的主機?WPWebHost 完整教學!

高流量網站:【架站教學】新手快速架站教學,使用Cloudways架設WordPress網站!

👉👉 查看 WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整!



如果對文章內容有任何問題,歡迎在底下留言讓我知道。

如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。

還沒訂閱部落格的朋友們,記得在下方填入信箱,收到我最新文章的通知。

歡迎追蹤我的粉絲專頁,會有最新文章、程式語言課程、WordPress主題外掛優惠的訊息。

如果這篇文章對你有幫助,可以幫我按 5 個Like,讓我得到一些回饋,支持我繼續寫出更多好文章!

by Johntool-工具王阿璋

訂閱我的文章

如果喜歡我的文章,可以留下信箱,每發佈新文章時,就會準時通知您!

31 thoughts on “【WordPress教學】如何寫CSS更改WordPress標題樣式?3個實際範例教學”

  1. 之前一直在頭疼著究竟可以怎樣在不靠外掛的情況下修飾標題.. 謝謝版主提供了那麼詳細的教學說明!照著你的教學終於都修飾到了!真的很謝謝你!

  2. Pingback: 【WordPress教學】自訂WordPress語法最佳方式?6個程式碼片段範例教學

  3. Pingback: 【WordPress教學】強大的官方推薦外掛,Jetpack完整設定教學!

  4. 你好
    關於WordPress 的繼續閱讀功能會將文章跳到我們加入【】的符號下面開始顯示,請問要如何讓文章按了繼續閱讀後跳到文章的開頭?

  5. 阿璋你好
    如果要讓段落中的重點文字有底色效果或著是部分文字顏色變紅 請問這有什麼辦法!? 因為我的編輯器都是讓整個區塊變色 沒辦法單獨編輯。
    你們說的STEP是怎麼用呢? 謝謝指教

    還有你的網站的字體風格 間格看起來都好舒服~
    我還是超級新手XD

    1. 1. 重點文字有底色的效果我不建議啦,我覺得有點醜!
      2. 部分文字變紅這個功能,可以使用傳統編輯器,但是你就需要捨棄區塊變色。
      3. step 的用法是在文章中加入這個格式 [step]1[/step]

發表迴響