WordPress 如何用 HTML 的 a 標籤搭配 CSS 製作一顆按鈕?

How to use html and css to make buttons in wordpress 封面圖片

在 WordPress 寫文章或頁面的時候,可能都會用到「按鈕」這個功能,雖然 WordPress 裡面有內建按鈕的區塊可以插入,不過有些人會比較仰賴其他佈景主題或外掛工具,來製作更專業一點的按鈕。

但如果你會一點 HTML 跟 CSS 語法的話,其實你也可以在 WordPress 裡面製作按鈕,只要用上幾個常用的 CSS 屬性設定,同樣也可以做出不錯看的按鈕出來!

WordPress 內建的按鈕

如果我們打開 WordPress 的區塊編輯器,會發現它有內建一個「插入按鈕」的功能,點擊它就可以把「按紐」新增到文章或是頁面上,相當方便,通常我都會設定按鈕前往其他的頁面或是網站。

Wordpress 內建的按鈕及功能設定

這顆內建按鈕提供的「樣式」有填色與外框這兩種,「色彩」可以調整文字顏色跟背景顏色,「框線」則可以調整外框的圓弧效果,功能其實不少。

不過按鈕也可以透過其他的方式來設定,除了仰賴某些外掛程式之外,其實也可以用「撰寫 HTML 跟 CSS」的方式來製作按鈕,只要學會設定幾種常用的 CSS 屬性,也可以搭配出各式各樣的按鈕樣式!


如何製作一顆按鈕?

在 WordPress 的區塊編輯器裡面,都有提供 自訂 HTML 區塊的插入功能,點擊它就可以在文章或頁面裡面插入 HTML 區塊,並且在裡面撰寫程式碼。

Wordpress 區塊編輯器的自訂HTML區塊
在文章編輯器裡面插入自訂HTML區塊


Step 1:輸入 a 標籤

首先,在 自訂HTML 區塊裡面輸入 a 標籤,它是用來插入超連結的 HTML 標籤,而標籤中間可以輸入按鈕內的文字。程式碼如下:

<a>這是一顆按鈕</a>


Step 2:加入屬性

再來,我們要在 a 標籤裡面加入 hrefclass 這兩個屬性,href 是用來設定這個超連結要前往的網址或位置,所以可以直接在這邊填入你想要前往的網址,而 Class 所定義的名稱,則會用在接下來的 CSS 語法裡面。

<a href="https://digitalyoming.com/" class="bluebutton">這是一顆按鈕</a>

完成了這段程式碼後,它會有基本的點擊跳轉功能,外觀長得就像這樣:這是一顆按鈕,但還看不出是一顆按鈕,所以接下來要用 CSS 語法來變更它的外觀。


Step 3:打開 WordPress 附加的 CSS

在 WordPress 裡面有一個地方專門用來設定 CSS,可以從後台點選 外觀附加的CSS,它會開啟自訂介面的 CSS 設定區,裡面能讓我們輸入 CSS 的屬性跟設定值。

在Wordpress後台點擊外觀選單裡面的「附加的CSS」,打開自訂介面的CSS功能設定


Step 4:輸入選擇器

前面我們有在 a 標籤裡面設定一個 Class 的屬性,我取名為 bluebutton,所以在 CSS 的開頭我們要輸入這個名稱當作選擇器 (前面別忘了要加個點 .),程式碼如下:

.bluebutton{

}


Step 5:輸入 CSS 屬性與設定值

再來就是要設定 CSS 的屬性與設定值了,如果想要做出一個基本的按鈕,大概都會用到下面的屬性設定:

.bluebutton {
    text-decoration: none;           /* 去除下底線 */
    display: inline-block;           /* 變成行內區塊 */
    font-size: 25px;                 /* 文字大小 */
    color: white;                    /* 文字顏色 */
    background: blue;                /* 按鈕背景顏色 */
    padding: 5px 10px 5px 10px;      /* 文字到邊框的間距 */
    border: 2px solid black;         /* 邊框設定 */
    border-radius: 5px;              /* 邊框圓角設定 */
}

這時候,原本的文字超連結會變成像這樣的按鈕:這是一顆按鈕,其實就跟 WordPress 內建的按鈕差不多,顏色、背景、邊框、圓弧效果都可以再做調整,直到自己滿意為止。


Step 6:設定 Hover 效果

如果你希望按鈕能有點互動效果的話,可以在 CSS 的程式碼裡面再添加 hover 的設定,程式碼如下:

.bluebutton:hover {
    color: blue;
    border: 2px solid blue;
    background-color: white;
}

設定完這段 CSS 程式碼之後,按鈕就會變成這樣:這是一顆按鈕,只要把滑鼠移動到這顆按鈕上面,你就會發現按鈕的樣式發生了改變,變成一顆有互動效果的按鈕。


結語

其實 CSS 能設定的屬性非常多,以上提到的只是冰山一角而已,不過常用的就那些,要用 a 標籤製作一顆按鈕的話,上面的 CSS 設定已經算是非常夠用的了,當然你也可以再多學一些 CSS 的屬性設定,把程式碼寫進「附加的 CSS」裡面,這樣按鈕的外觀樣式就能更多元化一點!


延伸閱讀


aifian APP推薦活動


最後
§ 很感謝你的閱讀 §
如果你喜歡這篇文章的話
歡迎使用下面分享按鈕分享


留言區