HostPress.ca. User manual. July Version 1.0. Written by: Todd Munro. 1 P age

Transcription

1 HostPress.ca User manual For your new WordPress website July 2010 Version 1.0 Written by: Todd Munro 1 P age

2 Table of Contents Introduction page 3 Getting Ready page 3 Media, Pages & Posts page 3 7 Live Site Editing page 8 PlugIns, NextGEN Gallery, WMPL Google Analytics page 8 13 Quick Guide important points to remember page 14 More about images page 15 Google Analytics page This Guide is available Online at Login with Username: Guest Password: Tutorial The Tutorial Section will then be available in the top menu. Download Hostpress WordPress Guide from the Downloads section on the right of the page. 2 P age

3 WordPress Guide This guide is intended to be an introduction to the WordPress Content Management System (CMS). With WordPress you can manage and update your site much easier than an HTML based website. WordPress is a program that creates dynamic based web sites. This means that all content is stored in a database then is called upon when needed from one single webpage template. This is different if we compare WordPress to traditional websites that are static made from a collection of many separate HTML web pages. WordPress is based on the PHP scripting language and is Open Source. You can find info about the WordPress project at For WordPress there are two main parts of the system, the Front end and the Back end. The Front end is the website that is presented to public for viewing. The backend is where the administrator of the content can update the site though their user login. We will start with a Backend quick introduction You can login by navigating in your browser to admin and entering your login username and password. Replace yourdomainname with your own websites domain name in the URL (web address). Your control panel will look similar to below. From here you can create posts, pages specialized widgets, upload media and administer many more tasks for the website. The main navigation for these functions is on the left. Specialized Plug ins may also show up at the bottom of this menu bar. 3 P age

4 Getting Ready Before starting any web project is a good idea to have all your content organised and ready, this includes written content, pdfs, web optimised images in gif, jpg or png formats. It is advisable to write, correct and spell check all your documents in Word before placing them into a Post or Page. The Editor in WordPress is very basic and you may find it limited for major text editing. Images should also be preformatted or optimised for the web. This means photos from a camera need to be reduced in size before being uploaded to the Media directory on the site. The Media directory is for using images that relate to text in a post or page. *For an image Gallery a specialised plug in takes over the functions of the Media tab. These images are managed within the plug in that maybe located at the bottom of the left menu bar. We will discuss the gallery in the plug in section of this manual. Do not upload images destined for a gallery into the Media Manager. Media Manager The media manager is used mostly to store images such as jpgs for use to illustrate text in a post or page. You can find the media manger by clicking on the media tab on the left. There are a few ways to upload images to the media manager. One way is to add your images directly through the media tab. Another way is through the image button inside a post or page. You may want to upload all your images first to have them available for use later. WordPress stores these images in 3 different sizes. These are Thumbnail, Medium and Large as well as the original size. 4 P age

5 Posts and Pages what s the difference? Website content is organised in two different ways Posts and Pages. The Home page on any WordPress site is set up as a Blog which contain Posts. This means that by Posting a new entry to the site it is automatically placed on the front page. This is useful if you plan to use the site as a blog. If not, just one Post is all you need on the home page to create your websites front page. This single page can be updated as needed. Below is an example of a new Post. You are most likely to use Pages more than Posts if your site is not used as a Blog. A Page is used when you wish to have more than one menu item. Some examples are a Contact Us page and maybe a Products page. With the Pages function you can create the sites navigation bar. Sub items can be added to the Parent pages as well. Click on the Pages menu on the left then choose a page to edit or create a new page with the Add New button. In the edit page window there is a text editor where you can type in your text and add photos. For longer texts it is preferable to work in Word on your home computer then copy and paste into the WordPress editor using the Word paste button. 5 P age

6 Below are some views of Pages in WordPress with some helpful hints. Click on the Page name you wish to edit or Add a new Page. Click on Pencil to edit translation. The window below will open once you have chosen a Page. 6 P age

