Keni Ren Lab for wtfi-17 Play with WordPress

Transcription

1 Lab for wtfi-17 Play with WordPress

2 Objective In this lab you will build a website using Content Management System (CMS). After the lab you should be able to use WordPress as CMS to easily create and maintain a website. The website should be stylish, functional and meet the requirements for a public website. The main track for your WordPress website should base on your design from Lab 1, try to recreate a similar website, even improve it. Theory and Preparation Movies or lecture note. Extra reading link in Moodle. Use your prototype and your website from previous lab as a basis for your WordPress site. Materials When you are doing your WordPress site, you can use Mac or PC. However, you need FTP Client software (example: FileZilla ftp client) to access our server. Use the same accounts of the server from your previous lab. Implementation This lab you should perform individually, but you can get helped, of course, as much as possible. For Pass level on labs perform Part 1, 2.1a, 2.2a in a good and satisfactory manner. For plus level (VG) on labs perform Part 1, 2.1b, 2.2b in a good and satisfactory manner. Read through the entire lab session before you begin.

3 Part 1 You are assigned the task to build a WordPress website. From Lab1 and Lab2 in our course, you have designed and developed a website using HTML5 and CSS3. In this Lab, based on your design from Lab 1, you should try to recreate a similar website, even improve it. The result should with reasonable design, rich content. You can find instructions, videos related to WordPress through this link: Something can be a little different from the films, please check the lecture notes. First, get familiar with WordPress: 1.1 Install WordPress. It s quite easy to install WordPress. You got an account for both ftp account and database on the server. Your WordPress server address: You can follow film 1 and film 2 from the Instruction movies. Here is the information you will need to fill in when you install WoudPress. Database name=username that you received from us Username= Username that you received from us Password=Password that you received from us Database host=localhost(for accounts after User220, accounts before User220 use the server s address : ) Prefix to the database= wp_ (if you must reinstall, you should change prefix to wp1_, or wp2_, and so on.) When the WordPress installation starts, you need to fill in additional information. NOTE: When you create a user in WordPress, make sure use the same name and password that you received from us. Write down your WordPress site url, username and password in the first page of your report! 1.2 You should start using WordPress as it used to be from the very beginning: a blogging tool. Write a few Blog posts and categorize them into two different categories. How to make the posts that belong to same category post together? 1.3 Create at a few pages that have the same content as the 5 pages you created in the previous lab. Figure out the difference between Post and Page in WordPress. 1.4 Look up a theme that fits the site s need. Install and configure it so that it fits your site. The appearance may not be the same as your previous lab. Take a screenshot so that you can track your progress. 1.5 Continue working with the technology. Create your own child theme.

4 You can find the instruction how to create Child Theme through the link: Note: Some online instructions about the child theme are out-of-date. So please follow the instruction from Codex WordPress Reference. You can also find a plugin allows you to easily create child themes from any theme just by clicking. 1.6 Modify the style sheet in your child theme so that your WordPress site more and more similar to your lo-fi prototype from previous lab. 1.7 Insert a Like or recommend button using the tools available to integrating with some of your social media. Some themes have built in this and others must be supplemented with a plugin. 1.8 Insert the widgets you want to use. 1.9 Select one or more plugins to your site. It should give a result that can be seen, for example, a gallery or a video player. Some plugins show up as a widget in WP while others, for example a Facebook like button, pops up when you write a new post. Part 2 Get more experience in customizing your WordPress site. You are still working on the same website. But there are several things you can improve your website. (And your grade of the assignment, of course) a. (For Pass level) Although most of WordPress themes give a pre-defined menu location and layouts, it may not the place or the style you wanted. Add custom navigation menus in your WordPress theme. You have a tutorial page to help you in our Moodle. (How to Add Custom Navigation Menus in WordPress Themes) b. (For Plus / VG-level) Create a mobile-ready responsive WordPress menu to makes it easier for users to navigate your website. You can create a slide-in mobile menu, dropdown mobile menu, or a toggle mobile menu. You can use some plugin to help you. But you should know how to twist it into your own navigation layout. a. (For Pass level) Tired of regular font in your site? Try to switch to artistic Google Font API. It s enough if you do this on a menu. b. (For Plus / VG-level) Make your website printer friendly. You can do this to your blog post category if you have one. If you want very simple changes to the site for easy printing, you can make changes inside the Style Sheet, change your style sheet link in

5 the head section of your header.php template file. Or if you want to control the end result of your site when printed, it is best to create your own print.css style sheet. Report 1. Your WordPress site. Make sure the URL, username and password works so that you can log in to your site. Supervision teacher will use the same account to check your solution in administrator mode. NOTE!!! Write down your WordPress site url, WordPress login username and password in the first page of your report! 2. Submit the report including a discussion and justification of the choices you made and the considerations that guided your work. It should contain: A description of the problem. What are you going to do in the lab? Your solution. How you solved the lab must be described in text and pictures (You can take screenshots of web pages). A reflection. What was good and bad about the lab? What was most difficult (or too difficult/easy)?