pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

教你設計自個兒的WORDPRESS主題

   幾個月前,我應Slocum Themes之邀接受一項挑戰,為博主們設計wordpress主題。理念是運用所有wordpress默認功能,創造一款簡潔有效的主題。

  我決定從社交媒體汲取靈感。畢竟,社交媒體的升級版可以被看作微型博客。對于像facebook、twitter、google+和pinterest這樣的社交媒體平臺如何展示文章,我做了一些研究,尤其是帶照片的文章,然后Socialize就誕生了。

  設計過程

  第一步永遠是在紙上畫線框圖,然后在Photoshop中進行設計,再是編碼。鑒于是wordpress主題,我能夠列出網站所有的組件和元素,所以我決定遵循基本的wordpress博客樣式(頁頭、主體、側邊欄、頁尾),不用畫太多線框圖。

  相反,我想創建一套樣式指南,所以我將一切分解,一次設計一個組件,保持整體設計的統一。我只在所有組件完成后,才將它們組合起來,而非采用常規方式,首先設計首頁再是內頁,我想要創造一套能夠用在所有頁面的可靠的指南。

教你設計自個兒的WORDPRESS主題 三聯

  文章組件

  考慮到這一點,我認為我的關注點應該在博客最重要的元素——“文章組件”上,它在首頁上要如何展現,才能吸引用戶深入閱讀。所以這就是一切的起點。我將文章組件分解為更細微的元素,例如:

  文章日期

  文章作者

  文章標題

  文章縮略圖

  文章描述

  操作項

  我決定忽略某些其他的常見元素,例如分類、標簽、評論數。

  畫了幾稿后,我對于自己想要設計什么有了固定的概念。我不是在重新發明輪子,而是在試圖簡化它,如今多數博客主題有著數量驚人的選項,我的理念是讓它在桌面和移動設備上都保持簡單有效。

Case Study - WordPress Theme Design

  隨著第一個也是最重要的組件完成,我列出其他所有需要設計的組件和元素。

  顏色

  字體

  柵格

  圖片

  導航與按鈕

  側邊欄

  頁尾

  文章翻頁

  文章評論

  顏色

  由于主題會有各種配色方案,使用多少顏色,用在哪里就顯得很重要。我是這樣分解它的:

  主色

  輔助色

  背景色

  文字顏色

  鏈接顏色

  鏈接

  鼠標懸停狀態

  鼠標點擊狀態

Case Study - WordPress Theme Design

  一旦顏色指南創建好了,可以使用Adobe Photoshop輕松將它換成另一套顏色,降低飽和度到黑白,再覆蓋一層所選的顏色。

  字體

  下一步是定義一套字體結構基準,用來指引首頁和內頁的文章。這個項目中,我所選的字體是Source Sans Pro,由Adobe出品的一款無襯線字體,在用戶界面中表現良好。盡管我在photoshop中創建了一套簡易指南,還需要編碼出一套完整版以供參考(查看字體指南)。

Case Study - WordPress Theme Design

  柵格

  我創建了一套對于帶有側邊欄的博客非常有效的柵格系統,流式布局,完全是響應式的,最大支持1200像素寬

Case Study - WordPress Theme Design

  圖片

  盡管主題是響應式的,某些圖片的尺寸會根據屏幕尺寸變化,我還是想根據柵格設定最大和最小尺寸。

Case Study - WordPress Theme Design

  導航與按鈕

  導航保持非常簡潔,顏色效果由我所選的色彩決定,為了保持整個主題的一致性。

Case Study - WordPress Theme Design

  側邊欄和頁尾

  頁尾和側邊欄用的是相同的組件,所以我將它們設計成一個,唯一不同的是,頁尾的背景色使它的組件略感不同。

Case Study - WordPress Theme Design
Case Study - WordPress Theme Design

  文章和評論組件

  要完成我樣式指南中的所有組件,還差文章和文章評論組件。

Case Study - WordPress Theme Design
Case Study - WordPress Theme Design

  最終的設計

  一旦我的樣式指南完成了,我只需要把一切拼湊起來,我編寫了HTML和CSS,交給我在Slocum Studio的朋友把它處理成wordpress主題。有些元素在編碼過程中有輕微的改動。

  這是最終的首頁,這套主題完全是響應式的,特色是支持8種不同色彩。

