- WordPress Mobile Web Development：Beginner's Guide
- Rachel McCollin
- 1033字
- 2021-08-13 18:06:18
Time for action—installing and configuring the Codium Extend theme
To install and configure the Codium Extend theme, perform the following steps:
- Download Codium Extend from http://wordpress.org/extend/themes/codium-extend and activate it on the Manage Themes options page. So, how does it look out of the box on the Carborelli’s site? Let’s look at each of the desktop, iPad, and mobile renderings of the site. The following screenshot shows how Codium Extend looks on the desktop:
The following screenshot shows how Codium Extend looks on the iPad:
Finally, the following screenshot shows our site with the Codium Extend theme on a mobile:
Hmm. The widgets seem to have gone a little awry. On the desktop, we have some extra widgets, and in the tablet and mobile version there are no widgets at all. The menu is in the wrong order, and finally the colors are nice enough but not consistent with our brand. Let’s fix each of these problems.
- On the Widgets screen, there are two available widget areas—SidebarTop and SidebarBottom. These widget areas are both in the right-hand sidebar, but one appears above the other.
- Our widgets have been placed in SidebarBottom, leaving SidebarTop empty, which is why the theme has populated that widget area with some default widgets. The quick fix for this is to move the Search widget into SidebarTop.
- The menu is probably in the wrong order, because the theme isn’t actually picking up the menu we’ve defined, but just listing the top-level pages in order. The problem can be easily fixed.
If we open the Menus screen, we will see that although the theme supports a menu, one hasn’t been selected. In this case, the main navigation menu is called navbar, so we will select that and click on Save, as shown in the following screenshot:
- Next, let’s look at the branding options we’ve got. On the Background screen, we can either upload a background image or change the color of the background. Let’s change the background color to something more in keeping with Carborelli’s branding—a pale turquoise.
- On the Header screen, we can upload a custom header image, which will appear behind the text and edit the header text color. We’ll do that in much the same way as we did with Scherzo.
- Having made these edits to the theme options, let’s have a look and see how our site is shaping up on desktops, as shown in the following screenshot:
The following screenshot shows how it looks on mobiles:
The widgets and menu are now working correctly, the image looks good and the background color brightens things up a bit. Have you noticed something that’s different on the desktop and mobile versions of the site?
Yes, there are no widgets on the mobile or tablet sites, which reminds me of some of the mobile plugins we looked at in Chapter 1, Using Plugins to Make Your Site Mobile-friendly. For this site, the lack of widgets means people can’t easily find where Carborelli’s site is or search for their favorite ice cream, which is far from ideal. But for your site, taking out the widgets may be just what you need. Maybe, by identifying the content that’s only needed on the desktop and placing that in widget areas would be a way to build a mobile site that doesn’t overwhelm people with too much content. Although you might want to ask yourself—if that content is unnecessary on a mobile, is it really necessary on the desktop or are we just putting it there because we can?
You may also have noticed that the menu is at the bottom of the screen on a mobile. Again, this is something that will work better for some sites than for others, and may be a problem if you have lots of content, and people have to keep scrolling down.
What just happened?
We installed Codium Extend and made changes to the theme options. We saw that Codium Extend has a couple of features, which set it apart from the other themes, and which could be useful for some sites:
- It doesn’t display widgets in the mobile or tablet versions of the site. This could be used to only display certain content to desktop users if that content isn’t important and will distract visitors from the site’s main content.
- It pushes the navigation to the bottom of the page, meaning that the main content is more prominent; but the downside is that visitors have to scroll down to get to the navigation.
More responsive themes
We have just looked at a handful of the free responsive themes available on the WordPress theme repository. There are more free ones to try and a range of premium themes, too.
Themes you might want to try are as follows:
- simpleX: (http://wordpress.org/extend/themes/simplex) This has had 136,435 downloads and features a contrasting gray band across the header, which could be altered with CSS. Like the themes we have just looked at, it includes the options to upload a header image and change the header text color and the background color.
- Brunelleschi: (http://wordpress.org/extend/themes/brunelleschi) This includes an impressive range of theme options, including options for setting the fonts, hiding or showing the site title, uploading a header image, including a featured content slider, moving the navigation, and more. It also includes the option to insert custom CSS on the Theme Options screen if you want to add some of your own styling without overriding what is already in the theme.
- Jigoshop: (http://wordpress.org/extend/plugins/jigoshop) This is an e-commerce plugin, which is free but has a number of premium themes that you can buy to power it at http://jigoshop.com. The main theme (Jigotheme) is responsive, making it a great alternative to building your own responsive theme for mobile commerce.
- ThemeForest: (http://themeforest.net) This sells a number of premium responsive themes, and StudioPress have started to introduce responsive child themes for the hugely popular premium Genesis Framework (http://www.studiopress.com).