WordPress Guide. v WorldTicket WordPress manual, 16 MAY / 23

Transcription

1 WordPress Guide v. 1.7 WorldTicket WordPress manual, 16 MAY / 23

2 Table of Contents 1 Introduction Document Information Functional Overview of Booking Flow Selecting your Web-solution Installing using WordPress option A Prerequisites Steps to get you up and running WordPress Theme installation WordPress Plugin installation Setting up WordPress Customize the booking page plugin Styling the site to your airlines look and feel Additional Information on Option B Installing Without WordPress Technical Overview of Booking Components Dependencies of JavaScript Logic Dependencies of W1 CSS Setting up the page... 15

3 4.4.1 Front-page, containing QuickBook Booking-page Bookinglist-page General Information Explanation of the Buttons in the Components Configuration Solving Styling Issues Google Analytics Search Engin Optimasation 'SEO Title & Description content is king Keywords HTML tags part Links WorldTicket WordPress manual, 16 MAY / Useful WordPress Plugins Front end code - javascript Appendix 1 - Troubleshooting WorldTicket WordPress manual, 16 MAY / 24

4 1 Introduction This guide will assist you in.. 1.Selecting the type of booking flow integration you need, and enabling you to understand the three options, and their advantages and complexities a.wordpress based on a child theme of WorldTicket template (Theme) (Recommended) b.wordpress using your own template (Theme) c.any other CMS or Website solution 2.Installing the Booking Flow, depending on your choice for integration If you have questions, comments or suggestions for this guide or our WordPress plugin, please contact Customer Support. Examples of customer booking flows responsive web design normal web design normal web design highly customized styling normal web design 1.1 Document Information The current list of changes is below Date Version Changes Document Created from internal version Added information about the use of Child Themes Change layout, added live customers Updated with information about the 3 options for integration Structure and clarification Structure and clarification Structure and clarification Functional Overview of Booking Flow The booking flow contains a number of pages with components called widgets. WorldTicket WordPress manual, 16 MAY / 24

5 On the landing page, there is the QuickBook widget, that links to the booking page. Using the QuickBook widget will lead to the second screen on the booking page called Flights. Booking page, contains the booking wizard widget includes all the screens needed to purchase tickets. Additionally it is possible to have sidebar widgets such as, your choice, booking rules, price calculator, SSR calculator and login link. Additionally there is a low fare calendar, and a self service page with the booking list widget 1.3 Selecting your Web-solution In the previous document, choosing_implementation, the three possible solutions was described including the consequences of the choice made. The possible solutions are: A) Use WordPress and follow our guide B) Use WordPress, but alter the themes and structure C) Use another CMS system If you are in any doubt, read the document again and contact your WorldTicket Professional Service Consultant 2 Installing using WordPress option A This walkthrough corresponds with option A and for the most part option B. Through this guide you should be able to install the plugin on a WordPress page using the: WorldTicket WordPress manual, 16 MAY / 24

6 WorldTicket theme, WorldTicket plugin, and qtranslate plugin 2.1 Prerequisites Before we can begin installing our Plug-In, we need to have the following in place. 1) You need to have access to a Web Server with the technical components for WordPress WordPress requires PHP and MySQL. If you do not have access to WebServer you need a Web Server for local use, for e.g. development or demo purposes, then XAMPP from Apache is a good and easy choice - 2) You need a WordPress installation, preferably in the latest version If you do not have a WordPress, the latest version of Wordpress can be downloaded here: Easy Install guide on XAMPP and WordPress can be found here Full and Official WordPress install guide can be found here Latest version of WordPress that has been tested by WorldTicket is ) You need to have the WordPress Plugin qtransate-x installed and active You can find this in your WordPress administration page /wp-admin/ and search for qtranslate-x Select Install Now WordPress will now download and install the plugin When done select Activate Plugin 4) You only have the relevant Languages in Settings > Languages enabled 5) You also need basic knowledge on WordPress Now you should be ready to install our WorldTicket plugin for WordPress WorldTicket WordPress manual, 16 MAY / 24

7 2.2 Steps to get you up and running The steps include: 1) Installing the Themes 2) Installing the Plugins 3) Setup WorldTicket Plugin for WordPress 4) Doing the CAS Setup if needed 5) Configure WordPress further 2.3 WordPress Theme installation Download the WorldTicket Theme file Go to your WordPress admin page, and navigate to Appearance > Themes > Install Themes When WordPress is done, you must activate the theme, by selecting Activate NOTE: that if you are trying to INSTALL with option B, you should not click Activate, however you still need to download it to access the CSS file necessary for the plugin to function properly. WorldTicket WordPress manual, 16 MAY / 24

