![](https://i-blog.csdnimg.cn/blog_migrate/cf0a93ac01228c7e0ff31010703c58c1.png)
wordpress移动
Have you noticed that many popular websites like BBC and Facebook use their own brand colors for the address bar in mobile browser. Recently, one of our users asked us if we could write about how to change the color of address bar in mobile browser to match their WordPress theme? In this article, we will show you how to change the color of address bar in mobile browser to match your WordPress site.
您是否注意到许多流行的网站(例如BBC和Facebook)在移动浏览器的地址栏中使用了自己的品牌颜色。 最近,我们的一位用户问我们是否可以撰写有关如何在移动浏览器中更改地址栏颜色以匹配其WordPress主题的信息? 在本文中,我们将向您展示如何在移动浏览器中更改地址栏的颜色以匹配您的WordPress网站。
![Address bar color in mobile browser for WordPress site Address bar color in mobile browser for WordPress site](https://i-blog.csdnimg.cn/blog_migrate/b26fc0e60745a6caa2de32a832c4d027.png)
为什么要在移动浏览器中匹配地址栏颜色? (Why Match Address Bar Color in Mobile Browser?)
Most popular WordPress themes are mobile responsive. This makes your site looks great on mobile devices. However, it still looks and feels like a website.
最受欢迎的WordPress主题是移动响应的。 这使您的网站在移动设备上看起来很棒。 但是,它仍然看起来和感觉像一个网站。
Matching the color of address bar to your WordPress site, gives it a native app-like feel. This improves user experience, which ultimately boosts sales and conversions.
将地址栏的颜色与您的WordPress网站相匹配,使其具有本机应用程序的感觉。 这改善了用户体验,最终促进了销售和转化。
![Color address bars in mobile browser on Android Color address bars in mobile browser on Android](https://i-blog.csdnimg.cn/blog_migrate/b2a8dd91e21e1c147619e1f1c6b36626.png)
However, please note that currently it only works for Google Chrome web browser on Android devices using Lollipop or newer versions.
但是,请注意,当前它仅适用于使用Lollipop或更高版本的Android设备上的Google Chrome浏览器。
将移动浏览器上的地址栏颜色匹配到您的WordPress主题 (Match Address Bar Color on Mobile Browser to Your WordPress Theme)
Simply add this code in your theme or child theme‘s header.php
file just before the closing </head>
tag.
只需在结束</head>
标记之前,将此代码添加到您的主题或子主题的header.php
文件中即可。
<meta name="theme-color" content="#ff6600" />
<meta name="theme-color" content="#ff6600" />
This line is a HTML meta tag used by Google Chrome on Android to change color of address bar in mobile browser. The content field has the hex code for the color you want to use as theme color.
这行是HTML标记,由Android上的Google Chrome浏览器用来更改移动浏览器中地址栏的颜色。 内容字段具有您要用作主题颜色的颜色的十六进制代码。
Not sure how to get the hex color code?
不确定如何获取十六进制颜色代码?
You can get the HEX value of a color using any image editing software like Adobe Photoshop, Gimp, Paint, etc.
您可以使用任何图像编辑软件(例如Adobe Photoshop,Gimp,Paint等)获取颜色的十六进制值。
![Color picker in Adobe Photoshop Color picker in Adobe Photoshop](https://i-blog.csdnimg.cn/blog_migrate/d4cfd5c4440663a332bdfd7c2b59a11b.png)
You can also pick a color using online HTML color picker tools.
If you want to pick a color from a web page, then you can use a browser extension like ColorZilla.
如果要从网页中选择颜色,则可以使用诸如ColorZilla的浏览器扩展。
That’s all, we hope this article helped you learn how to change the color of address bar in mobile browser to match your WordPress site. You may also want to see our CSS Hero review, it is the easiest way to customize your WordPress theme.
就这样,我们希望本文能帮助您学习如何在移动浏览器中更改地址栏的颜色以匹配您的WordPress网站。 您可能还希望查看我们的CSS Hero评论 ,这是自定义WordPress主题的最简单方法。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
如果您喜欢这篇文章,请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。
wordpress移动