Transcript WordPress Content Management System

WordPress Basic Training
Purdue University Calumet
What We Will Cover
• WordPress – Brief Overview
• From Login to Logout
• Basic Editing Tasks
– Creating / Revising Content
– Adding Images & uploading documents
– Creating Links
– Creating data tables
• Terminology
What About Accessibility?
• Seamless integration
• Documents
– MUST be accessible BEFORE they are uploaded
– Support is available with quick turnaround
• Resource: Web Accessibility Web site
A Word About Browsers
• Internet Explorer is a Diva
– Compatibility Mode
– Different versions behave differently
– Editing issues crop up
• You can choose another
– Mozilla’s FireFox
– Google’s Chrome
Why WordPress?
• Started out as blogging platform
• Now a full-fledged Content Management
System (CMS)
• Lots of features, plugins
• Customizing
• We can make it sing!
Content is Key (King? Queen?)
• What you put on your site matters!
• Who is your audience?
– Current or Future Students?
– Faculty & Research Scholars?
– Alumni and Donors?
– Regulators?
• How can you best serve them?
Logging In
• http://webs.purduecal.edu/yoursite/wplogin.php
Admin Toolbar
• Front side
• Back end
Your Workspace
• Customize Your Workspace
– Profile
• Color Scheme
• Nickname
• Password
– Dashboard
– Screen Options –
• On almost every page
• Context
Profile
• DON’T check this box!
• Adjust Color Scheme
• Nickname – sometimes
appears on front end
• Password
Screen Options
Left Side Navigation
What’s on Your Site?
• You have been given some
content to add
• What’s next?
Here is where we talk about
“accessibility”
• Really talking “usability”
– Benefits everyone
• Structure & Organization
– Like the framework and layout of a house
•
•
•
•
Headings
Lists
Paragraphs
Tables (for DATA ONLY!)
• Presentation
– Like the paint on the walls and the furniture
• Colors
• Look and feel
• Font size (VERY different from a heading!)
• Some consideration for assistive technology
Assistive Technology
• ALL technology is “assistive”
– “assists” us in doing things we couldn’t do without it
• Convenient for some – essential for others
– Screen Readers – software that reads to people who
are blind
– Captions on videos – for people who can’t hear
– Zoom Text for low vision
– Keyboard navigation – for those who can’t use a
mouse
Why is this important to us?
• As web content editors, we can make things
easy or we can make things hard
• Understanding the struggle
– Neil Ewers – Trace Institute
– WebAIM demos
Analyze the content!
(And think about your audience!)
• Questions to ask yourself
–Should it be a Post or a Page?
–What does it contain?
• text,
• photos
•WHY are we publishing this?
Posts & Pages & Media
Posts
• Time-based Material
– Keeps updating
– Transient
• Relational
– Series of tutorials
Pages
• Static Content
– Changes rarely if at all
• Non-Relational
– Except for Parent / Child
• Not Grouped
• Part of Groups
– Categories
– Tags
Media
• Images, documents,
multimedia
• Attachment pages
Posts / Pages
Differences & Similarities
Posts have…
• Categories
• Tags
• Excerpts
• Expiration Dates
• Featured Images
• Custom Fields
• Templates – a few
Pages have…
• Parents or Children
• Order
• Expiration Dates
• Option to appear in the
menu bar
• Templates – more than
Posts
• Featured Images
• Custom Fields
Which One to Choose?
• It Depends!
• For Posts – Think News or Think Boxes
– Current now
– Irrelevant tomorrow or next week
– Falls into Category
• For Pages – Think Forever, more or less
– Current now and tomorrow
– Doesn’t need updated often
Creating & Editing Posts & Pages
• How are they alike?
– The WYSIWYG editor
– Title
– Publish
– Featured Image
– Custom Fields
– Theme SEO settings
– Layout settings
– Revisions
Enter title here
• First thing you do
Heading & Link
Next Step – Add the Content
• Text editor – WYSIWYG (WIZ-ee-wig)
– Works just like any other word processer
The Toolbar –Quick Reference
Paste …
Pop up
• Paste as Plain Text
Text Formatting
Text formatting
dropdown
Structure: Headings
• Give structure and shape to your page
– Not just a BLOB of text
• Tips
• Keep them short – 90 characters or so
• Follow a logical order / hierarchy like an outline
– h1
» H2
• H3
• This is your visitor’s navigation
– Roadmap through the page
Structure: Lists
• If you have a series of
short paragraphs, that’s
a list
• Ordered:
– When the order matters
like Step 1, Step 2
• Unordered (bulleted)
– When the order doesn’t
matter.
Insert / Edit Link
Insert Edit
Link / Unlink
Link Dialog Box
• Either paste the URL in the box or…
Link Dialog – Existing Content
• Link to existing
content with
dropdown
Just say no to opening new windows!
Please!
Open Link in
new Window
What “open new window” looks like
• In the editor’s window
• On the front end
Tips for links
• Human readable text
• Don’t use phrases that
convey no information as
links such as:
– Click here,
– Here,
– More,
– Read more
• Do use text that makes
sense out of context such as
‘degree requirements for BS
in journalism’.
• Do make links long enough to
make sense – think about the
copy you write
• Don’t make links too long or
too short. About seven words
is a good maximum to aim for.
• Don’t use the actual link as
your text
– (i.e.
http://webs.purduecal.edu
/creative/services/ )
– Use something descriptive
such as Creative Services
Tables – For Data, not Layout
Insert Table
Drop Down
Tables – the simpler the better!
• Tables are read row by row, cell by cell
• Think them through first
– What if you couldn’t see the data?
– How could you make sense of it?
• A few easy steps...
– Caption
– Header Rows
– Header Cells / Scope
Table Properties
Table Properties
No More Summaries
• Summaries are not required for tables now
• Instead…
– Introduce the table in your copy
– Explain the purpose of the table
– Outline the basic structure
– Explain how to use it
Table Header Rows
Table Cell Properties
Add Media
Upload / Insert Images,
Multimedia(video/audio/ etc.) and
documents (PDF, Word, Excel,
PowerPoint)
Insert Media from Library
Settings for Media
• Settings are on the right
of the screen
– Title
– Caption
– Alternate Text
– Description
– Attachment
Display Settings
Editing Images - Icons
Alternate Text
Graphic Text & Tips
• Alt text must = what’s on the graphic
• Tip –
– keep alternate text about the length of a Tweet –
140 characters
• If you need to say more, create a separate page and link
the image to that page.
Upload Files
• Easy to do – maximum file size 2 megabytes
• Not recommended from within Post or Page
– use Media Library to upload
– Alternate text
Stays with
image if
uploaded via
Media Library
Upload via Media Library
Edit Media
• Add the Alternate Text
here, in the library
Where is the HTML Editor Window?
• Gone. All Gone. Almost.
Preview your post
• Preview shows you
what your post will look
like
• Safe way of testing
• No commitment
required!
Ready to Publish?
• If you’re happy with the
way it looks..
• Choose your options
–
–
–
–
–
Visibility- usually public
“Sticky” post
Publish now
Publish later
Publish last week!
• When you edit existing,
Published content, the
“Publish” button will read
“Update”
For Posts: Categories
• Choose an existing category
• Create a new one
For Pages: Attributes
•
•
•
•
Parents
Templates
Order
Exclude Pages
Where to get help
• University Relations
– Rob Peterson Ext 2097
– Pam Riesmeyer Ext 2731
• Web Accessibility Web site
• DO NOT HESITATE TO CALL US FOR HELP!
• That’s why we’re here!