WordPress 自适应手机导航html如何让图片自适应它显示出来

其他回答(0)
相关已解决
这里是内容
Powered by
& ,Processed in 0.059163 second(s), 25 queries.
&加载中...SEO入门教程
微信公众号
& &&微信公众号:君墨营销(ID:junmov5)
& &&手机上看精选好文章,每天一分享,扫一扫关注
看了这篇文章的来还在看手机浏览时屏幕下方显示导航菜单–WordPress美化 - 仙踪小栈
手机浏览时屏幕下方显示导航菜单–WordPress美化
&12&8&5&5&5
仙踪小栈&&作者
共享精品 分享技术 一个有态度的个人博客
游戏《圈小猫》
玩法:点击小圆点,将小猫圈住!
仙踪小栈 ,本着独享不如共享,独乐不如众乐的宗旨,共享精品,分享技术,一个有态度的博客小站。
<span class="tipso_style" id="tip-w-j" data-tipso=''>
记住我的登录信息
点击“立即注册”转到用户注册页面。
输入用户名或电子邮箱地址,您会收到一封新密码链接的电子邮件。
用户名或电子邮件地址全球最新的免费资源发布区
WordPress手机主题移动版优化方案-WPtouch安装使用及百度移动适配设置
& 日 17:11 &
前一段部落已经用上了Wordpress手机版主题,刚一上线就惊喜地发现原来有不少的朋友一直在用手机等移动客户端浏览博客,由此看来移动流量已经到了不得不重视的地步。之前一直用百度统计查看客户端信息,发现来自PC的流量占了绝大多数。
而移动流量却基本上可以忽略不计。直到有一天突然看到一篇文章才猛然醒悟不是来自移动客户端的流量少,而是一直以来博客都没有针对移动客户端做好体验优化。久而久之,搜索引擎不给关键字排名,直接浏览用户越来越少,也就导致了统计中的“忽略不计”的结果了。
搭建一个Wordpress手机主题移动版也不是一件难事,现在网上的Wordpress主题基本上都是自适应的,平板、手机和PC电脑等基本上都是兼容的,强大的Wordpress插件也可以让我们自定义Wordpress手机主题和样式,搭建一个WP手机站基本上就是分分钟钟的事情。
鉴于百度搜索引擎在国内强大的占有率,坑爹的百度还会针对没有手机端的网站页面进行转码,所以我们很有必要利用百度移动适配来做好移动百度的SEO优化。关于Wordpress主题和优化的方法,还可以参考:
1、正版主题:
2、总结汇总:
3、用户体验:
WordPress手机主题移动版优化方案WPtouch安装使用百度移动适配设置
一、为什么要做好Wordpress手机主题移动版优化?
1、为了获取移动用户流量。使用手机、平板等移动终端上网和获取信息的用户越来越多,原来只能在PC上进行社交和娱乐活动,现在基本上可以在手机上操作了。加上近几年国内移动用户的增加,这其中蕴藏着无限的“机遇”。
2、为了获取搜索引擎移动版中更好的排名。使用手机上网的用户越来越多,百度等搜索引擎早在几年前就已经开始针对移动站点进行的索引优化,对于那些自适应网站,搜索引擎会优先考虑放在前面,增加他们的曝光度。
(1)以免费资源部落分别在百度PC端和百度移动端(m.baidu.com)的搜索结果为例,同样一个关键字会出现不同的搜索结果,有的甚至前十个搜索结果都不同。
(2)由于部落长期以来忽视了移动用户的体验,所以在百度移动端(m.baidu.com)搜索“免费PHP空间”排名不如PC端的百度搜索结果。
3、为了提升网站用户粘度。以前用户都是用PC来上网,现在用手机的时间大大超过了PC,我们自然应该调整策略来迎合大众的需要,毕竟没有用户网站的广告收入也是无从谈起。
二、快速制作Wordpress自适应主题的方法
1、基本原则就是:文字流式,控件弹性,图片等比缩放。掌握了这三个技能,就可以制作出漂亮的网站移动主题了。
2、基本的CSS语法:
width:100%;宽度设置百分数
height:100%;高度设置百分数
display:none;隐藏不显示
text-overflow:ellipsis; 超出的文字用省略号
overflow:hidden; //超出隐藏
white-space:nowrap; //超出隐藏
3、加载不同的CSS方法:
(1)利用Wordpress自带的函数:wp_is_mobile()。用法:
& ?php if &#40;wp_is_mobile&#40;&#41; &#41;: ?&
//这里写你要实现的代码
& ?php endif ;?&
//另一种用法
& ?php if &#40; wp_is_mobile&#40;&#41; &#41;&#123;
echo '你正在使用移动设备浏览';
&#125;else&#123;
echo '你目前使用的不是移动设备';
(2)wp_is_mobile()函数在wp-includes/vars.php,已经可以自动识别安卓、苹果等主流浏览器,你也可以根据国内的情况添加UC、QQ等浏览器。代码示例:
* Test if the current browser runs on a mobile device (smart phone, tablet, etc.)
* @return bool
function wp_is_mobile&#40;&#41; &#123;
if &#40; empty&#40;$_SERVER&#91;'HTTP_USER_AGENT'&#93;&#41; &#41; &#123;
$is_mobile = false;
&#125; elseif &#40; strpos&#40;$_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'Mobile'&#41; !== false // many mobile devices (all iPhone, iPad, etc.)
|| strpos&#40;$_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'Android'&#41; !== false
|| strpos&#40;$_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'Silk/'&#41; !== false
|| strpos&#40;$_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'Kindle'&#41; !== false
|| strpos&#40;$_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'BlackBerry'&#41; !== false
|| strpos&#40;$_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'Opera Mini'&#41; !== false
|| strpos&#40;$_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'Opera Mobi'&#41; !== false &#41; &#123;
$is_mobile = true;
&#125; else &#123;
$is_mobile = false;
return $is_mobile;
(3)利用CSS判断语句:@media screen and (最大)and(最小)。用法示例:
@media screen and (min-width:200px) and (max-width:600px){
//移动CSS样式
//另外一种直接引用方法
&link rel=&stylesheet& type=&text/css& href=&style.css& media=&screen and (min-width: 600px) and (max-width: 800px)&/&
三、使用Wordpress插件快速打造WP手机网站
WordPress功能强大,其实主要还是归功于Wordpress各类插件。想要把自己的Wordpress打造成为自适应网站,完全可以下载安装WP插件。
1、 Mobile Plugin
(1)说到Wordpress手机主题插件,一般都会提到。这个插件支持 iPhone, iPod touch, Android , BlackBerry OS6+ 等手机客户端,功能强大,更新及时,国内外用户众多。免费版本的WPtouch不能添加第三方手机主题,但是可以自己动手修改默认主题。
(2)官网:https://wordpress.org/plugins/wptouch/
(1)全新的WordPress Mobile Pack 2.0+由原插件的基础进行了代码重建,支持iPhones, Android smartphones, Windows Phone 8, Firefox OS.兼容Safari, Google Chrome, Android - Native Browser, Internet Explorer 10 and Firefox.功能强大,允许添加自定义的手机主题,支持多站点模式,具备手机用户统计功能。
(2)官网:https://wordpress.org/plugins/wordpress-mobile-pack/
3、Any Mobile Theme Switcher
(1)这款Wordpress手机主题插件支持Iphone / Ipod、Ipad、Palm Os、Android、Android Tab、Windows Mobile、Blackberry、Opera Mini等,兼容W3 Total Cache,支持QR code二维码和一键拨打电话功能。特色功能就是任意切换移动主题。
(2)官网:https://wordpress.org/plugins/any-mobile-theme-switcher/
四、WPtouch Mobile Plugin安装和配置方法
1、经过综合比较,部落博客最终选择了WPtouch Mobile Plugin这款插件,默认自带的移动主题自己又修改一下,最后呈现出来的效果如下(点击放大):
2、直接到Wordpress后台搜索WPtouch Mobile Plugin并安装,这是WPtouch Mobile Plugin后台界面,一般、设备、菜单设置、主题设置等。(点击放大)
3、在“设备”选项中可以开启对安卓、苹果、Opera、FireFox等移动设置的自动识别功能。
4、“菜单设置”中可以配置菜单链接,为菜单选项设置图标等,插件自带不少好看的图标,也支持手动上传图标。(点击放大)
5、这是利用WPtouch打造的Wordpress移动主题菜单栏,点击图片可以显示或者隐藏。(点击放大)
6、“主题设置”可以上传Logo,决定菜单栏是放在左边还是右边,是否显示搜索。
7、字体设置建议使用浏览器默认字体,使用Google字体会出现无法打开页面的情况。还可以设置是否显示幻灯片、评论、最新文章等。(点击放大)
8、“页脚”则可以添加你自己的JS文件,例如统计、广告代码等。
9、后搜索和菜单栏点击没有反应?这主要是由于你的WP主题加载的jQuery版本低于1.7。解决方法就是在自定义“页脚”中引用jQuery 2.0 以上的。
五、自适应网站做好搜索引擎SEO优化-
1、百度移动适配主要是针对PC和手机站采用不同的域名的网站,站长可以根据百度制定的提交规则,采用规则适配和URL适配等方式,帮助百度移动搜索快速匹配结果。简单地说,搜索技术不行,人工来助阵。
2、自适应网站有没有必要再单独针对手机站设立一个域名?答案是:完全没有必要。请看百度站长工具官方发布的移动建站问答,再来想想Google等搜索引擎有没有搞这类的“创举”,就明白移动适配是百度当前技术“软肋”的权宜之计。
3、使用Meta标签协议规范(在/head前标注,表示页面同时适合在移动设备和PC上进行浏览。):
&meta name=&viewport& content=&width=device-width, initial-scale=1.0&/&
&meta name=&applicable-device&content=&pc,mobile&/&
4、然后到百度站长工具的“站点属性”将网站设置为自适应网站。
5、提交后,等待百度站长平台审核通过即可。
六、Wordpress手机主题移动版优化
1、一劳永逸的方法就是直接安装和使用自适应Wordpress主题,现在网上的WP主题基本上满足这个条件了。WPtouch功能强大,但是免费版本的可选主题比较少,当然我们也可以直接在WPtouch默认的主题上修改。
2、正在使用的朋友,你先需要到WP Super Cache勾选支持Mobile Device Support,在Rejected User Agents处填入以下标识,即让WP Super Cache对移动浏览时不生成缓存。(也是一样)
BlackBerry
IEMobile/7.0
IEMobile/9.0
IEMobile/10.0
文章出自:
版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。
您或许对下面这些文章有兴趣:&&&&&&&&&&&&&&&&&&&&本月吐槽辛苦排行榜
免费资源部落博主
经常混迹于各种免费资源中,尝鲜后乐于分享给他人。用WP搭建了部落博客,没事儿就折腾Wordpress,喜欢找免费空间,但只求精,稳定,耐用。有时也会介绍一点关于建站的知识和主机、服务器的使用心得与体会。
TA的专栏:&&|&&
关于本文的作者
所属分类:
链接地址:
浏览前页:
浏览后页:
部落快速搜索栏
各类专题梳理
网站导航栏
免费资源重点推荐
最新文章推荐
部落最新评论列表
部落本月最受关注的热点
(热度2℃) (热度1℃) (热度1℃) (热度1℃)
部落本月踩得最多的宝贝
(踩1,553次) (踩1,485次) (踩1,313次) (踩960次) (踩884次) (踩870次) (踩682次) (踩646次) (踩622次) (踩531次)
免费资源部落,是一个致力发布和推广来自世界各地的免费资源,包括多样实用的免费空间、各种优秀的免费软件、各样可用的免费网盘等个人博客网站。站长qi是一位很普通不过的人,长期关注网络空间、互联网、软件应用、程序开发与设计、网络应用等。免费资源部落成立的目的就是希望与更多人分享网络快乐与精彩!本站持续修改完善中,如遇不便还请谅解^_^ &&请在Chrome、Firefox等现代浏览器浏览本站。网站域名:森林之家(www.foresthouse.cn)爱学习、爱分享、爱绿软、爱恐怖、爱音乐、爱唠叨、爱折腾、爱生活!
> wordpress响应式移动端完美自适应宽屏主题 WordPress移动宽屏主题HTML5+CSS3响应式布局,这款主题在我很久以前就在找的,之前我是比较倾向于特别宽的网站总感觉很窄的网页让人喘不过气,看着很难受,不过可惜那时没有找到,如果当年找到了可能森林之家就不是这个样子了。这款主题我觉得很清爽因为后台没有侧边栏设置和菜单设置,他的菜单来源于分类目录,所有的更改都在主题目录中。后台没什么可设置的,唯一需要做的就是把分类目录建建好。我为什么会觉得这款主题好呢?主要原因还是在于它是我见过的显示图片最宽的一个wordpress主题,并且对手机PAD电脑等终端特别友好,完美无缝接合。好了费话不多说了来看看这款主题是什么鬼。以下为电脑端亲测图片展示&首页上半部分本地测试截图&首页下半部分本地测试截图&列表页上半部分本地测试截图&列表页下半部分本地测试截图&内容页上半部分内容页下半部分以下是在PAD中显示的样子(我是用电脑加程序模拟的因为是本地测试,但跟PAD上的一样的)区别在于和电脑端的比这里的网站LOGO和右边图片相对电脑端比较小,显示相对电脑端紧凑。以下是在手机上演示的图片,区别是相对PAD端网站的LOGO和右边的缩略图又要小一点,相比PAD进一步紧凑。浏览得很舒服。好了,看到这里如果你还犹豫不决的话,给你点建议:如果想玩花样想折腾想非主流的话就不要下载,因为它后台没那功能玩不转;如果想坚持做网站做博客喜欢精简的话建议下载,因为它是我见过不论在手机端还是PAD端还是电脑端浏览体验很不错的主题虽然难度稍稍有点大,但是相信我像我这么笨的人都能把它测试过来你绝对可以玩得很6~~~~~~~~~
本站文章如未注明,均为原创丨本网站采用协议进行授权,转载请注明转自: or分享 (0)

我要回帖

更多关于 如何让图片自适应 的文章

 

随机推荐