Wordpress Genius Guideの WordPress Genius Guide 7th Edition の目次

WordPress is one of the most advanced content management systems on the planet. Not only does it offer simple ways to maintain your website, but endless customisation options mean you can add plugins and widgets to fantastic pre-built themes. What’s more, with WordPress you don’t have to stick to what they give you, it’s possible to buld your very own theme framework – and this book will walk you through how. Inside you will find in-depth guides to essential settings, recommended themes and plugins, and loads of tutorials for personalising your blog or site. WordPress is a treasure trove of goodies and it’s amazing what you can achieve with the assistance of CSS, HTML and Photoshop. This newly revised edition will help you build on your existing knowledge, so you…

WIDGETS ARE NOT the most well-known feature of WordPress, but you will likely see them in action every time you visit a WordPress powered site. A selection of useful examples is built into the platform by default and these can be customised in limited ways, but you can also use the text widget as a method of quickly adding your own code to the home page. Whether you want to show the latest posts or display a gallery of images, carefully placed widgets can act as a gateway to what would otherwise be hidden areas of your site and you can also download specialist widgets on almost any topic. The main point to remember with widgets is that overuse can lead to an ugly interface so try to limit their…

“The choices you make with regards to aesthetics will determine whether your users will want to delve further into your content” TUTORIAL OBJECTIVE Learn some basic tweaks that can be applied to personalise a WordPress theme TIME REQUIRED 20 minutes THEMES ARE A key part of your WordPress blog, as they dictate how your website will appear to your visitors. The choices you make with regards to aesthetics and layout will determine whether your users will want to delve further into your content or avoid making a return trip in the future. WordPress has plenty of themes for you to choose from and you can also make your own customisations to really add that personal touch. Making such customisations does involve a certain amount of coding but even with a…

“The WordPress SEO plugin by Yoast is a comprehensive SEO tool with lots of advanced features” TUTORIAL OBJECTIVE Understand how different SEO tools and techniques can be used to increase your sites viewership TIME REQUIRED 1 hour SEO MANAGEMENT IS one of the most overlooked parts of promoting your blog or website. It’s important to market your site to potential visitors via social networks and through the creation of new content, but if you want to increase your viewership and bring in new viewers who you might otherwise not be able to access through social networks then it’s time to get into SEO. There are plenty of SEO plugins available for Wordpress. Some are very simple to use but offer limited tools, others are highly advanced. The WordPress SEO plugin…

TUTORIAL OBJECTIVE Schedule posts with the Editorial Calendar’s easy to use interface TIME REQUIRED 5 minutes THE EDITORIAL CALENDAR plugin by Colin Vernon provides WordPress users with an easy-to-navigate scheduling system to help you with managing your blog’s schedule. When creating a new post in WordPress you can assign a date and time at which the post will be published. Reviewing and changing the publish date of a post can be a little clunky in WordPress and this is where the Editorial Calendar plugin really comes in handy. With its Calendar layout you can easily drag and drop posts into the calendar to determine when they’ll be published, as well as being able to go into posts to edit them from the plugin. The Editorial Calendar makes it easy for…

TUTORIAL OBJECTIVE Add engagement to navigation with 45-degree page views TIME REQUIRED 1 hour 30 minutes A LOT OF THE projects that are featured in this bookazine demonstrate how to approach the implementation of some really unique features. Most of these have some quirky way of interacting with the menu, and as the user tends to do most of the interaction with the menu, it’s usually a good place to start when creating a unique focal point for your site. In this tutorial we are going to look at CSS3 transformations that, by default, are hardware accelerated. As such, we can add lovely 3D effects and transitions to our content by adding and removing classes that will trigger the animations. In this menu we will have an off-screen menu that…

WordPress 4.4: What’s new? AS VERSION 4.4 IS THE NEXT MAJOR RELEASE OF WORDPRESS, THERE ARE MANY NEW FEATURES. FIND OUT WHAT YOU NEED TO IMPLEMENT NOW THE NEW RELEASE of WordPress 4.4 is nicknamed ‘Clifford’, after the jazz trumpeter Clifford Brown. Each major release of WordPress comes with a new default theme. This new theme Twenty Sixteen offers a fluid grid design, flexible header, optional sidebar, selection of colour schemes and more. Some exciting changes and improvements and some noticeable new features are also in the latest update. WordPress users will be happy to hear images will now be responsive out of the box. You will no longer need to crop images or supply mobile-friendly images. As soon as you upload images in WordPress, it will automatically crop them…

