首頁 » CSS

CSS

【WordPress教學】網站側邊欄教學:如何加入圖片及連結並開啟新分頁?

如何加入圖片及連結

本篇文章會教大家如何在網站的側邊欄加入圖片及連結,並且將圖片連結設定成開啟新分頁。 最近有許多新手問阿璋,該如何在網頁側邊欄放置一些圖片廣告? 想知道的話,就繼續看下去吧!   影片教學 如果覺得我的影片教學不錯的話,可以按讚、訂閱、分享,我會分享更多實用的教學!   側邊欄是什麼? 側邊欄的英文是 Sidebar,要了解側邊欄是什麼之前,首先必須先了解 WordPress 網頁結構。 WordPress 的頁面是由 Header, Content, Sidebar, Footer 組合而成,換成中文是頁首、內容、側邊欄、頁尾。 大多數網頁的側邊欄都是放在右邊,但其實網頁的左邊、下面,也都可以稱做側邊欄。   如何加入圖片及連結? 網頁側邊欄加入圖片的方式有兩種: 1. 直接透過圖片小工具添加 2. 自訂 HTML 語法來添加 接著會在下面教學。   圖片小工具 在後台中前往外觀->小工具,裡面可以看到一個圖片的小工具。 將這個圖片小工具,拖拉到 Sidebar,看你要放在側邊欄還是頁首頁尾都可以。 接著輸入這個小工具的標題(也可以空白),加入圖片以及設定連結目標。 如果是側邊欄,圖片的寬度建議在 400px 以下,不過當然要看主題的設定為主,太大的解析度也只是被縮小。 點選編輯圖片,可以看到圖片詳細資料,在進階設定的地方,勾選在新分頁中開啟連結。 設定完之後儲存,就可以在網站中看見圖片了!   自訂 HTML 首先在小工具內找到自訂HTML,將他拖拉至側邊欄。 輸入標題,內容輸入程式碼。 這裡我提供一個插入圖片的程式碼簡單教學。 <a></a> : 連結標籤 href : 連結目標網址 target=”_blank” : 開啟新分頁 <img></img> : 圖片標籤 alt : 圖片文字(顯示不出圖片時會顯示文字) src : 圖片來源網址 學習更多 HTML 語法: 從入門到業界實戰 – UI / UX 前端網頁設計 學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版) 儲存之後,就可以在網站中看到剛剛添加的圖片!   結論 本篇文章是針對… 繼續閱讀

【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊

【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊

