wordpress移动_如何创建WordPress博客的移动版本

你的名字 2021-07-27 00:51 447阅读 0赞

![wordpress移动][wordpress]

wordpress移动

Would you like to make your blog look great on all devices, not just computers?  Smartphones and other mobile devices are increasing in popularity, so here’s how you can make sure your blog looks great no matter what people are reading it on.

您想使您的博客在所有设备(而不只是计算机)上看起来都很棒吗？ 智能手机和其他移动设备越来越受欢迎，因此无论人们在看什么，这里都可以通过这种方法确保您的博客看起来不错。

WordPress is a great tool for creating a blog or traditional website for your business, organization, or simply to share pictures with family and friends.  You can [make a free blog on WordPress.com][], and if so, your blog will already be ready for most modern mobile device browsers.  Here’s our test WordPress.com site in Mobile Safari; WordPress.com automatically gave it an iOS style theme that’s easy to use on mobile devices.

WordPress是一个很棒的工具，可以为您的企业，组织创建博客或传统网站，或者只是与家人和朋友共享图片。 您可以[在WordPress.com上创建一个免费博客][make a free blog on WordPress.com] ，如果是这样，您的博客将已经可以用于大多数现代移动设备浏览器。 这是我们在Mobile Safari中测试的WordPress.com网站； WordPress.com自动为它提供了iOS风格的主题，该主题易于在移动设备上使用。

![image][]

However, if you want to tweak WordPress and make your site just like you want, you’ll need to use the Self-hosted WordPress.org.  If you’ve created a [new WordPress site on your own server or hosting service][] manually or using an [auto-installer such as Softaculous][], you may be disappointed that your site looks the same on mobile browsers as it does on your computer.  This makes it difficult to use on small screens.

但是，如果您想调整WordPress并按照自己的意愿创建网站，则需要使用Self-hosted WordPress.org。 如果您在[自己的服务器或托管服务上][new WordPress site on your own server or hosting service]手动创建了[新的WordPress网站，][new WordPress site on your own server or hosting service]或者使用[诸如Softaculous之类][auto-installer such as Softaculous]的[自动安装程序][auto-installer such as Softaculous]创建了[WordPress网站][new WordPress site on your own server or hosting service] ，那么您可能会感到失望的是，该网站在移动浏览器上的外观与在计算机上的外观相同。 这使得很难在小屏幕上使用。

![image][image 1]

Thankfully, you can easily get the same iOS style theme on your blog for free with the WPtouch plugin.  Login to your WordPress Dashboard, and select *Add New* under *Plugins* on the left side menu.

幸运的是，您可以使用WPtouch插件轻松在博客上免费获得相同的iOS风格主题。 登录到WordPress仪表板，然后在左侧菜单的“ *插件* *”*下选择“ *添加新项* ”。

![image][image 2]

On this page, enter *WPtouch* in the search box.

在此页面上，在搜索框中输入*WPtouch* 。

![image][image 3]

Now install and activate the plugin as normal.

现在正常安装并激活插件。

![image][image 4]

Your site will now have a nice theme that works great on modern smartphones and other mobile devices, but will still show your own normal theme to visitors using computers.  If you’d like to preview how your new mobile theme looks on an iPhone, check out our article on [Testing Mobile Websites in Safari for Windows][].

现在，您的站点将具有一个不错的主题，该主题在现代智能手机和其他移动设备上均能很好地运行，但仍会向使用计算机的访问者展示您自己的常规主题。 如果您想预览您的新移动主题在iPhone上的外观，请查看有关[在Safari for Windows中测试移动网站的][Testing Mobile Websites in Safari for Windows]文章。

![image][image 5]

## 调整WPtouch设置 **(**Tweak WPtouch Settings**)** ##

WPtouch works fine without any tweaking on most sites, but if you’d like, you can customize your mobile site and tweak WPtouch’s settings to get it working just like you want.  To do this, click *WPtouch* under *Settings* on the left menu.

