在使用WORDPRESS建立商业网站时你需要了解的?[转载]

读了这篇文章,很有感触,分享给大家。

以下是原文:

原文地址:http://www.wheatv.com/2002.html  作者:badjohnny (网页设计师)

在使用WORDPRESS建立商业网站时你需要了解的?

在玩WordPress的4年里,目睹WP的功能越来越强大的同时,也感受到了WordPress越来越臃肿复杂,不再是曾经众多博主所认为的简单易用,尤其对于很多完全陌生的新手来说,诸多WP专用的术语也一知半解,比如“自定义字段”,“自定义缩略图”,“自定义表单”……这么多的自定义也表明WordPress正逐渐走向一个强大的准CMS系统了,也正因为功能的强大和众多的开发者提供的资源,很多人开始选择用WordPress建立自己团队或者公司的垂直资讯网站或者企业网站了(如36氪、Tech2ipo等等),但犹豫对WordPress诸多功能和特性的不了解,都造成了很多使用的不便,甚至是网站架构的失误,在此将总结一下这段时间里曾找我设计和开发过主题的朋友经常咨询到的一些问题,供有计划使用WordPress建立商业网站的朋友们参考。

你的网站是否适合使用WordPress搭建?

这是在网站搭建之初必须笼统要考虑到的,会影响到网站今后的维护和升级扩展。简单的说,考虑是否适合和用WordPress来做网站,首先得看网站类型,如果是以内容展示为主的网站,这是WordPress的强项,正如它的介绍中所提到的“Publish Platform-内容出版平台”,但如果要建立一个社区性质的网站,可要知道WordPress的会员功能其实非常弱,当然简单的讨论小组什么的也完全可以利用bbpress和buddypress来实现,这主要是界面的定制问题了,但如果你需要的会员功能较复杂的时候,比如你需要引入积分功能,像Discuz的任务模块、各种Web应用的话,使用WordPress就十分费事了,虽说完全可以通过二次定制来开发出来,但相比在此方面更为强大的drupal,何不选用后者,或者其他功能需求更为接近适合的开源程序呢?谈及这点,是因为曾遇到不少朋友用WordPress建站进行到一半的时候,发现某一点上可能WP并不适合,进退两难。

同时还要考虑到如果今后希望扩大规模时,WordPress的架构是否能轻松应付,降低开发成本,并且能承载一定的流量,也是要考虑进去的,因为据很多使用VPS的朋友反映,WordPress安装在服务器上挺消耗资源,这个我没有实际测试过,仅在此提及一下。所以在确定使用WordPress建立商业网站之前,需要对WordPress的功能、特点有全方面的了解。

明白WordPress主题设计开发的实质

我想说的是在WordPress越来越强大的同时,也许主题的开发并不是很多新手所认为的简单的模板制作,套上PHP各种标签函数等就可以的,如果你需要做的网站需要定制很多应用化的东西,比如通过后台设置可以实现同步微博到网站指定区域、广告管理、用户注册投稿等,实际上都是插件开发的过程,只不过这个主题中将所有插件的功能全部集成到一个主题文件夹中了。通常这类网站可以理解为是一个基于WordPress的Web应用,并且集成了各种前端应用。明白主题开发的实质,将有益于和开发者沟通出对双方都更加合理的价格。

为了让你的网站构思有更多可想象空间,你要知道的WordPress进阶使用技巧

这里说的常用技巧并不是说如何发布文章、发布图片等,而是进阶使用技巧,当然如果网站架构的很简单的话,可以忽略这些。除了基本的自定义菜单如何使用、特色图片设置以外,你最好还要知道如何去使用页面模板功能,短代码自定义功能等等,当然这些具体取决于你所使用的主题是否有这些功能。因为这些功能基本在稍微有些难度的网站上,都会体现,比如利用页面模板来实现单页面的差异化、不同分类拥有不同的列表页样式等等。而短代码则如同大多数用过DISCUZ论坛的朋友所知道的UBB代码一样,你可以用实现封装好布局样式、数据调用方式的短代码来实现更加自由的版式调整和数据读取。因为本篇文章不是教程,因此仅在此将常用技巧罗列于下,有兴趣了解的朋友可以借助Google来学习研究一下。如果你对这些东西了如指掌的话,对你去策划一个网站会有更大的想象空间,所以至少要知道有这么回事。

  • 自定义导航菜单的设置
  • 文章特色图片的添加设置
  • 自定义字段使用的了解
  • 页面模板绑定
  • 短代码的功能意义
  • 必要的话,要对WordPress的一些功能接口有所了解(当然这个可以与专业的开发者去咨询)
