当前位置：
WordPress网站图片自动添加alt信息的两种方法
alt是用来对网页上的图片进行描述，光标在图片上时显示的提示语即采用该标签实现。
从SEO和用户体验来看，ALT-代替属性都是必要的，其重要性主要有： 网页内容相关性是关键词优化的前提，搜索引擎认为，网页上的图片应该与网页主题相关。反过来讲，当搜索引擎要判断网页的关键词时，图片的ALT-代替属性是一个可信任的参考点。所以， 别忘了在图片的ALT-代替属性。
可见，alt可以提供搜索引擎您的图片的信息，方便搜索引擎抓取。可以达到SEO的效果。
如何添加？
对于HTML，您可以如下使用：
&img src="1.jpg" alt="这是一张图片" /&
但是，我们是使用的是wordpress，不可能一个一个地添加吧？那样太麻烦了。
于是我们有两种方法：
1.纯代码解决
把下面的代码复制到你的主题的function.php内
//wp图片添加alt搜集属性add_filter( 'the_content', 'image_alt');function image_alt($c) {global $$title = $post-&post_$s = array('/src="(.+?.(jpg|bmp|png|jepg|gif))"/i'=& 'src="$1" alt="'.$title.'"');foreach($s as$p =& $r){$c = preg_replace($p,$r,$c);}return$c;}
使用后，它能自动添加alt信息。
2.使用插件
使用插件是个简单的事情，几乎没有技术含量。
这个插件叫做 SEO Friendly Images.可以自动添加alt信息，方便好用。
下载地址依旧在左上角的download now
如何使用？
安装后进入后台——设置——SEO Friendly Images，看下面的图片设置即可。
这样，您就为您的站点的SEO做了不小的功劳了！
来源：学做网站论坛 &&发表日期：&&浏览量：13218 次
致力打造网站制作在线培训第一品牌，大批学员在此学会网站制作方法，走上IT精英之路。
学做网站论坛建站培训以原创建站视频教程，以最细致的讲解、演示各类网站制作步骤，一步步操作网站制作方法，哪怕是零基础小白也能看的懂，学的会。欢迎您来参加学习，报名QQ:。
与本文相关
11031次阅读
13023次阅读
17348次阅读
11757次阅读
14127次阅读
12491次阅读
12001次阅读
13528次阅读
12567次阅读
130285次阅读
学做网站论坛创立于2009年 安徽捷亚网络有限公司 版权所有 本网站建站视频教程不得转载 法律顾问：孙玉炜律师 | 皖ICP备号-1【图文】PPT课程--我是小白_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
PPT课程--我是小白
上传于||暂无简介
大小：1.08MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
AI3 小白教程
下载积分：1000
内容提示：AI3 小白教程
文档格式：DOC|
浏览次数：279|
上传日期： 21:39:00|
文档星级：
该用户还上传了这些文档
AI3 小白教程
官方公共微信javascript 杂谈（3）
说来也惭愧，从接触前端开发以来，一直都在运用jQuery，因为jquery用起来确实是给我们的前端工作带来很大的便利，以至于忽略了对创造出jquery的始祖javascript学习（可能对我这样的前端小白来说都对javascript存在着一定的恐惧。），现在终于下定决心好好啃原生js这块知识。下面是最近自己在学习js基础知识时的一些总结，归纳起来帮助自己记忆了解的同时也希望可以给跟我一样的初学者一些帮助，规避一些不必要的错误。话不多说，下面是自己一些“简单粗暴式”的理解：
js Dom的image对象的属性:
align：设置图片与内联内容的对齐方式
alt：设置或返回图片无法显示时的文字
complete：浏览器判断图片是否加载完整 & &这个是否涉及到懒加载？？？有待研究
border：设置或者返回图片周围的边框
height：设置或返回图片的高度
width：设置或返回图片的宽度
isMap：返回图像是否是服务器端的图像映射。 &这个是否可以用做判断从数据库中拿到的数据是否正确？
useMap：设置或返回客户端图像映射的 usemap 属性的值。
id：设置或者返回图片的id &利用id操作图片
name：设置或者返回图片的name&
hspace：设置或者返回图片左或者右的空白部分
vspace：设置或者返回图片上或者下的空白部分
longDesc：设置或返回指向包含图像描述的文档的 URL。（即alt或者是有文字的图片中的文字）
lowsrc：设置或返回指向图像的低分辨率版本的 URL。
src：设置或返回图像的 URL。
注：Image属性也有优先级。
每创建一个img标签&img/& Image对象也跟着被创建，只是有没有用到就另当别论，下面是对image属性的运用：
html部分：
&img id=&img& class=&img& src=&img/3.jpg& lowsrc=&img/6.jpg& alt=&js中的Iamge属性的学习& /&
&span&some text some text some text&/span&
//Image中的align属性 & js在页面中的位置也很重要，因为html的翻译是从上至下的。因此要特别注意js的位置
document.getElementById(&img&).align=&left&;//图片的align属性值默认为center！
//Image中的alt属性 &
document.getElementById(&img&).alt=&图片的alt属性&; //设置alt的内容
//alert(document.getElementById(&img&).alt); //获取图片alt的内容
//Image中的complete属性 &由于是判断浏览器是否对图片已完成加载，因此需要html中的body标签调用这个属性来判断 利用的是onload事件 &
//complete返回的值是布尔类型 即只有true或者false
function alterImage(){
alert(&Image loaded=& + document.getElementById(&img&).complete)
//Image中的border属性 &与css样式中的border不同的是，Image中的border属性只需大小，不需要设置其他的属性
document.getElementById(&img&).border=&3&;
//Image中的height/width属性 &只需要数值，不需要带上单位
document.getElementById(&img&).height=&200&;
document.getElementById(&img&).width=&400&;
//Image中的isMap属性 （暂时先忽略）
//Image中的 id属性 设置id名获取id名
alert(document.getElementById(&img&).id);
document.getElementById(&img&).id=&img&;
//Image中的name属性 由于没设置那么属性，因此返回的是空值
alert(document.getElementById(&img&).name);
//Image中的hspace/vspace属性 & hspace 和 vspace 属性可与 align 一同使用，来设置图像与周围文本的距离。
document.getElementById(&img&).hspace=&50&;
document.getElementById(&img&).vspace=&50&
//Image中的src/lowsrc属性 &可用于更换图片查找图片路径等;
document.getElementById(&img&).src=&img/3.jpg&;
var x=document.getElementById(&img&);
document.write('&a href=&' + x.lowsrc + '&&Low resolution version&/a&'); //点击跳转到低版本的图片
//Image中的longDesc属性
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：5452次
排名：千里之外
原创：13篇
(1)(3)(2)(6)(9)(1)目前很多手机app设计师都在使用Cutterman工具进行切图，因为这个软件是国内的软件，切图也必将方便。也提供了3个平台的切图方式。最新的切图插件如下图：
IOS: 如果你是为Iphone设计界面，请使用ios标签，它能够为你生成符合ios系统的单/双倍图
Android: 如果你是为Android设计界面，请使用Android标签，它能够生成符合Android系统的各种DPI分辨率图片
PC: 如果你是做web端的设计，请使用PC标签，它可以支持输出png/jpg/gif等各种格式和质量大小的图片
选择完平台后，会进入到主界面，如果需要切换平台，可以点击界面左上角的箭头按钮，切换目标平台。
我们先来回顾一下切图知识点重点提示：
1）、所有切图必须为偶数。不管是ios的切图 还是android 的切图。
2）、可平铺部件切图时可如下图：
带圆角按钮切图时可如下图
并在效果图中标出具体大小和尺寸。
3）、ios切图需要切出2套，一套是@2x png和一套@3x的png、png格式为24位的png。
APP界面具体的切图细分：引导页、启动页、APP图标、需要作为整块的元素都是要切除@2x和@3×2套的切图素材。
如果需要平铺的元素：如背景、线条、按钮、渐变等等 都是切.9.png
点九图是适合ios和android 2大系统的。
现在精准化的元素切图是保证还原高品质app界面设计的保证。切图的技巧决定移动app界面设计美观度。当然还有标注。
4）、所有表单元素务必切两种状态：比如按钮的正常状态和按下状态
checkbox的选中状态和未选中状态等等。如下图的图标切图状态示例图：
25学堂的关于Cutterman切图的干货教程有：
今天25学堂只是跟大家讲解cutterman ps插件安装完成之后，如何来使用cutterman工具进行切图。3步轻松搞定Cutterman切图。算是一个比较简单的Cutterman切图教程。
Cutterman切图简单步骤：
第一种情况：导出一个图层的切图素材。
1. 选中一个你需要输出的图层。
2. 点击“保存路径”按钮，设置你想导出到本地的某个文件夹。
3. 点击“导出选中图层”按钮。
注意 !一个图层组对Cutterman而言，仍然表示一个图层，会将组里头的所有内容合并作为一个图层输出。
第二种情况：导出多个图层切图素材：
1. 选中多个图层
2. 点击“保存路径”按钮，设置你想导出到本地的某个文件夹
3. 点击“导出选中图层”按钮
注意 !选中多个图层进行导出，默认会逐一输出每个选中的图层，如果希望将选中的多个图层合并导出，请在界面又上角的设置项里头进行设置。
第三种情况：固定切图尺寸来切图素材
1. 在固定尺寸的位置填入你希望输出的宽和高，注意必须要比icon的尺寸要大。
2. 点击导出选中图层按钮。
注意 !设置固定尺寸后，icon会默认居中显示。如果设置的尺寸比icon尺寸小，会出现icon被裁剪的现象
以上就是使用Cutterman切图的三种情况一一跟大家讲解啦。这回是不是很容易上手来进行Cutterman切图啦。如果你还不是明白，可以加我们25学堂的微信或QQ群。主动问群里的app设计大牛们。
本文标题：
本文地址：/appdesign/9476.html
除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，转载同时请务必保留原网站网址。
移动APP设计入门课程
为你推荐的相关文章
Copyright@
All Rights Reserved ICP备案号：桂ICP备号-2本站声明所有资源均是网上搜集或网友上传提供，如有侵犯您的版权，请及时联系我们（），我们将尽快处理。}