任何问题请联系WX:uu16853

买模板送网站采集器 让你轻松放开双手运营网站!

购买更多有优惠!

如何在移动设备上隐藏WordPress小工具(初学者很容易)

您想对移动用户隐藏特定的WordPress小工具吗? Widget是动态内容,通常显示在网站的边栏或页脚中。有时,小工具在台式电脑或笔记本电脑上可能看起来很好,但在较小的移动设备上就不好了。 在本文中,我们将向您展示如何在移动设备上隐藏WordPress小部件,而无需编写任何代码。 然而,在智能手机上,侧边栏小部件显示在内容下方。 这意味着访问者需要滚动到页面的最底部才能进行搜索。 更糟糕的是,有时这种行为可能会导致两个完全相同的小部件相邻出现。 例如,许多WordPress博客所有者在侧边栏和页脚都放置了“最近发布的帖子”小工具。如果这些小部件移动,那么移动访问者可能会看到相同的小部件挨着彼此。 话虽如此,让我们来看看如何在WordPress中轻松地在移动设备上隐藏小工具。 在这个屏幕上,你会看到你添加到你的WordPress网站上的所有小工具。 要编辑小部件,只需单击其名称即可。 在窗口小部件设置中,您将看到一些由窗口小部件选项插件添加的新部分。 首先,点击移动设备的小图标,确保“隐藏/显示”下拉菜单显示“隐藏在选中的设备上”。 在此之后,只需选中您想要隐藏窗口小部件的每个设备。 你通常会想要勾选“平板电脑”和“移动设备”旁边的框。 之后,点击“保存”按钮以保存您的更改。 现在,继续使用移动设备访问您的WordPress网站。该小部件将不再显示在小部件区域中。 现在,这个小工具将只对使用台式计算机的访问者显示。 接下来,您可以对小部件进行任何更改。例如,我们在“要显示的帖子数量”旁边的框中输入“5”。 完成后,不要忘记按“保存”按钮来存储您的设置。 在此之后,您就可以将第二个小部件设置为仅用于移动设备。 只需重复上面描述的相同过程,但这一次,选中“桌面”旁边的框即可隐藏桌面设备上的小工具。 现在,您可以对您的移动小工具进行任何更改。例如,您可以在“要显示的帖子数”框中键入“3”。 像往常一样,完成操作后,请单击“保存”。现在,您就拥有了同一小部件的桌面版本和移动版本。 我们希望这篇文章能帮助你学习如何在WordPress中隐藏移动设备上的小工具。你可能也想看看我们列出的最好的拖放式WordPress页面构建器来定制你的站点,或者如何在不编写任何代码的情况下在WordPress中创建自定义主题。 中国和中国都是如此。

WordPress 网站测试,网站预览 文字详细教程