将网站的构思和WordPress系统对接分析

也许在经过一阵头脑风暴后,对网站整体已经有了较清晰的构思,甚至已经画出了各个页面的简易框架示意图了,此时要做的,是将你的构思讲给开发者,开发者会通过自身对WordPress现有的功能和底层架构来分析哪些需求是可行的,哪些是不可行的,此时需要通过沟通来协商出最佳方案,如果说上面谈到的第一步是需要自己大致笼统的了解WordPress能干什么,那么这一步的目的就是讲这种分析深入到需求的每个细节之处。

在反复论证之后,确认了基本所有最初的需求都能在WordPress上找到解决方案或者折中方式后,就可以真正开始网站的开发了,但别忘了,整个项目的进行,不是设计师、工程师单方面的事,作为需求方一定要及时跟进,及时反馈自己的想法,避免出现理解偏差导致返工现象或者合作不下去的情况。

一个WordPress主题的开发过程

首先是设计,页面设计可以分为两个范畴,风格设计和具体的PSD实现。其中风格设计是大多数用户会忽略的,比如有人会指着某个网站告诉我,我希望类似与他这样的,挺简单的。实际上这种简单仅能说明PSD实现的难度很简单,比如极简化的风格画起来确实要比画一个游戏专题页面省事的多。但这个东西在PSD画布上实现之前,是需要设计师在脑子里通过分析需求和想象借鉴去形成某种风格、版式的,那这个比较抽象的过程在我理解就是风格设计的过程。因此通常WheatV Themes报价时,也会将风格设计的费用加进去。风格设计主要体现在首页,在风格形成后,其他页面基本就是延续主页的风格继续在PSD中逐步完全的过程了

接下来是前端开发。简单的理解是将PSD设计稿用HTML+CSS去实现成一个个的静态网页。但前端开发的难度也会根据交互的需求而变化,同时要兼容各种主流浏览器,或者要通过W3C验证。前端可以分为三个层面的实现,表现层(即样式的实现)、结构层、行为层。因此前端工程师们也同样是很辛苦的,所以通常在开始前端制作的阶段,是很少有人愿意允许用户再继续反复修改设计的,因为这无异于将一栋楼盖起来后,你觉得楼梯应该放在右手边更好,结果不得不局部甚至全部拆掉重新来。所以,在设计阶段一定要沟通确定的更加彻底一些。

最后就是WP开发了。PHP程序员会将前端的静态页面大卸八块,大致分为header,footer,sidebar等等的区域模块,然后通过各种PHP和WordPress所提供的函数、Hook来实现主题对数据的动态调用,复杂的主题一般还会在后台扩展出主题控制面板和自定义字段控制面板,通过图形化的界面让用户更加容易实现各种操作。在全部开发完毕后,要详细去测试各项功能,并及时反馈,协商解决。至此,基本的开发过程就结束了。

希望此篇文章能对有WP建站需求的朋友有所参考和启发的作用,也希望对WordPress不是很熟悉的朋友对主题开发有一个更加清晰的了解。

div宽度固定实现中英文混合自动换行CSS

因为有个站要改版,最近在折腾前端,

中间遇到一个小问题,今天抽时间查了资料给解决了。

固定宽度了,中间有中英文混合的文字,在IE下出现不自动换行的问题。

代码如下:

<div class="feedback-text">
<a href="/category/id/3.html" title="" target="_blank">DJ舞曲</a>
</div>

对应CSS:

.feedback-text {
top: 0;
left: 0;
width: 27px;
font-size: 12px;
line-height: 14px;
}

.feedback-text a {
color: white;
text-decoration: none;
padding: 8px 5px;
width: 18px;
display: block;
}

从CSS中可以看出,宽度是固定了,

而中英文混合,出现问题,所以对其进行设定自动换行

通过word-break: break-all;对文字进行强制自行换行

把word-break: break-all;加入上面的CSS中即可,

两者任何一个里面添加都是可以的。

暂时解决了这个问题,如果新问题,再折腾吧。

XHTML 与 HTML 之间的差异

通过开始编写严格的 HTML,你可以为 XHTML 做好准备。

如何为 XHTML 做好准备

XHTML 与 HTML 4.01 标准没有太多的不同。

所以将你的代码升级至 4.01 是个不错的开始。

另外,你应该马上使用小写字母编写HTML代码,同时绝不要养成忽略类似 </p> 标签的坏习惯。

祝您可以愉快地编码!

最主要的不同:

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

元素必须被正确地嵌套

在 HTML 中,某些元素可以像这样彼此不正确地嵌套:

<b><i>This text is bold and italic</b></i>

在 XHTML 中,所有的元素必须像这样彼此正确地嵌套:

<b><i>This text is bold and italic</i></b>

提示:在嵌套列表中一个容易犯的错误,是忘记内部列表必须位于 li 元素中,就像下面这样:

这是错误的:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>
</ul>

这是正确的:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

注意:在正确代码的例子中,我们在 </ul> 之后插入了一个 </li> 标签。

XHTML 元素必须被关闭

非空标签必须使用结束标签。

这是错误的:

<p>This is a paragraph
<p>This is another paragraph

这是正确的:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

空标签也必须被关闭

空标签也必须使用结束标签,或者其开始标签必须使用/>结尾。

这是错误的:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

这是正确的:

A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML 元素必须小写

XHTML 规范定义:标签名和属性对大小写敏感。

这是错误的:

<BODY>
<P>This is a paragraph</P>
</BODY>

这是正确的:

<body>
<p>This is a paragraph</p>
</body>

XHTML 文档必须拥有一个根元素

所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下:

<html>
<head> ... </head>
<body> ... </body>
</html>

CSS让文字、图片及input单行水平对齐的简单方法

CSS单行图文水平垂直对齐方法:

CSS样式:
div img,div input{ vertical-align:middle}

HTML代码:
<div>
<label>姓名:</label><input typt="text" /><img src="xxx.jpg" width=50 height=20 alt="验证码" />
</div>

<div>
<img src="xxx.jpg" alt="注册" /> <a href="#">取回密码"</a>
</div>

这时只要我们给图片加上垂直对齐的属性,后面的文字连接会相应的与图片水平对齐,即: img{     vertical-align:middle;}。当垂直对齐属性为“top“的时候,文字链与图片顶部水平对齐,如次类推。

如果是input与文字链放在一起,在ff和ie7、ie8中文字链都与图片顶部水平对齐,但是在ie6中却是底部对齐,同样我们可以给input添加垂直对齐属性来达到各个浏览器显示效果

CSS 跨浏览器透明 border

在先进的浏览器中,让一个元素的 border 变为透明,只需要把 border 的颜色改为 transparent ,例如:

#id {

border-right: #0F0 solid 400px;

border-bottom: transparent solid 400px;

}

上面的代码就可以生成一个直角等腰三角形,但在 IE6和7 中,你需要这样写:

#id {

width: 400px;

height: 400px;

width:0;

height:0;

border-right: #0F0 solid 400px;

border-bottom-style: dashed;

}

来源:http://www.codecto.com/2010/10/cross-browser-transparent-border/

列表中显示文字强制不换行,大于li宽度自动隐藏...

li{
display:block;
font-size:14px;
height:16px;
line-height:16px;
width:330px;
white-space:nowrap;     //强制不换行
overflow:hidden;            //自动隐藏文字                                                                            
text-overflow: ellipsis;    //文字隐藏后添加省略号
-o-text-overflow:ellipsis; //适用于opera浏览器
}

涉及关键属性的语法:

1、语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)

2、
语法:
overflow : visible | auto | hidden | scroll
参数:
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条

3、
语法:
white-space : normal | pre | nowrap
参数:
normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)

css sprite是什么,怎么用css sprite

一、CSS Sprites简介

CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

加速的关键,不是降低重量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。

二、CSS Sprites原理

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

三、CSS Sprites优缺点

利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;

CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点,如下:

在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内不会出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;

CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!

CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。

CSS Sprites非常值得学习和应用,特别是页面有一堆ico(图标)。总之很多时候大家要权衡一下利弊,再决定是不是应用CSS Sprites。

四、CSS Sprites的使用

有几篇关于CSS Sprites的文章,基本上把其原理和机制说明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites

五、CSS Sprite的例子

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}

引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..

#ico1 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

#ico2 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

#ico3 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

.nav {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚

六、CSS Sprites的问题

由于IE6存在的background的flicker问题IE6/Win, background image on , cache=‘check every visit’: flicker!,有人针对此问题提出了解决方案Fast Rollovers Without Preload

关于IE6的flicker问题,fivesevensix上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6

另外:brunildo的CSS tests and experiments是关于css各种功能不错的参考手册和测试工具。

span 换行与不换行

    span 换行与不换行
在设置span里面的内容有背景的时候会遇到如下问题:
1、设为display:block可以解决有背景,但换行,因block属性原因,必会换行
2、不用display:block背景便不会全部显示出来
3、float:left也不好用
4、有的只好用定位,较麻烦
解决办法:
把display设置为:inline-block

如何解决文字溢出,换行等问题

来源网络整理发布,仅用于学习交流使用。

完美强制换行,必须之前设定高度

word-wrap:break-word;
word-break:break-all;
-moz-binding: url('./wordwrap.xml#wordwrap');
overflow: hidden;

http://blog.csdn.net/guo_rui22/article/details/2301426  这里的答案 ff不支持

这里面有 强制不换行:white-space:nowrap; (所有的都支持).强制换行:word-break:break-all;(不支持ff)

http://www.cnblogs.com/analyzer/articles/1285732.html  这里 ie  chrome  ff  都支持

里边关于老外的资料:http://ecmascript.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

上代码

复制代码

<html>

    <body>
        <div style="width:50px;height:200px;">
            <span style="color:Red">自动换行的</span>你没你妹妹你没你妹妹你没你妹妹你没你妹
        </div>
        <div style="width:50px;height:50px;white-space:nowrap">
            <span style="color:Red">强制换行</span>你没你妹妹你没你妹妹你没你妹妹你没你妹妹你没你妹妹
        </div>
        <div style="width:50px;height:250px;word-break:break-all">
            <span style="color:Red">ff不支持</span>ssssssssssssssssssssssssssssssssssssssssssssssssss
        </div>

        <div style="width:50px;height:200px; word-wrap:break-word;word-break:break-all; -moz-binding: url('./wordwrap.xml#wordwrap');overflow: hidden;">
            <span style="color:Red">所有都支持</span>ssssssssssssssssssssssssssssssssssssssssssssssss
        </div>
    <!--因为下面图片不是真正的图片 而有边框所以width>两个img之和
        如有同学可以修改div的width为100,并且让它两个一组 那请联系我
    -->
        <div style="width:110px;height:50px;">
            <img src="#" width="50" height="50" style="border:none">
            <img src="#" width="50" height="50" style="border:none">
            <img src="#" width="50" height="50" style="border:none">
            <img src="#" width="50" height="50" style="border:none">
        </div>
    </body>
</html>

来源网络整理。仅作参考。

解决HawkHost主机安装phpwind连接数据库出错问题

今天在群里看到有人在老鹰主机安装pw出错,就帮忙看了下,后来研究了后,发现错误的原因是共享服务器上安装了Mod security,因此当网址中包含一些敏感字符时,就会被mod security阻止,从而就出现了刚才的错误提示。

解决方法:

在.htaccess文件中添加以下代码即可
 

1
2
SecFilterEngine Off
SecFilterScanPOST Off

网站根目录没有.htaccess文件的,可以自己创建一个,保存为.htaccess然后上传到网站根目录即可。