Menu
homeErrors

WordPress theme for mobile devices. WPtouch plugin - setting up a mobile version of a WordPress blog. Theme Options: Branding

IN last years the amount of mobile traffic continues to grow. According to search engine statistics, today mobile traffic exceeds computer in volume. In this regard, search engines begin to enter Additional requirements to sites so that they are displayed correctly when entering from any device. Accordingly, webmasters have a problem optimizing their web resource for smartphones and tablets. Owners of WordPress projects have the opportunity to use special plugins that optimize the site for mobile devices.

7 Best Plugins for Mobile Adaptation

Below we will describe the seven most popular plugins that can be used on sites with CMS WordPress. They will allow you to adapt your site for correct display on mobile devices.

Using Mobile Themes

The principle of operation of these plugins is to display special themes for users who access the site using a smartphone or other mobile device. Especially relevant for webmasters who do not want to change standard theme site. Perhaps they are simply accustomed to it or do not have certain skills, and do not want to pay for it.

Jetpack

Quite a popular plugin for websites on CMS WordPress, which allows you to install mobile theme. To configure, you need to install the plugin on your website and go to the settings section (Jetpack – Setting). After this, activate the “Mobile Theme” function and the site will be adapted. The plugin is distributed free of charge and allows you to adapt your site with a minimum number of steps.

Among the disadvantages, it is worth highlighting poor compatibility with Discus, so we do not recommend using both of these plugins at the same time.

WP Mobile Pack

Another simple solution for creating responsive design on your website. The plugin is gaining great popularity, and the number of downloads to date exceeds 600,000. To create mobile design You just need to install and activate the plugin. There are several additional settings, which are optional.

WPTouch Mobile Plugin

This plugin is very popular among WordPress users. You just need to install and activate it, after which the mobile version of the site will become available. In addition to this, there are several more in the settings useful functions, to change the design and customize the template. Although beginners can get by with standard settings.

It is worth noting that in 2014, a vulnerability was discovered in the plugin code, which various attackers rushed to take advantage of. And although the developers managed to eliminate it in the shortest possible time, a large number of sites were infected.

Plugins that allow you to create a mobile version

The remaining four plugins allow you to fully adapt the site for correct display on mobile devices.

Responsible

Quite an interesting plugin for WordPress that allows you to set up a responsive design. A special feature of Responsible is the ability to test a site for adaptability right in computer browser. To get started, just install and activate the plugin.

Now a special panel will be displayed on the site pages, which will allow you to change the size depending on the device (tablet, smartphone, PC).

WP Lightbox 2

This plugin by itself is not capable of adapting an existing design. After installing it it will be installed new design, which is adapted for mobile devices.

Install the plugin in the site directory and activate it. In the settings you can set several functions from animation duration to activation of comments. Although this is not mandatory for beginners.

With this plugin you can use special HTML widgets that are only available on tablets and smartphones. To work with Responsive Widgets, you need to understand what widgets are in WordPress and have the skills to work with them.

In the settings there is big choice widgets. In this case, the user has the ability to configure the display of each of them on specific device. For example, on all iPhones you can display a special widget; to do this, check the necessary boxes in the settings. When entering the site from another device, the same design will be displayed to the user using a different widget.

Hammy

One of the most convenient plugins for WordPress, which allows you to create a responsive design and display the site correctly on mobile devices. Install and activate this template, after which you will need to create breakpoints and specify for them HTML elements. In this case, the tag that displays them will be changed for all images. Instead of “img”, all images will be assigned the value “figure”. The breakpoint represents a limit on the size of the image, at different screen resolutions.

This way, the size of the images will change depending on the screen size of the user who visited the site. For individual images can be set special classes. With their help, you can ignore changes to these individual files.

Which plugin to choose

All the plugins listed above are distributed free of charge and are suitable for any WordPress site. If the site does not display correctly on mobile devices, we recommend that you resolve this issue as soon as possible. Choose the most suitable option according to your requirements.

An alternative to using plugins is to create a responsive design or use a responsive theme.

Hello dear colleagues, guests of the site.

They didn’t pay attention to how rapidly the number of Internet users from their own mobile phones? Have you thought about creating a mobile version for your website?

I also thought about this, but somehow I didn’t have the time. I put everything off until tomorrow. Apparently, he was waiting for the rooster that would peck at a certain place. So, the other day, the following message appeared in my Google Webmaster Toolbar:

By following the link provided in the message to the address https://www.google.com/webmasters/tools/mobile-friendly/ and after analyzing the main page of my blog there, I got this sad result:

Agree, it’s stupid to lose a significant share of traffic (up to 40%) because of such nonsense as the lack of a mobile version of the site.

You can manually adapt your theme accordingly. Or you can get by with a special extension for your CMS. The second option is suitable for those who are not good at layout or, if you really want to create a mobile version right now, while adaptation work is underway or in general permanent basis. As the saying goes: “There is nothing more permanent than temporary.”

