WordPress Complete Tutorial
•Télécharger en tant que PPT, PDF•
4 j'aime•18,024 vues
Overview & Examples Getting Started CMS Tips & Tricks Beyond the Basics Keep it Safe, Secure & Spiffy More Handy Plugins What else can WP do?
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à WordPress Complete Tutorial
Similaire à WordPress Complete Tutorial (20)
Plus de OpenSource Technologies Pvt. Ltd.
Plus de OpenSource Technologies Pvt. Ltd. (13)
Dernier
Dernier (20)
WordPress Complete Tutorial
- 2. What do you want to learn?
- 3. Agenda 1. Overview & Examples 2. Getting Started 3. CMS Tips & Tricks 4. Beyond the Basics 5. Keep it Safe, Secure & Spiffy 6. More Handy Plugins 7. What else can WP do?
- 4. 1: Overview & Examples
- 6. Content Management System http://www.flickr.com/photos/atibens/4578260998/
- 7. Open Source is Unlocked
- 8. Open Source is Community
- 10. WordPress in Libraries Examples
- 11. Blogging
- 16. Writing a WordPress Post
- 17. Pages - the heart of your site http://www.flickr.com/photos/tearsandrain/3526002850
- 18. Pages for Static Content
- 19. Custom Layout for Static Page
- 20. Running a full web site
- 28. And more!
- 30. How it works • You create content • Content stored in a database • Pages don’t ‘exist’ until requested • User clicks on a link • PHP code retrieves content from database. • CSS used to style page • Page is displayed
- 31. Add Content – Web Based Interface
- 32. Stored in a database the_title the_content
- 33. Page created when requested
- 34. Same content on other pages
- 35. THEMES make it look good!
- 36. Same Content – Different Themes
- 40. Free Hosted Versions Pros: • Free • No tech skills required • Easy Cons: • No custom URL • Can’t upload themes & plugins
- 41. Host your own?
- 42. LAMP Linux Apache MySQL PHP http://www.flickr.com/photos/neonarcade/23955187
- 43. Technical Requirements • Currently Version 3.4.x • PHP version 4.3 or greater * • MySQL version 4.1.2 or greater • http://codex.wordpress.org/Hosting_Word Press * Might find some plugins require more recent version of PHP.
- 44. Hosting on your own server? • Cost? • Storage capacity? • Bandwidth? • Tech Support? • Install software yourself http://www.flickr.com/photos/jamisonjudd/2433102356
- 45. “If you have no idea what to do with this download….”
- 46. Commercial Services • Often under $10/month • Tech support • One Click Install! For more hosts: http://wordpress.org/hosting/
- 48. Admin Dashboard
- 49. Lose the ‘admin’ login!
- 50. Users Add New User
- 53. Editing a Post Permalink
- 54. Writing a Post • News & events & updates • Most recent appears at the top • Older posts get bumped off the page • Stored in Archives • Special page for posts
- 55. Writing a Post
- 56. Writing a Post
- 57. Read More…
- 58. Read the rest of the entry…
- 59. Make a Post STICKY
- 60. Sticky post at top.
- 61. Publish Later
- 63. Images & Videos
- 64. Add Media Button
- 65. Add Media Button
- 67. Places image in post
- 68. Get rid of Caption?
- 69. ALT text
- 70. Change default image sizes
- 71. Create a Gallery
- 73. SimpleViewer Plugin for fancier galleries wordpress.org/extend/plugins/wp-simpleviewer/
- 76. Embed Video
- 77. Viper's Video Quicktags Plugin http://wordpress.org/extend/plugins/vipers-video-quicktags/
- 78. Viper's Video Quicktags Plugin
- 80. Themes
- 81. Themes
- 85. Themes – Add new themes
- 86. Search for a new theme
- 87. FTP access -
- 89. Sidebar Widgets
- 92. Text Widget to Customize
- 93. Text Widget & 3rd Party Content
- 94. Basic Plugins
- 95. Plugins add functionality & features
- 96. Plugins Page
- 97. WordPress.com Stats • Requires API code from wordpress.com http://wordpress.org/extend /plugins/stats/
- 98. Google Analytics • Sign up with GA • Enter ID in WP Settings panel http://wordpress.org/extend/plugins/google-analytics-for-wordpress/
- 99. Akismet • Requires API code from wordpress.com • http://wordpress.org/extend/plugins/akismet/
- 100. More great plugins later!
- 101. 3: CMS Tips & Tricks
- 104. Making a static front page
- 105. Create a Main Page
- 106. Create a Page for Posts No Content for the Page, just a title
- 107. Settings Reading Select Front Page & Posts Page
- 108. News tab shows Posts now
- 109. But … Home & Welcome both go to the same place. Need to delete HOME
- 110. Edit header.php file • Delete the line of code that creates the default HOME link
- 111. Yay, extra tab is gone!
- 112. 4: Beyond the Basics
- 113. Great New Custom Menus in 3.0
- 115. Custom Menu in Sidebar Widget
- 116. Custom Content Types Custom Fields
- 118. Custom Field – Post Page http://wordpress.org/extend/plugins/more-fields/
- 119. Custom Post (Content!) Types http://wordpress.org/extend/plugins/more-types/
- 121. More on Themes, CSS & Templates
- 122. A quick look at the Theme Editor • Modify existing themes • Change fonts, colors, graphics • Create your own themes • Wordpress.com – ~ $15 year extra
- 123. Template & Styles
- 126. Editing a .php file Custom 404 page
- 129. 404.php template
- 131. PHP code & HTML <?php get_header(); ?> <div id="primary"> <h1 class="page-title">Oops! </h1> <p>This page is missing. Try the search box</p> <?php include (TEMPLATEPATH . "/searchform.php"); ?></div> <?php get_footer(); ?>
- 132. Template Pages
- 133. Page uses “no sidebar” template
- 134. Add Page – Select Template
- 135. Editing a Template
- 136. Web Developer Firefox Add On
- 138. 5: Keep it Safe, Secure & Spiffy http://www.flickr.com/photos/maistora/3237164755
- 139. Don’t leave the door unlocked Run the latest version
- 140. Get rid of default ADMIN user • Sign in • Create a new user with total admin rights • Sign out • Sign in to the new user account • Delete the old admin account • Use your new account just for adminstrative stuff
- 141. Manage User Accounts • Give yourself a separate account for writing/editing • Define what access your contributors need
- 142. Security Keys • Check your wp-config.php file • Does it have security keys? – define('AUTH_KEY', 'put your unique phrase here'); – define('SECURE_AUTH_KEY', 'put your unique phrase here'); – etc……. – More Info: http://goo.gl/SIhf
- 143. Use reliable themes & plugins • Check WordPress.org directories • Check the ratings & forum discussions • Test, test, test! And test some more. • Keep them up to date! • Deactivate & Delete unwanted plugins
- 144. Plugins - Deactivate, then Delete
- 145. Back it up! 1. Backup your database: – Via web host control panel – Or wp-db-backup plugin (wordpress.org/extend/plugins/wp-db-backup/) 1. FTP to server and copy: • wp-content/themes • wp-content/plugins • wp-content/uploads (images, files, etc.)
- 146. WP-DB-BACKUP plugin
- 147. Google XML Sitemaps wordpress.org/extend/plugins/google-sitemap-generator/
- 148. 6: Handy Plugins
- 149. All in one SEO wordpress.org/extend/plugins/all-in-one-seo-pack/
- 151. Sexy Bookmarks wordpress.org/extend/plugins/sexybookmarks/
- 154. WP Contact Form Plugin http://wordpress.org/extend/plugins/wp-contact-form/
- 155. Add <!--contact form--> to a page
- 161. MobilePress • Detects mobile device • Displays mobile version of page http://wordpress.org/extend/plug ins/mobilepress/
- 162. MobilePress
- 164. Donations Cloud – works with PayPal http://www.zirona.com/software/wordpress-donations-cloud/
- 165. More Plugins… • WP Plugin Repository – http://wordpress.org/extend/plugins/ • My links to plugins – http://delicious.com/grdnldy/wordpress+plugins • Lots of great plugins discussed on this blog: – Lorelle on WordPress http://lorelle.wordpress.com
- 166. 7: What else can we do with WP?
- 168. The Academic Commons...is designed to support faculty initiatives and build community through the use(s) of technology in teaching and learning. ...Creating networks and support systems that are enabled by easy access to quality digital resources will nurture faculty development through sharing replicable materials and best practices. About the CUNY (City University of New York) Academic Commons
- 169. Open System, Open Learning People Groups Forums Blogs
- 170. Members Blogs
- 171. ePortfolios Blogs
- 172. Forums
- 173. Blogs
- 174. … features – similar to Facebook, Twitter, etc – will probably seem familiar to many. My philosophy of teaching includes instilling in my students a sense of exploration and play. And dealing with change. The Buddypress site is an extension of that. In my email to my classes as school starts, I asked them to configure their blogs, get an RSS aggregator and explore the site. Explore is the keyword. Dr. Michael Stephens on his BuddyPress enabled course
- 178. Set up a network of sites with WordPress MultiSite
- 181. Library Catalogs
- 182. “..easy to let library staff at the various libraries contribute articles to the blog, ensuring a lively, regularly updated blog/catalog.” (isis.pbcantwerpen.be/) (translated with google translate)
- 185. Selected WP Books (There are tons more great ones!) • Digging into WordPress by Jeff Starr & Chris Coyier (digwp.com) • Beginning WordPress 3 by Stephanie Leary • Smashing WordPress by Thord Hedengren
- 186. More Help! • WordPress Codex - http://codex.wordpress.org/ • WordPress Forums - http://wordpress.org/support/ • WordPress FAQ’s - http://codex.wordpress.org/FAQ • New to WordPress? –tips http://codex.wordpress.org/FAQ_New_To _WordPress
Notes de l'éditeur
- Going to cover a lot in 3 hours. Usually a 6 hour hands on class! And really could be a 2 day session. The goal is to give you a taste of all the pieces you’ll need to build a website with WordPress. And a lot of tips and tricks along the way. WON”T BE SPENDING TONS OF TIME ON THE REAL BASICS. With those pieces you’ll be able to let your imagination go to town! Because there are limitless ways you can customize and enhance WP. Please ask questions as we go – if you have a question, someone else probably does too. If something comes up that is beyond what we can cover during the session, I’ll be happy to talk to you after the session or get together during the rest of the conference.
- Who’s using blogger? Wordpress Blogging on other platforms? Creating web sites with dreamweaver? Hand coding html?
- Open Source
- Helps you organize all the information about your library and manage it easily Tool for creating & managing a website Web-based interface Contributors can focus on CONTENT! Update “look & feel” easily Flexible
- Source code is open and available to modify You make changes, you share them Modify it & develop tools to enhance it! Other familiar open source software: Firefox Open Office
- Community working together to create better software and help each other out.
- About 14 million at .com And 14 million independent installs
- We’ll quickly cover some basic blogging terms and look at some examples of blogs And then look at examples of some libraries are using blogging tools to create a complete website.
- We’re all familiar with blogs! A website designed to be used as something of an online diary or journal – or For an organization, a newsletter. ?? What’s the key thing that makes this recognizable this as a BLOG? POSTS! Reverse chronological order news updates. Colorful, fun, easy to update, frequently updated news or “ POSTS” This one is designed to serve a specific purpose or targeted at a specific audience. http://www.hcplibrary.org/teen/wordpress/
- Each post can be assigned to categories – topics or subject headings And the categories are listed on the side The categories help readers find content of interest.
- These are the posts from the BOOKS category. We can relabel that – TOPICS, NEWS SECTIONS, whatever
- Also notice how older posts are collected into monthly back files ARCHIVES We can relabel that with something like OLD NEWS, BACKFILES, etc. Doesn’t need to be called ARCHIVES
- Very easy to do - Web based interface for writing and publishing your content. Can do it from anywhere you have access to the web. No software to install on your computer.
- What’s different about this one? Nothing on first glance – posts, sidebar content But also PAGES Events, research tools Click on the RESEARCH TOOLS link on the navigation bar and
- Start to see how you can build a web site with news AND pages of more static info. This is the KEY creating a web site We all have web pages with information that isn’t easily crammed into chronological news posts. SERVICES – ILL, WIFI, REFERENCE CHILDRENS, TEENS, ADULT SERVICES LIBRARY HOURS POLICIES HOW TO’S ACCESS TO DATABASES ETC
- Fuzzy line between “blog” and full web site, add enough content, replace your old ‘regular web site’ and you have a WP website
- Attractive custom graphics Double navigation bar http://thegrovelibrary.net/ Use Suffusion theme which comes with lots of built in options
- http://stillwater.sals.edu/ This was done with wordpress too and looks more like a magazine than a blog.
- http://tamworthlibrary.org/ Nice website – put together by Lichen Rancourt
- Of course it can also be used as a personal web site –professional resume etc.
- !!
- Add content via easy to use web-based interface Type content – hit publish and it’s done! AND it looks good. Since it’s web based and easy to use, you can have other staff members contribute content to the site
- This text is stored in a database with content labeled “the_title” “the_content” And when user clicks on a link to read this article, the CMS gets the text from the database and displays it. Uses the options you’ve selected to add layout, colors, text and more.
- Storing the content in a database makes it easy to reuse it on various pages. Same content on main page, single post page, archives page, search results page etc.
- Choose from lots of free themes to make it look good. Many themes have options to customize headers and such. You can also edit the CSS (cascading style sheet) files to change fonts, etc. Or you can create your own customized theme (or hire someone!)
- With the click of a button, the look changes, but the content has stayed the same.
- Free hosted versions at: -- Wordpress.com -- Edublogs.org Limited themes, plugins Charge $15/year for access to CSS $15 a year to redirect your URL to the blog. Still this could be a great way to get started and to work with the ideas. Just don’t let the limits put you off the whole WordPress idea. When you’re ready, you can move to a self-hosted version.
- Free hosted versions at: -- Wordpress.com -- Edublogs.org
- To run WordPress you need a LAMP server
- Wordpress has a page of suggested hosting companies. http://wordpress.org/hosting/ http://codex.wordpress.org/Hosting_WordPress
- http://wordpress.org/download/
- Wordpress has a page of suggested hosting companies. http://wordpress.org/hosting/
- This is your Dashboard (control panel) where you write your news, create pages, change the themes and everything else that you’ll need to do to administer your site.
- For these sample sites, your user name has been set up for you When you start your own wordpress project on your own server, your user name will probably be ADMIN. Create a new user with a distinctive username, make that user the adminstrator , and get rid of the original ADMIN user. Just makes it a little harder for someone to guess your login and password.
- NOTE: This is disabled on the libraryblogs.net test blogs Add new users who will help you maintain your site. Remember that’s one of the great features of a CMS. Roles: Administrator – access to all admin features Editor – write, manage, publish all posts Author – write, manage and publish their own posts Contributor – write and manage their own posts, can’t publish
- Change the name of your website Add a slogan or tagline Select the format for dates and times
- Choose your permalink structure. Default and numeric aren’t great Some people recommend not using dates either. One option is to use a custom structure: /news/%postname%/ WHY? -- friendlier readable links -- search engine optimization NOTES: Wordpress won’t let you name two posts by the same name. Handy that! You can edit the permalink of any post or page as you’re creating it You can change your option later, but best to start out right! Links back to your pages won’t work if you change.
- After the title is added, the title will show up in the Permalink Use the EDIT option to customize the keywords in the link For more info on Permalinks see: Wordpress Codex - http://codex.wordpress.org/Using_Permalinks
- Under the Posts option Edit existing posts Add New Tags Categories
- Type in the title Add the text Hit publish! That’s it. Really!
- Makes news/blog page easier to scan.
- Keeps that post at the top of the news page.
- Rest of posts are reverse chronological orders Stored in archives by month
- Problem with adding images, make sure you add text to the “CAPTION” field to get the ALT text entered. To get rid of the caption afterwards, edit the html OR go back to the image properties, delete caption. Add alt text in the Advanced section. Very awkward
- Click on the icon on the image itself to go back to edit settings for image
- This deletes caption from displaying. But use leaves those words in the ALT tag – see the Advanced settings.
- Upload a bunch of photos
- You can get the video embed code from YouTube, but this is easier and you can add video from many more places
- Tons of settings
- With the click of a button, the look changes.
- From the APPEARANCE panel -- Themes Browse through them. Click on the image to popup a preview and the ACTIVATE button
- Click on ACTIVATE
- When you visit the blog it will have a new look.
- Appearance Add New Themes Make selections These are all themes that have been checked by WordPress
- Use your ftp program to copy the full folder with the theme into the Themes folder. It will then be available when you return to your Themes admin panel.
- Suffusion – example of a theme with tons of custom options built in.
- Boxes of content Lists of pages Lists of categories for news items Links to other resource And much more
- Lots of prebuilt widgets Just drag and drop to the sidebar Click to open and change settings Some plugins will include new widgets – like the newgen gallery manager
- Things to add to the sidebar – text boxes with basic info. http://nplibrary.org/
- Use the text widget to add content from other websites to the sidebar. Some familiar 3 rd party content includes: Librarything book feed, meebo chat widget, flickr photobadge and much more.
- Plugins can add tools to help you administer your blog And add features to the public side of your blog Accessories!
- Lists the plugins that are available on your install of WP Click on Activate to use them. Install and activate one at a time to test for possible conflicts.
- http://wordpress.org/extend/plugins/stats/ Need to sign up for an account with wordpress.com to activate this and Akismet Both were created by the wordpress folks and make use of resources on the .com server. You don’t need to blog on wordpress.com, you just need the account Getting stats to load can be VERY slow sometimes. For stats – you might also want to try google analytics – more detail.
- http://wordpress.org/extend/plugins/google-analytics-for-wordpress/ Adds your google analytics code to all your WP pages and posts
- Requires API code from wordpress.com http://wordpress.org/extend/plugins/akismet/ More on essential Plugins later!
- Options for formatting the links for your News Posts Default is UGLY! Not very human or search engine friendly Numeric is ok, but doesn’t have keywords to help with search engine optimization Consider the options that have year, month and keywords from title of post. When you write a post, the title is used as the “postname” in the permalink You can edit that when you first write the post – it’s the POST SLUG
- Custom structure lets you create your own link structure. This example uses “news” in front of all blog posts and adds the post-slug (post name) to the URL.
- Create the PAGE you want to have as the main page. I’m calling it WELCOME – you could call it anything.
- Create a PAGE that will hold the blog posts too. Call it NEWS or some such thing. No content on this page!
- Settings Reading Change the Front Page Displays option to Static Page Select HOME for the front Page Select NEWS for the Posts Page.
- Now when we click on NEWS we get the blog postings. BUT look at that double link to the HOME page
- Uh oh! We now have two tabs at the top that link to the main page HOME WELCOME Default behaviour of WP is to have a LINK called HOME that goes to whatever page you designate as the start page. Awkward. Need to edit the header.php file to get rid of this! Not hard to do, just scary!
- Look for the code inside that makes the default link to the home page on the navigation bar – it will be in the <UL id=nav> section. Get rid of that line of code Leaving the rest intact. Depending on the theme – there may be other lines of code. This is a simple example. But there will be one line that creates the HOME link and the a bunch of other code to create all the other links.
- Yay, extra tab gone!
- Used to be your pages made up the menu by default And it was a bit fussy to add anything else. Include pages, categories, external links, etc.
- You may want to add additional information to each of your posts and have it be in a separate field so you can format it and display it in a special way. Currently reading – if each of your post writers want to share something they’re reading. Extra thumbnail image Tip of the day. Etc.
- Custom Fields created with the MORE FIELDS plugin
- Officially called Custom POST types – confusing, I’ll use CONTENT Method for creating a whole different type of content for your site. Directory entries Lists of databases Materials that just aren’t going to fit in with your newsy POSTS or your fairly static PAGES. Created with the MORE TYPES plugin And uses the MORE FIELDS plugin to create the fiields
- You won’t see this on your test blogs, since this is a multiple user installation, more than one person might be using the same theme files. Editing these php files would affect anyone using that theme.
- Twenty Ten files Lets edit the Stylesheet.
- Need to know a bit about CSS. If you don’t know CSS, w3schools has great tutorials http://www.w3schools.com/
- A fun customized 404 - http://www.davidleeking.com/
- The “404 file not found” page is an easy one to customize.
- The code in bold/red is php code. It pulls in data from other files and from the database. Examples of how PHP creates your website: <?php get_header(); ?> - finds the header.php file and displays that data at the top of the page <?php bloginfo('url'); ?> - goes to the database and finds the URL for the “bloginfo” field – that’s the URL for you website.
- Some themes come with special template pages that vary from the regular layout
- You can build your own template files too. Handy to start with a theme that has some already built And create new ones based on existing ones. Documentation on building templates: http://codex.wordpress.org/Stepping_Into_Templates
- Easy way to start a template is find the page.php file and base your template on that Save it with a new filename.php Add the Template code info at the top of the file. Try just deleting the <?php get_sidebar(); ?> line. That will delete the sidebar. Upload the file to your themes folder Create a new page and apply that template. You should have a page without a sidebar. This may not be a useful template for you, but it proves the process works. Edit the rest of the file to your needs. Ok, so this is the hard part! But it’s the best way to learn how the wordpress template code works. Use the online tutorials or books with ideas.
- WebDeveloper addon for Firefox is really handy for helping to identify the pieces of the page and css styles. http://chrispederick.com/work/web-developer/ June 2009 version available for Firefox, Flock & Seamonkey Will run on any platform that these browsers run on: windows, mac, linux Adds toolbar and menu to browser. Select options from toolbar or menu to help you find what css elements you need to look for in the code files to modify the look of the blog. Example: Information menu > Display element information = shows this is the ul .menu item. and show the attributes controlling the look of that section and what children that class has.
- There are wonderful themes available from commercial developers. Companies that repsect the GPL licensing
- That goes for plugins & themes too
- Plugins can get out of date. Functionality may be built into a new version of WP Or the developer may no longer support the plug in. Deactivate Then Delete
- On demand backup of database tables Or schedule the backup and have the file emailed to you.
- http://johnmiedema.ca/portfolio/openbook-wordpress-plugin/ Simply add code to your page/post with the ISBN of a book in it. [openbook booknumber="184195828X"] Book cover will appear
- WP Contact Form http://wordpress.org/extend/plugins/wp-contact-form/ Just one of many form plugins CformsII – has tons of options, but is a bit more complicated to set up. http://www.deliciousdays.com/cforms-plugin
- http://wordpress.org/extend/plugins/mobilepress/
- Mick Jacobsen – Skokie IL PL Main site is NOT WP
- Mick Jacobsen of Skokie PL, Illinois is writing a section for the LTR Separate sites for each topic. Each blog has it’s own look and feel Contributors have access to their blogs Found it very easy to add content, images, videos. Top menu bar takes users back to the main library website There a sense of fragmentation at this point. With changes in wordpress, the whole site could now be brought together under WP, instead of having a main stie and a bunch of blogs. Suggests that the blog content in separate WP MU sites could be reintegrated into one site with CATEGORIES to distinguish the content.
- PBC Library - Provinciaal Bibliotheekcentrum Antwerp Belgium Regional Library System of 40 libraries Central search for all libraries Search catalog from the search boxes on the WP sides’ Lots of redirection to the catalog (note sidebar) and from within posts and pages Hired a WP consultant to create a plugin that makes it very easy for those writing posts to link to the catalog easily. Catalog has same page design, so feels pretty integrated “ WordPress’ user friendliness should make it easy to let library staff at the various libraries contribute articles to the blog, ensuring a lively, regularly updated blog/catalog.” WordPress site integrated with Aquabrowser catalog - PBC, Antwerp, Belgium (http://isis.pbcantwerpen.be/) Blog post about the project: http://goo.gl/Dgnw/
- Casey Bisson Created a set of amazing plugins that get data from your ILS and displays it in a fully functional search and display on a WordPress site. Videos on flickr showing how it all works! http://about.scriblio.net Install the plugins