IT IS EASY to be all too consumed by web design and producing quality content when setting up a WordPress blog, but plugins should never be ignored because they are the jewel in the crown of the platform and can help to make any WordPress site unique, intuitive and a generally better experience for the reader. Used wisely, they can add useful features, but you should be careful to not use too many as this can lead to slower performance and a bloated design which does little more than confuse. Each plugin is different and each will come with its own set of instructions so we will concentrate on giving advice on the best ways to use individual plugins and the system as a whole. If you use them for…

TUTORIAL OBJECTIVE Set up a host for your WordPress.org site TIME REQUIRED 30-45 minutes WHEN YOU SIGN up for a host, you should be given all of the tools you need to manage a WordPress installation. This will include database facilities and ftp data to upload large files, but some hosts will also offer automatic install scripts to make the initial WordPress setup as efficient as can be. You can choose to undertake every step of the process manually using the detailed instructions available from WordPress or you can use a script, but no matter what you use there are some areas to look out for. We will cover the main points to ensure that your new site is secure and reliable and also offer some instructions on what you…

TUTORIAL OBJECTIVE Learn how to create back up files for restoring your WordPress database TIME REQUIRED 5 minutes TAKE A MOMENT to think about everything on your blog. Every post, every shared link, every image that you have ever put on your site since starting it. If your installation was somehow corrupted would you be comfortable with losing all of it? This is why backing up your site is a recommended task. The question of how regularly is largely down to your own preference. If you post often, then more frequent backups may be required. Heavier users are known to keeps backups on a local drive plus an external drive. It really is a question of how much you are prepared to lose if the worst happened. The process of…

TUTORIAL OBJECTIVE Convert your HTML theme into a WordPress theme TIME REQUIRED 2 hours THE POPULARITY OF WordPress has refused to abate over the last few years, with over 60 million websites worldwide – and around 25 per cent of new sites – choosing the free content management system as their foundation. Running your website with a CMS has obvious benefits, from ease of changes for site owners, to the wealth of extra functions available. But what can you do if you have an existing non-CMS site that you would like to use in the WordPress format – without changing the look of the site? Well, thankfully it’s not as difficult as you may think to take an existing theme and replicate your site with it. WordPress comes with a…

̠“Widgets play a useful role within your website. They can be used to add a search function, list recent posts and display your categories” TUTORIAL OBJECTIVE Make edits to widgets and plugins that feature on your WordPress blog TIME REQUIRED 40 minutes WIDGETS CAN PLAY a useful role within your website and they can be easily applied to your blog via the WordPress Dashboard. They can be used to add a search function, list recent posts and display your categories. Many themes tend to use the same styling rules for the widgets within a given section. If you have a specific look to your website you may wish to make the widgets a bit more customised. To achieve this you can edit the style.css file within your WordPress installation and…

“When creating blog posts in WordPress your post will be accompanied with information on the person who created it” TUTORIAL OBJECTIVE Insert a detailed Author Bio section to your website or blog, featuring an avatar, bio and social links. TIME REQUIRED 15 minutes THE USER BIO of any WordPress site is an important part of your website or blog. It provides viewers with details as to who has created the post and makes it easier for those who want to follow your site to connect with you via different social networks. When creating blog posts in WordPress your post will be accompanied with information on the person who created the post. Details on the poster can be created with the User tool in WordPress. Here you can create new users…

TUTORIAL OBJECTIVE Use HTML5 to create an animated header TIME REQUIRED 1 Hour 30 Minutes ZURICH-BASED CREATIVE AGENCY Hinderling Volkart’s tag line is “Integrated at heart” and its work for Swiss International Air Lines showcases the agency’s commitment to this philosophy in action. You will have seen many of the effects used here before, from parallax backgrounds to fullscreen video, but where Hinderling Volkart excels is in combining these techniques and integrating them into the story that it is telling on its client’s behalf. This is a website that demands to be explored; it puts you in the shoes of their pilots, aircrew and passengers. It tells the stories that help express the values of the airline in such a way that you become fully immersed in the world…

TUTORIAL OBJECTIVE Create animated buttons for your WordPress blog with CSS3 TIME REQUIRED 60 minutes CSS3 TRANSFORM HAS been doing the rounds for quite some time. Browsers like Firefox, Chrome and Opera have full support for CSS3 2D and 3D transform techniques. Along with transform, we also have another cool property called perspective. The perspective property defines the intensity of the 3D effect. This is because it defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value. But one thing we need to remember is, when defining the perspective property for an element, it is the child elements that get the perspective view, not the element itself. When the transform and perspective properties are…

