当前位置: 首页 > news >正文

自定义 WordPress 样式


1) 删除页脚下方的 “自豪地采用 WordPress” 字样

在SAE上安装WordPress后,默认页脚下方会出现版权字样,如下图:



在 管理页面——》外观——》编辑——》修改主题,没法保存,是不能修改生效的,正确的做法类似 自定义discuz样式,打开 ./wp-content/themes/twentyten/footer.php (twentyten是我选择的样式,选择你自己的样式),查找 “<div id="site-generator">”,注释或删去掉,如下图:



2) 将上图的“IT-Homer”字样,移到页脚右下方

通过chrome调试工具,查看“IT-Homer”样式,找出修改的css文件,调试方法如下:



找到了“IT-Homer"字样居左显示的原因,修改就很简单了,打开wp-content/themes/twentyten/style.css,搜索”site-info", 修改成如下:


修改了3处,分别是:

1)float左对齐(left)改成了右对齐(right)

2)删除了宽度限制(删除 width:700px;)

3)添加了一行“margin-right:10px)

修改后的效果,如下图:



3)登录时,修改界面WordPress的logo和链接

登陆和注册时,点击上方“WordPress”的logo,莫名链接到了“http://cn.wordpress.org/”,分析原因如下图:



找到了的原因,修改就很简单了,顺藤摸瓜,打开 ./wp-login.php 文件,搜索“wordpress.org”(不要搜http://cn.wordpress.org/,他可能是拼接字符串出来的),如下图:



把上图链接“http://wordpress.org”修改成自己的链接,如“http://iforum.sinaapp.com/”,修改后的效果,可以访问我的http://ithomer.sinaapp.com/wp-login.php,点击看一下效果


4、修改logo

步骤3修改了链接,还没修改logo,这里在分析修改logo,分析图如下:


上图有步骤3修改后的链接,这里我们重点看login引出的图片地址,打开摸出的图片所在路径: ./wp-admin/images/wordpress-logo.png,修改替换成自己的logo

wordpress-logo.png 图片默认宽和高为274px 63px

.login h1 a{background-image:url('../images/wordpress-logo.png?ver=20120216');background-size:274px 63px;background-position:top center;background-repeat:no-repeat;width:326px;height:67px;

根据这个宽高可以调整自己图片大小,也可以修改其默认宽高,打开css文件: ./wp-admin/css/wp-admin.css,搜索“.login h1 a”,找到上面浅蓝色位置,修改成自己图片宽高,如下图修改成我自己iforum的logo大小 113px 70px


./wp-admin/css/wp-admin.css 文本太多有点大,在SAE上直接打开较慢,建议在本地修改好后,上传上去就行(线上、线下源文件,都要做好备份)

替换logo后的效果如下图:


可以访问我的WordPress站点,看实际效果:http://ithomer.sinaapp.com/wp-login.php


5、给导航栏添加页面

WordPress安装完毕后,导航栏默认只有“首页” 和 “示例页面”两项,需要自己添加导航页面,添加方法如下:



记得在“新建页面”后,一定要发布,才能看得见效果,如下图:








个人认为WordPress搭建的博客网站很丑,在网上找了一下,发现还是自己水平不行,下面汇总了一些搭建比较优秀的站点:

苹果联盟:http://www.appleunion.com/

青松博客:http://www.song100e.com/


TechCrunch:http://techcrunch.com/

Flickr Code:http://code.flickr.net/

SAP Info:http://en.sap.info/

Quartz:http://qz.com/


更多WordPress搭建的案例,请见官方的:

http://wordpress.org/showcase/


相关文章:

  • 比较了一下基于PhoneGAP/JQ Mobile 等基于HTML5的Phone 开发框架
  • (poj1.2.1)1970(筛选法模拟)
  • 关于nmap的几个技巧
  • Erlang几种判断语句:if、case等
  • (pojstep1.3.1)1017(构造法模拟)
  • 新视野OJ 2190 [SDOI2008]仪仗队 (数论-gcd)
  • WinForm_2一个简单实用的小应用——桌面时钟
  • 数据分析工程师笔试题:计算平均数的指标及其优缺点
  • 新视野OJ 2005 [Noi2010]能量采集 (数论-gcd)
  • Python 入门教程 17 ---- Introduction to Classes
  • HDU 4288 Coder 【线段树+离线处理+离散化】
  • 近期刷题的c语言总结。
  • 程序员看婚姻
  • Python 入门教程 18 ---- File Input/Output
  • 【职业】致迷茫的大学生们
  • 【译】JS基础算法脚本:字符串结尾
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • 【JavaScript】通过闭包创建具有私有属性的实例对象
  • 【许晓笛】 EOS 智能合约案例解析(3)
  • 2017 前端面试准备 - 收藏集 - 掘金
  • canvas 高仿 Apple Watch 表盘
  • codis proxy处理流程
  • Fastjson的基本使用方法大全
  • node.js
  • opencv python Meanshift 和 Camshift
  • Vue官网教程学习过程中值得记录的一些事情
  • 反思总结然后整装待发
  • 浮现式设计
  • 简单基于spring的redis配置(单机和集群模式)
  • 三分钟教你同步 Visual Studio Code 设置
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 微信端页面使用-webkit-box和绝对定位时,元素上移的问题
  • 原生Ajax
  • 长三角G60科创走廊智能驾驶产业联盟揭牌成立,近80家企业助力智能驾驶行业发展 ...
  • 组复制官方翻译九、Group Replication Technical Details
  • ​MPV,汽车产品里一个特殊品类的进化过程
  • #Linux(Source Insight安装及工程建立)
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • #经典论文 异质山坡的物理模型 2 有效导水率
  • (007)XHTML文档之标题——h1~h6
  • (06)Hive——正则表达式
  • (1)(1.11) SiK Radio v2(一)
  • (JS基础)String 类型
  • (zhuan) 一些RL的文献(及笔记)
  • (二) Windows 下 Sublime Text 3 安装离线插件 Anaconda
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (转)Windows2003安全设置/维护
  • .net 按比例显示图片的缩略图
  • .NET/C# 异常处理:写一个空的 try 块代码,而把重要代码写到 finally 中(Constrained Execution Regions)
  • .NET中两种OCR方式对比
  • @31省区市高考时间表来了,祝考试成功
  • @angular/cli项目构建--http(2)
  • @Repository 注解
  • [] 与 [[]], -gt 与 > 的比较
  • [23] 4K4D: Real-Time 4D View Synthesis at 4K Resolution