Themes – uden options men med     masser af functions          Lisa Risager         lisarisager.dk            @risager    ...
#WordCampDK 12NOV2011
Hvad skal du bruge WP til?•   blog•   CMS•   webshop•   intranet•   lukket forum    m.m.
Du skal bruge et tema•   Find et WordPress tema•   Tilpas et WordPress tema•   Lav et Child Theme•   Lav dit eget tema
Find et WordPress tema
Find et WordPress tema
Du skal bruge et tema• Vælg et WordPress tema• Lyt til hvad Mikkel har at sige i  morgen eftermiddag!  /wp-admin/theme-ins...
Theme OptionsDu kan selv bestemme alt!Farver, sidebars, bredde, headerimage, alt...
Theme Options
Theme Options... undtagen lige præcis det du har brug forOg så kan det være laaaangsomt...Eks.:45 queries in 0.00264024734...
Costumizing WordPressHusk at alle dine tilretningerforsvinder, hvis du opdaterertemaet 
Lav et Child Theme• Tilpas farver, typografi, layout på  et færdigt tema• Brug Parent Theme som et  framework• Genbrug lay...
Fordele ved Child Themes• Parent Theme kan opdateres  uden at du mister alle dine  tilpasninger• Du behøver ikke at starte...
Child Themes• style.cssEvt.:• home.php• single.php• Andre filer efter behov
Costumizing WordPressCostumizing & tweaking kan værerigtig sjovt- men det afhænger af hvilket temadu tweaker!
Et WordPress temaSkal indeholde:   index.php   style.css
Et WordPress temaTwenty Eleven indeholder: 32 php-filer  4 css-filermindre kan gøre det!
Et WordPress tema• Temaet bestemmer hvordan dit  site ser ud• Temaet bestemmer også (evt.  sammen med plugins) hvordan dit...
functions.phpVirker ligesom et plugin - det erbare inkluderet i temaet• definere widgets• hente twitterstrøm• ændre excerp...
Den nemme løsning• Hvis du er ligeglad med  opdateringer:• Omdøb temaet via ftp• /wp-content/themes/tema• og i style.css
Den nemme løsning/*Theme Name: #strukVersion: .9Description: WordPress tema til   strikogkod.dkAuthor: Lisa RisagerAuthor ...
Genbrug er godt WordPress er rigtig god til genbrug: –   header.php –   sidebar.php –   footer.php
Gentagelser er kedelige• Tænk over hvor du placerer  tingene• Skal datovisningen være ens på  pages, posts og archives?• S...
Gentagelser er nødvendige• Skal datovisningen være  forskellige på pages, posts og  archives?• Så tilføj  <?php the_time(’...
Særlige hensyn• Get_header(’home’);  header-  home.php• Get_header(’single’);  header-  single.php
Rettidig omhu•   Planlæg•   Tegn skitser•   Strukturer indholdet•   Pages/posts?•   Custom post types?•   Kategorier?•   T...
Dit tema skal indeholdeindex.phpstyle.phpwp_head();wp_footer();evt. dynamic_sidebar();evt. get_template_part(’slug’, ’name...
header.php<!DOCTYPE html>-- alt det sædvanlige – -<?php wp_enqueue_script(jquery);?><?php wp_head(); ?>
footer.php<?php wp_footer(); ?>
The Loop• Er der nogen posts?• For hver af disse posts skal  følgende gøres• Hvis ikke der er nogen posts, så  gør ... i s...
Template Parts<?phpget_template_part(’slug’, ’name’);?>Det er ikke kun header, footer, sidebarvi kan genbrugehttp://codex....
Template HierarchyHar du brug for forskellige visningeraf forskellige kategorier, tags, posttypes?
Template Hierarchycategory-3.php category.php index.php
Template Hierarchy
Template Hierarchyhttp://codex.wordpress.org/Template_Hierarchyhttp://digwp.com/2010/09/wordpress-3-template-hierarchy/
Conditional tagsHvis du ikke gider at rode med altfor mange filer- så brug conditional tags
Conditional tags<?php $post = $wp_query->post;if (in_category(105)) {   include(TEMPLATEPATH./single-   105.php);} elseif ...
Conditional tags<?phpif ( is_user_logged_in() ) {       echo <a href=" .       $current_user->kunde . ">       Min side</a...
Custom Post Types•   alm. blogindlæg  post•   boganmeldelser  bog•   filmanmeldelser  film•   produkter  produkthttp:/...
Custom Post Typesadd_action( init, create_post_type );function create_post_type() {        register_post_type( ’bog,      ...
Page Template   - bog.php<? php/*TemplateName: Bøger*/?>
Page Template            - bog.php<?php if (have_posts()) : while (have_posts()) : the_post(); ?><?php the_title(); ?><?ph...
Page Template                 - bog.php<?php query_posts(cat=19&orderby=date); ?><?php while (have_posts()) : the_post(); ...
Page Template                   - bog.php<?php query_posts( p=409 ); ?><?php while (have_posts()) : the_post(); ?><?php  i...
Spar på plugins• Mange kan erstattes af simple  functions• Mange plugins er overkill• Plugins gør opgraderinger mere  besv...
Brug functions.php•   Breadcrumbs•   Widgets•   Custom login•   Page navigation•   Thumbnails•   Tagclouds
Gode råd• Brug ftp og en texteditor når du retter i filer  (fortryd, flere filer åbne ad gangen, syntax  highlighting)• Ev...
Når det så er sagt...Nogle anbefalinger:Theme CheckBroken Link CheckerWPDB ProfilingTheme TesterWPMLWP No Category BasePlu...
I tema eller i plugin?Det kommer an på...• Hvor længe skal temaet holde?• Hvad sker der når du skifter  tema?
Functions i theme eller som plugin   ?There’s a plugin for that:Plugin: Functions-temaXYZ
Hjælpemiddelcentralen• Firebug https://getfirebug.com• Web Developer Toolbar  http://chrispederick.com/work/web-developer/...
Hjælpemiddelcentralen• Wordpress Codex –Template tags –Conditional tags
Tag det helt roligt...• Temaet er det øverste lag• Du kan hverken ødelægge  databasen eller WordPress core-  filerne• Du k...
Uanset hvor varmt det erDO THE RIGHT THINGhttp://codex.wordpress.org/WordPress_Coding_Standards
functions.php // custom excerpt length function custom_excerpt_length($length) { return 20; } add_filter(excerpt_length, c...
functions.php // custom excerpt ellipses custom_excerpt_more($more) { return ... læs videre; } add_filter(excerpt_more, cu...
functions.php// add google analytics to footer function   add_google_analytics() { echo <script   src="http://www.google-a...
functions.php // Better user profiles  function update_contact_methods( $contactmethods ) { // Remove annoying and unwante...
functions.php //tag cloud custom add_filter(widget_tag_cloud_args,style_tags ); function style_tags($args) { $args = array...
functions.php// no more jumping for read more link functionno_more_jumping($post) {return <a href=".get_permalink($post->I...
functions.php // remove version info from head and feeds function complete_version_removal() {     return ; } add_filter(t...
functions.phpadd_theme_support(nav_menus);register_nav_menu(main, Main navigation  menu);
Themes – uden options men med     masser af functions          Lisa Risager         lisarisager.dk            @risager    ...
Upcoming SlideShare
Loading in...5
×