WPtouch可以正常运行，而无需在大多数站点上进行任何调整，但是如果您愿意，您可以自定义移动站点并调整WPtouch的设置以使其按需运行。 为此，请单击左侧菜单上“ *设置”*下的*WPtouch* 。

![image][image 6]

Here you can tweak many settings, including the mobile theme’s background, fonts, icon, and more.

在这里，您可以调整许多设置，包括移动主题的背景，字体，图标等。

![image][image 7]

You can also add Google Analytics and Adsense to your mobile site, so you can monetize your traffic and know how many visitors you’re getting.  If you need to find you Google Analytics code, [here’s how you can quickly find it][here_s how you can quickly find it].

您还可以将Google Analytics(分析)和Adsense添加到您的移动网站，这样就可以通过点击量获利并知道有多少访问者。 如果您需要找到Google Analytics(分析)代码， [请按以下方法快速找到它][here_s how you can quickly find it] 。

![image][image 8]

You may need to tweak settings in other WordPress plugins, including WP Cache and W3 Cache, to make them work with WPtouch, so be sure to check the list at the bottom of the settings page.

您可能需要调整其他WordPress插件(包括WP Cache和W3 Cache)中的设置，以使其与WPtouch一起使用，因此请确保检查设置页面底部的列表。

![image][image 9]

Here’s [Techinch.com][] with a customized logo, menu, and background using WPtouch.  Now your site looks just like you want, on PCs and mobile devices.

这是[Techinch.com，][Techinch.com]带有使用WPtouch的自定义徽标，菜单和背景。 现在，您的站点在PC和移动设备上看起来像您想要的。

![image][image 10]

> 翻译自: [https://www.howtogeek.com/howto/27779/how-to-create-a-mobile-version-of-your-wordpress-blog/][https_www.howtogeek.com_howto_27779_how-to-create-a-mobile-version-of-your-wordpress-blog]

wordpress移动

[wordpress]: /images/20210726/6c72d4d7d66848389c47c4a027397982.png
[make a free blog on WordPress.com]: https://www.howtogeek.com/howto/15289/how-to-start-your-own-professional-blog-with-wordpress/
[image]: /images/20210726/5ac223e480014cb489550bedd1c33720.png
[new WordPress site on your own server or hosting service]: https://www.howtogeek.com/howto/20859/install-wordpress-manually-on-your-website-using-cpanel-wizards/
[auto-installer such as Softaculous]: https://www.howtogeek.com/howto/19783/install-wordpress-on-your-own-server-with-softaculous/
[image 1]: /images/20210726/19862007315641029e6c22433f78e8a7.png
[image 2]: /images/20210726/c60b275d9d48457298178c6c03f0e52a.png
[image 3]: /images/20210726/0fa65a9404a9485ea05a578be1221cbc.png
[image 4]: /images/20210726/63b19466b05c4722990cecfb5d668f16.png
[Testing Mobile Websites in Safari for Windows]: https://www.howtogeek.com/howto/12663/view-mobile-websites-in-windows-with-safari-4-developer-tools/
[image 5]: /images/20210726/683071a4f4c646a6837be9c65492186e.png
[image 6]: /images/20210726/4d20f0d89442424c95297f737825fc13.png
[image 7]: /images/20210726/6cc9af680ec24e3484e19c380130506f.png
[here_s how you can quickly find it]: https://www.howtogeek.com/howto/22576/where-to-find-your-google-analytics-tracking-code/
[image 8]: /images/20210726/28b2eb26d8624ab088cc955deaf757d8.png
[image 9]: /images/20210726/8e8f844d46624970a06ffdbfa9773e59.png
[Techinch.com]: http://techinch.com/
[image 10]: /images/20210726/deb5752a1ab6484dbeab8cf57dd0b416.png
[https_www.howtogeek.com_howto_27779_how-to-create-a-mobile-version-of-your-wordpress-blog]: https://www.howtogeek.com/howto/27779/how-to-create-a-mobile-version-of-your-wordpress-blog/