8 2.4 WordPress Plugin installation Download the WorldTicket Plugin file Go to your WordPress admin page, and navigate to Plugins > Add New Select Upload and Choose File and select the location where you saved the worldticket_plugin.zip When WordPress is installed the plugin successfully, select Activate Plugin The WordPress plugin is activated if you see the message Plugin Activated. In the menu on the left go to settings on Settings > WorldTicket WorldTicket WordPress manual, 16 MAY / 24

9 JavaScript resources relative path the path where application has been installed (/sms_name) Note the name is wrong. It should not be called relative since it could be absolute, if it is not placed on a worldticket.net server (domain name myairline.worldticket.net ). if in doubt contact your WorldTicket Consultant. CAS properties (mandatory if CAS used) - /, /booking, /settings.php Single sign out server names to trust (mandatory if CAS used) - sms.worldticket.net or Press Apply, and the Components configuration should be expanded to contain a form as below. Note sometime this can be a bit slow to appear if its not working try pressing apply again. WorldTicket WordPress manual, 16 MAY / 24

10 If this does not happen, try setting the JavaScript resources relative path to, and press Apply The above will show that the plugin is working as expected, but you need to set the relative path to the right path of your web server in order to get everything working. The likely scenario is that the path should be /sms-name where name is your airline name, but this is installation dependent. If you have your solution hosted at your own site, set this path to be the URL of the location of SMS, minus the /sms-airline path. I.e. becomes E.g. Set the following parameters in the form below. 1) Check or set parameter Quickbook > Show airline calendars 2) add value booking/ in to the field URL to booking wizard page (see screenshot) WorldTicket WordPress manual, 16 MAY / 24

11 3) If we don't use CAS we'll have to setup some other parameters: Login links widget > Login form URL and set name of page where login form are placed. Usually it is bookinglist/ Login links widget > Logout URL set the same value bookinglist/ Remember to select the Apply configuration button. The Plugin is now installed and the initial configuration is done. For further info, see the detailed manual information on Configuring the WordPress WorldTicket PlugIn 2.5 Setting up WordPress Go to section Settings > Permalinks chose Post name and save settings Add pages Booking and Booking List. Follow to the section Pages > Add New The first page we called Booking Enable HTML editing mode and in the field for input text paste in the text below WorldTicket WordPress manual, 16 MAY / 24

12 <iframe id=" gwt_historyframe" style="position: absolute; width: 0pt; height: 0pt; border: 0pt none;" src="javascript:''" width="320" height="240"></iframe> <div id="booking_wizard_widget"><span style="display: none;">booking</span></div> Select Publish Add the second page with name Booking List Below the Title please change Permalink from booking-list to bookinglist After this change paste in the text below <iframe id=" gwt_historyframe" style="position: absolute; width: 0pt; height: 0pt; border: 0pt none;" src="javascript:''" width="320" height="240"></iframe> <div id="booking_list_wizard_widget"><span style="display: none;">booking list</span></div> Publish the page. WordPress installation has been completed! The booking flow should now be functional. 2.6 Customize the booking page plugin In setting -> WorldTicket you have the option to change to setting related to how the WorldTicket module is displayed on your site. WorldTicket WordPress manual, 16 MAY / 24

