WordPress Themes

Themes – uden options men med
masser af functions

Lisa Risager
lisarisager.dk
@risager

slideshare.net/risager

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

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 Options
Du kan selv bestemme alt!

Farver, sidebars, bredde, header
image, alt...

Theme Options
... undtagen lige præcis det du har brug for

Og så kan det være laaaangsomt...

Eks.:
45 queries in 0.00264024734497 seconds
89 queries in 0.131466150284 seconds

Costumizing WordPress

Husk at alle dine tilretninger
forsvinder, hvis du opdaterer
temaet 

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.css

Evt.:
• home.php
• single.php
• Andre filer efter behov

Costumizing WordPress

Costumizing & tweaking kan være
rigtig sjovt

- men det afhænger af hvilket tema
du tweaker!

Et WordPress tema
Skal indeholde:

index.php
style.css

Et WordPress tema
Twenty Eleven indeholder:
32 php-filer
4 css-filer

mindre 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.php
Virker ligesom et plugin - det er
bare 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: #struk
Version: .9
Description: WordPress tema til
strikogkod.dk
Author: Lisa Risager
Author 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 indeholde
index.php
style.php

wp_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
<?php
get_template_part(’slug’, ’name’);
?>

Det er ikke kun header, footer, sidebar
vi kan genbruge
http://codex.wordpress.org/Function_Reference/get_templa
te_part

Template Hierarchy
Har du brug for forskellige visninger
af forskellige kategorier, tags, post
types?

Template Hierarchy
category-3.php 
category.php 
index.php

Template Hierarchy
http://codex.wordpress.org/Templat
e_Hierarchy

http://digwp.com/2010/09/
wordpress-3-template-hierarchy/

Conditional tags
Hvis du ikke gider at rode med alt
for 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
<?php
if ( 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  produkt

http://codex.wordpress.org/Post_Types

Custom Post Types
add_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
*/
?>

<?php if (have_posts()) : while
(have_posts()) : the_post(); ?>
<?php the_title(); ?>
<?php the_content(' '); ?>
<?php edit_post_link('redigér', '[ ', ' ]');
?>
<?php endwhile; endif; ?>

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

<?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 Check
Broken Link Checker
WPDB Profiling
Theme Tester
WPML
WP No Category Base
Plum 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 er

DO THE RIGHT THING

http://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 function
no_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.php
add_theme_support('nav_menus');
register_nav_menu('main', 'Main navigation
menu');

WordPress Themes

Recommandé

Recommandé

Contenu connexe

Similaire à WordPress Themes

Similaire à WordPress Themes (18)

WordPress Themes