知更鳥HTML5+CSS3響應式免費wordpress博客主題Ality

一直以來,知更鳥的wordpress主題無論是收費的或者免費的都非常受歡迎,用戶眾多。Ality主題是知更鳥繼HotNews主題后的又一精品wordpress免費主題,發佈已經有很長一段時間,目前更新至0.33版本,採用HTML5+CSS3響應式布局,適合不同分辨率設備瀏覽,集成多種流行元素,圖標字體,Retina(視網膜)顯示,兼容IE6+、 Firefox、Chrome、Opera、Safari等主流瀏覽器。

知更鳥HTML5+CSS3響應式免費wordpress博客主題Ality

主題功能簡介:

  • 集成熱門文章、熱評文章、隨機文章、相關文章、近期留言、本站推薦、大家喜歡等自定義小工具
  • 集成分頁導航
  • 集成SEO功能
  • 集成百度站內搜索、百度推薦、百度分享
  • 集成代碼高亮
  • 集成「喜歡」按鈕
  • 首頁置頂文章及分類歸檔頁面推薦文章突出顯示
  • 首頁排除指定分類文章
  • 首頁手動選擇文章排序方式
  • 最新文章角標提示
  • 最近留言、代碼高亮、聯繫表單、文章歸檔、友情鏈接等多個獨立頁面模板
  • 不同頁面顯示不同側邊欄小工具
  • 圖片lightbox查看,視頻lightbox播放
  • 主題選項面板
  • 滾動加載文章
  • 編輯器增強,後台編輯顯示樣式與前端相同
  • 移除頭部冗餘代碼
  • ajax評論提交
  • 自動縮略圖,並支持特色圖像功能
  • 自定義文章類型:滾動公告
  • 前台登錄
  • 短代碼文字摺疊
  • 下載鏈接按鈕
  • 多個廣告位
  • 鍵盤翻頁
  • 正文頂部文章摘要
  • 支持圖像、日誌文章形式
  • 支持菜單功能
  • 支持背景功能
  • 評論添加表情與圖片
  • 正文文字無級放大縮小

主題使用教程:

提示:使用主題前請禁用其它插件,只保留本主題推薦的插件:wp-postviews,否則可能會造成主題部分功能不可用,之後逐一調試安裝其它插件。

將下載的主題壓縮包,通過後台 → 主題 → 添加 → 上傳主題。或者使用FTP工具軟件將解壓后的Ality文件夾(不包含類似Ality-01的外層文件夾)上傳到wp-content\themes目錄,併到後台 → 主題中啟用。

必裝插件

主題部分功能比如:熱門文章小工具,需要用到文章瀏覽計數插件:wp-postviews,可以在後台插件安裝中搜索該插件。

文章置頂

首頁及分類歸檔頁面置頂文章突出顯示。

文章置頂方法:

方法一、編輯文章時,左側發佈面板 → 公開度 → 勾選「將文章置於首頁頂端」

方法二、打開所有文章頁面 → 快速編輯 → 勾選「置頂這篇文章 」

菜單

主題支持三個「菜單」,分別是頂部菜單、導航菜單、移動版菜單(用於移動瀏覽器)。

可登錄後台 → 外觀 → 菜單,在菜單編輯頁面為三個菜單分別添加不同的項目組合。

具體使用方法參閱:WordPress 博客3.0+版本自定義菜單的使用方法

添加滾動公告

1、發佈公告

啟用主題后,進入後台,在左側功能菜單中新增公告菜單,點擊「發佈公告」,進入公告編輯頁面,其它與正常編輯發表文章相同。

2、顯示公告

進入主題選項(後台 → 外觀 → 主題選項)頁面,在常規設置中勾選「顯示公告」。

註:如打開公告顯示404頁面,可以到後台 → 設置 → 固定鏈接,在固定鏈接設置頁面,隨意修改一下固定鏈接格式,保存更改后,再換回自己正常用的格式,即可。貌似什麼都不動,只多點幾次保存更改就可以了。不行就多重複幾次

小工具

主題集成7個可放置小工具的位置分別是首頁側邊欄、正文側邊欄、分類歸檔、正文底部、正文跟隨滾動、首頁、分類歸檔跟隨滾動,需分別添加小工具,實現不同頁面顯示不同的內容。

