WordPress Mobile Web Development电子书

WordPress Mobile Web Development Beginner's Guide

Table of Contents

WordPress Mobile Web Development Beginner's Guide

Credits

About the Author

About the Reviewers

Acknowledgement

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Time for action—heading

What just happened?

Pop quiz—heading

Have a go hero—heading

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Using Plugins to Make Your Site Mobile-friendly

Before we start

Plugins or responsive design—what to choose

How do mobile plugins work?

Identifying the right plugin for our site

Time for action—identifying how your site should work on mobiles

What just happened?

Plugins that will make our site mobile

Time for action—installing and configuring WPtouch

What just happened?

WordPress Mobile Pack—number two in the charts

Time for action—installing and configuring WordPress Mobile Pack

What just happened?

Have a go hero

Summary

2. Using Responsive Themes

Mobile themes versus responsive themes

Identifying the best approach for your site

Options for developing a mobile site

Identifying the best approach for our site

Twenty Eleven—configuring the default WordPress theme

Time for action—configuring the Twenty Eleven theme

What just happened?

Have a go hero—making Twenty Eleven your own

More responsive themes—installation and configuration

Scherzo—installation and configuration

Time for action—installing and configuring the Scherzo theme

What just happened?

Have a go hero

Ari—another clean minimal theme

Time for action—installing and configuring the Ari theme

What just happened?

Have a go hero

Codium Extend

Time for action—installing and configuring the Codium Extend theme

What just happened?

More responsive themes

Taking it further—using a responsive theme just for mobile devices

Showing visitors different themes on different devices—how to do it

Stage 1—installing and configuring themes

Stage 2—installing and configuring a theme switcher

Time for action—configuring the WordPress Mobile Pack plugin as a theme switcher

What just happened?

Pop quiz

Summary

3. Setting up Media Queries

What you will need for this chapter

Working with the WordPress Editor

Time for action—opening our stylesheet in the WordPress Editor

Creating a fluid layout

Time for action—digging into the Carborelli's layout styling

What just happened?

Time for action—making our site fluid

What just happened?

Have a go hero

Moving on—planning for our media queries

Identifying our breakpoints

In what ways should a site be different on different devices?

Before setting media queries—getting the browser to behave

Time for action—adding the code to set our width correctly

What just happened?

Writing our media queries

Time for action—writing our first media query

What just happened?

Testing our fluid layout on a smartphone

Time for action—a media query for smartphones in landscape mode

Reviewing what we've done

What just happened?

Have a go hero—trying it out

Pop quiz

Summary

4. Adjusting the Layout

Need for adjusting the layout

Altering the layout of our header

Time for action—adjusting the header for iPads

What just happened?

Time for action—adjusting the header layout for phones in landscape mode

What just happened?

Time for action—adjusting the header layout for phones in portrait mode

What just happened?

Moving the sidebar below the content

Time for action—moving the sidebar below the content for tablets in portrait mode

What just happened?

Time for action—rearranging our widgets

What just happened?

Adjusting the layout for more than two widgets

Three widgets side by side

Four widgets in a grid

Time for action—tweaking the content and sidebar layout for phones in landscape mode

What just happened?

Time for action—rearranging the sidebar widgets for phones in portrait mode

What just happened?

Moving on to the footer

Time for action—changing our footer layout for phones

What just happened?

Altering the layout of a fat footer

Reviewing what we've learned about the layout for different screen widths

Pop quiz

Summary

5. Working with Text and Navigation

A note on testing

Optimizing text for small screens

Time for action—changing text settings

What just happened?

Why use ems ?

Time for action—setting up text sizing in our media queries

What just happened?

Time for action—adjusting the text size on phones in landscape mode

What just happened?

Pop quiz-I

Optimizing fonts for mobile devices

Time for action—specifying different fonts for mobile devices

What just happened?

Optimizing navigation menus for mobile devices

Time for action—changing the layout of the menu on small screens

What just happened?

Time for action—changing the position of the navigation

What just happened?

Time for action—linking to the repositioned navigation

What just happened?

Pop quiz-II

Have a go hero

Summary

6. Optimizing Images and Video

