- WordPress Mobile Web Development：Beginner's Guide
- Rachel McCollin
- 741字
- 2021-08-13 18:06:18
Taking it further—using a responsive theme just for mobile devices
It may have occurred to you while working through this chapter that some of these themes give the Carborelli’s site a look and functionality that is great on mobiles. But, it’s a shame to lose the desktop theme with all its detail and elements such as the call to action button and contact details in the header.
It will probably also have occurred to you that some of these themes gave us a really quick and easy way to create a responsive site without writing any code.
So, what if we could have our cake (or our ice cream) and eat it? Is there a way to display the existing theme for desktop visitors, but display a responsive theme for mobile and possibly tablet visitors?
The great answer is yes, there is, and it involves the use of theme switchers.
Note
Do you remember what a switcher is, which we saw in Chapter 1, Using Plugins to Make Your Site Mobile-friendly? It’s a plugin that switches the site’s theme when someone visits it from a mobile device.
We can use a theme switcher to specify different themes that apply to the site when people visit it on different devices or browsers. In Chapter 7, Sending Different Content to Different Devices, we’ll use this technique to create an app-like site and just show that to mobile visitors, but for now we can use it to help us quickly get a responsive site off the ground.
Showing visitors different themes on different devices—how to do it
To use this technique, we will need three things:
- A switcher
- Our pre-existing desktop theme (we already have one for Carborelli’s and you may have one for your site, too)
- A responsive theme that we can tweak
There are two stages in actually doing it. Let’s work through them, using the Carborelli’s site with its existing desktop theme and the Ari theme we’ve already explored.
Stage 1—installing and configuring themes
The first step is to install and set up our responsive theme. Perform the following steps:
- First, we install our desktop theme, whether that be via downloading from http://wordpress.org/extend/themes or by uploading the files you’ve developed yourself. In the case of the Carborelli’s site, the desktop theme is called Carborelli’s and it’s already installed.
- We then identify a responsive theme that we can tweak to give a similar look to the desktop theme on mobile devices. The Ari theme allowed us to upload the Carborelli’s logo and change the colors, so that’s the theme we’ll choose.
- We activate the responsive theme and make the necessary changes to the theme options, including uploading any images. We’ve already done that in the previous section.
- Having made those changes, we then activate the desktop theme again. WordPress saves the changes we’ve made to the responsive theme even when it’s not active.
The next stage is to install a theme switcher.
Stage 2—installing and configuring a theme switcher
There are a number of theme switchers available in the WordPress plugin repository as follows:
- WordPress Mobile Pack: (http://wordpress.org/extend/plugins/wordpress-mobile-pack/) This plugin, which we worked with in Chapter 1, Using Plugins to Make Your Site Mobile-friendly, can also be used as a theme switcher in conjunction with the theme of your choice.
- Mobile Smart: (http://wordpress.org/extend/plugins/mobile-smart/) This is another theme switcher, which includes the option to specify whether iPads and tablets will use the desktop theme or the mobile one. It also gives you some functions that allow you to insert conditional code in your theme for visitors on different devices. We’ll come back to this functionality in Chapter 6, Optimizing Images and Video, as this is most useful for sending smaller image files to mobiles.
- Device Theme Switcher: (http://wordpress.org/extend/plugins/device-theme-switcher) This gives the options of setting different themes for mobile and tablet devices, which are particularly useful if we want to optimize our site for tablets.
As we’ve already familiarized ourselves with it in Chapter 1, Using Plugins to Make Your Site Mobile-friendly, here we’re going to use WordPress Mobile Pack as our switcher. So, let’s get it up and running.