7 Here you will be able to give your article a title and add all the text and images you want to show up on this page. Paste as Plain text. When you need to take text from a Word document highlight the text then use Ctrl+c to copy it. Then bring it to your WordPress entry. The most important thing about adding text from Word or elsewhere is to click on the little Word icon first. Then paste the text into the popup box (Ctrl+v) and click OK. You can use the Text button as well but it takes out all formatting such as bold or italics. If you don t do either of these two options your text will act strangely and you site may not function properly An image can be added to the page by clicking on an icon next to the Upload/Insert text just abouve the editor window. A word about image optimisation. To increase the speed of web page loading all images must be optimised for the web before being placed in the Media Manager. This means image sizes should be no wider than 800px or higher than 800px and saved a 72dpi (not 300dpi as used in print.) Make sure image file sizes end up being no larger than 100k. (1000k = 1Mb) 30 50k is the preferred size if possible. For image galleries you need two copies of the same image a thumbnail version not more than 120px by 120px with a file size no larger than 5k, as well as the larger maximum 700px wide or high version. Insert the small thumbnail into your page and create a link to the larger image that is stored in the media manager. A good practice is to use the same name for the images but with an _tn in the name for the thumbnail i.e. picnic_tn.jpg Pages 22 to 24 have more details using about images For the link button highlight any text you want to become a link and click on the link icon. Here you can enter a URL (web address) to link to another site or another part of your site or link to a PDF file in a folder in the Media Manager. You will need to put in the URL path to link to whatever it is you want a visitor to go to. Once you are happy with your text be sure to Preview it and or Publish it. The blue Publish button on the right or the editor will become and Update button once a Page is saved for the first time. 7 P age

8 Menus Your Menu items are taken from the text used in the Pages title area Editing on the live site Once an page is published and a menu item linking to it is published it will be available to the public to view. All Unpublished Articles and Menu items cannot be viewed by the public but are free to be edited on. So a good practice once the website is live and you need to edit a Page or Post that is in use is to Switch its Visibility to Private. That menu item will be temporarily unavailable. The casual user will probably not notice the difference to the site. But since you are logged in you can freely make changes and revisions to the Page. It is also good practice to do this for a new Page you are creating. Plug Ins Plug in can be added to a WordPress installation to add functionality to a site. For example if you wanted an image gallery the NextGEN Gallery Plugin would need to be installed. There are hundreds of useful Plug ins at the WordPress Plugin site. One they are uploaded to your site they need to be Activated under the Plugins tab in the left menu. Most need to have some settings configured before using them for the first time. Brief explanations of some common plug in extensions are below: NextGEN Gallery NextGEN Gallery plug in gallery.com/ The Gallery Plug in allows you to add and manage image galleries on your website. To manage the galleries click on Galleries on the bottom left to access the management area. From here you can create galleries and upload images into those galleries. These images are completely independent from the Media Manager. A special short code needs to be placed in a Post or Page once a gallery is ready to use. They look something like this: [nggallery id=3 template=caption]. Displaying a Gallery will be explained at the very end. There are a few settings to set up before using this plug in for the first time. Thumbnail sizes need to be configured for the gallery as well as the display style of the gallery. Click on Options under the Gallery tab on the menu bar. 8 P age

9 The Gallery tab is important here too. You can set the number of columns across as well as how many images per page to display. Once you have configured the Plugin Options you can then create and upload images to galleries. Choose the Add Gallery / Images menu item. You will see the area below appear. 9 P age

10 When you create a new gallery the short tag will be displayed briefly at the top to the page in this example its [nggallery id=10] This will be needed later to display the gallery. Once you have some gallery names you can then upload your images to their respective galleries. This can be done one image at a time or you can place them all in a folder on your home computer and zip them to be all uploaded at once. When you have all your images uploaded you can then start to manage the galleries. Click on Manage Gallery from the left menu and choose the gallery from the list that you wish to edit. 10 P age

11 You will new to scan the folder first for all the thumbnails to be created. Once this is done you can add text to the Description area. If there is an image you don t wish to include at check the exclude box beside the image. Basic HTML tags will work inside the Description boxes so you can add bold tags <b><b/> or italic tags <i><i/> around the text you wish to emphasize. Another useful tag is the break tag <br /> it will start a new line of text if need be. There is a Sort Gallery option to change the order of the image thumbnails in the gallery. Just click on Sort gallery and drag the images into the placement order and save. 11 P age

12 Adding a finished gallery to a Page A gallery can be placed in a page by the use of its short tag ex. [nggallery id=10]. The short tags come with options the most useful would be thumbnail captioning. [nggallery id=10 template=caption] This is all you need to have a gallery display on the page. You can only view your work once you Publish and view the page on the site. To make adjustments you will need to go back into the Manage Gallery menu and choose the gallery you are working on and make adjustments there. To see these changes you need to look at the site page and refresh your browser. 12 P age

13 WPML WordPress Multi Lingual With this Plug in wpml.org you can translate your pages to another language and have them available on the site. This plug in does not do the translating for you it just organises the translations and creates a language switcher button on the site. Once Activated you will see a translate box to the right of your editor when you are creating a Page or Post. Just save your original English Page or Post and then click on the translate link. Here you need to redo your Page in French starting with the title. Publish this Page and you will have a translation available for your French speaking visitors. Google Analytics PlugIn You may want to know how your website is performing. Google Analytics allows you to track how many people are visiting your site, their preferred language and how they got there. The plugin only needs to be activated and your Google analytics code entered. The code looks something like this once you have registered your site with Google UA P age

14 Quick Guide Points to remember This site has been created for optimal end user control. All aspects of the site can be modified; from the landing page, to the images in the headers, to the contents and menus. Once mastered, updating the site will be an easy and efficient task. Header images are located in the Media manger. Modify an image of your choice and make sure it is exactly 900px wide by 76px high as well it must be optimized for the web being no larger than 75kb in size (Photoshop is a good editor to use for this). There is one image for the French header and one for the English header. You need to name the jpgs en.jpg and fr.jpg and then exchange them for the ones that are already there. Administrator Login is login. You must enter the correct username and passwords to get into the site s Back end. PDFs and Image Naming When naming PDFs and images make sure the file name does not contain spaces or any special characters like à ç é. These characters may confuse the server and you files will not be accessible. If you wish to have a space use an underscore _ or a dash to accomplish this. Front end editing once logged in you will see a Small pencil at the top of pages you can edit. Click on this icon,edit the article and make sure to Update before going elsewhere on the sites backend. To make a caption under a single photo click the insert image button and fill in a caption where it says Caption if there is already a caption there it will say Edit Image Caption. It won t visible in the editor. You have to view the page on the website. Much of your learning is done through trial and error. Just make sure to keep what you are working on Private in the Visibility settings for the Page. 14 P age

15 More about Images When working with images on a website there are a few important things to remember. Website photos need to be optimized for displaying on the site in a photo editor first. You may have used one before there are many available, Photoshop is one, Photoscape is another, Google has a free one called Picasa, which ever one you have it must be able to resize the image to a smaller dimension and file size. (These are measured in pixels and kilobytes(kb) or megabytes(mb) respectively.) Most web design dimensions are measured in pixels. as an example your entire website is 900 pixels or px wide. We want photos smaller so that they will fit (dimensions) inside a webpage and load to that webpage quickly (Kb) Normally we want our images as jpegs the standard image that a digital camera takes. There are many different image file types each one has their special function. You might come across.gif.tiff.png or even a raw file type, but what we want 90% or the time is a.jpg When you receive an image from a camera or other resources that photo will normally be way too large to upload to your website directly it has to be manipulated first. Open it in your favorite photo editor change the dimensions to something around 800px (it may be well over 2400px to begin with much larger than the width of our entire website!) Then save it. You should be asked what image quality you wish to save the image this may be either as a percentage i.e.85% or as low, medium, high, or even better, best depending on the editor brand. The important thing here is we are looking for a final file size no larger than 100Kb or 0.1Mb anywhere between 40Kb 80Kb is what we usually end up with once we finish saving the image. Once you have optimized your new images on your home computer you are reading to upload them to the websites media manager. 15 P age

16 Google analytics is an important tool to measure the effectiveness of your website. We can find out the number of visitors, how they got there, what content they were interested in and a whole lot of other useful statistics that can help in increasing a websites visibility and usability. Marketing research will also find some of the information analytics provides very useful as well. Google analytics is not part of WordPress. You need to set up a Google account or Gmail accout first to use their services. So here is how we view your stats: Login to your Google account by clicking on Sign In at the top right corner of the webpage. Enter your address and password that you signed up with (yourname@gmail.com) You will then be redirected back to Google but at the top of the page you will see your address this means that you are signed in. yourname@gmail.com - Click on Settings and choose the second item Google Account settings. Will be redirected to the page below. Click on Analytics to access the Google Analytics information. - What you can do with this information is use it for some SEO (search engine optimisation) of the website if need be. I recommend letting the site gather some stats for at least six months before going to any SEO provider. 16 P age

17 You will then click on the websites domain name and then you will see some quick statistics but what you want th do is click on is View Reports. This will bring you to the Dashboard where we can view all aspects of the websites analytical reports. The left site you have menu containing the Dashboard, Visitors, Traffic Sources, Content and Goals. Visitors gives you an idea of what languages people are using to view your site, how long they stay and if they are returning. Traffic sources tells you how they got there and tell you exactly what pages they are looking at. You might want to click on Site overlay under Content to see what menus are being clicked on. You can also select a date range for you statistics. The default is the last month so what you are viewing is a month s worth of statistics. yourname@gmail.com 17 P age