Hong Kong Style 香港風格 – WordPress主題模板

發表留言 人氣: 1323°c

文章索引

Hong Kong Style Template. 香港風格是一套現代化、採用流行而富有WordPress的特色主題,模板設計靈感是來自香港標誌[HK LOGO]「飛龍」形象,配有三條不同的色帶,飄浮在空中的彩姿,增添部落格無限色彩及活力。主題使用回應式(響應式)及扁平化設計,網頁前端構架嶄新技術,不論在智能手機、平板電腦或電腦,在任何裝置上的顯示效果都能獲得『美.視覺感官』的體驗。包括有一個獨立模組小工具的主頁模版,可添加自訂選單,及有獨立的文章彙整,網站地圖,標籤雲及搜尋頁,減少組件附設在側欄,減少圖片素材,加載網站打開速度更快一些。

單欄式主題模板,視覺直觀能吸引網友的眼球去專注地瀏覽文章,盡量減少頁面出現諸多的模組,造成網站負載降低運行效率緩慢,優越的網頁有效提高伺服器(服務器)的響應速度。

其實這個問題一般很小人會關注,也沒有什麼人會發現這個問題的重要性,一心只會加入喜歡的外掛/插件,例如: 日曆、時鍾、留言(評論)、標籤雲等,不切實際,虛耗資源,或者嘗試在模板加入以下的程式碼,輕鬆地顯示網站加載的"執行時間"及"數據庫"查詢信息。

SEO: Google谷歌的立場是網站的頁面加載速度愈快應該排名愈高,因為這些網站能為用戶提供更好的瀏覽體驗。

頁面執行時間 <?php timer_stop(4) ?> 秒(s), 數據庫查詢 <?php echo get_num_queries(); ?> 次
Hong Kong Style Theme
原始圖片: http://www.moonlol.com/wp-hong-kong-style/hong-kong-style-phone-tablet-pc.png
細心的博主應該發現到,主題缺乏了一份"多國語言"包,時間匆匆,人也沖沖,由於工作繁重,沒有多餘的時間去製作這份文件了,而且偶的本土英語也很爛,就是這個原因被WP官方主題下載站,拒於門外,風格無法上架,控制台(後台)不能自動安裝,很抱歉的,暫時將這個項目擱置先,等待日後有沒有機會再加上。

設計、構思及理念

香港是一個大都會城市,以亞洲經濟四小龍之一而著稱於世,有「東方明珠」的美譽,一直深受外國人旅客喜愛,但是近年香港發生了很多不愉快的事件,希望藉著這份主題,傳承給人們知道,香港仍是很和平、美麗及繁華的都市。

主題原來的設計是想參考「飛龍」的尾巴「」三條彩帶提材取色,前上方以尾巴藍色搭配,上下方以龍頭紅色做底色,最下方以尾巴綠色襯托,下上方以紫色格調,而中間紅色的彩帶做背景色,再加梯間式的版型呈現眼前,做出色彩繽紛和清新簡約的樣子 ^v^,但是看到這樣的配色效果參差不美,很Color Full影響整體的觀感,而且看久了感覺怪怪的,眼花瞭亂不養眼,還帶有一點點拉風(7) o(╥﹏╥)o,風格配搭遜色。 早期的原貌截圖▼
Hong Kong Style Design - 香港風格設計
原始圖片: http://www.moonlol.com/wp-hong-kong-style/hkstyle-default.png

WP主題風格資訊

中文: 香港風格
英文: Hong Kong Style
簡稱: HK Style (HKS)
作者: Jack
版權: 月光部落
網站: http://www.moonlol.com
授權方式: 免費共享

背景Logo設計

Hong Kong Style Logo
Hong Kong Style
原始圖片: http://www.moonlol.com/wp-hong-kong-style/hong-kong-style-1.png
香港風格標誌
香港風格
原始圖片: http://www.moonlol.com/wp-hong-kong-style/hong-kong-style-2.png
香港 Theme Default
香港主題
原始圖片: http://www.moonlol.com/wp-hong-kong-style/hong-kong-style-3.png

主題特色簡介

1) 瀏覽器兼容 IE10+、Edge、Chrome、Firefox、Safari及Opera等主流Browser.
2) 單欄式設計風格,減少沒用的模組在邊欄,提升網站的打開速度.
3) 在當前分類顯示所屬標籤,能查看到這個分類下有那些標籤.
4) 瀏覽人數統計,清楚知道每篇文章有多少人看過.
5) 設有獨立的文章彙整,網站地圖,標籤雲及搜尋頁.
6) 主題面板新增2個廣告位或圖片展示,在PC端和移動設備個性顯示.
7) 增加文章索引短代碼及短網址,方便閱讀者瀏覽.
8) 可自定導航選單,設有不同的色彩.
9) 回應式(響應式)及扁平化設計,在智能手機、平板電腦或PC電腦,跟隨裝置的螢幕尺寸,自動拉伸填充.
10) 持續更新維護,並按照反饋需求對頁面及功能進行改善.