WordPress Themes

69,115

Published on

WordPress Themes - uden options, men med masser af functions

Published in: Technology, Business
1 Comment
1 Like
Statistics
Notes
  • A good description on how to create a functions plugin for your theme: http://wpcandy.com/teaches/how-to-create-a-functionality-plugin
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
69,115
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

WordPress Themes

  1. 1. Themes – uden options men med masser af functions Lisa Risager lisarisager.dk @risager slideshare.net/risager
  2. 2. #WordCampDK 12NOV2011
  3. 3. Hvad skal du bruge WP til?• blog• CMS• webshop• intranet• lukket forum m.m.
  4. 4. Du skal bruge et tema• Find et WordPress tema• Tilpas et WordPress tema• Lav et Child Theme• Lav dit eget tema
  5. 5. Find et WordPress tema
  6. 6. Find et WordPress tema
  7. 7. Du skal bruge et tema• Vælg et WordPress tema• Lyt til hvad Mikkel har at sige i morgen eftermiddag! /wp-admin/theme-install.php http://wordpress.org/extend/themes/ http://weblogtoolscollection.com/archives/ category/wordpress-templates-wordpress-skins- wordpress-themes/
  8. 8. Theme OptionsDu kan selv bestemme alt!Farver, sidebars, bredde, headerimage, alt...
  9. 9. Theme Options
  10. 10. Theme Options... undtagen lige præcis det du har brug forOg så kan det være laaaangsomt...Eks.:45 queries in 0.00264024734497 seconds89 queries in 0.131466150284 seconds
  11. 11. Costumizing WordPressHusk at alle dine tilretningerforsvinder, hvis du opdaterertemaet 
  12. 12. Lav et Child Theme• Tilpas farver, typografi, layout på et færdigt tema• Brug Parent Theme som et framework• Genbrug layout• Genbrug functions
  13. 13. Fordele ved Child Themes• Parent Theme kan opdateres uden at du mister alle dine tilpasninger• Du behøver ikke at starte forfra med at bygge et tema
  14. 14. Child Themes• style.cssEvt.:• home.php• single.php• Andre filer efter behov
  15. 15. Costumizing WordPressCostumizing & tweaking kan værerigtig sjovt- men det afhænger af hvilket temadu tweaker!
  16. 16. Et WordPress temaSkal indeholde: index.php style.css
  17. 17. Et WordPress temaTwenty Eleven indeholder: 32 php-filer 4 css-filermindre kan gøre det!
  18. 18. Et WordPress tema• Temaet bestemmer hvordan dit site ser ud• Temaet bestemmer også (evt. sammen med plugins) hvordan dit site fungerer
  19. 19. functions.phpVirker ligesom et plugin - det erbare inkluderet i temaet• definere widgets• hente twitterstrøm• ændre excerpt-længde• og meget andet
  20. 20. Den nemme løsning• Hvis du er ligeglad med opdateringer:• Omdøb temaet via ftp• /wp-content/themes/tema• og i style.css
  21. 21. Den nemme løsning/*Theme Name: #strukVersion: .9Description: WordPress tema til strikogkod.dkAuthor: Lisa RisagerAuthor URI: http://lisarisager.dk*/
  22. 22. Genbrug er godt WordPress er rigtig god til genbrug: – header.php – sidebar.php – footer.php
  23. 23. Gentagelser er kedelige• Tænk over hvor du placerer tingene• Skal datovisningen være ens på pages, posts og archives?• Så læg dem i loop.php
  24. 24. Gentagelser er nødvendige• Skal datovisningen være forskellige på pages, posts og archives?• Så tilføj <?php the_time(’) ?> i de enkelte php-filer
  25. 25. Særlige hensyn• Get_header(’home’);  header- home.php• Get_header(’single’);  header- single.php
  26. 26. Rettidig omhu• Planlæg• Tegn skitser• Strukturer indholdet• Pages/posts?• Custom post types?• Kategorier?• Tags?
  27. 27. Dit tema skal indeholdeindex.phpstyle.phpwp_head();wp_footer();evt. dynamic_sidebar();evt. get_template_part(’slug’, ’name’);The Loop
  28. 28. header.php<!DOCTYPE html>-- alt det sædvanlige – -<?php wp_enqueue_script(jquery);?><?php wp_head(); ?>
  29. 29. footer.php<?php wp_footer(); ?>
  30. 30. The Loop• Er der nogen posts?• For hver af disse posts skal følgende gøres• Hvis ikke der er nogen posts, så gør ... i stedet
  31. 31. Template Parts<?phpget_template_part(’slug’, ’name’);?>Det er ikke kun header, footer, sidebarvi kan genbrugehttp://codex.wordpress.org/Function_Reference/get_template_part
  32. 32. Template HierarchyHar du brug for forskellige visningeraf forskellige kategorier, tags, posttypes?
  33. 33. Template Hierarchycategory-3.php category.php index.php
  34. 34. Template Hierarchy
  35. 35. Template Hierarchyhttp://codex.wordpress.org/Template_Hierarchyhttp://digwp.com/2010/09/wordpress-3-template-hierarchy/
  36. 36. Conditional tagsHvis du ikke gider at rode med altfor mange filer- så brug conditional tags
  37. 37. Conditional tags<?php $post = $wp_query->post;if (in_category(105)) { include(TEMPLATEPATH./single- 105.php);} elseif (in_category(7)) { include(TEMPLATEPATH./singlep- 7.php);} else {} ?>
  38. 38. Conditional tags<?phpif ( is_user_logged_in() ) { echo <a href=" . $current_user->kunde . "> Min side</a>; } else { the_content();}?>
  39. 39. Custom Post Types• alm. blogindlæg  post• boganmeldelser  bog• filmanmeldelser  film• produkter  produkthttp://codex.wordpress.org/Post_Types
  40. 40. Custom Post Typesadd_action( init, create_post_type );function create_post_type() { register_post_type( ’bog, array( labels => array( name => __( ’Bøger ), ’ singular_name => __( ’Bog ) ), public => true, has_archive => true, ) );}
  41. 41. Page Template - bog.php<? php/*TemplateName: Bøger*/?>
  42. 42. Page Template - bog.php<?php if (have_posts()) : while (have_posts()) : the_post(); ?><?php the_title(); ?><?php the_content( ); ?><?php edit_post_link(redigér, [ , ]); ?><?php endwhile; endif; ?>
  43. 43. Page Template - bog.php<?php query_posts(cat=19&orderby=date); ?><?php while (have_posts()) : the_post(); ?><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a><?php the_excerpt(); ?><?php edit_post_link(redigér, [ , ]); <?php endwhile; ?>
  44. 44. Page Template - bog.php<?php query_posts( p=409 ); ?><?php while (have_posts()) : the_post(); ?><?php if ( has_post_thumbnail() ) { echo ‘<a href=" . get_permalink( $thumbnail- >ID ) . " title=" . esc_attr( $thumbnail->post_title ) . ">; echo get_the_post_thumbnail($thumbnail- >ID, thumbnail); echo </a></div>;
  45. 45. Spar på plugins• Mange kan erstattes af simple functions• Mange plugins er overkill• Plugins gør opgraderinger mere besværlige
  46. 46. Brug functions.php• Breadcrumbs• Widgets• Custom login• Page navigation• Thumbnails• Tagclouds
  47. 47. Gode råd• Brug ftp og en texteditor når du retter i filer (fortryd, flere filer åbne ad gangen, syntax highlighting)• Evt. en lokal installation XAMPP• Brug Child Themes eller lav dit eget tema• Brug Firebug og/eller Web Developer Toolbar• Glem ikke codex.wordpress.org
  48. 48. Når det så er sagt...Nogle anbefalinger:Theme CheckBroken Link CheckerWPDB ProfilingTheme TesterWPMLWP No Category BasePlum Code Box
  49. 49. I tema eller i plugin?Det kommer an på...• Hvor længe skal temaet holde?• Hvad sker der når du skifter tema?
  50. 50. Functions i theme eller som plugin ?There’s a plugin for that:Plugin: Functions-temaXYZ
  51. 51. Hjælpemiddelcentralen• Firebug https://getfirebug.com• Web Developer Toolbar http://chrispederick.com/work/web-developer/• The Developer Briefcase http://my.opera.com/ODIN/blog/2011/11/11/the- developer-briefcase-and-other-neat-opera- extensions-for-developers
  52. 52. Hjælpemiddelcentralen• Wordpress Codex –Template tags –Conditional tags
  53. 53. Tag det helt roligt...• Temaet er det øverste lag• Du kan hverken ødelægge databasen eller WordPress core- filerne• Du kan altid slette dit tema og starte forfra 
  54. 54. Uanset hvor varmt det erDO THE RIGHT THINGhttp://codex.wordpress.org/WordPress_Coding_Standards
  55. 55. functions.php // custom excerpt length function custom_excerpt_length($length) { return 20; } add_filter(excerpt_length, custom_excerp t_length);
  56. 56. functions.php // custom excerpt ellipses custom_excerpt_more($more) { return ... læs videre; } add_filter(excerpt_more, custom_excerpt _more);
  57. 57. functions.php// add google analytics to footer function add_google_analytics() { echo <script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>; echo <script type="text/javascript">; echo var pageTracker = _gat._getTracker("UA-XXXXX-X");; echo pageTracker._trackPageview();; echo </script>; } add_action(wp_footer, add_google_analytics);
  58. 58. functions.php // Better user profiles function update_contact_methods( $contactmethods ) { // Remove annoying and unwanted default fields unset($contactmethods[aim]); unset($contactmethods[jabber]); unset($contactmethods[yim]); // Add new fields $contactmethods[phone] = ’Twitter; $contactmethods[mobile] = ’LinkedIn; return $contactmethods; }
  59. 59. functions.php //tag cloud custom add_filter(widget_tag_cloud_args,style_tags ); function style_tags($args) { $args = array( largest => 10, smallest => 10, format => list, ); return $args; }
  60. 60. functions.php// no more jumping for read more link functionno_more_jumping($post) {return <a href=".get_permalink($post->ID)." class="read-more">.Continue Reading.</a>; }add_filter(excerpt_more, no_more_jumping);
  61. 61. functions.php // remove version info from head and feeds function complete_version_removal() { return ; } add_filter(the_generator, complete_versio n_removal);
  62. 62. functions.phpadd_theme_support(nav_menus);register_nav_menu(main, Main navigation menu);
  63. 63. Themes – uden options men med masser af functions Lisa Risager lisarisager.dk @risager slideshare.net/risager
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×