TUTORIAL OBJECTIVE Give your blog a great pop-up animated effect TIME REQUIRED 1 hour AVIDEO PRODUCTION COMPANY, Pinkanova is based in Toulouse in the south-west of France. With the European headquarters of Intel and world-renowned university located nearby it’s certainly not a bad place to have your company’s headquarters. Pinkanova is the epitome of the digital native. Many video companies are catching up with what can be achieved digitally with video but all too often the results look like after thoughts. Where Pinkanova distinguishes itself is in the integration of digital elements, with the creation of fun, memorable and engaging sights into exciting new worlds where the real and virtual co-exist. Top tip Pinkanova created the designs, but the technical build was completed by Toulouse-based agency Glüe Design. You’d…

“Google Analytics is the window into your site’s data. Use it to understand who is visiting, what they are looking at, and what you can do to get them to stay longer” Know your audience Your first port of call for getting insights into your audience and visitor behaviour should be the Acquisition>All Traffic Channels report The Channels report enables you to see at a glance where your visitors are coming from according to Google’s rules. Not all your traffic will be captured by Google automatically, specific traffic such as Email will not automatically go under the Email channel. Google uses their Direct channel as a catch-all mechanism for traffic that it just cannot categorise in any of its other channels. So it’s important that you familiarise yourself with the…

TUTORIAL OBJECTIVE Add an input form to your website with CSS TIME REQUIRED 1 hour ONE OF THE most common and useful online interactions that web designers and developers can do is devote time to encouraging visitors to subscribe to a newsletter or blog. Once signed up, visitors can then be included in online promotional activities and hopefully be converted into paying customers in due course. To part with an email address, however, visitors need to trust the website and be sufficiently interested in the product, service or blog – even so, this by itself might not be enough. Then again, if your website looks the part and has an original-looking and slick method for encouraging signup, this could provide the extra nudge some visitors need in order for you…

TUTORIAL OBJECTIVE Get selling online with a CSS3 web element TIME REQUIRED 1 hour SELLING ONLINE PROVIDES the opportunity for many businesses to reach out to huge, untapped markets. When your store can be open 24 hours a day and you can reach a global market without the costs of mailings and call centres, it can provide a huge boost to your business. But there are plenty of things to consider when designing an eCommerce site. It’s not as simple as throwing up some shopping cart software and plopping products into a database. With the power of CSS3, it is possible to create some very cool and effective web elements that can just slot into place on any eCommerce website. The products that you or your client are selling need…

TUTORIAL OBJECTIVE Set up a domain name for your blog TIME REQUIRED 15 minutes SETTING UP AND managing a domain for your WordPress blog is a part of a process that is crucial to get right and will make a huge difference to the eventual popularity of your online presence. The name is important, of course, and demands proper research, and the settings will also ensure that popular search engines and anyone else interested can see your work without seeing errors. We will take you through a setup process, but remember that these can vary depending on who your web host is, and we will also offer advice on areas that are often forgotten or completely ignored. If you give as much care and attention to your domain setup and…

TUTORIAL OBJECTIVE Secure your WordPress blog from the hackers with a few simple steps TIME REQUIRED 30 minutes IT IS ESTIMATED that WordPress is currently used to power over 60 million websites worldwide. Around 25 per cent of new sites also choose the free CMS as their foundation. WordPress has become exceptionally popular with users and, as a result, exceptionally popular with the army of hackers and spammers lurking out there who would like nothing better than to exploit your website for a variety of nefarious purposes. WordPress is a solid and secure platform. But, like any web-based system, it requires constant upkeep and attention to stay one step ahead of the everevolving security threats. The platform is updated often and goes to great lengths to address new security issues…

TUTORIAL OBJECTIVE Create a theme that adapts to mobile devices TIME REQUIRED 2 hours THERE ARE MANY great themes on WordPress you can customise. We will be using Zurb’s Foundation framework for the purposes of this tutorial. Previously to incorporate the theme into WordPress you had to manually link the necessary JavaScript and CSS using the WordPress functions ‘wp_enqueue_script’ and w’p_ enqueue_style’. But now, thanks to Zurb and the popularity of WordPress, Zurb has provided a starter theme called FoundationPress, which you can download directly from its GitHub page to start building your own WordPress theme. The purpose of this ultimate starter theme is to act as a springboard; it comes packed with useful reuseable components, a 12-column responsive grid, JavaScript functions and much more. This starter theme contains all…