无论您是为客户设计网站还是管理自己的WordPress网站,在公开任何更改之前了解它在移动设备上的外观和工作方式都很重要。 您可能有一部手机可以用来查看您的网站。但是,如果您在笔记本电脑或台式机上工作,则不得不继续使用手机会很不方便。 即使您的网站在您的手机上看起来不错,也有很多手机和平板电脑。仅仅因为它看起来不错,并不一定意味着它可以在各种不同的屏幕尺寸、浏览器和操作系统上完美运行。 那么,您究竟如何在移动设备上预览WordPress网站呢?在本指南中,我们将介绍一些无需离开计算机即可在移动设备上测试您的网站的简单方法。 为什么测试网站的移动版本如此重要? 几年前,移动设备取代台式电脑成为浏览网页的主要方式。2021年第一季度,移动设备占全球网络流量的54.8%,去年手机和平板电脑占据了全球57.37%的市场份额。 在全球一些地区,移动设备的使用比桌面设备的使用要大得多。例如,在印度,移动设备拥有超过77%的市场份额。 为了应对不断增长的移动互联网使用,谷歌已经开始惩罚那些不能在移动设备上提供良好用户体验的网站。 在过去的几年中,已经有许多算法更新,旨在为移动用户提供更好的搜索体验。2015年的“ Mobilegeddon ”更新最为激烈,因为谷歌转向了移动优先模式。 作为WordPress用户,选择移动响应主题是确保您的网站看起来不错并且在移动设备上运行良好的第一步。 但是使用块编辑器,用户可以比以前更好地控制单个页面的格式。因此,即使您不是在开发主题或插件,每次添加新内容时,检查您的网站在移动设备上的外观也很重要。 如果您使用Divi或Elementor等可视化拖放页面构建器来创建新页面布局或向您的网站添加内容,这一点尤其重要。 方法一:使用内置的WordPress移动预览 方法二:在Chrome中使用开发者视图 方法三:使用第三方设备模拟器或测试服务 方法一:使用内置的WordPress移动预览 您始终可以在发布之前预览您的WordPress文章和页面。但是您是否注意到您还可以预览您的网站在移动设备上的外观? 在WordPress中有两个地方可以访问移动预览: 来自文章和页面编辑器(并不总是准确的) 来自WordPress定制器 WordPress文章/页面编辑器预览 我们先来看看文章和页面编辑器中的移动预览是如何工作的。单击“发布”或“更新”按钮旁边的“预览”按钮。 在弹出的下拉菜单中,选择“平板电脑”或“手机”,然后点击。 这将立即调整页面编辑器的大小。但是,这是对内容外观的非常粗略和现成的估计,可能不太准确,尤其是在您使用自定义块或外部加载的CSS时。 您可以在此示例中看到,编辑器只是调整了区块的大小以适应较小的屏幕并包装了文本。 但是,如果您以较小的屏幕尺寸查看实时站点,您会发现它看起来根本不像这样。相反,响应式设计设置已开始重新排列块并调整文本大小。 以下是它在较小的浏览器屏幕上的实际外观: 教训:不要相信文章和页面编辑器中的移动预览。公平地说,这是一个相当新的功能,并且仅在2020年年中发布的WordPress 5.5之后才出现。希望未来移动页面预览会有所改进。 WordPress定制器预览 那么WordPress定制器中的预览是否更好?让我们来看看。 要访问WordPress移动预览版,请转到WordPress仪表盘中的外观 > 自定义。 这将显示您网站外观的预览,并允许您实时查看您对样式所做的更改如何更改其外观。您可以导航到站点上的任何页面并上下滚动,就像它是站点的实时版本一样。 要查看您的网站在不同屏幕尺寸上的显示效果,请使用自定义菜单底部的图标在设备视图之间切换。 默认是桌面,中间是平板,右边是智能手机。 这是查看您网站的移动版本的最简单、最快捷的方式,因为它位于WordPress仪表盘中,只需单击几下即可访问 但是,这基本上只是为您提供与调整浏览器窗口大小相同的视图。它并不能准确复制您的网站在每台移动设备上的显示和行为方式。 它还只允许您以三种不同的屏幕宽度查看您的网站。移动设备具有许多不同的屏幕尺寸和分辨率。 正如WordPress核心开发团队对该功能的原始提案所述,“默认情况下只有三个选项可用,而且它们是故意模棱两可的。其目的不是看起来像特定的设备,而是要了解网站在大致平板大小、纵向设备或大致手机大小的设备上可能是什么样子。” 此外,WordPress定制器仅适用于支持它的主题。这意味着如果您使用的主题不适用于定制器,您将无法使用此方法在移动设备上预览您的网站。 在WordPress页面构建器中查看移动预览 如果您使用的是Divi、Elementor、Visual Composer等视觉页面构建器,它们中的大多数都带有自己的工具,用于预览您网站的移动版本并查看响应式设计在不同屏幕尺寸下的外观。 请参阅您正在使用的构建器的用户指南,以准确了解如何在移动设备上编辑和预览您的WordPress网站。 方法二:在Chrome中使用开发者视图 一些浏览器具有内置的设备模拟器。Chrome是最受欢迎的浏览器之一,您可以使用它来预览您的网站在多种不同设备和不同分辨率下的外观。 Chrome设备视图比WordPress移动预览要先进得多。除了能够在流行设备之间切换外,您还可以查看缩放或旋转屏幕时网站的外观,甚至可以模拟受限制的移动互联网连接。 但是,虽然这为您提供了比使用内置WordPress移动预览更多的预览选项,但它仍然只是您网站外观的近似值。 重要的是,您只能了解您的网站在Chrome中的外观。许多移动设备使用不同的浏览器,仅在Chrome中进行测试可能还不够。 但这是测试您的网站在不同大小下的外观和工作方式的一种非常快速和简单的方法,它可以提醒您任何重大问题。 要在“设备模式”下使用Chrome,请转到菜单中的查看 > […]

