word press student blogs - olathe school...

25
WORD PRESS STUDENT BLOGS Instructional Technology Olathe District Schools This material was developed for the exclusive use of Olathe District School staff. Copies may be made for instructional purposes in Olathe District Schools only. Further reproduction or distribution is prohibited without written permission from Olathe District Schools.

Upload: others

Post on 20-Aug-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

WORD PRESS STUDENT BLOGS

Instructional Technology Olathe District Schools 

This material was developed for the exclusive use of Olathe District School staff. Copies may be made for instructional purposes in Olathe District Schools only. Further reproduction or distribution is prohibited without written permission from Olathe District Schools.

Page 2: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 2

WordPress is technically a web-based open-source blogging software application. A typical blog is a frequently updated, personal Web/Blog site featuring diary-type commentary and links to information on other Web sites. Since the WordPress application is web-based, you will be able to access and work on your Blog site on any computer that has Internet access. You will not need a separate login and password for the WordPress site, but will simply use your ODS Novell login and password to access the application (students and/or staff). Olathe District Schools is using WordPress for Student Blogs as of January, 2010. Student Blogs may be created by the teacher where students are given editing rights to the “Teacher Blog” or individual student blogs may be created by each student.

1. Launch your web browser. (Internet Explorer, FireFox, Safari, etc.)

2. In the address bar enter: http://stulog.olatheschools.com (Not accessible outside of the ODS network until 4th

Quarter, Spring-2010.)

3. Click to Login in the Welcome area of the side panel to login to the StuLog.olatheschools.com website.

4. Login using your ODS Novell Login (students and/or staff). Press Enter or click Login.

What is WordPress?

Accessing the ODS Student Blog Web site

Click to log in.

Page 3: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 3

The WordPress Dashboard opens as shown below. Upon logging in, students/staff will have access to their own personal Blog as well as any additional blogs to which they have been granted specific rights (from teachers or other students). These blog sites may be accessed by clicking “My Blogs” in the Dashboard panel at the left side of the window.

The user’s personal blog as well as any other blog to which the user has been granted access appears in the My Blogs list. The student and teacher “My Blogs” window is identical in appearance.

Viewing Your Blog(s)

Teacher Login Student Login

Page 4: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 4

The WordPress Dashboard is the “Editing Center” for your Web site. This area contains links which allows you to post new information, edit existing information, change the look, define users, view and edit comments, and change profile information. If you are viewing the actual site, you may access the Dashboard by clicking “Site Admin” located below the calendar in the left column of the Web site. This takes you to the Dashboard or “Editing Center” for your Web site. If you are viewing the My Blogs page, you may simply click “Dashboard” for the site you wish to edit.

Editing a WordPress Blog site

Click “Site Admin” to begin to edit your Web it

The Dashboard – Editing Center for your Web site appears.

Page 5: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 5

The first editing task is to choose the header graphic for your designated building/school. Click “Appearance” in the left side bar. Click “Choose School”.

Click “Save Choice.”

Click “Visit Site” at the top of the window to view the changes you made.

Your Web site now appears with the chosen school’s banner, as shown above. Click “Site Admin” again to continue editing your Web site, using the Dashboard.

Click “Choose School” to select your designated building/school header graphic.

Choosing Your Building/School Theme

Page 6: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 6

You will now change the “Tag Line” that currently reads “Just another Stulog.olatheschools.com Blogs weblog”. On the Dashboard, click the Settings link in the left column.

Change the “Tagline” to anything you desire. You might display a simple phrase, as shown below, or your blog “slogan”, or you can leave that area blank, if desired.

Click “Save Changes” and then “Visit Site.” The Web site tagline now displays your changes, as shown below.

Note: You may also wish to change the “Name” of the blog, from the generic user login ID. This is also done on the Settings page.

Changing the Tag Line

Page 7: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 7

You will now create a new page for your site and designate it as the Home Page of the Blog site. Click the Pages section in the left side bar in the Dashboard and choose “Add New.” Enter “Welcome…” or “Welcome to my student blog site…” as the page name as shown below. Enter any desire text to appear on the page, as shown below.

Use the WordPress Toolbar to format your font, size and color.

Scroll down and remove the checkmarks for “comments” and “pings” on this page.

Click the “Publish” button at the right side of the page when finished editing. You may choose “Visit Site” at any time to preview changes.

Creating the Home Page

Page 8: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 8

Return to the Pages section of the Dashboard if needed to continue editing the home page. If necessary, choose Pages, Edit, and then select the page to Edit. Click the “Add Image” button to upload and place an image on this page. You might choose to have students design/create an Avatar image to use for their personal photo for their site.

Click the “Select Files” button.

Browse to locate the desired photo to upload to your Web site. Choose “Open”.

Adding a Photo to a Page

Photos take up a great deal of space if they are not resized and compressed for the Web. Use a photo editor like Microsoft® Picture Manager (part of MS Office 2007) or Adobe® Photoshop Elements - Elementary (purchased through district vendor) or PhotoShop or Fireworks – Secondary (Site License) to edit and resize pictures before uploading them to WordPress.

