Wordpress-julkaisualusta. Mediatekniikan seminaari 18.10.2011 Harri Viitala

Wordpress-julkaisualusta Mediatekniikan seminaari 18.10.2011 Harri Viitala

2 / 27 Sisältö 1 Yleistä 2 Asennus ja konfigurointi 3 Työkalut 4 Teema 5 Rakenne 6 Koukut, toiminnot ja suodattimet 7 Lisäosat 8 Merkittäviä installaatioita

3 / 27 Kuva 1.avoimen lähdekoodin CMS:t 1 YLEISTÄ - open source CMS - PHP 22.3.2011 - XHTML 1.0-standardi - suosituin - kattavasti dokumentoitu (http://codex.wordpress.org/) - laaja kehittäjäyhteisö - kasvava = laaja tukiverkosto 24/7 PÄIVITYS! (9.10.2011) 14.7% top miljoonasta käyttää Wordpressiä Elokuussa 2011 22% kaikista verkkosivuista on tehty Wordpressillä

4 / 27 1 Yleistä + hakukoneystävällinen + verraten loiva oppimiskäyrä + helppo asennus - blogimaisuus - paljon turhaa sälää esim. headerissä - voi olla raskas

5 / 27 1 Yleistä Tiistaina 18.10.2011-62,771,720 WP-sivustoa maailmassa (wordpress.org hostaa puolet) - 17000 lisäosaa (225miljoonaa latausta) - vuosi sitten 12000+? - 1450 ilmaista teemaa - maksulliset teemat - räätälöidyt teemat

USA TODAY talks blogging with Matt Mullenweg, CEO (28.01.2009) http://www.youtube.com/watch?v=cgokko8tpeq

7 / 27 2 Asennus ja konfigurointi wordpress.com Helppo ja ilmainen wordpress.com isännöi sivustoa omilla servereillä +Ei tietokannan varmistustarvetta +Ei päivityksiä Rajoituksia -Ei php-räätälöintejä -Ei Css-räätälöintiä -Ei javascriptejä -Ei lisäosia

8 / 27 2 Asennus ja konfigurointi http://harriviitala.wordpress.com/ wordpress.com - 3 miljoonaa postausta/päivä - 3 miljoonaa kommenttia/päivä - 4 miljoonaa uploadia/päivä

9 / 27 2 Asennus ja konfigurointi - http://fi.wordpress.org/ - 5-minuutin asennus - versio 3.2.1. - palvelinvaatimus Apache tai Nginx - PHP 5.2.4 > - MySQL 5.0 >

10 / 27 2 Asennus ja konfigurointi - FTP - Luo tietokanta tietokantax (phpmyadmin tai cpanel X) wp-config-sample.php // ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('db_name', 'tietokantax'); /** MySQL database username */ define('db_user', 'nimi tähän'); /** MySQL database password */ define('db_password', 'salasana tähän'); /** MySQL hostname */ define('db_host', 'mysql.metropolia.fi'); /** Database Charset to use in creating database tables. */ define('db_charset', 'utf8'); /** The Database Collate type. Don't change this if in doubt. */ define('db_collate', '');

11 / 27 2 Asennus ja konfigurointi - localhost (wp-config-sample.php MAMP-htdocs->installaatio) - Luo tietokanta tietokantay (phpmyadmin tai cpanel X) wp-config-sample.php // ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('db_name', 'tietokantay'); /** MySQL database username */ define('db_user', 'nimi tähän'); /** MySQL database password */ define('db_password', 'salasana tähän'); /** MySQL hostname */ define('db_host', 'localhost:8889'); /** Database Charset to use in creating database tables. */ define('db_charset', 'utf8'); /** The Database Collate type. Don't change this if in doubt. */ define('db_collate', '');

12 / 27 - rename wp-config-sample.php wp-config.php

13 / 27 2 Asennus ja konfigurointi - asennus viimeistellään selaimesta - http://users.metropolia.fi/~harrivi/wp/

14 / 27 3 Työkaluja - XAMPP, MAMP, LAMP (apache,mysql,php) - Firebug (html-css) - Wordpress Codex / Google - blogit/foorumit/asiantuntijasivustot - web development frameworks YUI (JavaScript & CSS) Script.aculo.us (JavaScript) Mootools (JavaScript) Jquery (JavaScript)

15 / 27 3 Työkaluja - phpmyadmin (tietokannan varmuuskopiot) - PageSpeed (suorituskyky ja feedback)

16 / 27

17 / 27 4 Teema - pääteema pohjaksi (...wp-content/themes/pääteema) - Frameworks Atahualpa The Buffet Framework Carrington Hybrid Sandbox Thematic WP Framework PressWork - valitaan käyttötarkoitukseen soveltuva - HTML5-teemoja löytyy jo - seuraavaksi ryhdytään luomaan lapsiteemaa (child theme)

18 / 27

19 / 27 4 Teema - Thematic Framework The ultimate in SEO-ready themes, Thematic is a highly extensible, WordPress Theme Framework featuring 13 widget-ready areas, drop-down menus, grid-based layout samples, plugin integration, shortcodes for your footer & a whole lot more. Perfect for any blog and the starting point for theme development. - erilaiset 2-3-palstajaot - hakukoneoptimoitu - tabula rasa - modulaarinen CSS (@import url("freestyle.css");) {-useat http-pyynnöt hidastavat latautumista} - lapsiteema (...wp-content/themes/lapsiteema) - style.css (...wp-content/themes/lapsiteema/style.css) - functions.php (...wp-content/themes/lapsiteema/functions.php)

20 / 27 5 RAKENNE Perusrakenne <DIV> :it - etusivu - header - kategoriat - sidebar(s) - luuppi (the loop) - content <?php get_header(); if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; endif; get_sidebar(); get_footer();?> - sivut (static) - footer - kommentointi - muut

21 / 27

22 / 27 6 Toimintakoukut ja suodatinkoukut - functions.php // poista päänavigaatio function poista_navi() { remove_action('thematic_header','thematic_access',9);} add_action('init','poista_navi'); // poista sivupalkit etusivulta function remove_sidebar() { if (is_front_page()) { return FALSE; } else { return TRUE; } } add_filter('thematic_sidebar', 'remove_sidebar');

function tweets_by_hashtag_9867($atts, $content = null){ extract(shortcode_atts(array( "hashtag" => 'default_tag', 23 / 27 "number" => 5, ), $atts)); $api_url = 'http://search.twitter.com/search.json'; $raw_response = wp_remote_get("$api_url?q=%23$hashtag&rpp=$number"); //clean head is_wp_error($raw_response) ) { remove_action( 'wp_head', 'feed_links_extra',if (3$output ); //=Display the links to the ext... "<p>failed to update from Twitter!</p>\n"; $output.= "<!--{$raw_response->errors['http_request_failed'][0]}-->\n"; remove_action( 'wp_head', 'feed_links', 2 ); // Display the links to the general feed... $output.= get_option('twitter_hash_tag_cache'); } else {the link to the Really Simple Disc... remove_action( 'wp_head', 'rsd_link' ); // Display { remove_action( 'wp_head', 'wlwmanifest_link' );if ($response //function_exists('json_decode') Display the link )to the Window... = get_object_vars(json_decode($raw_response['body'])); for ( $i=0; $i < count($response['results']); $i++ ) { remove_action( 'wp_head', 'index_rel_link' ); // index link $response['results'][$i] = get_object_vars($response['results'][$i]); } remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 ); // prev link } else {. WPINC. '/js/tinymce/plugins/spellchecker/classes/utils/json remove_action( 'wp_head', 'start_post_rel_link', include(abspath 10, 0 ); // start link $json = new Moxiecode_JSON(); remove_action( 'wp_head', 'adjacent_posts_rel_link', 0 ); // Display relation... $response10, = @$json->decode($raw_response['body']); } remove_action( 'wp_head', 'wp_generator' ); // Display the XHTML generator th... $output = "<div class='twitter-hash-tag'>\n"; remove_action('wp_head', 'rel_canonical'); foreach ( $response['results'] as $result ) { $text = $result['text']; $user = $result['from_user']; $image = $result['profile_image_url']; $user_url = "http://twitter.com/$user"; $source_url = "$user_url/status/{$result['id']}"; $text = preg_replace(' (https?://[^\ ]+) ', '<a href="$1">$1</a>', $text); $text = preg_replace(' @(\w+) ', '<a href="http://twitter.com/$1">@$1</a>', $text); $text = preg_replace(' #(\w+) ', '<a href="http://search.twitter.com/search?q=%23 $text); $output.= "<div>"; if ( $images ) $output.= "<a href='$user_url'><img src='$image' alt='$user' /></a>"; $output.= "<a href='$user_url'>$user</a>: $text <a href='$source_url'>»< } $output.= "<div class='view-all'><a href='http://search.twitter.com/search?q=%23$h ('View All'). "</a></div>\n"; $output.= "</div>\n"; } Tässä vaiheessa koodi alkaa kiinnostamaan return $output; } add_shortcode("hashtag_tweets", "tweets_by_hashtag_9867"); add_filter( 'the_excerpt', 'shortcode_unautop'); add_filter( 'the_excerpt', 'do_shortcode'); function my_multi_col_v2($content){ // run through a couple of essential tasks to prepare the content

24 / 27 7 LISÄOSAT - +16,612 lisäosaa..(11.10.2011) - FTP wp-content/plugins - hallintapaneeli asetukset - voivat hidastaa (http-pyynnöt) tai konfliktoida muiden lisäosien kanssa - Sosiaalinen media / FacebookConnect/-Like/-Share +++ - Twittersyötöt - SEO - statistiikat - Lomakkeet l. Forms - WP super cache Suorituskykyä parantamaan http://wordpress.org/extend/plugins/wp-super-cache/ Staattiset sivut Välimuisti Gzip Expires headers

25 / 27 7 LISÄOSAT - WP-polls - AJAX-shoutbox - WP e-commerce - anti-roskaposti (mm.akismet) - TinyMCE (rich text editor) - e-mail user - kuvagalleriat - audiosoittimet - videosoittimet + paljon muuta

26 / 27 8 MERKITTÄVIÄ INSTALLAATIOITA - THE NEW YORK TIMES - SONY - UPS - REUTERS - CNN - E-BAY - GM - muusikoita/artisteja