WordPress 响应式网站,移动端网站优化,网站加速 文字详细教程

十四年前,iPhone改变了我们的浏览,购物和行为方式。这就是为什么小企业主必须使用适合移动设备的网站的原因,或者说为什么现在大部分网站都支持响应式。 2007年1月,史蒂夫·乔布斯(Steve Jobs)迈入Macworld Expo的舞台。苹果公司的联合创始人,首席执行官以他的标志性风格向世界承诺了三件事:更新的iPod,一部电话和一部微型计算机。 他列出了每个项目的属性:“带触​​摸控制的宽屏iPod,革命性的手机,以及突破性的互联网通讯设备。” 但是,当该大曝光的时候了,他没有推出三款独立的产品。他胜利地推出了一个小工具:iPhone。原乔布斯指的不是三个独立的设备,而是一台设备!我们称之为iPhone。” 凭借全触摸界面和时尚美观,iPhone在市场上的其他智能手机中脱颖而出。十一年后,已售出超过10亿只。专家称赞它是本世纪最重要的设备之一。 iPhone引领了智能手机的革命,并改变了网站的构建和使用方式,引入了移动和响应式设计。今天,我们几乎可以做的所有事情-从订购外卖食品到招募Lyft到在社交媒体上分享照片再到在博客上发布-都可以通过智能手机来完成。iPhone是这一转变的关键。 距iPhone发布14年后的移动设计 如今,许多人将智能手机用作唯一的计算机。拥有智能手机的人口为30亿,拥有计算机的人口为13亿。 总部位于新泽西州Little Falls的数字设计和营销机构Clikz Digital的首席营销官Pete Polgar说,移动通信量逐年增加,并有望超越台式机通信量。 他说:“与计算机相比,电话具有更多的用途,并为最终用户提供了更多的价值。” “随着该技术的价格越来越便宜,您将在未来几年看到电话使用量的大幅增加。” Polgar说,如果您的网站不是针对移动设备优化的,那么您会错失良机。他指出, 如果您的网站不适合移动设备浏览,则Google不会给到您的网站很好的排名。他补充说:“如果用户的移动体验很差,他们很可能直接不收录你的网站页面。” 移动Web设计意味着什么? 响应式网站设计意味着,无论屏幕有多大(从手机到手表,再到平板电脑再到台式机),该网站都将填充屏幕并以清晰的方式显示信息。 洛杉矶的产品设计师Matt Felten解释说:“这并不意味着您要制作传单或印刷时事通讯并具有恒定的画布大小。” “ iPhone的激增意味着设计师必须适应可变的屏幕尺寸,并为多种不同的设备提出新的方法。” 从头开始创建网站?以移动为先 GreenPal的首席执行官Bryan Clayton花了九个月的时间从头开始建立公司的网站。他说:“就在大门口,这里存在重大问题。” “我们假设大多数用户会从台式机或笔记本电脑上购买草坪护理服务。但是很快就变得非常清楚,与台式或笔记本电脑(4比1)相比,有更多的人通过手机和平板电脑访问网站。” 原始的全功能桌面体验包括各种铃声,例如动画。他回忆说:“我们拥有各种其他功能,使桌面体验令人愉悦。” “这种方法的问题在于,桌面体验不会转换为移动Web浏览器。” 结果,该网站was肿,无法在移动设备上正常运行。用户发现他们必须捏和缩放才能完成注册过程。 他说:“在重建我们的网站以提供移动优先体验之前,在移动浏览器上的转化率不到4%。” “这意味着尝试注册的人在此过程中有96%的时间被抛弃了。” 在将网站重建为移动优先之后,Clayton发现发起注册过程以获取免费价格估算的人中有82%的人通过移动设备和平板电脑完成了整个过程。 他说:“我们的移动设备至上产品是我们今天参与游戏的唯一原因。” 摸清网站受众 Polgar发现许多客户仍然要求基于桌面的站点。但他说:“这些企业中很多都没有分析其客户是如何在移动设备上找到他们的。” 对于任何网站的启动或重新设计,他建议企业主首先弄清楚客户如何使用他们的网站。一旦确定了他们将如何使用该网站,就可以制定适当的策略。 此外,请确保所有读者都可以访问您的网站-从调整对比度以使色盲人员可以阅读内容,到使视障人士可以通过屏幕阅读器进行理解。 寻求客户反馈 洛杉矶Blu Skincare的所有者Zondra Wilson仅在开始征询客户反馈时才发现自己的网站不适合移动设备使用。 她回忆说:“我要我的客户写一篇评论,他们会说找不到在哪里写评论。” “我会问他们有关我发布的博客或文章的信息,他们很难找到它们。他们无法在手机上查看我的网站。 在我出现第一张照片或有关我公司的任何信息之前,他们必须向下滚动很多。他们不知道如何浏览我的网站。许多人感到沮丧,没有走过首页。” 威尔逊(Wilson)最近将其网站升级到了更便于移动的版本,并且已经注意到用户在该网站上浏览的页面比平时更多。 考虑小屏幕 在移动领域,少即是多。由于手机功能不如台式机浏览器强大,因此您应该确保将站点优化为可以快速加载,并且您的虚拟主机可以处理流量,Polgar解释说。 最终,最佳设计策略很简单:消除所有多余的杂物。 “您需要为小型产品设计,” Felten说。“您必须更加专注。您必须减少信息和内容。” 放置好移动网站之后,您可能会发现根本不需要为桌面版本添加更多内容。 波尔加尔说:“小型企业将不得不改变其当前的营销策略,因为其屏幕房地产已大幅缩水。” Modern Place Lighting首席执行官Vitaliy Vinogradov发现,与台式机相比,切换到移动优先设计带来了30%的转换。他说:“要做的一件重要的事情是删除网站移动版上多余的插件,弹出窗口或任何其他屏幕抑制剂。” 他的团队对网站进行了梳理,并删除了一些社交共享插件,这些插件占用了屏幕上的宝贵资源。 完善您的设计美学 移动电话的兴起刺激了苹果和谷歌等以设计为中心的公司的兴起。Felten说,当今的消费者期望更复杂的设计。 他说:“看到一个漂亮而性能良好的网站的商业案例大有推动力。” “如果我是一家小企业主,并且所有竞争都拥有一个非常不错的,响应迅速的网站,而我却在不到一秒钟的时间内没有对我的产品做出负面评价。” 另一方面,如果您拥有一个设计精美的网站,则人们会认为您重视并在产品中给予同样多的关注。 一致的用户体验 […]

