IEEE Web Hosting (EWH)

Transcription

1 IEEE Web Hosting (EWH) Khanh Luu Information Management Analyst MGA

2 Agenda Introduction to IEEE web hosting services ( EWH, WordPress and WebInABox). Quick tutorial on updating EWH websites (HTML) Quick tutorial on how to use vtools WebInABox Tutorial on WordPress Hands-on session Tutorial on new IEEE R2 website (WordPress)

3 HTML Hosting Use a visual HTML editor or text editor to create/edit webpages Use the IEEE HTML templates available at ml#sect7 Use an FTP client, such as Filezilla and WinSCP to transfer files to and from ewh.ieee.org Pros & cons

4 vtools WebInAbox Use the wizard to create a simple website with automatic updates. Pros and cons

5 WordPress Table of Contents What is WordPress? Logging in Themes Admin Bar Users Posts Pages Settings (Post Page) Media Library Menus Plugins Widgets

6 What is WordPress? WordPress is a Content Management System(CMS) that powers over 19% of all websites in the world. It enables users to easily publish their content on the web without any coding or expert knowledge. WordPress comes with many robust tools and features that can be extended by thousands of community-driven plugins.

7 Logging in Your website can be accessed through a link we provide via . Adding /wp-admin to the end of the URL will bring you to your website s backend where all changes can be made. Click on the Login link Enter your username and password and click Log In.

8 Locating the Themes Page You can mouseover or click on Dashboard menu items to view their sub-menus Click on themes to access themes that IEEE staff have installed and continually maintain

9 Selecting a Theme The theme displayed here is the theme your site is currently running You can select a theme that corresponds with your type of organizational unit. You can preview how a theme will look on your site before activating it Click to activate the theme

10 Using the top Admin Bar The administrator bar can be used to quickly navigate and access areas where you can add and edit content. Click visit Site to view your site. You can return to the Dashboard from the dropdown. In this case the site name is Section Template 2.

11 Users Change the roll of the selected user You can select a user by checking the box next to their username User s role

12 Adding a user Existing users must have a role on another IEEE hosted WordPress site. Generally, the URL begins with sites.ieee.org. If you have your own domain we can configure their sites to support it. Choose a role for the new user. See the list above for the capabilities of each role. See Role Summary above. When finished, click Add New User

13 Posts Hovering over the Page menu item on the left side of the Dashboard will bring up the submenu for Pages All Posts will bring you to a Page where you can manage all of the Pages and their visibility status (shown below)

14 Posts (continued) Editing the visibility status can change your content to being either public, private or password protected. Make sure to click update when you re done! The visual tab is how content will look in the Page. The text tab accepts HTML code for formatting. Javascript is not supported. Categories can be used to sort and organize your Pages.

15 Post Example In this example, an image was imported using the WordPress Media Library.

16 What is a Page? Pages are static areas that are used to display content that changes infrequently. Pages can include plugins that will dynamically update content for you. Each menu item here is a Page. Pages do not have to be listed here but by default they are. You can link to a Page from a unique URL using the Menu Manager. Sub-Pages are shown here. Notice the same title (About Us) which is the parent Page.

17 Pages Click Add New to create a new Page Clicking on the Page title will bring up the edit Page where changes can be made. Quick Edit can be used to quickly change Page settings Pages with dashes ( - ) in front of their title are child Pages.

18 Creating a Page Notice the URL hierarchy. By clicking Edit you can change if the Page is enabled and who can see it. Click update when finished Choose a parent for the current Page. This Page is meant for a top level navigation item so (no parent) is selected

19 Creating a child Page (subpage) Parent Page Reflects Page hierarchy. This particular navigation is called the breadcrumb. Page you are currently on. Notice how the part of the URL containing /about-us/section-history reflects the parent/child relationship. You can select a Page to be the parent in the right drop-down box.

20 Settings (Post Page) Choose if you want your front page to directly show Posts or otherwise show a selected page. Choose where you would like your Post Page to be if your front Page is a static Page. This is best left off (--Select--) if you are using the Posts-in-Page plugin. Choose a maximum amount of Posts that can be displayed. This also applies for the Posts-in- Page plugin

21 Media Library Most images that you want to place on your site should be uploaded through WordPress media tool in order to avoid dependencies on outside sources. Videos can be stored in YouTube or myieee to save space. Click here to upload media Places that you have put the media will be shown here (usually on a Post or a Page).

22 Adding to your Media Library You can directly drag and drop files from other places on your computer into this window as well as using the file explorer by clicking Select Files. You can also copy and paste an image or video s source URL directly into the File name field to upload it without ever having to place the file on your computer.

23 Inserting Media on a Page Opens up the Media Manager (explained next slide) Image hyperlink setting

24 Inserting Media Insert content directly from a URL. Alt text will show if the image fails to load. It is good practice to supply Alt Text for all images on your site. Image hyperlink and dimension settings may be changed here.

25 Menus Menus consist of links to Pages in your site and links to external sources. Menus can be placed in both the left and right sidebar as well as the top navigation. For the top navigation, if there is no custom menu, Page ordering (set during Page creation) will decide what Pages are on the menu.

26 Setting up the menu Custom Links, Pages, and Events can all be added to a custom menu. Click Add to Menu to add the selected items to the menu. After you pick a name for your menu (this won t be shown on the site) click Create Menu"

27 Setting up the menu cont. Once placed in the menu, items can be drag & dropped in any order or placed underneath representing a hierarchy. Click save below when you are finished Be certain to click Save Menu to save your changes

28 Replacing the top-nav menu By default WordPress uses Pages for top navigation items. This can be overwritten by setting your custom menu as the primary navigation.

29 Placing a menu in the sidebar The Promos sidebar can be used to display promotions and/or your logo. Displayed menu name Drag this Widget into either the left or right sidebar Select the menu you want to display in the custom menu Save when done!

30 Custom menu result

31 Plugins We have selected plugins that are safe and compatible with your site. Some plugins are network activated for all IEEE WordPress sites and others are pre-configured for the WordPress Section Template. To request a new plugin, ewh-webmaster@ieee.org with the name and justification.

32 Plugins (continued) Inactive plugins have all been approved by IEEE staff and can be added by clicking Activate under the plugin name Active plugins are enabled on your site. Network activated plugins (plugins that are enabled for all IEEE WP sites) will not be shown here. Clicking Deactivate will make the plugin inactive. The plugin site is a hub where you can find information and support for a plugin.

33 Widgets Widgets add content and features to your sidebars. Some example applications include RSS feeds, text, calendars, and advertisements. Sidebars are visible by default on all Pages of your site. Some Widgets come WordPress whereas others are added through plugins. Custom Menu Widget Links Widget Upcoming Events (All-in- One Event Calendar) Widget Archives Widget

34 Widgets (continued) Drag and drop Widgets in the order you want them to be displayed (top to bottom) Widgets have a drop down menu to edit the way they are displayed.

35 Thank You! Thank you for viewing this tutorial. If you require additional assistance, IEEE Information Technology at