Note: When you upload an image on a page, the image is also placed in the “Media Library” in the Media section of the Dashboard. It is there to use/insert on other pages/posts.

Page 9: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 9

If the “Security Warning” dialog box displays as shown below, choose “No”.

Select the desired alignment for the graphic. Click “Insert into Post”.

Page 10: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 10

The image now appears on your page.

Click on the image to select it. Let your mouse hover over the image. You can then choose to Edit the image or Delete the image, with the two icons that appear over the image. You can also use the sizing handles to resize the image on the page.

Page 11: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 11

In the Settings area at the left side of the WordPress Dashboard, choose “Reading.” Select the “Static Page” radio button and choose the new “Welcome…” page you just created as the front page (home page) of your Blog site. Click “Save Changes.”

Click Visit Site to view your changes. The home page is now the new “Welcome…” page.

Defining the “Home Page” of the Blog site

Page 12: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 12

Click Pages in the Dashboard area to view all current pages of your Web site. The home page is now the new “Welcome…” page. And, you have 1 additional “About” page by default. Using the WordPress Formatting Toolbar tools click the Edit link below each page to edit/add content to each page, as desired. If you do not wish to keep a page, you may click the Delete link to delete the page. You may also add additional Blog site pages to your site by simply click “Add New” and creating the page name and adding content.

Edit the “About” page so that it includes information about yourself and includes an image. Remove the “Comments” and “Ping” options from this page. Save the Changes.

Editing/Adding Additional Blog Site Pages

Page 13: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 13

Add Photo: Choose, Upload and Insert a photo image on the page.

Add Video: Choose, Upload and Insert a video file on the page.

Add Audio: Choose, Upload and Insert an audio file on the page.

Add Media: Choose any media file you have previously uploaded from the Media Library.

Bold: Emphasizes the text

Italics: Italicizes the text

Strikethrough: Puts a line through the text

Ordered List: Creates a numbered list

Unordered List: Creates a bulleted list

Block Quote: Creates a paragraph indented at left and right margins

Align Left: Lines the text up against the left margin

Align Center: Centers the text on the page

Align Right: Lines up the text against the right margin

Insert/Edit Link: Creates a link from the highlighted text to a Web site URL you have selected

Unlink: Removes the hyperlink

Insert/Edit Image: Allows you to insert an image in your post. Allows you to set options for the image by setting the alignment, dimensions, borders and spacing around the image

Split Post with More Tag: Allows you to split the display on your blog page. It publishes the text written above this tag with a Read More link, which takes the user to a page with the full post.

ABC: Check spelling

Toggle Screen View: Toggles between normal and full-screen view

Display Kitchen Sink: Displays additional row of formatting buttons**

Embed Video: Embed code from a video source such as TeacherTube.com

WordPress Formatting Toolbar

Page 14: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 14

You will most likely want to “remove” the option of visitors leaving comments on most all of your pages. To remove this option, select Pages from the Dashboard. Select each page one at a time and choose the Edit link. Remove the Comments option (and Ping option, if desired) as shown below. Save/Update each page.

You will repeat this for each of your pages where you wish to remove “Comments”.

Modifying Comment Options

Remove the checkmark from both boxes.

“Comments are closed.” Note: Visitors to your site will NOT see the “Edit” link. You will see this only when you are logged on and editing your site.

Page 15: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 15

Create a New Page, name it “Blog Discussions”. Save the page. This new page will be used as a “Posts” page to hold all Blog posts or discussions. Click on the Reading link in the Dashboard area. Change the Posts page drop-down box to select “Blog Discussions”. as the Posts page. Select Save Changes. The Blog Discussions page will allow you to add Posts/Discussions/Thoughts on miscellaneous topics to the page. You can also decide whether to allow visitors to make comments on each “post” you add to the page.

Now that you have a Blog Discussions “Posts” page. You can now add “Posts” to the page. But, it will be easier if you create “Categories” first, then as you add posts to the page, you can assign each post to a Category.

Modifying “Posts” for Announcements / Assignments

Choose how many posts you wish to display on your Blog Discussions page. This can be edited later.

Page 16: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 16

Categories can be created to organize “Posts” that you add to your “Blog Discussions” posts page. For example, when you add a “Post” you can designate it as an “Assignment” or an “Editor’s Thoughts” or just assign it the “General” category. To edit Categories, click the Posts link in the Dashboard area. Then select Categories.

After editing and changing the “Uncategorized” category to General, add 2 additional categories: Assignment and Editor’s Thoughts, as shown above. Now you are ready to create posts and assign them to these categories. They will then appear on the Blog Discussions page. They can also be accessed under the “Categories” section of your Blog site, as shown below, if there is a post that has been added to that category. And, clicking on the “dates” on the “Calendar” section of your Blog site will display each post that was entered on that date.

Current categories are listed here. Hover over each category and choose Edit to modify the category. Change the “Uncategorized” category to “General” if desired.

Creating/Modifying Categories

The Categories section reveals categories that currently have posts assigned to them.

The Calendar dates display in blue if a post was created for that date.

Page 17: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 17

