WordPress Themes

Themes – uden options men med masser af functions Lisa Risager lisarisager.dk @risager slideshare.net/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

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/

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.00264024734497 seconds89 queries in 0.131466150284 seconds

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 layout• Genbrug functions

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

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 site fungerer

functions.phpVirker ligesom et plugin - det erbare inkluderet i temaet• definere widgets• hente twitterstrøm• ændre excerpt-længde• og meget andet

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 URI: http://lisarisager.dk*/

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å læg dem i loop.php

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

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?• Tags?

Dit tema skal indeholdeindex.phpstyle.phpwp_head();wp_footer();evt. dynamic_sidebar();evt. get_template_part(’slug’, ’name’);The Loop

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 stedet

Template Parts<?phpget_template_part(’slug’, ’name’);?>Det er ikke kun header, footer, sidebarvi kan genbrugehttp://codex.wordpress.org/Function_Reference/get_template_part

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 (in_category(7)) { include(TEMPLATEPATH./singlep- 7.php);} else {} ?>

Conditional tags<?phpif ( is_user_logged_in() ) { echo <a href=" . $current_user->kunde . "> Min side</a>; } else { the_content();}?>

Custom Post Types• alm. blogindlæg  post• boganmeldelser  bog• filmanmeldelser  film• produkter  produkthttp://codex.wordpress.org/Post_Types

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, ) );}

Page Template - bog.php<? php/*TemplateName: Bøger*/?>

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; ?>

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; ?>

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>;

Spar på plugins• Mange kan erstattes af simple functions• Mange plugins er overkill• Plugins gør opgraderinger mere besværlige

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)• 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

Når det så er sagt...Nogle anbefalinger:Theme CheckBroken Link CheckerWPDB ProfilingTheme TesterWPMLWP No Category BasePlum Code Box

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/• The Developer Briefcase http://my.opera.com/ODIN/blog/2011/11/11/the- developer-briefcase-and-other-neat-opera- extensions-for-developers

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 kan altid slette dit tema og starte forfra 

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, custom_excerp t_length);

functions.php // custom excerpt ellipses custom_excerpt_more($more) { return ... læs videre; } add_filter(excerpt_more, custom_excerpt _more);

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);

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; }

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; }

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);

functions.php // remove version info from head and feeds function complete_version_removal() { return ; } add_filter(the_generator, complete_versio n_removal);

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 slideshare.net/risager

http://wp-danmark.dk	47974
http://mkserver.dk	111
http://lisarisager.dk	36
http://translate.googleusercontent.com	4
http://webcache.googleusercontent.com	3
http://a0.twimg.com	2
http://205.188.242.1	1
http://205.188.242.5	1
http://205.188.242.4	1

WordPress Themes

by risager on Nov 12, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 48,133

Statistics

WordPress Themes — Presentation Transcript