WordPress 主題建立完成後,有時候會跑出一些多餘的區塊,卻又不知道該如何刪除。 本篇文章將會教一些 CSS 、開發者工具,快速的隱藏 WordPress 網站多餘的區塊。 影片教學 可以的話,麻煩點進去影片,幫我按個訂閱按紐!   Chrome 開發者工具 首先要來介紹一下 Chrome 的開發者工具,功能非常非常的多,本篇文章著重在 Elements,若有人需要其他教學,可以在底下留言。 首先,要如何開啟 Chrome 的開發者工具呢? 使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)。 首先在上面先選擇 Elements,上半部的那些程式碼是網頁的HTML,下半部的程式碼是網頁的CSS。 HTML 是用來顯示文字、表格、區塊等等。 CSS 是用來調整 HTML 的樣式,像是文字大小、字體、位置等等。   CSS 語法 我這裡列出幾個比較常用到的CSS語法: background-color : 背景顏色 font-family : 字型 color : 文字顏色 font-size : 文字大小 line-height : 行距 display : 顯示方式 如果想要練習,可以到這個網站學習與實作:w3schools 想要學習更完整的CSS語法,可以參考以下兩本書: 1. 學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版) 2. CSS 大全(第四版)   隱藏區塊 透過開發者工具的左上角的箭頭,選取要修改的區塊,再到開發者工具大概上下點一下,尋找最符合的區塊。 選擇要修改的區塊後,在下方按+的符號,輸入 CSS 語法。 這裡列出幾個常用的語法: 接著到佈景主題自訂的地方,選擇客製化CSS,將語法貼進去,下圖是原本的樣子。 貼上隱藏的語法後,上面的 bar 就消失了。   結論 本篇文章是阿璋第一次透過影片來教學,教大家如何快速的客製化自己的網站,並且透過隱藏區塊來作為示範。 不知道這樣的影片教學大家的感受如何? 希望可以在下面給我一點回應,我才知道接下來要不要繼續照這種模式。 如果想要學習更完整的前端語法,可以看看以下這部影片,教得很好很清楚! (Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL… 繼續閱讀

【WordPress教學】如何自訂WordPress語法?6個程式碼片段範例教學

【WordPress教學】如何自訂WordPress語法?6個程式碼片段範例教學

本篇文章會教你如何使用程式碼片段(Code Snippets)來自訂WordPress語法,並且提供6個實用的程式碼片段範例教學,不僅可以改善外觀樣式,更能提高工作效率以及方便管理! 許多人可能像我一樣,每篇文章會有一個固定的結尾(CTA),或是常常使用一些固定的文字樣式(CSS),甚至想要自己修改主題或是外掛,都可以透過程式碼片段(Code Snippets)這個外掛來完成。 因此在這篇文章,我會教你如何使用Code Snippets,以及提供我常使用的6個程式碼片段程式碼給你參考使用。 想要知道WordPress有哪些好用的主題或是外掛,可以關注我這篇文章:2019年WordPress推薦主題與外掛,最新優惠持續更新中! 什麼是程式碼片段? 程式碼片段(Code Snippet)本身的定義是:一段可重複利用的程式碼。 我們在寫程式時,可能在很多個部分都使用到同一段程式,這時候就會讓程式變得冗長,所以會將這些內容獨立出來並加以定義成一個新的程式碼,我們就稱作程式碼片段。 程式碼片段可以把可重複使用的程式碼分割儲存,方便除錯與加速開發。 在許多編譯器的環境裡,內建了許多程式碼片段,而在WordPress也有人做出相對應的外掛:Code Snippets,提供我們方便加入自己的程式碼。   為什麼要使用程式碼片段? 使用程式碼片段是為了讓我更好管理這些程式碼,我不需要因為換主題而重新寫一次語法,也不用一直寫重複性的文字。 程式碼片段提供了我一個方便管理所有客製化的程式碼,也可以匯出匯入到別的網站。 我自己常在用的程式碼片段,可以分為下面幾種類型: 1. 每篇文章都會使用的文字 我在每篇文章的結尾,都會有一段固定的文字,希望大家幫忙分享,或是有問題可以留言,以及訂閱我的部落格。 這些文字如果要每篇打的話,萬一我想要改內容就必須一篇一篇改,但若我使用程式碼片段,我只需要打Shortcode ,像是 [end] 這樣的方式,就可以顯示這些文字了。 假設未來要改變內容,只要更改程式碼片段,就可以改變所有文章的內容。 2. 文章內會使用的固定樣式 有看我其他篇文章的人就知道,我有時候會有步驟教學(Step1 , Step2…),或是一段粉紅色區塊的結論,這也是我透過程式碼片段完成的樣式。 我一樣可以透過Shortcode來顯示我要的樣式,就不需要再使用其他外掛來製作那些區塊了! 3. 更改整個網頁的樣式 假設要更改整個網頁的字型或是標題樣式,通常很多文章都會建議在外掛的編輯CSS或是style.css裡面更改,但是這種方式會造成一個問題,就是更換主題的時候,這些設定就會跟著消失。 但如果透過程式碼片段來更改,不論是什麼主題,都可以一直保留這些樣式,不會隨著主題被替換掉。 4. 更改外掛或主題的設定 有時候對於外掛的功能有稍微的不滿,或是對外掛或是主題的樣式想要做調整,也可以透過程式碼片段來更改。 如果在外掛或是主題本身改的話,很有可能造成外掛本身有問題或是更新失敗等等問題。 5. 更改WordPress安全性設定 WordPress本身的框架提供了很多可變更性,像我就移除了WordPress的登入入口,改成WordPress.com的第三方登入。   如何安裝及使用程式碼片段 在WordPress後台,點選安裝外掛,搜尋Code Snippets,看到剪刀圖案的就是了,然後點選立即安裝,接著按啟用。 啟用之後,左邊就會看到程式碼片段的欄位,點近來就會看到有四個範例,分別是新增HTML、CSS、JavaScript、php語法的範例。 首先做一個示範,點選HTML 短代碼範例,就會進來編輯程式碼的頁面,這個範例是新增一個Shortcode,然後Shortcode的名字是shortcode_name,接著點選左下角的儲存設定並啟用。 使用方法是在文章中打 [shortcode_name] ,就會顯示下面 $out 的文字:”在這裡撰寫網站專屬 HTML 短代碼內容”。 接著去編輯文章做測試,在文章內打 [shortcode_name] ,然後儲存草稿查看。 到文章查看,發現剛剛在程式碼片段的文字顯示出來了! 這樣就是一個簡單的程式碼片段新增Shortcode的範例。   如果要提供給其他的WordPress網站使用,就只要按匯出,會存成一個json格式的文件,在另一個網站按下匯入,就可以輕鬆轉移程式碼片段。 如果要新增程式碼的話,就點選新增程式碼片段,把程式碼貼上去就好,也可以多加解釋,防止未來忘記功能。   6個程式碼片段範例教學 把所有連結改成開啟新分頁 功能介紹 一般寫文章的時候,我建議大家把所有的連結都用新分頁開啟,才不會讓網頁的跳出率太高。 但是以我而言,我很常在插入連結的時候,忘記勾選以新分頁開啟,導致有一陣子的跳出率突然變高。 所以我寫了這個程式碼片段,他可以幫你把所有非你的網域的連結改成用新分頁開啟,即使圖片也是一樣。 我要強調一點的就是這是針對非你的網域,舉個例子來說,我的網域是 johntool.com,如果連結是 johntool.com/2019-vpn-recommend/,這樣就無法以新分頁開啟。 但是透過這個功能,就只需要針對你的網域的連結特別設定新分頁開啟就好,大幅降低了遺漏的可能性。 程式碼 畫面  … 繼續閱讀

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

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

本篇文章要教你如何透過CSS語法,更改WordPress標題樣式。 最近有很多人問我,我的標題樣式是怎麼做的、有沒有推薦什麼外掛,我發現有很多人有這個疑問。 我沒有用任何CSS外掛,我只靠CSS語法! CSS介紹 CSS(Cascading Style Sheets)中文為層疊樣式表,這是一種用來為結構化文件(HTML、XML),增加樣式的程式語言。 簡單來說就是你在網頁上看到的顏色、字型、背景、動畫等等,都是CSS做的。 但是CSS不能單獨存在,他本身並不會產生文字,如果只有CSS就什麼都沒有。 講這麼多,我們來舉一個範例比較快!   以下是一個簡單的HTML,可以新增一個文件,取名為 index.html。 然後打開 index.html ,網頁的內容就會就會長成下面這樣:     接著在新增一個新文字文件,加上下面的CSS語法,把他改名成 style.css。 這時候再開啟一次網頁,就會看到網頁變成下面這個樣子:   這樣大家應該稍微了解 CSS的作用了吧! 接著要進入我們文章的重點了。   如何更改標題的CSS? WordPress是一套很友善的系統,為什麼這樣說呢?因為他不用去主機內改程式碼,只需要透過後台就可以了。 我們先進入後台,選擇 外觀,然後點選 編輯CSS。 如果在這裡找不到的話,可以參考這篇文章。 然後就會看到下面的畫面,在左邊就可以新增CSS語法。 那大家剛進來的時候,這裡肯定是空的畫面。 然後就會問,我該在裡面打什麼?我想要的樣式怎麼做出來? 所以接下來我會提供三個範例CSS給大家模仿使用。 範例一 首先,教大家改h1,h1比較特別,他在HTML語法中,通常會被視為標題,也就是你文章內的標題。 那我們要如何達成以下的樣式呢? 在WordPress的設計中,標題會有一個class,叫做 entry-title ,那如果要改class,就要加一個 . ,加起來就是 .entry-title 。 程式碼如下: 其中, 顏色或是寬度等等都可以自行調整,在編輯CSS這邊,可以馬上看到你的樣式改變的樣子。 範例二 接著我們示範 h2 ,h2~h6 的class都是一樣的,叫做 entry-content ,所以我們在使用的時候要用 .entry-content 。 但是光憑上面那樣,我們沒辦法去區分到底要改哪一個部分。 所以要打 .entry-content h2 ,如果是別的標題,就把h2改掉。 那我們這裡要達到的效果如下: 詳細的CSS語法如下: 顏色的部分,有幾種方式可以打,直接打英文(orange)、#色號(#eeeeee)、RGB(rgb(255, 0, 0)),然後實線的部分可以參考這個網站改成你要的線條。 範例三 範例三我一樣拿h2來示範,但這個例子就比較炫砲一點,參考參考就好。 程式碼如下: 如果這三個例子都不喜歡怎麼辦,繼續看下面的章節吧!   CSS語法產生器 我自己本身也不是一個太擅長CSS的人,所以我都是想到要什麼樣子才去查語法。 但是我也不是一個很有靈感的人,所以我就會去看CSS產生器有什麼有趣的樣式。 我推薦這個網站: HTML CSS JS generator 這個網站沒有什麼難度,就是進來之後,看到你想要的樣式,點進去就對了。… 繼續閱讀

Scroll Top