主題集成熱評文章、熱門文章、隨機文章、相關文章、最近留言等小工具,部分小工具不可以同時在一個頁面調用兩次,否則會顯示錯誤。

下載按鈕

第一步,編輯文章時切換到文本(HTML)模式,點擊編輯器工具欄上的「下載按鈕」

知更鳥HTML5+CSS3響應式免費wordpress博客主題Ality

在適當位置添加短代碼「〖file〗」

第二步,添加自定義欄目,名稱:button1 ,值:輸入文字,比如:主題下載(用於啟動下載彈窗及顯示下載彈窗中的按鈕);

第三步,繼續添加自定義欄目,名稱:url1 ,值:下載文件鏈接;

多個下載鏈接重複第二步和第三步,自定義欄目名稱:button2、button3、button4 與url2、url3、url4共支持4個。

知更鳥HTML5+CSS3響應式免費wordpress博客主題Ality

註:如文章編輯框下面無添加自定義欄目面板,打開右上「顯示選項」勾選自定義欄目,調出該面板。

SEO
  • 首頁描述及關鍵字需到主題選項中添加
  • 分類列表頁面,直接調用分類描述為該分類的頁面描述,無關鍵字。
  • 正文頁面,自動截取第一段落文章為描述,如添加文章摘要則將摘要作為描述,文章標籤為關鍵字。
  • 標籤頁面,直接調用標籤名稱為描述,無關鍵字
  • 頁面文件,需為該頁面分別添加自定義欄目:
  • 名稱:description,值為:該頁面描述
  • 名稱:keywords,值為:該頁面關鍵字
站點Logo

默認顯示文字站點標題,可以到主題選項中切換到顯示Logo。

為了在小屏顯示設備上顯示Logo以及支持Retina(視網膜)顯示,本主題需製作4張不同尺寸的Logo圖片,分別替換 Ality\img 目錄和 Ality\img\2x 目錄,相同格式尺寸的Logo圖片。

圖片lightbox查看

文章插入圖片時,從URL插入(外鏈)必須選擇鏈接到:圖像URL;本地上傳,必須選擇鏈接到:媒體文件,並且圖片名稱不能為中文漢字,否則不會啟用圖片lightbox查看。另外,圖片對齊方式不能為空,必須選擇一種對齊方式,否則在小屏上可能會溢出邊框。

縮略圖

主題支持Wordpress特色圖像、自定義欄目調用指定圖片、自動調用文章中第一張圖片為文章列表縮略圖。

默認未開啟特色圖像自動裁剪圖片功能,可以到主題選項中打開,為了Retina(視網膜)顯示,縮略圖尺寸為:280×200,實際顯示為:140×100,無圖顯示默認佔位圖。

調用指定圖片,需添加自定義欄目,名稱:thumbnail ,值:圖片鏈接地址。

文章版權聲明

轉載文章時,出於對原作者的尊重,註明原文出處,添加自定義欄目,名稱:copyright ,值:原文鏈接地址。

最終顯示效果如:

版權聲明: 本文為轉載文章,源於互聯網,由博客吧整理,原文鏈接

獨立頁面模板

主題集成文章歸檔、近期留言、聯繫方式、代碼高亮(僅用於文章中代碼高亮轉換)等獨立頁面模板。

使用方法:

新建一個頁面,右側頁面屬性 > 模板中,選擇相應模板,發表即可。

使用聯繫方式模板時,需打開主題 Ality\inc 目錄的 form.php 模板文件,修改其中的電子郵件地址為自己的。使用該模板前提是主機空間支持mail函數。

百度站內搜索、百度推薦

這兩項功能,都需要站點有一定文章量,同時百度收錄正常才能使用。

代碼高亮

主題集成代碼高亮顯示,使用方法:

  1. 添加代碼高亮轉換工具。新建頁面文件,右側頁面屬性 → 模板中,選擇「代碼高亮」併發布。
  2. 打開這個新建的代碼高亮頁面(點此查看效果),通過轉換工具,將代碼轉換為HTML代碼。
  3. 編輯文章時切換到文本(HTML)模式,將轉換后的代碼複製粘貼到文章中。
文章二級、三級標題樣式

編輯文章時,當文字選擇段落格式為二級、三級標題(H2、H3)后,會加上明顯的樣式標記。

文字摺疊

通過添加短代碼可實現文字摺疊效果。