13 Here you can see where to find the settings for the different pages within the booking page. For instance the first page select where you choose the departure and destination airports including the dates, this page can be customized. Through the first booking page tap. Besides the content pages related to the booking page. You can change the some of the sidebar widgets, price calculator widget, SSR calculator widget, your choice The module on the front page is called Quickbook and can also be altered from here. 2.7 Styling the site to your airlines look and feel The look and feel in WordPress is called the Appearance, and to create your own look and feel of the site, it is suggested to create a Child Theme. Previously the normal approach was to Customize the existing WorldTicket theme, however doing this could potentially overwrite your changes, and therefore the right approach is to create a Child Theme. To create a child theme, you should go to the Themes Folder in the WordPress The example folder is C:\xampp\htdocs\singlesite\wp-content\themes\ Ask your system administrator if in doubt. Create a new folder called worldticket-airline-name where Airline Name must be replace with your name. Go into the folder and create a text file called styles.css and insert the following text into the file /* Theme Name: >AirlineName< Child Theme Description: Child theme for the WorldTicket Base theme Author: >Your name and company name< WorldTicket WordPress manual, 16 MAY / 24

14 Template: worldticket_theme url("../worldticket_theme/style.css"); a { outline: none; color: #red; textdecoration:none; } Now you have a new css document where you can add all of your own styling, the worldticket css file is included in the top, there for all changes you add to this document, will happen afterwards and there for you can overwrite if needed. 3 Additional Information on Option B For option B you need to follow the guide for option A, however you do not activate the WorldTicket theme. The theme contains all the styling, therefore you will need to manually include the styles. 4 Installing Without WordPress This chapter will help you install the module on a webpage not running out of WordPress. 4.1 Technical Overview of Booking Components This chapter is a technical description of how to implement our booking flow. Our booking component is written on Google Web Toolkit, and has the following features 1) Quickbook form 2) Booking flow 3) Payment status page as a part of the booking flow 4) Booking List (LogIN) - 5) Low Fare Calendar as the first page of the booking flow WorldTicket WordPress manual, 16 MAY / 24

15 4.2 Dependencies of JavaScript Logic The logics that activates the DIV tags, is placed in our standard solution, hosted on our standard hosting site. Add the script to the header of all the html files, ask your professional WorldTicket Consultant for your specific script tag if in doubt. <script src=" he.js"></script> Note: yourairline should be replaced by your server name. Please ask your Consultant for that. 4.3 Dependencies of W1 CSS You need to include the WorldTicket style sheet in your own you do this by adding, the following in your css url("../worldticket_theme/style.css"); you can download the css file from Default.css - e.g Setting up the page The following section is delivered without warranties, since the recommended approach is Method A, and this is only for CSS, JS and HTML Experts, with a desire to solve the issues that show up. All pages must have the CSS, JS and HTML Tags listed below: <meta http-equiv="x-ua-compatible" content="ie=10,chrome=1"> <meta name='gwt:property' content='locale=en' /> <link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="default.css" /> (or url("../worldticket_theme/style.css"); to the default.css) <script type="text/javascript"> var SMS = {contextpath: '/yourairline'}; </script>) WorldTicket WordPress manual, 16 MAY / 24

16 Note: yourairline should be replaced by your server name. Please contact your Consultant. If you use more language versions of your website, gwt:property meta tag should be used accordingly. Examples of languages we support: en - English fr - French de - German da - Danish es - Spanish pl - Polish ua - Ukrainian ru - Russian se Swedish Note: If you want to use other language, please contact your Consultant Front-page, containing QuickBook This is the quickbook widget for the front page of your site div class="tab-menu"> <div class="tab-menu-tabs"> <div class="tab-menu-tab tab-menu-tab-selected tab- <span>book</span> menu-tab-first"> </div> <div class="tab-menu-tab"> <a href="./bookinglist?loginplace:bookinglistplace">rebook</a> </div> <div class="tab-menu-tab tab-menu-tab-last"> <a href="booking">lowfare calendar</a> </div> </div> <div id="quickbook_widget"></div> </div> WorldTicket WordPress manual, 16 MAY / 24

17 4.4.2 Booking-page This is the html for the second html file, containing the book flow <iframe id=" gwt_historyframe" style="position: absolute; width: 0pt; height: 0pt; border: 0pt none;" src="javascript:''" width="320" height="240"></iframe> <div id="booking_wizard_widget"><span style="display: none;">booking</span></div> Bookinglist-page This is the html for the rebook and booking-list page. <iframe id=" gwt_historyframe" style="position: absolute; width: 0pt; height: 0pt; border: 0pt none;" src="javascript:''" width="320" height="240"></iframe> <div id="booking_list_wizard_widget"><span style="display: none;">booking list</span></div> In order for the customer to log out, we need to enable the login widget, this widget is normal displayed in the top menu of all pages. <div id="login_links_widget"></div> WorldTicket WordPress manual, 16 MAY / 24

18 5 General Information 5.1 Explanation of the Buttons in the Components Configuration Configuration of the WorldTicket module, can be done in the settings menu, if you are using WordPress you can find this menu by going to settings -> worldticet. If you are not, previously you where not able to see the following menu how ever with the introduction of SMS 4.16 you can find this menu by going to **** jeg skal bruge et eller andet eksempel her This menu allows you to alter the appearance of the WorldTicket module. If you are using WordPress, you need to click the apply configuration this will store the settings in the WordPress database. If you are not using WordPress, you need to click the Save to DB this stores the information in the SMS database. If a WordPress user clicks save to db it will have no effect on the WordPress site how ever if any other sites are running with the same SMS you could affect that site. 5.2 Solving Styling Issues Cascading Style Sheets are layers on top of each other, but how does the browser knows which to take? It does it in the following sequence 1) Style attribute on element e.g. <li style= color: red; > 2) Style with ID selector e.g. #footer{color: red;} 3) Style with Class, Pseudo-class or attribute a. For Class e.g. li.favorite{color: silver;} b. For Pseudo-Class e.g li.active 4) Style with elements e.g. a{color: red;} And if nothing else helps, the important keyword can help you. E.g. a#footer {color:blue!important;} WorldTicket WordPress manual, 16 MAY / 24

19 For further information on CSS tags and specificity read this - and and For further information on Child Themes please read the Official WordPress article on Child Themes, if you prefer to see a Video, see this blog from a 3 rd party web developer How to Create a WordPress Child Theme 5.3 Google Analytics Google analytics can be used to track trafick on your site normal this is done by adding a few lines of java script to all html(php & jsp e.g.) this way the page can notify google analytics that the page have been loaded. If wordpress is used the we only need this in one place footer.php copy this code into the document and change the two parameters analytics id and domain analytics id is found on your google analytics page and look like UA , the domain name is the webpage name yourairline.com <script> var _gaq = _gaq []; _gaq.push(['_setaccount', 'ANALYTICS ID']); _gaq.push(['_setdomainname', 'DOMAIN NAME']); _gaq.push(['_trackpageview', location.pathname + location.search + location.hash.substring(0, location.hash.indexof(':'))]); (function () { var ga = document.createelement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = (' == document.location.protocol? ' : ' + '.google-analytics.com/ga.js'; var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(ga, s); })(); window.onhashchange = function() { _gaq.push(['_trackpageview', location.pathname + location.search + location.hash.substring(0, location.hash.indexof(':'))]); }; </script> 5.4 Search Engin Optimasation 'SEO Search Engine Optimization(SEO) is a concept that helps your site achieve higher ranking on search engines like google. A higher ranking means costumers searching will be more likely to have your site displayed in to of the search results if you are using WordPress, use the plugin 'all in one SEO pack' it will make all this easy WorldTicket WordPress manual, 16 MAY / 24

20 5.4.1 Title & Description <Title> The tittle tag is of cause the tittle of your page, how ever it should not only be your company name, include a something like a slogan Your airline, slogan a maximum of 70 characters, including a business name, slogan or brand. <meta name = description content = text /> The description tag is the tag that describes what your page is about, what can you offer the viewer? A guide should be to hit somewhere between 2-5 lines of text, how ever the most important should be in the beginning, as only the first, 180 charcters will be shown by most search engins. google search results appear like : This is an example how the title and the description is used on google, Balboa Park is the titel and the two lines below are the description. It is worth spending some time on this apearnce of your site, as the user will determin very quickly if your result seems interesting, if the user decides that thats not the case, none of the following will help content is king Search engines have robots that crawl(look at) your site, these robots only understand text, they cant see images or text inside images, in order for search engine to better understand your site you need to have 'Human text'(sentences, not single words). WorldTicket WordPress manual, 16 MAY / 24

21 one examples could be: if i had a t-shirt shop, i would maybe have a picture of the tshirt, and a description text saying 100% cotten available in S / M / L / XL This is a very poor job for the search engine as it cannot see the picture, if i how ever changed the text to. High quality tshirt with batman print from the movie batman returns. Made in UK, in 100% cotten. Available in all size Now the search have a much better understanding of the product Keywords Another thing is keywords, these are the words that people search for, this could be a rout or airline, airplane vacation, and so on. In order to make the search engines understand that your site is all about this we need to mention these words several times on our page. In fact there is a concept of keyword density which is keywords/total words = keyword density but to keep it simple just remember that the words the client would use to search needs to be mentioned on your site, and more times = better HTML tags part 2 The first html part(title & Description) described the two most important things to do with HTML tags, here we will describe a few more things that can help you achieve the best result possible. <h1> Header one, one page, should only have one of these tags. What happens is that the search engine will look at this and say this is the most important part of the page <h2> <h3...> The rest of the header tags you can use as much as needed, the search engine will still look at them and rank them in importance relating the the number. Header tags can be an important tool to illustrate what is important on a page. <img src= img/location alt= some text > In the above statement the alt tag is the interesting thing, the tag is originally implemented so that the browser can display some text if the image cannot be fetched. However in modern web this is rearly the case, but this text can be used to describe the image. <img src= smily.gif alt= Smily face > WorldTicket WordPress manual, 16 MAY / 24

22 <img src= spring_campain.jpeg alt= Spring Campain Fly Copenhagen Madrid on a discount > We mentioned earlier that search engines cannot view images, however this can be a tool to help make up for that. If you want to further improve the on images, you can make sure that the file name has a descriptive name e.g. spring_campain.jpeg instead of dd.jpeg, the size of the images, load time matters to SEO there for images should be as small as passable (bear in mind that the that this should not go to such an extend that the actual quality of the image become so poor that the user will notices) Links Another trend of search engines are that they want to display content that other people find useful (someone else think that its useful, it could be to you as well). What this means for you is get your name around. Get other sites to link to your site, if you can get another website to link to your website, we SE will notice it when it crawls the site, it perceives this as the current site thinks that your site is important. Therefore every time some one link to your website your site becomes more important. Social networks, websites are not the only way to get links, the social networks are getting more important to the search engines as they represent real people. There for getting people to share your name, and link Google+ it shouldn't come as big surprise that google search engine is interacting very nice with googles own social network google+. In fact people forget that if they have a gmail account, they have a google+ account. If a friends on google plus +1 ( like ) your site, the site will suddenly have super high importance's(displayed in the very top) when his friends searches for for sites that matches the criteria. Other Social networks like, facebook, linkedin, twitter & instantgram can all be a useful way to spread your name, and make your brand more important to search engines Useful WordPress Plugins All in one SEO as mentioned in the previous chapter about search engine optimization, this plugin makes it easier for you to easily improve your visibility on search engines. Advanced Code Editor This plugin enable a code editor in the Wordpress admin page, it include line numbering, and validation, this can possibly save you hours of debugging. WorldTicket WordPress manual, 16 MAY / 24

23 5.5 Front end code - javascript For the more advanced user it, moving some elements in the gwt can be an option, however this has to be done in javascript with jquery. But first we have to realize how time is a factor on website using gwt. Normal a page loads, and the content is there from the beginning, in the case of gwt, the page loads, and then the gwt start working with filling out the div tags. There for any code that needs to interact with the gwt elements on the front end needs to wait for these elements to be ready for it. Luckely we have some ways of doing this. Add the following code to the javascript file, (or the bottom of the page) function onplacechanged() { } function ongwtready() { } these functions acts as handels for you to know when you can do things. ongwtready is called on the first page that loads, forinstance booking.html onplacechange is called when ever the page changes to a sub page, booking.html/#bookingsecondpageplace. Some code is only needed on some pages this can be done like this function onplacechanged() { if (window.location.href.indexof("bookingsecondpage") > 0) { secondbookingpage(); } } the method secondbookingpage will now be called when ever bookingsecondpage is part of the url. var second_book_count = 0; function secondbookingpage() { if (jquery('.flight-segment-item.flightsegment-info-header').length > 0) { jquery('.flight-segment-item.flight-segmentinfoheader').first().insertafter(jquery('.label.direction-label').first()); } else { if (second_book_count < 10) { second_book_count++; settimeout(secondbookingpage, 200); WorldTicket WordPress manual, 16 MAY / 24

24 }}} The above code, moves an element to a new place, but what first happens is that.length > 0 checks if the element allready exists, if length is 0 it means that either the element does not excist on the page or it is not loaded yet. There for we have an else loop, this else loop have a condition that makes sure this code will only be executed 10 times, the reason for this is, we don't want to have any code that keeps running forever. Inside the else loop we use the settimeout, this makes sure that we call the same method again in 200 milliseconds, and hopefully the element is now ready for use. 6 Appendix 1 - Troubleshooting 1) I get this error, what do I do? Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'qtrans_converturl' not found or invalid function name in C:\xampp\htdocs\singlesite\wp-includes\plugin.php on line 170 See the Prerequisites and install qtranslate, and you are ready to continue WorldTicket WordPress manual, 16 MAY / 24