Taking the time to optimise your website will not only improve the experience of your audience but also help ensure they keep returning TUTORIAL OBJECTIVE Make adjustments to your theme so it can adapt to the screen sizes web browsers on mobile devices TIME REQUIRED 30 minutes THE WAY WE access the internet has changed dramatically over the last few years. Previously, your WordPress blog would have most likely been accessed by desktop browsers. These days you are more likely to find that an increasing number of your viewers are accessing your blog via a mobile device or tablet. To that extent it is important to make sure that your website is optimised to work on such platforms. Taking the time to do so will not only improve the experience…

“Spam comments are engineered to generate mouse clicks not only to locations away from your blog but to potential online hazards” TUTORIAL OBJECTIVE Prevent spam comments from making their presence TIME REQUIRED 15 minutes GETTING YOUR NEW blog out into the big wide world is exciting. Unfortunately you’ll need to protect yourself from the more unscrupulous elements of the internet, namely spam. If your blog is equipped with a comments section you may find that it will start to swell in size thanks to spam bots sending replies to your blog posts. Of course, these aren’t the type of comments you are looking for, and they don’t particularly add to the content of your blog. These replies are engineered to generate mouse clicks to not only to locations away from…

“If you know exactly how you want to use a slideshow in your site then it is worth finding a plugin that is specific to your blog’s needs” TUTORIAL OBJECTIVE Install a WordPress slideshow gallery plugin so that you can Link to blog posts and pages or create a gallery of images on your webpage, creating a visual navigation tool TIME REQUIRED 10 minutes SLIDESHOWS ARE ONE of the easiest assets to add to your WordPress website. They can be used in a variety of different ways depending on how you want to utilise them. Slideshows can hold a series of high-res images for you, working as an interactive portfolio of your work. This is especially useful for designers, artists and photographers. A slideshow can also work as a great…

TUTORIAL OBJECTIVE Create an animated logo for your website using CSS3 TIME REQUIRED 1 hour CREATING ANIMATIONS USING CSS3 is becoming more and more popular because of the ease of use and the browser support the new properties now have. Also, as interactive projects get more aggressive and mobile devices are now a priority, performance has become increasingly important. Animating the scale, rotation, and position of an element is now common. In CSS, they’re all crammed into one ‘transform’ property, making them impossible to animate in a truly distinct way on a single element. For example, what if you wanted to animate ‘rotation’ independently, with different timings and eases? The ‘@keyframe’ rule lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the…

TUTORIAL OBJECTIVE Create this simple effect to live by the ‘less is more’ philopsophy TIME REQUIRED 1 hour SIMPLICITY IS A goal many designers seek but with its ‘less, but better’ philosophy, Huge seems to achieve so much more than the rest. When redesigning its own website, Huge continued to realise opportunities to evolve, and has masterfully engineered an online experience that powerfully communicates its brand. Positioning their emblematic ‘H’ front and centre provides a perfect vehicle for telling the story of the brand and how it works with clients. On arriving at the site, three full-page slides demonstrate the agency’s approach and values, and when that message has been delivered, the site flows into a magazine-style presentation of what it means to be Huge. Less, but better it…

TUTORIAL OBJECTIVE Use Varnish software to increase the performance of content-heavy sites TIME REQUIRED 1 hour 30 minutes NOBODY LIKES TO wait ages for a page to load. If your site is loading slowly people will just go somewhere else before they get to look at all the content on your site or read the great article you wrote. Page speed is still an issue for many sites, and recent studies show that 40 per cent of users will abandon your site if it takes more than three seconds to load. This is where Varnish comes in. Varnish is a HTTP accelerator or caching HTTP reverse proxy. It receives requests from clients and tries to answer them from the cache. If it cannot answer from the cache it will forward…

TUTORIAL OBJECTIVE Create a layered background for your WordPress site in Photoshop TIME REQUIRED 45 minutes IT’S OFTEN SAID that we know more about the moon than we do about the depths of our own oceans. Wouldn’t it be incredible if we could see what it is that lives beneath the waves? Over the next four pages, you’ll learn the various techniques required for creating a partialsubmersion scene; a cross section of the ocean, revealing what might be hiding in the depths. We’ll be using some beautiful stock imagery, Photoshop’s blending modes and some masking magic to create our submersion effect. In this tutorial we’ll also touch on the blur tools and using colour to set the mood of your image. You’ll need an image of an elephant or large…