许多用户仍然希望在桌面上有一个侧边栏,但又希望消除移动设备上不必要的杂乱。如果您正在寻找在手机上隐藏特定区块或小工具,那么您可以在WordPress中做到这一点。

几年前,大多数平台都使用固定布局设计,您需要为较小的设备提供单独的移动网站。随着响应式网页设计的流行,这种情况已经改变,因为单一布局可以在所有尺寸的设备上工作。WordPress世界的最新趋势是少了侧边栏的布局。事实上,默认的WordPress主题二〇二二甚至没有侧边栏。这与完整的站点编辑一致,您可以在其中自行构建模板或页面布局。 然而,许多用户仍然希望在桌面上有一个侧边栏,但又希望消除移动设备上不必要的杂乱。如果您正在寻找在手机上隐藏特定区块或小工具,那么您可以在WordPress中做到这一点。 隐藏特定的区块和小工具 假设您的侧边栏上有三个小工具。这些小工具可能会在较小的移动设备中占用较长的空间并干扰用户体验。最好的解决方案是将所有小工具保留在桌面上并将它们隐藏在移动视口中。同样,您可能在内容区域中具有全宽区块,例如社交分享。这是多余的,因为移动浏览器有自己的分享选项。您可以在这里做的是简单地隐藏移动设备上的社交分享区块并将其保留在桌面上。 这种情况也可能是您希望在较大的桌面设备上隐藏元素并在移动设备中显示的其他方式。我们可以提供大量示例和用例来隐藏特定设备上的特定区块。 小工具控件和可见性 有很多方法可以控制WordPress中小工具和区块的可见性。我们将解释以下选项,您可以使用适合您需要的选项。 使用Gutenberg附加插件 使用另一个插件控制小工具的可见性 CSS最大宽度属性 1. Spectra – WordPress Gutenberg区块插件 Gutenberg区块编辑器具有许多用户不知道的隐藏功能。此外,还有一些插件可以为区块编辑器添加功能。古腾堡的终极附加组件就是Brainstorm Force的一个插件,它是最受欢迎的Astra主题的幕后推手。该插件最近重命名为“Spectra – WordPress Gutenberg Blocks”。因此,使用这些关键字搜索并在您的网站上安装插件。此插件将在文章和小工具编辑器中添加额外的元框,以有条件地显示区块。 激活插件后,编辑您想要隐藏区块的任何现有文章。在这个例子中,我们将在移动设备上隐藏一个绿色背景的段落。 选择区块并单击三个点“选项”图标。如果显示“显示更多设置”,请单击该选项。如果菜单显示“隐藏更多设置”,那么它已经在侧边栏上显示了设置。 使用UAG插件显示条件 在右侧边栏上,选择“区块”并滚动到显示“高级”的底部。 展开“高级”部分以查看那里有一个新的“显示条件”元框。 单击其下拉菜单以查看多个选项。该插件提供隐藏或显示任何基于区块的多个条件,如用户状态(已登录或注销)、用户角色、浏览器和操作系统。 要在手机中隐藏选定的区块,请选择“响应可见性”选项。 选择响应式可见性 您将看到显示其他选项并打开“在移动设备上隐藏”选项。 在移动设备上隐藏区块 现在,发布您的文章并在桌面设备中检查以查看彩色段落区块是否可用。但是,当您在手机上看到该页面时,该段落将自动消失。 隐藏在移动设备上的区块 注意:该插件将向每个区块添加“显示条件”元框,即使您在“设置 > UAG”部分停用其所有模块。如果您停用插件,这些区块将在所有设备上可见。 同样,要隐藏区块小工具,请导航到“外观 > 小工具”部分。选择任何小工具并从“显示条件”中设置“在移动设备上隐藏”以隐藏该区块。 在侧边栏和页脚中隐藏小工具 2. 小工具选项 – 插件 尽管Spectra插件是隐藏任何区块或小工具的好选择,但它仅在您使用Gutenberg编辑器时才有效。因此,如果您仍在使用旧的经典编辑器或使用不支持Gutenberg的自定义文章类型,这不是一个选项。在这种情况下,您有其他插件仅适用于隐藏侧边栏和页脚小工具。 安装并激活“ Widget Options – Add Context To WordPress Widgets ”插件。 小工具选项插件 转到“设置 […]

WordPress 音乐播放器 MP3-jPlayer(兼容手机设备,支持播放列表)

MP3-jPlayer 是一个兼容手机设备和支持播放列表的 WordPress 音乐播放器,比较适合音乐类型的网站使用,一起看看它的主要特色: 灵活的多播放器音频插件页面之间近乎连续播放从媒体库、上传文件夹和网址播放播放列表和单个文件的音频播放器可添加无限的音乐播放器到文章、页面、侧边栏和模板文件显示播放器给游客或已登录用户提供下载给游客或已登录用户支持整合WP默认的音频播放器可自定义主题、字体、标题和图片展示位置等支持弹窗播放可通过简码参数来设置播放器的各种选项可使用自定义字段管理播放列表支持 mp3, m4a, mp4, webm, oga, ogg 和 wav 格式跨浏览器/平台极强的兼容性,支持 iPhone,iPad,Android等支持多站点 在线演示:http://mp3-jplayer.com/player-skins/ 帮助文档:http://mp3-jplayer.com/help-docs/ 在后台插件安装界面搜索 MP3-jPlayer 即可在线安装,或者在这里下载 MP3-jPlayer 后,解压上传到 wp-content/plugins 目录安装。

100% Secure Checkout

PayPal / MasterCard / Visa