Making images fit into a responsive layout

Ensuring images don't stray outside their container

Time for action—making our images responsive

What just happened?

Resizing narrower images within the layout

Time for action—giving our images a percentage width

What just happened?

Using CSS to resize images—the hitch

Proper responsive images—sending different image files to different devices

Are mobiles always slow?

Setting up our responsive images

Time for action—editing the media settings

What just happened?

Time for action—installing the mobble plugin

What just happened?

Time for action—using PHP to display the featured image

What just happened?

Time for action—adding a featured image to each page

What just happened?

Have a go hero

Featured images—the disadvantages

Have a go hero

Adding video to our site

Displaying video—choosing a method

Using Flash

Inserting our video into the HTML

Using a service such as YouTube to stream video to our site

Streaming YouTube video responsively

Time for action—adding a video to our site

What just happened?

Time for action—adjusting the video width

What just happened?

Time for action—making our video responsive

What just happened?

But are these videos truly responsive? I hear you ask

Summary

7. Sending Different Content to Different Devices

Mobile-specific content—some considerations

Why send different content to different devices?

What differences will there be for our mobile site?

Methods to send different content to different devices

Hiding content using CSS

Delivering different content using PHP

Mobile First

Using CSS to hide page elements

Time for action—hiding elements using CSS

What just happened?

Using PHP to send different content to different devices

Time for action—removing a widget using PHP

What just happened?

Have a go hero

Adding a mobile-only menu to the site

Identifying the changes we need to make

Time for action—setting up our mobile menus

What just happened?

Time for action—coding mobile menus into the theme

What just happened?

Time for action—styling the new mobile menus

What just happened?

Time for action—adding a select menu

What just happened?

Have a go hero

Pop Quiz

Summary

8. Creating a Web App Interface

What is a web app and why would we develop one?

Developing a web app—designing the app

Choosing how to develop our web app

Pros and cons of the different methods

Creating a web app using a plugin

Creating a web app using a responsive design

Making a backup before we start

Hiding elements to create our web app’s home page

Time for action—hiding home page content

What just happened?

Changing our web app’s design with CSS

Time for action—adjusting the header layout

What just happened?

Time for action—editing the site description

What just happened?

Time for action—setting up our web app’s navigation

What just happened?

Time for action—adjusting the footer layout

What just happened?

Creating a responsive web app—review

Using a mobile theme to create a web app

Creating our mobile theme files

Time for action—copying our theme files to create a new theme

What just happened?

Time for action—editing our mobile theme files

What just happened?

Time for action—uploading and activating our web app theme

What just happened?

Using a mobile theme to create a web app—review

Summary

9. Adding Web App Functionality

What might we use a web app for?

Current WordPress plugins for web apps

Events, bookings, and management plugins

E-commerce and subscription plugins

Geolocation and mapping plugins

Social media plugins

Photography plugins

Creating our ice cream sundae builder

Time for action—adding a form to our web app

What just happened?

Time for action—integrating with PayPal

What just happened?

Time for action—providing the visitor with directions

What just happened?

Have a go hero

Outside WordPress—third-party APIs

Have a go hero

Summary

10. Testing and Updating your Mobile Site

Testing your mobile site

Testing on mobile devices

Resizing our browser window

Time for action—using an extension to resize the Chrome browser window

What just happened?

Switching desktop Safari's User Agent to simulate an iPhone

Time for action—switching our User Agent

What just happened?

Using a website to test responsive layouts

Time for action—testing your site on responsinator.com

What just happened?

Using mobile browser emulators

Time for action—setting up Opera Mobile Emulator

What just happened?

Time for action—testing our site in Opera Mini Simulator

What just happened?

Time for action—testing with the Ripple extension for Chrome

What just happened?

Have a go hero

Using a mobile device to update your website

Using the WordPress app

Time for action—setting up and using the WordPress app

What just happened?

Summary

A. Pop quiz—Answers

Chapter 2, Using Responsive Themes

Chapter 3, Setting up Media Queries

Chapter 4, Adjusting the Layout

Chapter 5, Working with Text and Navigation

Chapter 7, Sending Different Content to Different Devices

Index