Testing the most popular WordPress plugins to solve the problem, I settled on WP Mobile Detector.

Unlike others, this plugin optimized all pages of the site for mobile devices without any comments. IN free version it has no restrictions on functionality, but only on the number of preinstalled themes. Easy to set up, fast, lightweight and quite cute.

After installation and activation in a standard way, a new submenu will appear in the left column of the admin panel - WP Mobile Detector, when opened, items with settings, statistics and a list of available topics will appear. Everything is simple here, you can figure it out yourself.

At the top, on each admin page, a warning message will appear about the need to assign the folder cache plugin with full read, write and execute rights.

Without this, caching of the mobile version of your WordPress site will not work.

Go to your server, find the folder there cache and assign it full rights, like on a picture.

The warning message will disappear.

Translation of WP Mobile Detector, removal of links

Everything would be absolutely fine if the plugin had Russian localization and did not place external outgoing links in its themes.

Let's start with the simplest and most important - by removing these very links.

Let's edit the theme files" bluesteel-mobile", already installed by default. We will use a text editor Notepad++.

So open the files , , , and remove the codes highlighted in the screenshots. File paths are underlined with a red line.

For Russification, you will need to edit the files - in the root of the plugin and template files - , search.php, index.php, comments.php, category.php, 404.php, archive.php, . Just replace all words that need translation (printed in nuclear black font) with Russian ones.

Before editing, be sure to change the encoding text document With ANSI on UTF-8 (no BOM) in tools" Encodings" text editor Notepad++.

For clarity or for use, download the WP Mobile Detector I have already edited from the link below.

Version 1.8 without external links.

Now your WordPress site has a full-fledged mobile version, search engines and visitors will definitely appreciate it.

mobile version WordPress site - WP Mobile Detector plugin updated: June 18, 2017 by: Roman Vakhovsky

Hello friends. On February 2, Yandex announced in its blog for webmasters new algorithm ranking sites in mobile search- Vladivostok. Its essence boils down to the fact that when making requests from phones, the search results will be built taking into account the site’s adaptability to display on small smartphone screens.

Previously, this factor was not taken into account, but those who hustle in advance will now benefit - they will be higher in searches, receive more traffic, and earn more money. See more news here. Google began to use a similar technique even earlier.

The new Yandex Webmaster, which I’m talking about, has a function for checking a site for mobility. With its help, you can check your resource and take any actions based on the results obtained.

Today we will talk about WordPress blog x and about how we, ordinary network workers, adapt to new conditions.

First you need to understand that there are 3 ways to adapt your resource for mobile search:

  1. Creating a separate mobile version of the site on a subdomain or another domain.
  2. Using a responsive WordPress theme that automatically resizes and positions elements when opened on small screens.
  3. The use of different design themes depending on the device - on the computer there will be one template, for the phone there will be another (simpler and more compact).

I don’t want to talk about the first case, since it is ineffective; in fact, you are creating a separate site, but the remaining 2 are available to bloggers.

Responsive WordPress Themes

If you have not yet decided on the “clothes” for your blog and are just approaching the lesson about, then when searching, look at those that were initially designed as adaptive. In this case, you will not encounter any problems in the future.

Proceed in the same way when ordering paid templates - indicate in terms of reference mandatory adaptation for mobile devices.

WordPress plugins for the mobile version of the site

Now let's move on to the situation when your blog already has a template and you don't want to change it, but it's not designed for mobile traffic. Unfortunately, adapting a theme that is not initially suitable for smartphones is not an easy task and cannot be done on your knees. The issue can be solved by creating a mobile version of a WordPress site using plugins. This method is free and easy to implement.

The plugins operate as follows: The site automatically detects the device from which the viewing is taking place and, depending on it, turns on different templates– either regular or special mobile.

Installing plugins is easy and even a novice webmaster can handle it. See how to install plugins.

All the plugins that I will list below are in the WordPress directory and they are installed directly through the admin panel.

1. WPtouch Mobile Plugin

The very first plugin for the mobile version of the site that I met, it is also the most famous. An example of work on my website DmitriyZhilin.ru

In the free version, it contains only one template, but it can be customized - change the colors of fonts, background, buttons, etc. It is possible to add your code to the footer and additional CSS styles directly from the settings panel.

The plugin works in Russian, although the translation is slightly clumsy this moment, but everything is clear.

Except color settings It is possible to specify the devices for which the plugin will be used – “apples”, “androids”, “ windows backgrounds" etc.

2. WordPress Mobile Pack

Like the previous option, it has one free theme, and the rest are opened after purchasing the PRO version.

It is possible to add a special logo for the mobile version, change standard colors, select a list of categories and pages to display.