Click the Posts link in the Dashboard area. You will most likely have one post already entered named “Hello world!”. Choose the Edit link under this post.

Change the Name of the Post and the Text Message of the Post as shown below. Click Update Post.

Change the category for this post to Author’s Ideas. Choose “Update Post.” You may now view this post under the “Blog Discussions” page on your Web site. Add additional Posts/Announcements/Discussions as needed/desired using the Posts link in the Dashboard area. They will appear in reverse chronological order on the Blog Discussions page. Note: You will want to make a decision on whether you wish to allow comments on this page and whether you want them to always be approved before being able to display on the page (recommended). If you do, you will need to login and “Approve” the comments before they will appear on the “Blog Discussions” post page.

You will see one existing post, unless you have added posts already. Choose to Edit this post.

Give the existing post a new name.

Add new text to this post.

Assigning Posts to Categories

Assign the post to the desired category.

Page 18: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 18

Click the Comments link in the Dashboard area. This will show all comments for your Web site. This window allows you to view, edit or delete comments.

You can modify your “Comments” settings by choosing Settings – Discussion from the Dashboard.

Modify any settings you wish as shown below. You will then need to go to the Comments link on the Dashboard to “approve any comments” that are left, if you so desire, before they are posted.

Managing Posted Comments

Page 19: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 19

Under the Calendar, there is a section on the Web site titled: Blogroll. This section is an area that displays Website “Links” and is accessed/modified in the Links section of the Dashboard.

You may also choose to separate your links into separate Blogrolls such as: Student Resources and Author’s Suggested Websites. This will allow you to “group” related websites. What in the world is a Blobroll? Since “Blogroll” is not a well-known term, it might be helpful to change this to read: Website Resources or create an additional Blogroll and rename both Blogrolls as suggested above.

Once you have your Blogroll(s) created and named, you are ready to add links to the Blogroll area.

Creating Links in the “Blog Roll” Area

The Blogroll is currently empty.

Choose to edit the Blogroll named “Blogroll.”

Rename the Blogroll: Student Resources.

If desired, add a new Blogroll category here.

Choose Update Category.

Page 20: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 20

Choose Links and then Add New to begin adding links.

Enter the name of the link to display on the Website.

Enter the URL or Web address, including the http://.

Enter a descriptive phrase for the Web site.

Assign the Link to the correct Blogroll category.

Select the “_blank” radio button to force the link to open in a new window for visitors to your site.

Two “Blogroll Categories” are shown here with 1 link assigned to each.

Page 21: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 21

You may wish to upload homework assignments or class documents to your Blog site pages or posts. The documents can then be downloaded by anyone visiting your Web site. The directions below demonstrate how to add a document/file to a Post. The same directions may be followed for adding a document/file to a Page of your Web site.

You are now ready to “Add Media” and link to the document. Click the “Add Media” button on the Toolbar as shown below.

Linking Documents / Files on a Web Site Page/Post

Choose to Add New Post from the Dashboard.

Enter a name for the post.

Enter text for the post, including instructions to download a document, as shown.

Assign the correct category for this post.

Page 22: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 22

Your assignments and any downloadable documents appear in the Blog Discussions posts page.

Choose Select Files. Browse and choose the desired file.

The selected file appears in the window.

Enter a Description for the assignment, if desired.

Select “Insert into Post.”

Click “Publish” before leaving this page!

Page 23: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 23

You may wish to add links to websites on a page. Add documents using the same instructions provided above for linking documents on a Posts page. To add links to websites on a page, enter text and use the link button as shown below.

Adding Links to Websites on a Blog Page

Enter the Web/Link URL.

Change the “Target” to “Open link in a new window.”

Click Insert.

The new link appears on the page. Don’t forget to choose “Update Page.”

Page 24: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 24

You add additional users and grant access to “Contributors” or “Authors”, etc. by clicking “Users” in the Dashboard panel. Choose “Add User” and grant them the desired “Role”. Currently, you will need to add users one at a time using this process.

Students may add additional students to a “shared” blog and/or teachers may wish to add all students in a class to be contributors to a class blog.

Adding Users to Your Blog Site

Page 25: WORD PRESS STUDENT BLOGS - Olathe School Districtstulog.olatheschools.com/files/2013/09/Word-Press... · 2013. 9. 18. · WORD PRESS STUDENT BLOGS Instructional Technology Olathe

Olathe District Schools | Student Blogs | Last Updated – January, 2010 25

Widgets are extra menu items/add-ins such as calendars, etc. that you can add to the sidebar. HOWEVER, if you choose to add Widgets to a student blog site, your sidebar will be wiped away and you will have to reconstruct it. THEREFORE, it is recommended that you DO NOT add or modify widgets at all in your Blog site! Important Note: The stulog.olatheschools.com website was moved to a production server as of January, 2010. During the 3rd Quarter Grading Period of Spring, 2010, this site will be used as a “Testing Site” and will not be available/accessible outside of the District network. This is being done to ensure all bugs/concerns are worked out before opening up the server to the Internet. It is anticipated that the site will be opened up to the Internet sometime at the start of the 4th Quarter Grading Period of Spring, 2010.

Widgets