Select Page

分類: Codex

WordPress CSS Filter – 圖片濾鏡效果樣式設計

WordPress CSS Filter 透過式樣設計,讓圖片展示各種濾鏡效果,豐富網站的頁面設計!今天分享的 CSS 設計技巧非常有趣,不需要透過影像軟體的編輯,就可以讓圖片直接產生濾鏡效果,讓 WordPress 網頁設計變得多樣化。網站架設的過程,網頁設計也是其中很重要的一環,雖然對於很多新手朋友來說,開始透過設計語法來設計網頁,可能有些難度,不過線上的教學資源真的非常多,今天介紹的 MDN 就是一個很棒的網站,雖然中文文件還沒有很完整,不過提供這麼多免費的學習文件,仍然是一個每位網頁設計者應該到訪的網站。

Read More

Balloon.css – 提示效果式樣設計

Balloon.css 只需要透過式樣設計,就可以產生漂亮的訊息提示效果。透過 WordPress 來架設網站,是一件非常有趣的事情。每個人都可以在這個主程式的規範下,去變化更種獨特的效果,而這些效果是為了自己的網站需求。同時,也可以很輕鬆的將網路上的各項設計資源整合進來套用,說真的是大大降低了網站設計師開發的時間,這麼多好用的工具,是不是也想試試看呢?今天跟大家分享的是提示效果的 CSS 設計,不需要其他 JS 程式碼,就可以產生很棒的效果,有興趣的朋友,請繼續閱讀接下來的文章內容。

Read More

WordPress Featured Images On Admin – 後台展示精選圖片

WordPress Featured Images On Admin 在後台展示文章精選圖片的縮圖,方便網站管理者的管理。前一陣子剛好有朋友問到,可不可以在 WordPress 網站後台,所有文章列表展示精選圖片,方便管理呢?搜尋一下,相關的外掛程式不少,不過精選圖片已經是內建的功能,只是要展示出來,應該可以有更簡單的方法才對,最後在 Stack Exchange Network 找到了很不錯的解決方法,趁這個機會一併跟大家分享,如果也想要在後台展示精選圖片縮圖的朋友,可以參考今天的文章內容。

Read More

Custom Colored Underline – 自訂底線效果式樣設計

Custom Colored Underline 透過自訂底線效果的式樣設計,讓重點文字或是連結有了焦點效果。漸層顏色效果一直是我個人很喜歡的一種網頁設計效果,除了可以提供訪客不同的視覺感受,更進一步可以達到推廣頁面內容的作用,這兩年也被大量的運用在網頁設計上。今天分享的內容是示範如何建立漸層效果的底線,來增加重點文字的關注效果,提升訪客的注意力,同樣也可以套用在連結上,創造出不同的式樣感覺。

Read More

WordPress Custom Translations 自訂本地化語系檔

WordPress Custom Translations 透過自訂本地化語系檔路徑的動作,避免因為語系檔案更新,而覆蓋了原來的本地化翻譯檔案!雖然目前在 WordPress 官網上,提供支援繁體中文本地化的外掛程式與佈景主題越來越多,對很多繁體中文網站也確實提供了非常大的幫助。不過有時候因應個別的案例,需要提供某些自訂的繁體中文內容,常常讓很多站長傷透腦筋。在之前分享過的 Loco Translate 外掛程式就可以提供這樣的功能,讓網站管理者可以自己翻譯外掛程式與佈景主題的語言檔。不過今天想要跟大家分享另外的一個方法,是已經有繁體中文的本地化檔案了,只想要修改部分內容來符合客戶的需要或是自己的需求,但是又不想因為本地化檔案更新,自訂的內容被覆蓋掉,有興趣的朋友可以參考一下今天分享的程式片段。

Read More

WordPress Anchor Text – 錨點文字連結

WordPress Anchor Text 錨點文字連結,網站內容中經常被使用到,特別是那些一頁式的網站,這個頁內連結就更顯得重要了。有使用 SEO 外掛程式的朋友,特別像是 Yoast SEO,應該會注意到它的發文建議中,常常提到文章需要建立外部連結與內部連結,而這些連結的文字就是所謂的 Anchor Text。不過今天我想要跟大家分享的是如何將這個錨點文字連結,運用在同一個頁面中,讓訪客可以直接跳到需要的文章段落。特別是那些一頁式網頁的網站,這個功能對於網站內容被確實讀取,有著很大的幫助。有興趣的朋友不妨參看看,如果您想要建置一頁式網頁的網站,那麼今天分享的文章內容不要錯過。

Read More

WordPress Gettext – 佈景主題中文化

WordPress Gettext 透過這個 filter hook 功能,可以幫助我們用比較簡單的方式,幫自己的佈景主題中文化。很多朋友最近因為黑色星期五的採購日,採買了很多付費的佈景主題,這些功能強大的佈景主題,因為是國外開發商開發的佈景主題,對於中文化的支援可以說是幾乎沒有,特別是很受歡迎的 Avada 也是如此。雖然佈景主題附上了語言檔,讓大家可以透過 Poedit 軟體或是在 WordPress 後台安裝外掛程式來幫我們的網站中文化,相對來說整個建置的過程耗費的時間較大。所以今天想要跟大家來分享一下,透過簡單的過濾條件,幫我們找到字串翻譯成中文,符合網站的簡單需求,中文化建置的時間可以縮短到非常短。

Read More

WordPress Gutenberg Preview 區塊編輯器預覽

WordPress Gutenberg Preview 面對即將發佈的 5.0 版,這個令人既期待又怕收傷害的區塊編輯器,有什麼需要先瞭解的呢?表定時間 11/27 即將發佈的 WordPress 5.0 版,這次的升級有了一個很大的變革,就是把行之多年的傳統編輯器,變動為區塊編輯器(Gutenberg)。這個改變在整個 WordPress 社群裡,引起來正反兩邊非常大的爭執,到底 Gutenberg 有什麼驚人之處,或是它到底有多麼難用,讓這麼多人唾棄它,今天我將透過實際操作來跟大家分享我的看法,當然也是我個人為了即將到來的 5.0 版,預先做好升級前的準備動作,有興趣的朋友就請繼續參考接下來的文章內容。

Read More

WordPress Gradient Text – 文字顏色漸層變化式樣

WordPress Gradient Text 在網頁展示文字顏色漸層變化式樣,讓活動頁面的效果更加精彩。今天跟大家分享的一個式樣技巧,我個人非常喜歡。就是透過在 WordPress 網站的分頁,製作活動頁面時,活動頁面標題或是活動訊息,透過式樣設計變化字體的顏色,不是製作圖像,可以讓頁面更活潑,更吸引訪客的目光。另外透過式樣設計(CSS),檔案小執行效率也會好,不需要多增加網頁的圖檔,目前也適用多數的瀏覽器,所以分享給大家,您可以在下列看見展示的預覽圖片,有興趣的朋友可以參考一下。

Read More

WordPress Redirect To Thank You Page – 轉向感謝頁面

WordPress Redirect To Thank You Page 將訪客在聯絡表單填寫完成以後,轉向特定的感謝頁面,除了可以表達對訪客的感謝,也可以發揮流量成果檢視效果。在 WordPress Contact Form 7 Redirect – 表單傳送後轉址頁面設定這一篇文章,我們分享過如何在 Contact Form 7 聯絡表單的設計中,將訪客填寫完成的動作轉向指定的頁面。不過這個 on_sent_ok 語法在 2017 年底,Contact Form 7 官方已經捨棄不用。因此,今天將跟大家分享在不透過外掛程式的協助下,簡單編輯佈景主題的檔案,也可以達成聯絡表單填寫完成以後,轉向自訂的感謝頁面,如果需要還可以套用 Google Analytics 追蹤碼,來記錄感謝頁面的流量記錄。

Read More

WordPress Hide Editor Menu – 隱藏文章編輯器選單

WordPress Hide Editor Menu 透過隱藏文章編輯器多餘的選單圖示,幫助編輯者可以更專注於文章內容的編輯操作。Elegant Themes 是一款我個人十分推薦的 WordPress 付費佈景主題,基於它對於網站建置的強大功能,所以介紹給非常多的朋友使用。提起這一款佈景主題從開發到現在也超過 10 年了,在設計上也增加了許多新功能。因此,對於最早時期留下來的一些功能,在編輯文章頁面時,幾乎沒有使用的機會。為了文章頁面的編輯操作可以精簡,我們將這些不曾使用的選單圖示給隱藏起來,讓文章的編輯者可以更專注在內容編輯上。今天分享的隱藏方法,除了 Divi 佈景主題的功能適用,原本的編輯器上的選單圖示也適用,有興趣的朋友可以參考看看。

Read More

WordPress Link Hover Effects – 文章連結效果

WordPress Link Hover Effects 透過增加網站內容文章連結效果,提升訪客對於網站的閱覽。架設 WordPress 網站這麼長時間以來,一直希望網站的文章內容,可以幫助訪客獲得最好的閱讀效果,所以文章內容中帶到的連結,沒有使用連結式樣效果,與內文設計一體。但是最近兩年觀察下來,很多訪客對於文章的閱讀比較沒有耐心,忽略了文章中提到的相關訊息,因此重複性的問題一直出現在詢問的信件中。所以從 8 月份開始,網站文章內容中提到的連結,新增加了顏色漸進的效果,重點式的標示出文章相關資訊連結,希望透過這樣的修改,讓訪客可以更清楚的取得更完整的教學資訊。

Read More
Loading

虛擬主機推薦

虛擬主機推薦

網站架設

WordPress 虛擬主機免費安裝設定