Management and settings WordPress plugin Mobile Pack on English language, but everything is intuitive, especially since everything starts working immediately after activation and you don’t have to do anything additional.

What I didn't like was home page, it displays the name of the last article and that’s it; to move to other posts and categories you need to scroll through the site, although almost the entire screen of the main page is empty.

I almost forgot - your hosting PHP version is required to be at least 5.3.0

3. Mobile Smart plugin

Very interesting option. Unlike previous plugins, this one does not contain pre-installed mobile themes, it acts as a switch.

That is, you install it and on the main settings page you specify the WordPress theme that will be shown to mobile users - the theme can be any of those that you found and uploaded to the site.

Need responsive theme for the site (which I talked about at the beginning). But the trick here is that this adaptive theme does not work all the time, but only for phone users; the site gives all other visitors your regular template (not adaptive).

4.WP Mobile Edition

Of the ones I've tried, this is my favorite WordPress mobile plugin. With a minimum of settings, it contains the most convenient mobile template:

  • Minimalist design (showed maximum speed and adaptability in PageSpeed ​​Insights from Google)
  • convenient menu, specially adapted to small screens,
  • convenient home page with the latest articles,
  • a button to switch to the regular theme from the mobile one and a shortcode for placing a button to switch to the mobile version from the regular one (this was not included in the ones discussed above).

The plugin is in Russian, and the translation is good. Although, there is no need for it, since after activation I did not make any settings.

The design itself is still one, but it contains several color schemes.

The only negative is that the theme shows thumbnails of posts, and since I don’t have them, there are empty squares opposite the headings (you can see it on the screenshot). They don't spoil much appearance site, but there is no option to disable the display of thumbnails - it’s a pity.

Which plugin to choose?

In conclusion, I will answer the question about choosing the most suitable plugin for your project. Only the right decision No. I recommend trying each of the options I've given.

First try plugins with mobile themes - 1, 2, 4. If none of them appeal to you, then look for good topic With adaptive design and connect it for mobile users Mobile Smart plugin (3), there are no restrictions here - you can use any template.

Don't forget about caching

If you use caching plugins on your site (and you must use them), then keep in mind that users see pages saved in the cache, and not generated by the CMS, therefore, without the appropriate settings, there will be no separation of pages for mobile and stationary visitors - it will come from the cache same page.

At the plugin Hyper Cache, the settings of which have a special tab “Mobile” and in it you need to indicate that the cache should be stored separately for computers and separately for phones. In the same article I talked about this setting. Other caching plugins should have similar settings; without them there is no point in creating a mobile theme.

Useful articles:


  • How to make money on the Internet for a beginner - 23...

  • What is a blog, how to create it, promote it and how...

Hello dear readers of the site. Blog traffic is important indicator, I talked about this in more detail in the article about

But many do not know that many of these readers who are looking for information on making money or on some other topics not only on a laptop or PC, people also use smartphones, iPhones, phones in the end, which in turn require a mobile version of your resource.

As a rule, templates only support the version for personal computers, no beech trees, etc. Therefore, the question arises: how not to deprive your blog of traffic from mobile devices, or more precisely, how to make a mobile version of the blog?

Some will say that supposedly the traffic from gadgets is insignificant, so there is no need to worry. Yes, really, I thought so for the time being, but everything turned out differently.

Just a few years ago, those who visited the sites different topics through the phone there was very little, but if you look at this indicator now, everything will fall into place, everything will be clear.

For those who use Google Adsense, Yandex Direct, Banerach, you should definitely install the mobile version on your blog, since Galaxy smartphone S III or with ASUS tablet Google Nexus 7 It’s inconvenient to click on ads from the simple version of the theme, I checked it personally.

It may be convenient for some, but most will not want to simply stay with you, since everything will not look standard and not aesthetically pleasing, as they wanted.

I think that we’ll finish dealing with the need for a mobile version of the site to be made. Now let's get straight to what you can do to do this.

WPtouch plugin. What is it for?

Wptouch is a unique plugin that can turn your blog into great app for mobile devices. Simply put, you change the template, its interior, using a plugin, it affects places that are responsible specifically for the interface, its appearance, design, etc.

Install in short this plugin and using gadgets on your site will become much more convenient.

How to install WPtouch?

Everything is the same as with a regular plugin.

1. We download WordPress plugins from the website;

2. Open the downloads, unzip the archive and transfer the plugin to your desktop or some folder. I advise you to create something like this, where you can throw all the plugins, or, for example, all the pictures. Well, you understand me.

3. Connect to the FTP server.

4. Go here: wp-content/plugins/;

5. Now we transfer the plugin to this folder by: hovering the mouse cursor over the plugin, clicking and without releasing it, transfer it to the list of all plugins;