添加顯示隱藏按鈕:

摺疊隱藏的文字添加短代碼:

【p】摺疊隱藏的文字【/p】

註:其中的【】替換換為方括號「[]」。

如圖:

知更鳥HTML5+CSS3響應式免費wordpress博客主題Ality

可用於摺疊隱藏插入文章中的代碼,章節內容,具體效果見本文。

註:該功能不可濫用,不然有朝一日換主題會很悲劇。

廣告位

主題集成5個不同位置的廣告位置,分別在導航菜單下面、文章列表第一篇文章下面、正文標題下面、評論表單上面及下載彈窗中。另外可使用Wordpress文本小工具在側邊欄中添加更多廣告。

文章摘要

編輯文章時,在編輯框下面的「摘要」中輸入摘要內容后,會在文章頂部及文章列表中顯示輸入的摘要內容。

註:如無「摘要」輸入框,可以打開右上角的「顯示選項」中勾選「摘要」

文章形式

主題支持標準、日誌、圖像文章形式。通過不同的外觀樣式顯示調用正常有圖片文章(標準)、無圖片文章(日誌)、以圖片為主文章(圖像)。

使用方法:編輯文章時右側形式面板中勾選不同的文章形式,發佈后,會在文章列表頁面,展現不同的外觀樣式,讓頁面布局顯得靈活多變。

如文章編輯頁面無形式選擇面板,需打開右上顯示選項,勾選「形式」

插入到圖像日誌中的圖片大小比例最好相同,否則在文章列表中顯示會不整齊。

分類推薦文章

為準備顯示在分類歸檔頁面頂部的文章添加自定義欄目,名稱:hot,值:可任意內容。

併到主題選項中,勾選「顯示分類推薦文章」

視頻lightbox(彈窗)播放

編輯文章時切換到文本(HTML)模式,點擊「添加視頻」按鈕,在文章適當位置添加短代碼,並用視頻站點的分享代碼替換「視頻分享代碼」文字。

註:一般是複製視頻站點分享的flash地址

友情鏈接添加頭像

編輯鏈接時,在備註中添加對方站長的郵箱地址,前提是對方已用此郵箱申請了Gravatar頭像。

本站推薦小工具

為推薦文章添加自定義欄目,名稱:hot,值可任意。

注意事項
  • 主題雖然支持IE 6及IE 7,但只能保證基本布局不變形,建議使用IE8以上或者其它現代瀏覽器。
  • 正確顯示樓層號,需到後台 → 設置 → 討論,勾選「分頁顯示評論」,並選擇在每個頁面頂部顯示「舊的」評論
  • 選擇顯示分類推薦文章,如分類無推薦文章則文章列表頂部會有空隙,所以每個分類都要添加推薦文章
  • 主題自帶的近期留言小工具不顯示登錄者的留言。
  • 文章中插入圖片時,圖片對齊方式不能為空,必須選擇一種,否則圖片較大時會超出邊框。
  • 相關文章小工具是調用具有相同標籤的文章,無相同標籤文章,則顯示同分類文章,並且應添加到正文底部小工具中。
  • 熱評文章小工具,同一個頁面不可以同時出現兩次,否則會提示錯誤。
  • 文章中的圖片無法隨意拖小放大。可通過給圖片添加說明,當出現有說明的邊框后,可隨意縮放。
  • 為了讓所有瀏覽器支持響應式布局,低版IE在打開或者刷新頁面時會出現短暫空白,IE7加載尤為緩慢。
  • IE6不支持圖標字體,有小圖標的位置會出現空白,主題在IE6下只能保證基本外觀布局不變形。
  • 如你的站點名稱較長,在分辨率較低的移動設備上頂部導航的站點標題可能會錯位,解決辦法:
  • 隱藏右側的搜索及登錄按鈕,將下面的樣式添加到Ality\css目錄的mediaqueries.css樣式文件中:
1 2 3 4 5 6 
#set-top {     display: none; } .logo-simple {     width: 70%; }

添加到:

1 
@media screen and (max-width: 480px) {

這句的下面。

主題下載:wordpress-Ality033.zip (0.33 版本)

版權聲明:您可以免費使用、傳播和修改本主題,但請保留頁腳設計者鏈接,不得將本作品用於商業目的,包括所有頁面元素!


想在手機閱讀更多css資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems