Tag: CSS Subscribe to this tag

The following articles associated with the tag: CSS
  • 美化文章标题和内容–WordPress集成有字库字体插件

    美化文章标题和内容–WordPress集成有字库字体插件

    有字库简介 有字库是全球第一中文Web Font(网络字体)服务平台。 我们致力于美化网页界面,降低网页设计和维护的难度,同时提升效率。 Web Font 的服务在国外已经比较普及, 著名的有Google Fonts、Typekit等网站,但是国内在中文Web Font上面一直是一片空白,众多中文网站设计者们只能望洋兴叹。 有字库为此应运而生。 在正式介绍插件以前,先来普及下有字库能够干什么,换句话说,就是其特色功能。由于官方的介绍比较长,在本文我就简略描述下,需要具体了解的可以通过我给的链接查看。 特色功能 在线字体: 通过按需截取的方式生成小字库(可以小到几十K,甚至几K),有效控制了字体文件的大小,使中文也加入了网络字体的阵营。 解决了之前由于中文字体过于庞大,小则三五兆,大则十几兆,在线字体只流行于英文网站的情况。 美化网页: 现在已经不是万维网初期的草莽时代,用户们对网页的效果越来越挑剔。 由于网页中最主要的元素莫过于字体了,所以要根据不同的场景,采用不同风格的字体。 全面兼容: 常见的都支持,不过有一点点儿版本限制,基本可以忽略不计负面影响。 极速稳定: 采用了阿里云的存储与CDN服务,即使官网宕机,其服务依旧可用。 简单易用: 有字库有三种调用方式,第一种是CSS引用方式,第二种是Javascript引用方式,第三种就是用有字库的SDK 。 而我这次介绍的,就是第三种方法——官方开发的WordPress插件。 托管独享: 这是针对商业客户的功能,为了客户方便使用其购买的商业字体开发的。 有字库对你从方正、蒙纳能字体厂商处购买的字体进行托管,该字体只有你自己才能使用,其他人无权使用。 要了解更多,可访问有字库官方:http://www.youziku.com/introduce/index 接下来的是我个人认为的一点优势: 第一,其字库服务使用了安全证书,能有效保证网站的绿锁正常。使用最新版的Chrome浏览器的人可能深有体会,没错,就是上面会有大大的“安全”字样。 第二,每个月赠送10万库币,个人用户使用基本上不用出太多的钱。 第三,这个是我潜伏在群里看他们聊天发现的。如果你对你的字特别有信心,有字库可以免费帮你把自己的字制作成字体,然后进行托管使用。 第四,暂时没发现,先占坑留着。接下来,就正式开始介绍其插件的使用步骤了。 使用步骤 第一,下载插件。官方开发的WordPress插件 下载完成以后对压缩包名称进行重命名,比如我的是“youziku”。 第二,安装插件。 登录WordPress后台,点击 插件 》 安装插件 》 上传插件 》 选择文件 》现在安装。安装完成以后,会跳转到成功界面。点击下面的启用插件,进入下一步的设置。 第三,设置插件。 进入有字库官网,注册并登录帐号。点击个人中心进入我的账户。点击接口白名单,添加要使用服务的域名,通常只需添加其一级域名(不带 www. 的部分),默认的带 www. 的二级域名就会自动添加上。 接下来,鼠标移动到WordPress后台的左侧边栏的有字库设置,会弹出“有字库设置”和“初始化设置”。点击初始化设置,填入有字库分配的ApiKey和UserKey。 进入有字库官网,点击在线字库。选择你喜欢的字体进行收藏,至少选择两款字体,一款标题字体和一款内容字体。 然后导入你收藏的字体,并保存更改。如果以后收藏了更多的字体,再次重复其操作。我们也可以在这里导出其字体设置,并妥善保存,以便日后不时之需。 点击“初始化设置”上方的“有字库设置”,选择合适的文章标题字体和文章内容字体,保存更改并应用到所有文章。特别提示,下方的自定义字体设置部分,需要使用者个人有较扎实的前端知识,适合网页设计师和前端工程师等专业人士使用,这里就不多说了。 到了这里基本上就设置完成了。如果你只是想测试一下,上一步中只需选择相关字体并保存更改,不用应用到所有文章。随机选择一篇文章,点击编辑器上方的绿色有字库标识,选择合适的字体,把代码插入到文中,然后进行文章更新。多刷新几遍,然后就可以看到具体效果了,如下图。

    View More

  • WordPress插件-在 WordPress 的页眉(header)和页脚(footer)添加代码

    WordPress插件-在 WordPress 的页眉(header)和页脚(footer)添加代码

    在网站项目中,网站客服需要在网站中添加某个客服交谈工具代码,还需要对PC和手机添加不一样的脚本代码。如果没有太多时间精力每个网站修改代码,所以就需要找一个插件实现。 Download Header Footer Code Manager 就是一个可以在网站页眉或页脚、文章内容上方和下方插入代码(HTML / Javascript / CSS等)的插件。你可以在插件中创建一个个代码片段,就像发布文章一样简单。可以选择代码加载的页面、位置,也可以通过简码进行调用。可以意见禁用和开启,支持设置PC端还是手机端,或者两者都加载。 代码片段列表: 新建片段界面: 你可以在后台插件安装界面搜索 Header Footer Code Manager 在线安装,或者在这里下载 Header Footer Code Manager。倡萌已经将该插件汉化,并提交给作者,如果你急着使用,点击下载中文包(密码:j6xr),解压后上传到该插件的languages目录即可。

    View More

  • 让你的WordPress网站更快的16条建议

    让你的WordPress网站更快的16条建议

    本文讨论一下如何让你使用Wordpress所建立的网站更快! 1.选择一个好的主机 对于在使用免费主机或者共享主机(Godaddy啊、Bluehost啊等等所谓无限带宽、无限网站之类的主机)的读者来说,你可以直接忽略掉这一小节了。 首先,你的域名和你的主机最好在一个IDC哪儿,如果不是的话,建议你采用口碑良好的DNS服务商,让域名以最快的速度解析到主机上,这不是重点,重点是你的服务器/主机空间应该够快,怎么才能够快呢?CPU的配置、CPU的使用率、物理内存的大小、磁盘类型以及磁盘的I/O性能(包括Mysql数据库服务器所用磁盘)、Mysql响应速度以及Mysql并发数等等,都会影响到网站的快与不快,并且是物理性的影响。当然这里推荐性价比比较高的西部数码主机,或者恒创的SDC机房香港主机,为什么呢?因为我是代理,最高级代理,价格比淘宝里的还便宜,价格比淘宝里的还便宜,价格比淘宝里的还便宜!!! 2.选择一个更快的主题 什么样的主题才能更快呢?直观来看,包含尽量少的php、js、css和字体(字体或图标字体)文件的主题性能会好些。从代码来看,编码合理并在正确的页面载入正确的文件的主题会好些。 3.选择一个缓存插件 推荐使用 W3 Total Cache 或者 WP Super Cache ,都是免费的,但是都很好使,我个人更喜欢W3 Total Cache,因为它支持:页面缓存、HTML压缩、对象缓存、数据库缓存、客户端浏览器缓存、以及CDN。 4.使用个CDN 国外的话,CloudFlare不错;国内的话,百度云加速(免费版节点有可能不在国内),加速乐不错,360网站卫士。(收费的百度下会很多的,这里只推荐免费的) 5.启用Gzip 如果服务器支持,就启用Gzip,上述缓存插件W3 Total Cache就支持你启用这个,恒创虚拟主机默认开启。 6. 使用编码良好的插件 WordPress有着数不清的插件,但并非所有插件的代码都是编码良好的,这就需要你确定下哪些插件是适合你的了。最直观的办法是:当你从Wordpress插件目录安装一个3星以下的插件的时候,你应该仔细了解下它的代码情况了!怎么了解呢?Plugin Performance Profiler 这个插件会帮上忙的! 7. 要注意及时更新你的主题和插件 及时的更新自己所用的Wordpress主题和插件,不仅能提高自己的Wordpress网站的安全性,而且有些更新是针对性能的,这样就会在性能上有所提升的。 8.优化数据库 你可以使用? WP-Optimize? 或者 WP-DBManager 之类的插件来优化自己的数据库,这些插件能够删除那些未经审核的垃圾评论,那些回收站中的文章,那些自动保存的草稿或者文章的回滚版本等。当然了,最好的方式是你能自己访问你的数据库并执行SQL语句来进行这些操作,如果你觉得自己对SQL和Wordpress都够熟悉的话。 9. 优化上传的图片 对于任何一个网站来说,图片都是页面上比较重要的元素了,但是你的图的大小要与你使用这张图的最大的容器的尺寸相匹配,而不是原生态的P一张图或者一张照片就直接上传了。举个例子来说:你要上传一张图,这张图所在的最大容器宽度是948px,这张图本身的宽度是1600px,你应该处理下这张图,让它的最大宽度是948px就行,这样能显著提高该图所在网页的载入速度,缩短载入时间并节约服务器资源和带宽。 另外一种情况是:你上传的图的最大宽度和你所用改图的最大容器的宽度一致,这种情形下,建议你用Smush.it 以及基于它的Wordpress插件来处理一下上传的图片,当然了,你也可以使用类似于 无损图片压缩大师 之类的桌面软件或jpegmini 之类的在线网站来压缩你的图片。或者使用七牛和网易 10. 能用HTML的地方,就别用PHP 例如:网站的favicon、Logo、以及在页面头部和尾部载入的css、js等文件的链接通常会使用到 get_template_directory_uri() 要是你能费点儿时间将这些函数返回的链接改为较为直接的链接,例如: http://wpdaxue.com/wp-content/themes/your-theme-directory 这样会更快些。 11.删除文章的回滚版本 严格来说,这属于上述第8条的一部分,这里再次提一下,推荐使用免费插件Revision Control 。 12. 使用Akismet来防止垃圾评论 垃圾评论的确很垃圾,Wordpress自带的Akismet是一把防止垃圾评论的利剑,但是要有一个免费的KEY才能使用,获取这个免费的KEY只需要有一个Wordpress.com账户,但是Wordpress.com又”可耻”的在大Qiang之外。不过,我觉得获取一个KEY对你来说不应该成为难事儿。 13.禁用Wordpress trackback和pingback trackback 和pingback不利于网站载入速度的提升。在Wordpress中,你可以在后台左侧菜单-->设置-->讨论中这样选中: 为已经发布的文章禁用 UPDATE wp_posts SET ping_status='closed' WHERE post_status = 'publish' AND post_type = 'post'; UPDATE wp_posts SET ping_status='closed' WHERE post_status ...

    View More

  • 代码编辑软件:Notepad++

    代码编辑软件:Notepad++

    Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。当然了还有几款比较常用的代码编辑软件如:SUBLIME TEXT,UltraEdit,EmEditor,Editplus Notepad++功能比 Windows 中的 Notepad(记事本)强大,除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码。Notepad++ 不仅有语法高亮度显示,也有语法折叠功能,并且支持宏以及扩充基本功能的外挂模组。 Notepad++是免费软件,可以免费使用,自带中文(免费、中文这才是重点,重点,重点),支持众多计算机程序语言:C,C++,Java,pascal,C#,XML,SQL,Ada,HTML,PHP,ASP, AutoIt, 汇编, DOS批处理, Caml, COBOL, Cmake, CSS,D, Diff,ActionScript, Fortran, Gui4Cli, Haskell, INNO, JSP, KIXtart, LISP, Lua, Make处理(Makefile), Matlab, INI文件, MS-DOS Style,NSIS, Normal text, Objective-C, Pascal,Python, Javascript(js),Verilog,Haskell,InnoSetup,CMake,VHDL,AutoIt,Matlab。 功能 内置支持多达27种语法高亮度显示(包括各种常见的源代码、脚本,能够很好地支持 .info 文件查看),还支持自定义语言; 可自动检测文件类型,根据关键字显示节点,节点可自由折叠/打开,还可显示缩进引导线,代码显示得很有层次感; 可打开双窗口,在分窗口中又可打开多个子窗口,显示比例; 提供了一些有用工具,如 邻行互换位置、宏功能,等…… 可显示选中的文本的字节数 (而不是一般编辑器所显示的字数,这在某些情况下,比如软件本地化很方便); 正则匹配字符串及批量替换; 强大的插件机制,扩展了编辑能力,如Zen Coding。 特性 1、所见即所得功能、语法高亮、字词自动完成功能,支持同时编辑多重文档;支持自定义语言; 2、对于HTML网页编程代码,可直接选择在不同的浏览器中打开查看,以方便进行调试; 3、自动检测文件类型,根据关键字显示节点,节点可自由折叠/打开,可显示缩进引导线,使代码富有层次感; 4、可打开双窗口,在分窗口中又可打开多个子窗口; 5、可显示选中文本的字节数,并非普通编辑器所显示的字数;提供了一些实用工具,如邻行互换位置、宏功能等; 具体如何使用大家用用就知道了,当然如何想有一定的视觉效果选择SUBLIME TEXT是不错的。 下载地址 百度软件中心:点这里

    View More