* 同時知道博主很喜歡使用外部的留言程序,特別測試了2款近年較流行的"Disqus“留言外掛及"友言“評論插件,主題亦能無縫接軌,建議大家安裝,減輕空間壓力。

創作者聲明

本站對其所出品的所有風格模板都具有版權效應,請勿進行售賣盈利和加入惡意代碼等惡行,主題歡迎二次創作、個人轉載及應用在任何類似的網站建置。

主題預覽效果Demo

手機 – Mobile Phone.
手機 - Mobile Phone
原始圖片: http://www.moonlol.com/wp-hong-kong-style/hong-kong-style-phone.png

平板電腦 – Tablet.
平板電腦 - Tablet
原始圖片: http://www.moonlol.com/wp-hong-kong-style/hong-kong-style-tablet.png

PC電腦 – Computer.
PC電腦 - Computer
原始圖片: http://www.moonlol.com/wp-hong-kong-style/hong-kong-style-pc.png

風格下載及演示

主題下載: 請輕輕地按按我!
模板演示: 香港風格-Hong Kong Style
[更新時間: 28-02-2016]
說明: 下載模板並解壓縮文件,請使用"FTP 軟體"上傳到網站程序的相應資料夾(目錄),主題存放位置: /wp-content/themes,再前往控制台(後台/Control Panel)的"外觀(外观/Appearance)" –> “佈景主題(主题/Themes)"安裝(install)。

其他細節調整

新增專頁及管理網站頁面
不添加專頁那些文章彙整、網站地圖、標籤雲及搜尋頁面,就無法打開了。
前往控制台(後台/Control Panel) –> 側邊欄 –> “頁面(页面/Pages)" –> “新增頁面(新增页面/Add New)" –> 輸入"標題(标题/Title)" –> “固定網址(固定链接/Permalink)" –> 按一下"編輯(编辑/Edit)“輸入以下英文名稱 –> 右側欄"頁面屬性(页面属性/Page Attributes)" –> 選擇"模板(Template)“文件。

頁面固定網址(固定链接): 標籤雲/标签云(tags)、文章彙整/文章归档(archives)、網站地圖/网站地图(sitemap)、搜尋/搜索(search)

請看圖片▼

修改上方及下方的圖片展示
這兩個位置可以根據需求修改其他的圖片或加入廣告代碼而設立的,最佳圖片尺寸及廣告碼大小為 728×90 Size。
可以進入控制台(後台/Control Panel) –> 側邊欄 –> 外觀(外观/Appearance) –> 主題編輯器(编辑/Editor) –> 修改模板文件(header.php/footer.php) –> 完成按底下的"更新檔案(更新文件/Update File)“按鈕儲存(Save)。

header.php
<img src="<?php bloginfo('stylesheet_directory'); ?>/image/ad1.jpg" width="728px" height="130px" />
footer.php
<img src="<?php bloginfo('stylesheet_directory'); ?>/image/ad2.jpg" width="728px" height="130px" />
請看圖片▼

選單添加上底線顏色條
這個也是可以根據自己的需要而添加底線有不同的色彩顯示,可以新添一點點的美感。
也是進入控制台(後台/Control Panel) –> 側邊欄 –> 外觀(外观/Appearance) –> 選單(菜单/Menus) –> 按上方的"顯示設置(显示选项/Screen Options)" –> 新增顯示並勾選"CSS 類別(CSS 类/CSS Classes)" –> 按一下"選單名稱(菜单名字/Menu Name)“的右上三角形圖案,打開自訂欄目 –> CSS 類別(CSS 类/CSS Classes)的欄位填入"menu-x" –> 在下方勾選"主選單(主导航栏/Primary Menu)" –> 最後按"儲存選單(保存菜单/Save Menu)“完成,如此類推 …

總共有9種色碼可新增:
menu-1、menu-2、menu-3、menu-4、menu-5、menu-6、menu-7、menu-8、menu-9
請看圖片▼

說多一些: 本來還有一個構思是想增加幾套不同的配色模板分享給大家的,但是本人時間真的有限,末能夠補上這項成果,但是如果你懂得CSS編程,有能力自行修改模板文件,可以參考Google表單或是 WP控制台(後台)帳號頁面,在設定個人選項的管理色彩配置,找到漂亮的主流配色方案。
或者你可以前往這個網站查看色碼表: www.ifreesite.com/color

最後! 奉送一部影片(視頻)給各位觀看,這是一眾香港名星聯合攝製的"江南Style (香港版) HongKong Style" Video,扮演人物俊男美女如雲,跳出江南風格騎馬舞,幽默搞笑有趣,唱詞生鬼動聽,畫面超精彩絕輪,也是一部很有態度,自我型格,高水準的港產二次創作視頻唷 @@…

相關文章:
WordPress相關文章Related Posts

標籤: