School Website WordPress User Guide

Transcription

1 School Website WordPress User Guide version 3.3 Olathe Public Schools USD #

2 Table of Contents Introduction 0 Log into WordPress... 1 Dashboard View... 1 Dashboard Menu Bar.. 2 Pages. 4 New Page Toolbar 5 Media: Add Images or Files to New Page 5 Add a New Gallery 7 Publish New Page 9 Widgets.. 9 Menus 10 Open Page in New Window. 12 Gallery 12 Before you Begin You are a representative of the Olathe Public Schools, please be responsible, professional respectful and ethical at all times. Federal, state and local law mandates that it is our responsibility to protect the privacy of our students and co-workers; always get permission to post pictures and information about any individual in the district. (Students require written permission from their parent) Be mindful of copyrighted material; always seek permission from a copyright holder before posting copyrighted material. (See Olathe BOE copyright policy for details) For Tech support please contact: Dr. Russell Rusty Meigs Donna Roper Helpdesk helpdesk@olatheschools.com Helpdesk Phone: (913)

3 The WordPress Administrator Page Log into WordPress Download the Firefox Browser and use it to view and edit your WordPress site. This will keep you from getting the security popup boxes. 1. URL: of school)/wp-admin 2. You will receive a prompt for a username and password. 3. Use the User ID and Password you use to log into the network. USER ID: PASSWORD: Dashboard View This is the view you will see when you log into WordPress. This page contains the menu where you will access and make changes to all the content on your site. The Right Now area displays the number of pages, posts, comments, tags and categories. The QuickPress area at the right is where you type in new posts. It also displays the most recent news articles from wordpress.org and incoming links and comments. Click the Home link to return to the dashboard from any area in the site. 1

4 Dashboard Menu Bar A post is news, events, etc. that is time sensitive. Posts are dated and the most recent is displayed first in the list. Think Facebook. Post Menu: All Posts: displays a page with a list of all posts that have been made on the site. This is the area that you add, remove or edit post content. Add New: Click on this to make a new post entry Category: Categories are a way of sorting the content of the site. A post may belong to more than one category. Assigning a category to a post allows the user to search the site. Tags: Another way to categorize posts and used mostly for searching The Media menu manages photos and other media files such as PowerPoints, PDFs, videos, etc. (Most file formats are allowed but if you have one that will not load contact the Help Desk to see if it can be added to the list.) Media Menu: The file must be less than 8 MB. Library: lists all of the pictures and files you have uploaded to the site. You can upload or delete files here. Add New: upload new files here. The Links menu is where you set up a categorized list of links for the site. Links Menu: All Links: displays a list of all the links which have been set up for the site. By default it will contain links for WordPress developer websites. They can be deleted. Add New: Add new links in this area. Link Categories: Links can be displayed by categories. You can add or remove link categories here. Pages are static content and similar to the traditional web page. Pages are not time sensitive and do not change as often. Pages Menu: All pages: displays all the pages on your site. You can add, edit, delete and categorize all page content here. Add New: create a new page here. The page is added automatically to your site menu. Click here to see all the comments you have received on your site. Each page and post in the site has the option to enable comments, make it public or private or disable comments. This area controls the site s outward appearance. This is the area where you control widgets and create custom menus. Appearance Menu: Themes: your only option is your school website theme. Widgets: a small program that gives increased functionality to your website. Menus: create a custom menu for your site. 2

5 Plugins are third-party customizations added to extend the features of WordPress. Ex: the Wp-Spamfree plugin protects you re the site from unwanted comment spam. Plug-in Menus: Installed Plugins: displays all of the third-party plugins available to your site. You can enable or disable these special features. This area allows you to add, remove and assign privileges to other users. Privileges: Administrator: execute all functions on the site Editor: edit pages and posts on the site Author: create new posts only Subscriber: participate in commenting on the site and seeing information marked private. In Olathe you can only assign privileges to people who have already requested a WordPress site. Users Menu: All users: display all users currently assigned to your site and their roles. You can add, remove and assign privileges here. Your profile: view your account details, change your viewable name, add other details about your account. *** Your account is linked to your district login so you cannot rename or change your password here. Add Users: Add a user to your site Contains miscellaneous functions to work with your site, import, or export content. Here is where you control how the site behaves. The majority of the settings have been locked down by the template so you will not be changing them unless directed to. This is the area where you will add images for the front page slide show. Gallery Menu: Overview: Gives an overview of the galleries you have created, number of photos, and the gallery that is currently on your front page. Add Gallery/images: create new galleries and add images to the gallery. Manage Gallery: Edit the galleries you have created. 3

6 Pages All the pages in the site are listed here. This is the area where you can edit or delete existing pages in your site. DO NOT MODIFY THE HOME PAGE Add New Page: 1. Open the Pages menu. 2. Click on New Page 3. A new page will appear. Add title of new page here Upload Media files here: pdf, ppt, doc files, single images, you would like to insert on the page. Add page content here. You cannot change the style of font but you can change the size and color. 4

7 New Page Toolbar The WordPress tool bar gives you options for formatting text, making block quotes, links, etc. To see the purpose of each icon hover your mouse over it. On the right hand side of the tool bar are two tabs; visual (what you see is what you see when published on the web) and HTML (the basic programming language of web pages). You will work in the visual tab the majority of the time. Click here to upload media files like ppt, pdf, and images that are not part of a slide show. More Icon Font Size / Paragraph To change the size of the font click on the font size icon down arrow in the tool bar. A menu will appear. You can choose from the sizes or styles listed there to change the look of the font. To change the size of headings click on the down arrow by the Paragraph icon. There are six choices; Heading 1 is the largest and Heading 6 is the smallest. Headings are always bold. Instead of putting the whole post on your home page, this lets you specify a page break where the person must click to see the rest of the post. Media: Add Images or Files to New Page You can add new media either by clicking on the Media link in the menu bar of WordPress or you can click on Upload/Insert at the top of the tool bar on the WordPress page. The following screen will appear; You can either drag and drop the files into the window or browse for the files. You can upload up to 10 files at once but each file cannot be larger than 10 MB. Once the files have been uploaded another screen appears. 5

8 Images: This screen will allow you to enter a title, alternate text (the text you see when you hover your mouse on a picture on a web site), a caption, a description etc. Important: resize and rename your pictures using a photo editor. When you are finished click the Insert into Post button and then Save all changes button. Rename your photo with a descriptive title. It will make it easier to find in the media library This is the text you see when you hover your mouse over a graphic. Keep it short; i.e. Music Performance by 5 th grade Not necessary to add a caption or description. You may leave blank. Other Types of Media: You can upload other kinds of media such as ppt, pdf, word docs, mp3 files, and.mov in WordPress. The process is similar to uploading pictures. Click on Media in the Dashboard menu or Upload/Insert Media above the toolbar. A screen will appear that allows you to drag and drop the files or browse to find them. Once you have selected the files another screen will appear. You can give the file a title, caption and a description. 6

9 Add a New Gallery A slide show may be added to a page if you use the Gallery link. The Gallery option is different from the Media option in WordPress. The Gallery option is used if you want to insert a slide show of more than one image on a page. Images used for the Gallery should have a.jpg or.png extension. Media is used when you want to insert a single image or document such as a newsletter on the page. Click on Gallery>Add new gallery/images. 1. Click on Add new gallery tab 2. Give the gallery a name 3. Click on Add gallery button Once the gallery has been added you can add images to it 7

10 1. Select the gallery images will be imported into 2. Click on Select Files button 3. Upload Images Select the gallery you want to show on the page Add A Gallery To A Page 1. Open the page you would like to add the gallery to. 2. Click Add NextGen Gallery (the last icon in the top row of the tool bar) Add NextGen Gallery 3. A popup box will display 4. Select the gallery you would like to insert on the page 5. Choose the style you would like the gallery to display 6. Click Insert 7. HTML code will be placed in the text of the page. 8. Click Update 9. Click View site to see the images Image List: Each image is shown as a thumbnail. Viewer clicks on image to see larger version Slideshow: The first image is shown on the page. Viewer clicks the image to go to the next one. Imagebrowser: The image is shown large on the page. Below the image are previous and next arrows for navigation 8

11 Publish New Page On the right hand side of the WordPress page is an area called Publish. If you have a new page and you want to save but not publish it, click on the button called Save Draft. It is always a good idea before you publish a page to click on the preview button to make sure everything looks the way that you want it to. When you are ready to publish the new page that you have created click the Publish button on the right hand side of the new page screen. Widgets Widgets are small pieces of code that increase the functionality of the website. The widgets available for the school website are listed on the site in the Appearance menu. A widget can be activated by dragging it from the left side to a sidebar on the right. Dragging widgets back to the left will deactivate them and delete their settings. Some of the widgets allow text to be added to the side bar. To add text click the down arrow on the widget button in the right sidebar and add the text to the drop down box. This is the area that you will change the information that is located on the front page of your site. More Information is the area located at the bottom of the front page and Spotlight is the area located in the right sidebar. Spotlight contains 3 text widgets. You can add or remove the text widgets by dragging as described above. Caution: Check to make sure you do not change the look of the side bar if you add a text widget. This would be a good place to use the More option in the tool bar. 9

12 Menus Menus are the customizable navigation that allows you to move between pages on the site. The school websites have defined menus but you can add pages to the main menu. To access the Menu screen click on Appearance>Menu. Main should be displayed in Nav. Menu. Click Screen Options to show what is available on your opening screen In the screen options window make sure there is a checkmark by Link Target. This allows you the option of opening a link in a new window. Click the arrow by the Screen Option tab to close this area. 10

13 Add a Page to the Menu After you have created a new page you can add it to the pages navigation menu. 1. Locate the area called Pages in the Menu Window. 2. Click on the View All tab 3. Put a checkmark by the name of the new page you created. 4. Click Add to Menu. There are two pages labeled Home:Home / Home in the list. These are pages that do not contain information that you will change. Add A Custom Link to an Outside Web Site 1. Capture the URL of the link you are wanting to add and paste it in the URL area 2. In the label area type in the name you would like displayed as the link. 3. Click Add to Menu olatheschools.com Olathe Public Schools Add A Custom Link to a Page in the Site 1. Each page you create in WordPress has its own Permalink which is located under the title of the page. 2. Highlight and copy the permalink by CTRL+C or right click and choose copy from the menu that appears. 3. Click on the Appearance link and chose menu. 4. In the Custom Links URL box paste the permalink you copied from the page you would like to attach to the Menu 5. Label the page with the title of the page 6. Click Add to Menu 11

14 Open Page in New Window You do not want readers to leave your homepage when they click out of a page in the site. You may want to have each page in the site open in a new window. 1. Click the arrow on the name of the page you would like to open in a new window. 2. A new window will open 3. Put a checkmark in the box by Open link in a new window/tab 4. Click on the arrow again to close the window. Rearranging the Menu Items After items have been added to a menu, you can drag and drop to put them in the order you want. You can also click each item to reveal additional configuration options. You can drag a menu item a little to the right to make it a submenu. You'll see when the position of the drop target shifts over to portray the nested placement. When you have finished building your custom menu, make sure you click the Save Menu button. Gallery The gallery contains album for the slide show that is shown on the front page of the school website. You need to make sure all your pictures for this slide show have been resized to 600 pixels wide by 350 pixels in height. You can use a photo editing program like Faststone Image Viewer or Photoshop to resize and crop photos. Galleries can be added to any page. They are not limited to the front page. Gallery Menu Overview: click here to see a summary of the galleries that have been created and the photos that have been uploaded 4. Select the gallery images will be imported into 5. Click on Select Files button 6. Upload Images Scale images to 600 pixels by 350 pixels

15 The screen that displays after the images have been selected The screen that displays after the images have been uploaded successfully. Click here to manage existing galleries Click on the gallery you want to view. This screen gives information about the gallery. This is where you will add a caption, or link to an image on the front slide show. 13

16 At this screen you can add delete images, add a web link or a description of the picture. It displays the date the picture was added as well as the size. If you put a checkmark in the exclude box the picture will not be included as part of the current slide show. Copying Content from Dreamweaver Website to WordPress Website You will need to upload the images and files you have links to on the old site to the WordPress library. Follow the directions found on page 5, 6, and 7 of the WordPress School Website Manual for uploading images and files. After you have all the files uploaded then you will be able to copy the text from the old Dreamweaver school website to the new WordPress site. Once you have the text in WordPress you will need to relink the files and reinsert the images you have uploaded into the media file library. Copy Text from Dreamweaver to the New WordPress Site 1. Open your school website and open your new WordPress template so you have both available. 2. Go to your school website 3. Highlight the text that you would like to copy. On the highlighted area do Control+ C or right click with the mouse and chose Copy from the menu. This will copy the text. 4. Open the page on the WordPress site that you would like to copy the text to. 5. Add a title to the page if there isn t one 6. Do a Control+V or a right click with the mouse and chose Paste from the menu. This will paste the text from the Dreamweaver site into the WordPress site. 7. If you have copied a table from the old site you will not be able to delete rows or add rows to the table. Since you will need to reinsert the images and links from the old site you may want to create a new table and add the needed images and links. 8. The format for adding an link is mailto:school address. EX: mailto:sbrownirc@olatheschools.org 14