手把手教你打造簡書風格的精美個人博客


廢話晚點說,先上圖,以下是本人天地會珠海分舵仿簡書風格的博客科技向前沖

怎么樣?是不是咋一看以為自己到了我們親愛的簡書了呢?^v^。

如之前本人跟簡書的“簡叔”互動討論上海的辦公室是否應該叫“簡書工作室”還是“簡書齋”等時談過,個人是被簡書這種簡潔清新的風格深深吸引的住。(這里算是給簡書打個廣告了,真的很不錯了,喜歡寫作的人去看看,包你滿意!)

既然我們都喜歡舞文弄墨的,那么有一個自己的博客是最好不過的了。這里所說的自己的博客不是說在cnbeta等博客平台上注冊個賬號這種,因為這個還是寄人籬下而已-在人家家里,很多東西你不能亂動,比如你不能在人家牆上寫寫畫畫的(如貼小廣告等)。所以這里說的自己的博客是指完全自己控制的自主博客。

該博客是基於Wordpress的,Wordpress今時今日已經非常成熟。所以這里不會描述Wordpress怎么搭建,網上一抓一大把。這里我之所以使用Wordpress的原因是它支持非常豐富的插件。

比如我們今天說的仿簡書的主題就是一個插件。但是該主題安裝之后不能直接應用,有不少地方需要進行修改。網上確找不到任何詳細的信息來指引我們進行訂制。

所以這里我就拋磚引玉,給大家說下我是怎么搭建一個高仿簡書風格的自主博客的。往下之前先致謝主題作者Pete(我是從代碼中看到Pete的名字,如果有誤的話請聯系我進行修改)

第一步 下載主題插件


看官可以到本人博客資源中進行下載http://download.csdn.net/download/zhubaitian/8541107

第二步 登錄Wordpress后台管理


首先登錄你的Wordpress網站管理后台,下面是本人Wordpress網站的后台登錄界面:

輸入你的用戶名密碼后就會進入到后台管理頁面:

Wordpress后台界面

 

WordPress后台管理界面

第三步 安裝主題


具體步驟按照以下圖片走就好了,很簡單:

找到插件選項

 

找到插件選項
 
 
添加插件頁面

 

打開插件頁面.png
添加插件頁面

 

添加插件頁面
上傳插件

 

上傳插件
安裝插件

 

安裝插件

最后點擊安裝,等待安裝完畢!

第四步 訂制其他導航頁面

這一步需要修改相應的php代碼。大家如果不懂得程序的話也不用擔心,因為我自己就根本對php只是知道個名字而已,我自己都能摸索出來,何況現在我已經告訴你應該怎么做了呢。

首先點擊下圖的主題按鈕以進入到主題設置頁面:

進入主題

 

進入主題

然后在主題的下拉菜單中點擊“編輯”:

點擊編輯菜單

 

點擊編輯菜單.png

點擊后會來到這個編輯頁面:

進入編輯頁面

 

進入編輯頁面.png

大家可以看到右邊顯示了該主題的所有代碼文件,我們往下會對相應的文件進行簡單的修改以適應我們的要求。

這里要注意的是主頁導航頁面的php代碼文件和首頁的php代碼文件是分開實現的,雖然在網站中我們的效果看起來是一樣的。這里我們先看其他導航頁面(指的是網站中我們看到的點擊左邊導航欄非”首頁“菜單時所出現的其他頁面)。

先點擊右邊的archive.php模版文件,然后進行以下的編輯:

其他導航頁的信息設置

 

其他導航頁的信息設置.png

修改后的效果如下圖所示:

其他導航頁的信息設置結果

 

其他導航頁的信息設置結果.png

具體你要改成什么樣,需要根據你自己的情況進行修改了。

第五步 訂制首頁


首頁的訂制其實跟上面其他導航欄的訂制是差不多的,大家跟着下圖做就可以了。

首頁信息設置

 

首頁信息設置.png

第六步 訂制底部

底部信息我們可以放上我們自己的聯系方式等,要修改的文件是footer.php。

網站底部信息設置

 

網站底部信息設置.png

效果如下所示:

網站底部對應信息效果顯示

 

網站底部對應信息效果顯示.png

第七步 訂制“閱讀量”統計信息


該主題默認是沒有在主頁的文章列表中顯示出閱讀量的數據的,這里我們可以加上去。

不過說起來悲劇,增加后才知道自己網站的訪問量原來少的可憐,還望大家多捧場了。

要修改的文件是post.php:

文章列表增加閱讀量統計

 

文章列表增加閱讀量統計.png

修改后的效果:

增加閱讀量信息后的效果

 

增加閱讀量信息后的效果.png

第八步 訂制手機版懸浮菜單


PC版的信息我們算是定制完了,下面我們需要訂制下手機版的懸浮菜單項。

需要修改的文件是header.php文件,具體要修改的代碼如下圖所示:

手機端懸浮按鈕設置

 

手機端懸浮按鈕設置.png

最終你在手機上打開后懸浮菜單就會如下圖所示:

手機版懸浮菜單
 
 
展開菜單后如下圖所示:
手機版懸浮菜單項
 

至於上面的about頁面,這個跟主題就沒有什么關系了,大家在Wordpress管理后台中添加這個頁面就好了。如果確實不知道怎么去添加的話,那就在文章最后的聯系方式中聯系我好了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM