Denna guide börjar med att ta grundläggande utveckling av wordpress-teman. Sedan berättas det hur man enkelt redigerar sitt tema så det blir mer sökmotorvänligt. I slutet av guiden tar jag upp tre tips för den som är van att redigera wordpress-teman.
Guiden tar inte upp något om plugin eller funktionalitet som ej omfattas av teman. I guiden utgår jag från hur de flesta teman ser ut. Jag utgår också från att läsaren inte har någon erfarenhet i att redigera wordpress-teman eller CSS.
Wordpress
Standarder
Wordpress har ett antal filnamn som är "speciella". De vanligaste är:
- index.php
- header.php
- footer.php
- sidebar.php
- page.php
- single.php
- comments.php
- style.css
header.php innehåller det som är övers på sidan. Exempelvis menyn och allt inom <head> (typ meta-taggar). footer.php är det som är längst ned på sidan. Här kan det finnas länkar till tema-författaren och wordpress. header.php och footer.php laddas på alla sidor.
page.php laddas endast då en sida (page) visas. Jämför med single.php som landdas endast då ett inlägg (post) visas. page.php och sinlge.php är valfria filer. Alla teman har inte dessa. Om ditt tema saknar någon av dessa filer så laddas index.php.
index.php är den sida som laddas om inte en "specialsida" finns. Det är också här man ser de senaste inläggen (posts).
comments.php laddas när man är på ett enskilt inlägg eller sida. Man laddar comments.php med funktionen comments_template().
style.css innehåller all CSS för temat.
Referens:
För en komplett lista av speciella filnamn se wordpress codex: http://codex.wordpress.org/Theme_Dev...ate_Files_List
Wordpress-loopen
Man kan inte beskriva Wordpress-teman utan att nämna "loopen". Loopen körs för att visa varje inlägg/sida som besökaren har frågat efter. Loopen börjar så här:
PHP-kod:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
Den säger: "Om det finns några poster, kör så länge det finns poster: Hämta data om posten."
I loopen kan man använda många funktioner och dessa är rätt självbeskrivande. Exempel på funktioner man kan använda i loopen:
- the_permalink()
- the_title()
- the_author()
- the_time()
- the_category()
- the_content()
- comments_popup_link("Ingen kommentar", "En kommentar", "% kommentarer")
Loopen avslutas med:
PHP-kod:
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
Referenser:
http://codex.wordpress.org/The_Loop
http://codex.wordpress.org/Function_...nts_popup_link
Fuktioner
Innan jag börjar prata om SEO måste jag nämna ett par viktiga wordpess-funktioner som kan användas utanför och inne i loopen. Dessa funktioner returnerar bara sant eller falskt, så de passar bra i en if-sats. Lista på funktioner:
- is_single()
- is_page()
- is_home()
- is_front_page()
- is_category()
Alla dessa funktioner är ganska självförklarande. is_category() svarar sant om du visar en kategorisida. Det enda som är förvirrande är att is_home() svarar sant när du visar inläggssidan. DVS om du har en statisk sida som förstasida så blir är is_home()=false men is_front_page()=true.
Med dessa funktioner kan man (men man borde inte) bädda in alla specialsidor i index.php.
Referens:
Det finns en hel del "Conditional"-funktioner inbyggda i Wordpress. Se en komplett lista här: http://codex.wordpress.org/Conditional_Tags
Det är så att de flesta Wordpress-teman är skrivna på ett dåligt sätt gällande SEO. Framför allt så slarvas det med rubriktaggar. Ett vanligt senario är att bloggens titel är en h1-tagg och alla andra sidor har en h2-tagg. Detta är fel.
Det ska vara så att alla dina sidor och inlägg (page.php och single.php) ska ha en h1-tagg runt sin titel. Exempel hur den raden kan se ut:
PHP-kod:
<h1 class="entry-title"><?php the_title(); ?></h1>
När man visar de senaste inläggen (index.php) så kan man inte ha flera h1-taggar. Man gör de då till h2. Man sätter gärna in en länk till den inlägget i rubriken också.
Exempel hur den raden kan se ut:
PHP-kod:
<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
Bloggens titel ska inte vara en h1-tagg. Där kan man sätta en vanlig div-tagg med ett id. Däremot, eftersom inläggssidan inte har någon lämplig h1-tagg, så sätter man bloggens titel som h1 bara på inläggssidan.
Det här är fel, men är vanligt att det ser ut så här i header.php:
PHP-kod:
<h1><a href="<?php echo home_url( '/' ); ?>"><?php bloginfo('name'); ?></a></h1>
Man ska istället skriva så här för att visa bloggens titel korrekt:
PHP-kod:
<?php //om det är inläggssidan, sätt $heading_tag="h1" annars "div"
$heading_tag = ( is_home()) ? 'h1' : 'div';?>
<<?php echo $heading_tag; ?> id="site-title">
<a href="<?php echo home_url( '/' ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</<?php echo $heading_tag; ?>>
Övriga rubriker på sidan anges i adminsystemet och är därför utanför tema-utvecklarens kontroll.
Sidebar
Man brukar ha en eller flera sidebars så sidan. Man måste registrera en sidebar för att kunna använda den. Det gör man med funktionen register_sidebar(). Ett korrekt anrop ser ut så här:
PHP-kod:
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h5 class="widgettitle">',
'after_title' => '</h5>',
'name' =>"sidebar",
'id' => "sidebar",
'description' => "Detta är sidofältet"
));
}
Observera att titel-taggen är en h5 och har klassen "widgettitle". Det finns teman som sätter h2 eller h3 här vilket jag tycker är fel. Jag brukar använda h5.
CSS
Nu ser källkoden bra ut och är optimerad. Men sidan kan ha fått sitt utseende förändrat. För att återgå till det tidigare utseendet måste vi ändra lite i temats css. Det är då filen style.css som gäller.
Grunder
Grunderna i CSS är lätta. Det går ut på att man först identifierar ett element (HTML-tagg) sen sätter stilen. En punkt (.) identifierar en klass. En fyrkant (#) identifierar ett id. Annars identifieras html-taggar med deras namn.
Ändra i CSSen
För att ändra tillbaka bloggens titel till dess ursprungliga utseende måste vi hitta vart i CSSen som utseendet var skrivet. Hittar man inte så är det enkelt att skriva om.
HTML-kod:
//identifera site-title med id oavsett om det är h1 eller div.
#site-title{
font-size: 16px;
color: red;
}
Eftersom alla dina rubriker var h2 innan så finns det troligtvis en rad i CSSen som säger:
HTML-kod:
h2{
font-size: 14px;
color: green;
}
Ändra den till
HTML-kod:
//för alla rubriker på inlägg och sidor (single.php och page.php)
h1.entry-title{
font-size: 14px;
color: green;
}
Man kan också lägga till detta för att få inläggsidan snygg:
HTML-kod:
//för rubrikerna på inläggssidan. Observera att det är för besökta som obesökta inlägg.
h2.entry-title a,
h2.entry-title a:visited{
font-size: 13px;
color: green;
}
//när man håller musen över länken så blir den svart.
h2.entry-title a:hover,
h2.entry-title a:active{
font-size: 13px;
color: black;
}
Rubrikerna i sidebaren identifieras ofta med klassen .widgettitle. Eftersom vi inte ändrade klassen så behöver vi inte bry oss om att ändra något för den i CSSen.
Överkurs
För den som är van att redigera teman så kan jag tipsa lite om ytterligare optimeringar.
1) Importera menyn och alla sidebars i footern. Sen skriver man om det med CSS så det ser bra ut. På så sätt får vi det viktiga innehållet högt upp i källkoden och länklistor (menyer) och annat oviktigt kommer längre ned.
2) Lägg alla javascript i footern. De flesta javascript används inte förän sidan är laddad, prioritera då att innehållet kommer till besökarens webbläsare först. Stilmallarna där emot ska vara i headern. Både javascripten och stilmallarna ska vara i egna filer. Inget ska blandas med HTMLen.
3) Om du vill att två sidor ska se olika ut, använd templates. Börja med att skapa en ny fil, överst i filen skriver man:
PHP-kod:
<?php
/**
* Template Name: Min nya stilmall
*/
I adminsystemet när man redigerar sidor kan man nu välja "Stilmallar"/"Templates". Om man då väljar "Min nya stilmall" så kommer den nyss skapade filen att laddas istället för page.php.
Sammanfattning
Många wordpress-teman är dåligt optimerade men med lite ändringar av rubriker och runtflyttande av kod så blir det bättre. Om man är van att redigera teman så tar det inte mer än 20 minuter att ändra rubrikerna. Ändringen kommer ge positiva resultat och är en bra investering.
Om du vill lära dig utveckla wordpress teman så rekommenderar jag dig att läsa koden och se vad andra har gjort. Standardtemana till wordpress 2.8 heter "Default" och "Classic" och dessa är bra teman att börja kika på.
Svara med citat
Ursprungligen postat av hakan