6. Now the plugin is inside your site, but it is not working yet, since you need to go to the blog admin area and Activate WPtouch. Activation can be done by going to “PLUGINS”.

7. After activation, go to settings. They are located in the "PARAMETERS" section, on new version WordPress is being formed new inset, at the very bottom, that is, the plugin settings are not in the parameters section and thereafter, but right among the general sections.

IMPORTANT! You should not use this plugin if you are a beginner in the blogosphere, since the weight of this attribute is large and it is not so useful for a young blog.

WPtouch settings?

After installing the plugin, you can check how your site looks. This can be done by opening it on your smartphone, phone or any other mobile device. If you don’t have a smartphone, then everyone has a mobile one.

The Internet is not connected to the phone, then contact your operator and connect to any tariff. And if you don’t want to use the Internet on your mobile, then connect the network anyway, see what your blog looks like, set everything up in a day and then turn off the Internet, again contacting your operator.

As a last resort, ask a friend. Why, as a last resort, you can first of all turn to relatives, a friend for help and access the Internet through a mobile device. Evaluate the design, convenience, etc.

Is there something you're not happy with? Then make the settings! How to get there I have already said above. Now more about them!

The WPtouch section has several subsections:

1. What's new;
2. Basic parameters;
3. Themes and Extensions;
4. Theme settings;
5. Menu;
6. Upgrade to Pro;

Everything is in order now. Let's look at several sections and describe them in detail. Or at least let's get to know each other.

First of all, let's visit Main settings. If everything is displayed in Latin, then we translate.

There are a lot of parameters here that you should know, but you can also do nothing and leave everything in its place.

Here's what we found here:

  • Blog title display;
  • Regionalization;
  • Display mode;

There are many other settings, you can see them on the screenshot that I provided.

Themes and extensions. This is the second section of the plugin.

There are 7 themes in front of you, from which you can choose any one, the default is the first one. Everything is to your taste, then look through your smartphone. what happened, if you didn’t like it, then change it to another one. In general, go ahead friends!

Theme settings. Here I think and stop for a moment.

  • Are common;
  • Branding;
  • Bookmark Icons;
  • Web mode App;
  • Advertising;

Do everything for yourself and be content.

The last thing I would like to point out from the settings is the Menu.

You can also pick something up here. For example, which pages to display, etc. In short, try it in practice, because you can still deactivate the plugin at any time, so there is nothing to be afraid of.

On this note, I end writing this post. I hope you now know how to set up a mobile version of your blog. Bye bye. In conclusion, as usual, an interesting video:

Sincerely, Zhuk Yuri.

Today I will explain why you need it wordpress mobile site version. I recommend wptouch plugin and I’ll tell you how to configure it correctly so that the mobile version displays necessary information (specific pages, headings, entries, sections). By the way, not so long ago I installed and configured it myself on several sites. this extension. The add-on functions perfectly, plus Yandex and Google no longer write that the site is not optimized for mobile devices.

Why does a WordPress site need a mobile version?

The answer is simple and almost obvious: mobile traffic is growing. Therefore, the main search engines require website owners to comply. It’s better to make the site a mobile version so that it doesn’t get demoted. search results or received no other sanctions.

Advantages of the wptouch plugin

Why did I choose wptouch as the optimal plugin for the mobile version of the WordPress site? Yes, because first of all, we were looking for something simple, current solution. On WordPress, the mobile version of the site looks good thanks to this add-on. Really possible flexible setup(considering that the plugin is free, this is really good news).

Plugin for the mobile version of the site. Settings

I’ll say right away that setting up a mobile version of a WordPress site using the add-on described above literally takes 5-10 minutes. On final stage You can see what the mobile version of the site will look like. If you want to remove or disable the add-on, you can wordpress console literally in two clicks.

Setting up wptouch plugin

1) First of all, you need to install the wptouch plugin.

2) After installation, “Wptouch” will appear in the WP console with the “Settings” section. That's where we'll need to go.

3) Select the “Menu Settings” section, click “Go to Menu Settings”.

4) First of all, you need to write down “Menu Name” and “Save Menu”.

5) Add everything necessary to the saved menu: pages, posts, categories, arbitrary links (link to any article). This is done by checking the boxes and clicking the “Add to menu” button.

6) All blocks of the ready-made menu, which include pages, posts, categories and arbitrary links, can be arranged to suit your needs: swapped places, made child ones.

7) And the most important point, which many people miss: before saving the menu, you need to select where “Show location”: WPtouch: Header Menu. At least in mine wordpress theme this is the optimal solution.

8) Let's move on to visual adjustment, click: “Switch to mobile theme” and admire it :)

ATTENTION!!! If you put extra checkmarks in this block, then some elements (pages, posts, categories, arbitrary links) of the mobile version will begin to be displayed in regular version site. Do not panic! Try to customize the plugin for yourself (by unchecking the extra boxes).