Case Study - WordPress Theme Design

        :更多精彩教程請關注三聯網頁設計教程 欄目,

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 预制围墙_工程预制围墙_天津市瑞通建筑材料有限公司 | 丽陂特官网_手机信号屏蔽器_Wifi信号干扰器厂家_学校考场工厂会议室屏蔽仪 | 体坛网_体坛+_体坛周报新闻客户端 | 地脚螺栓_材质_标准-永年县德联地脚螺栓厂家 | 飞扬动力官网-广告公司管理软件,广告公司管理系统,喷绘写真条幅制作管理软件,广告公司ERP系统 | 佛山商标注册_商标注册代理|专利注册申请_商标注册公司_鸿邦知识产权 | 变色龙PPT-国内原创PPT模板交易平台 - PPT贰零 - 西安聚讯网络科技有限公司 | 选宝石船-陆地水上开采「精选」色选机械设备-青州冠诚重工机械有限公司 | 经济师考试_2025中级经济师报名时间_报名入口_考试时间_华课网校经济师培训网站 | 3D全息投影_地面互动投影_360度立体投影_水幕灯光秀 | 广东银虎 蜂窝块状沸石分子筛-吸附脱硫分子筛-萍乡市捷龙环保科技有限公司 | 杭州中策电线|中策电缆|中策电线|杭州中策电缆|杭州中策电缆永通集团有限公司 | 无菌实验室规划装修设计-一体化实验室承包-北京洁净净化工程建设施工-北京航天科恩实验室装备工程技术有限公司 | 北京律师咨询_知名专业北京律师事务所_免费法律咨询 | 海南在线 海南一家| 长沙印刷厂-包装印刷-画册印刷厂家-湖南省日大彩色印务有限公司 青州搬家公司电话_青州搬家公司哪家好「鸿喜」青州搬家 | 冷柜风机-冰柜电机-罩极电机-外转子风机-EC直流电机厂家-杭州金久电器有限公司 | 捆扎机_气动捆扎机_钢带捆扎机-沈阳海鹞气动钢带捆扎机公司 | 水性绝缘漆_凡立水_绝缘漆树脂_环保绝缘漆-深圳维特利环保材料有限公司 | 盘装氧量分析仪-防爆壁挂氧化锆分析仪-安徽吉帆仪表有限公司 | 武汉印刷厂-不干胶标签印刷厂-武汉不干胶印刷-武汉标签印刷厂-武汉标签制作 - 善进特种标签印刷厂 | 变频器维修公司_plc维修_伺服驱动器维修_工控机维修 - 夫唯科技 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 发光字|标识设计|标牌制作|精神堡垒 - 江苏苏通广告有限公司 | 苏州教学设备-化工教学设备-环境工程教学模型|同科教仪 | 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | VOC检测仪-甲醛检测仪-气体报警器-气体检测仪厂家-深恒安科技有限公司 | 涿州网站建设_网站设计_网站制作_做网站_固安良言多米网络公司 | 定量包装机,颗粒定量包装机,粉剂定量包装机,背封颗粒包装机,定量灌装机-上海铸衡电子科技有限公司 | 上海办公室装修公司_办公室设计_直营办公装修-羚志悦装 | 百度网站优化,关键词排名,SEO优化-搜索引擎营销推广 | 盛源真空泵|空压机-浙江盛源空压机制造有限公司-【盛源官网】 | Q361F全焊接球阀,200X减压稳压阀,ZJHP气动单座调节阀-上海戎钛 | 六维力传感器_三维力传感器_二维力传感器-南京神源生智能科技有限公司 | 高压直流电源_特种变压器_变压器铁芯-希恩变压器定制厂家 | 福建自考_福建自学考试网 | 承插管件_不锈钢承插管件_锻钢高压管件-温州科正阀门管件有限公司 | 膜片万向弹性联轴器-冲压铸造模具「沧州昌运模具」 | NBA直播_NBA直播免费观看直播在线_NBA直播免费高清无插件在线观看-24直播网 | 上海租车公司_上海包车_奔驰租赁_上海商务租车_上海谐焕租车 | 重庆LED显示屏_显示屏安装公司_重庆LED显示屏批发-彩光科技公司 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | HEYL硬度计量泵-荧光法在线溶解氧仪-净时测控技术(上海)有限公司 | 螺杆式冷水机-低温冷水机厂家-冷冻机-风冷式-水冷式冷水机-上海祝松机械有限公司 |