如何美化自己的部落格，wordpress 主題編輯入門教程。

• 2019 年 11 月 24 日
• 筆記

學習本文的知識前提：略懂html和css，已經能搭建一個wordpress的部落格。搭建不會的請看我的《關於配置lamp和wordpress》。本文不是高手教程，不過是自己在美化優化部落格的過程中，邊學邊記錄而已。

首先我的樣式是默認的主題twenty fifteen 白色為主色調，左目錄，右文章。第一步的感覺就是，字體太大了，一個版面只能放幾個文章，

對於初學者而已，在使用wordpress中，首先是把後台所有的選項和設計的全部都試一遍。把一切自定義小工具都配置到自己喜歡的樣子。

這就是基本可以符合自己的審美就可以了，主要就是設計上背景和頂部的影像不要太花哨，部落格重要的是文字而已。本部落格就使用了白色大理石的機理花紋作為整體的背景，請注意兩邊的背景是要分開設置的，而且圖片不夠大的情況下是平鋪過去，所以要確保自己的圖片適合平鋪否則看起來會很怪異。

現在開始增加有一點點技術含量的插件了，

第一個akismet是防止垃圾評論的，第二個是取消Google字體的，防止因為Google被牆導致打開wordpress的速度太慢，第三個是自帶的，挺有意思，第四個是定期備份你的部落格，很有用，第五個是需要一點設置就能在你的文章中顯示閱讀人數，因為別的都是直接安裝啟用就行，wp-postviews稍微複雜一點。

如何使用wp-postviews呢?

打開外觀-編輯，這裡可以直接修改你的主題樣式和程式碼，我們將在這裡進行大量的改變，因為具體的審美人人不同，所以僅僅講述如何去修改，以及程式碼大概的意思把。

這裡就是對應的文件以及顯示，css是全部的樣式表，想修改你任何頁面的樣式都在這裡，右邊是目錄，可以跳轉到任何的模板文件中。一般修改是index.php主頁面的。。

不反覆搬磚了，這個是說明wp-postviews具體使用。推薦http://blog.sina.com.cn/s/blog_69e1e35a01018kv4.html

之後開始籌備怎麼才能把頁面的樣式顯示的好看呢？一個整體的審美必不可少，同時個人畢竟喜歡稍微個性一點的，感覺主題就像一塊塊的不是很舒服。

接下來如何從數千行的css中找到對應的屬性進行修改，使用的瀏覽器是chrome，按f12，進入開發者模式，在目標修改的塊中右擊審查元素。

是不是很高大上的介面，你的滑鼠在程式碼出滑動就可以看到那一塊對應那一部分的程式碼，在左下有一個樣式表，這個非常重要。從中一個個找下去，看到關於背景顏色的，可以看出原來主題的文章框是白色背景的，我們找到那句話看看是處於哪一個類中，把那一行複製下來，轉到後台編輯樣式表的介面，開始查找，ctrl+f，彈出查找框，粘貼複製的程式碼，可以找到整個樣式中背景設為白色的程式碼，如果有多個，則一個個試，或者看內容是否和在開發者模式下的一直，是非在同一個類里，這樣把背景色程式碼注釋掉，就能把文本框的背景色改為透明，還是很漂亮的。

其次感覺樣式的字體太大了，同樣也是查找開發者的樣式，修改font-size，看是否當即出現變化，變化了則可以確定修改的對象是正確的，然後就是找到這句程式碼在css樣式文件中的具體文件從而更新文件。

雖然方法比較笨，但是還可以做為一個不錯的上手方式，我就修改了背景色，字體大小，以及上下的margin和pading距離。

關於性能優化！！

在chrome中選擇network，看看網路的連接速度上。

刷新一下則可以看見所有文件的載入時間，從而知道你的網站的性能如何，一般而言，只要你的主機別太糟糕，速度是會很快的，。因為 內容並不多，但是如果你的背景圖特別大，一兩m。。。那就呵呵了，請看size欄目中，就是整個頁面所有載入項目的大小，我最大的就是背景圖有60kb。這個不是問題，只要載入時間不超過兩三秒就可以接受，但是也可以看到有兩個資源是無法載入的，哪個是你的頭像問題，因為這個資源被牆了，，導致你的部落格會不斷處於載入中，這個其實很好解決，直接不顯示任何頭像就可以了，，位置在。後台-設置-討論-最下面，是否顯示頭像。取消打鉤就行。。或者安裝一個插件WP User Avatar。

如何你反覆刷新發現速度越來越快，這個是因為快取已經在你電腦上了，所以要想看真實的讀取時間，請把上方的disable cache打勾，表示不快取。

本次教程到此結束，希望能幫上各位訪客的部落格設計。。

原創文章，轉載請註明： 轉載自URl-team

本文鏈接地址: 如何美化自己的部落格，wordpress 主題編輯入門教程。