📋 Komplett WordPress-fusklapp
Öppnade functions.php och glömde hur man kopplar in sidopanelen? Det händer alla som handkodar ett WordPress-tema. Du behöver en sida till hands, inte tio flikar på developer.wordpress.org.
Här hittar du grunderna i WordPress-utveckling: 13 mallfiler och hierarkin för att välja dem, den grundläggande loopen, include-taggar och bloginfo()-parametrar, sedan hooks och filter, villkorstaggar, inläsning av skript, shortcodes, WP_Query, dataescaping, REST API och WP-CLI-kommandon. Alla kodexempel fungerar. Ha den här fliken öppen under utvecklingen och kolla av medan du jobbar.
💡 Snabb översikt:
- Bokmärk den här sidan och ha den öppen i en separat flik medan du bygger ditt tema.
- Börja med avsnittet "Ett temas anatomi": skapa temafilerna från listan innan du skriver kod.
- Kopiera den grundläggande WordPress-loopen till
index.phpoch omslut den med include-taggar för sidhuvud, sidopanel och sidfot. - Släpp
bloginfo()- ochget_bloginfo()-taggar från tabellen direkt i mallarna och dubbelkolla mot kolumnen "Vad den matar ut". - Innan publicering, gå igenom reglerna för
style.css: validera CSS, minifiera och lägg till utskriftsstilar. - Längre ner på sidan finns referensen: mallhierarki, hooks och filter, villkorstaggar, inläsning av skript, shortcodes,
WP_Query, escaping, REST API och WP-CLI.
Ett WordPress-temas anatomi
Ett WordPress-tema är en uppsättning PHP-filer som förenas av gemensam logik och styrs av mallhierarkin. Nyckelkomponenten: style.css, som hanterar det visuella och samtidigt fungerar som temats identifierare i adminpanelen. Men grunden i varje klassiskt tema är PHP-mallarna: var och en hanterar sin egen del av sidan och anropas i den ordning som WordPress-hierarkin bestämmer.
För att skapa ett standardtema behöver du följande filer, tretton stycken, som var och en täcker en specifik del av webbplatsen:
- header.php,
<head>-sektionen och sidans topp: metadata, webbplatsens titel, inkludering avstyle.css, öppnande<body>-tagg. - index.php, huvudmallen, startpunkten. Sätter ihop andra filer till en enhetlig sida via include-taggar. Om en specialiserad mall inte finns faller WordPress tillbaka på
index.php. - sidebar.php, sidopanelen: widgetar, kategorier, sökning, sekundär meny.
- footer.php, sidfoten: copyright, sociala länkar, analysskript, avslutande
</body></html>-taggar. - page.php, mall för sidor (statiskt innehåll, "Om oss", "Kontakt").
- single.php, mall för ett enskilt blogginlägg.
- comments.php, kommentarsblock och kommentarsformulär.
- 404.php, 404-felsida. Om den här filen saknas visar WordPress ett standardmeddelande från systemet, vilket är sämre för besökaren.
- search.php, mall för sökresultat.
- searchform.php, sökformulär (i klassiska teman; moderna använder ofta en widget).
- archive.php, mall för arkiv: kategorier, taggar, datumarkiv.
- functions.php, temats funktionella hjärta: anpassade hooks, inläsning av skript och stilar, menyregistrering, widgetområden, anpassade inläggstyper. Allt som lägger till funktionalitet i temat finns här.
- style.css, den enda icke-PHP-filen på listan, men utan den existerar inte temat: den lagrar temats sidhuvud och definierar webbplatsens utseende.
Du klarar dig med färre mallar, till exempel utgör index.php + style.css redan ett minimalt tema. Men för en fullfjädrad webbplats är det bättre att ha alla tretton: varje fil är anpassad för sin egen uppgift, och WordPress väljer själv rätt fil enligt hierarkin. En typisk index.php ser ut så här:
1 <?php get_header(); ?> 2 3 <!-- Main content, including the Loop --> 4 5 <?php get_sidebar(); ?> 6 <?php get_footer(); ?>
Nu går vi vidare till det viktigaste kodfragmentet, utan vilket inte ett enda inlägg visas.
WordPress-loopen
Loopen är den centrala mekanismen för att mata ut innehåll. Utan den skulle du behöva koda visningen av varje inlägg och varje sida manuellt i temamallen. Loopen gör precis vad namnet lovar: den går igenom alla inlägg som matchar den aktuella frågan och applicerar din angivna HTML/PHP-uppmärkning på varje enskilt inlägg.
Grundläggande syntax för loopen:
1 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 2 <!-- HTML markup and template tags for each post --> 3 <?php endwhile; endif; ?>
have_posts() kontrollerar om det finns inlägg att mata ut. Om det finns initierar the_post() WordPress interna pekare till det aktuella inlägget, varefter dussintals malltaggar blir tillgängliga inuti loopen: the_title() för titeln, the_content() för inläggstext, the_permalink() för länken, the_excerpt() för utdraget och många andra.
Loopen placeras vanligtvis i index.php för att mata ut en lista med inlägg, men inget hindrar dig från att använda den i single.php, page.php eller archive.php, logiken är densamma, bara sammanhanget skiljer sig. Inuti loopen lägger du till valfria HTML-omslag och PHP-taggar, WordPress applicerar dem på varje inlägg i tur och ordning.
Praktiskt exempel, utmatning av titel och datum för varje inlägg:
1 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 2 <article> 3 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 4 <time><?php echo get_the_date(); ?></time> 5 </article> 6 <?php endwhile; endif; ?>
Nu om hur loopen samverkar med resten av temat, via include-taggar.
Include-taggar för mallar
Include-taggar är PHP-funktioner som laddar innehållet från en temafil till en annan. De utgör stommen i en typisk index.php: sidhuvud, innehåll, sidopanel, sidfot. Fyra grundläggande funktioner:
<?php get_header(); ?>, inkluderarheader.php. Vanligtvis den första raden iindex.phpoch alla andra mallar som behöver ett sidhuvud.<?php get_sidebar(); ?>, inkluderarsidebar.php. Om sidopanelen inte behövs tar du helt enkelt bort anropet.<?php get_footer(); ?>, inkluderarfooter.php. Alltid i slutet av mallen, avslutar sidan.<?php comments_template(); ?>, inkluderarcomments.php. Placeras inutisingle.php, efter utmatning av inläggsinnehåll.
Alla fyra funktioner letar efter filer i den aktiva temamappen. Om filen inte finns matar WordPress helt enkelt inte ut något (förutom get_header() och get_footer(), deras frånvaro kommer att bryta layouten).
Nästa nivå, taggar som inte bara inkluderar filer utan hämtar data från databasen.
Bloginfo-taggar
bloginfo()-taggarna hämtar information om webbplatsen från WordPress-databasen, samma information som du fyller i under Inställningar → Allmänt och i användarprofilen. Funktionen returnerar en sträng och matar omedelbart ut den på skärmen. De vanligaste parametrarna:
Parameter | Vad den matar ut |
|---|---|
| Webbplatsens titel |
| Webbplatsens URL |
| Tagline (webbplatsbeskrivning) |
| Teckenkodning (standard UTF-8) |
| URL till det aktiva temats |
| Installerad WordPress-version |
| Webbplatsens språk |
| RSS-flödets URL (RSS 0.92) |
| RSS-flödets URL (RSS 2.0) |
Det här är bara toppen av isberget, den fullständiga listan över parametrar finns i WordPress-dokumentationen.
Get_bloginfo(), när du behöver lagra istället för att mata ut
För fall där webbplatsinformation behöver användas i kod snarare än att bara visas på sidan, använd funktionen get_bloginfo():
1 <?php $info = get_bloginfo( $show, $filter ); ?>
$show, nyckelordet. Värden som stöds är'name'(titel),'url'(adress),'description'(tagline),'admin_email'(administratörens e-post) med flera; fullständig lista i dokumentationen.$filter, filtreringsläge:'raw'(värde "som det är", standard) eller'display'(värdet passerar genomwptexturize(), konverterar citattecken, tankstreck, tecken).
Exempel: hämta webbplatsbeskrivningen och mata ut den med ett prefix:
1 <?php $site_description = get_bloginfo( 'description' ); ?> 2 <?php echo 'Your site tagline: ' . esc_html( $site_description ); ?>
Resultat: "Din sajts tagline: Bästa premium WordPress-teman".
Förutom bloginfo har WordPress ett omfattande system med malltaggar: allmänna taggar, författartaggar, miniatyrbildstaggar, kategoritaggar, länktaggar, alla fungerar både inuti och utanför loopen, och kombinationer ger full kontroll över innehållsutmatningen.
Temastilmall
style.css har två roller. För det första, identifiering: sidhuvudet högst upp i filen talar om för WordPress temats namn, författare, version, licens. För det andra, visuellt: alla CSS-regler som styr webbplatsens utseende. Ett standard sidhuvud ser ut så här:
1 /* 2 Theme Name: Theme Name 3 Theme URI: https://www.example.com/theme 4 Author: Your Name 5 Author URI: https://www.example.com/ 6 Description: Responsive WordPress theme with support for... 7 Version: 1.0 8 License: GNU General Public License v2 or later 9 License URI: http://www.gnu.org/licenses/gpl-2.0.html 10 Tags: responsive, two-columns, right-sidebar, custom-header 11 Text Domain: mythemename 12 */
Bästa praxis när du arbetar med style.css:
- Följ WordPress CSS-kodningsstandarder, konsekvent stil förenklar underhåll.
- Validera CSS genom W3C-validatorn.
- Minifiera CSS i produktion, men behåll en läsbar källa för utveckling.
- Lägg till utskriftsstilar (
@media print), många läsare skriver ut artiklar. - Stila alla standard HTML-element som kan dyka upp i inläggsinnehåll.
WordPress mallhierarki
För varje förfrågan avgör WordPress själv vilken PHP-fil från temat som ska inkluderas, detta är mallhierarkin. En regel: från den mest specifika filen till den mest generella, med index.php som sista reserv för varje gren. Att känna till ordningen tar bort frågan "varför syns inte min single.php-redigering på kategorisidan".
1 Single post → single-{post_type}-{slug}.php → single-{post_type}.php → single.php → singular.php → index.php 2 Page → {template from editor}.php → page-{slug}.php → page-{id}.php → page.php → singular.php → index.php 3 Category → category-{slug}.php → category-{id}.php → category.php → archive.php → index.php 4 Archive → archive-{post_type}.php → archive.php → index.php 5 Search → search.php → index.php 6 404 error → 404.php → index.php 7 Front page → front-page.php → home.php → index.php
WordPress tar den första befintliga filen från vänster till höger. Så single-product.php kommer att åsidosätta single.php endast för inlägg av posttypen product, och lämnar resten orörda.
Hooks: actions och filters
Hooks är WordPress förlängningspunkter: de låter dig kroka in i kärnfunktionalitet utan att redigera dess filer. Actions utför en sidoeffekt (köa ett skript, skicka ett mejl), filters tar emot ett värde, modifierar det och måste returnera det tillbaka. En bortglömd return i ett filter är den vanligaste orsaken till tomt innehåll.
1 // Registration 2 add_action( 'hook_name', 'callback', 10, 1 ); // priority, number of arguments 3 add_filter( 'hook_name', 'callback', 10, 1 ); 4 5 // Execution (in core or your code) 6 do_action( 'hook_name', $arg ); // action: returns nothing 7 apply_filters( 'hook_name', $value, $arg ); // filter: RETURNS value 8 9 // Removal (priority must match the one used when adding) 10 remove_action( 'hook_name', 'callback', 10 );
Exempel, lägg till ett stycke i slutet av varje inlägg:
1 add_filter( 'the_content', 'my_append_note', 20 ); 2 function my_append_note( $content ) { 3 return $content . '<p>Thanks for reading!</p>'; // without return content disappears 4 }
Viktiga tema-hooks:
after_setup_theme, registrera funktionsstöd (add_theme_support()), menyer, miniatyrstorlekar.wp_enqueue_scripts, den enda korrekta platsen att köa frontend-CSS och JS.init, tidig initiering: registrera posttyper och shortcodes.the_content, filtrera inläggets HTML före utmatning.
Lägre prioritet körs tidigare (standard 10). För att en callback ska ta emot mer än ett argument, öka den fjärde parametern accepted_args.
Villkors-taggar
Villkors-taggar är funktioner som returnerar true eller false beroende på vilken sida som för närvarande är öppen. De bygger logiken för "visa sidofält här, men inte på 404".
1 is_home() // blog post feed 2 is_front_page() // site front page 3 is_single() // single post 4 is_page() // single page 5 is_singular() // any single post/page/CPT 6 is_archive() // any archive 7 is_category() // category archive 8 is_search() // search results page 9 is_404() // 404 error page 10 is_user_logged_in() // user is logged in 11 is_admin() // request is in admin (NOT "user is administrator")
Huvudfälla: frågeberoende villkors-taggar (is_single, is_page, is_home med flera) fungerar bara efter att huvudfrågan har formats, vilket innebär inuti mallfiler och loopen eller från och med template_redirect-hooken. Att anropa tidigt i functions.php eller på init är för tidigt: WordPress kommer att utfärda _doing_it_wrong() och returnera ett felaktigt resultat. Undantag är is_admin() och is_user_logged_in(), de är inte beroende av frågan och är tillgängliga tidigare. Och kom ihåg: is_admin() kontrollerar kontext (admin vs frontend), inte roll; för roll använd current_user_can( 'manage_options' ).
Köa skript och stilmallar
Frestelsen att skriva <link> och <script> direkt i header.php är stark, men det är ett misstag: du förlorar beroendehantering, versionshantering för cache-busting, strategier för defer/async och skydd mot dubbel inläsning (två tillägg kan enkelt köa jQuery två gånger). Den korrekta vägen är WordPress-kön på wp_enqueue_scripts-hooken.
1 add_action( 'wp_enqueue_scripts', 'my_theme_assets' ); 2 function my_theme_assets() { 3 // Theme style with version from style.css header 4 wp_enqueue_style( 5 'my-theme', 6 get_stylesheet_uri(), 7 array(), 8 wp_get_theme()->get( 'Version' ) 9 ); 10 11 // Script with dependency and modern syntax (WP 6.3+) 12 wp_enqueue_script( 13 'my-app', 14 get_theme_file_uri( 'assets/js/app.js' ), 15 array( 'jquery' ), // dependencies 16 '1.0.0', // version → cache busting 17 array( 18 'in_footer' => true, 19 'strategy' => 'defer', 20 ) 21 ); 22 }
Från och med WordPress 6.3 är den sista parametern i wp_enqueue_script() en $args-array (in_footer, strategy), även om den gamla formen med boolean true för sidfot fortfarande fungerar. För frontend använd wp_enqueue_scripts, för admin använd admin_enqueue_scripts, för inloggningssidan använd login_enqueue_scripts.
Shortcodes
Shortcodes omvandlar en kort inmatning inom hakparenteser till godtycklig HTML, praktiskt för knappar, gallerier och formulär inuti innehåll. Hanteraren måste returnera en sträng, inte skriva ut den via echo, annars kommer resultatet att "hoppa ut" till början av sidan.
1 add_shortcode( 'btn', 'my_button_shortcode' ); 2 function my_button_shortcode( $atts, $content = null, $tag = '' ) { 3 $a = shortcode_atts( 4 array( 'url' => '#', 'label' => 'Button' ), 5 $atts, 6 $tag 7 ); 8 return sprintf( 9 '<a class="btn" href="%s">%s</a>', 10 esc_url( $a['url'] ), // escape on output 11 esc_html( $a['label'] ) 12 ); 13 } 14 // Usage in post: [btn url="https://example.com" label="Buy"]
shortcode_atts() lägger användarattribut ovanpå standardvärden. Om du behöver köra shortcodes inuti en sträng eller mall, slå in den i do_shortcode(), men för att anropa din egen funktion, anropa den direkt, utan mellanhand.
WP_Query och anpassade frågor
WP_Query är klassen för alla inläggsurval: senaste nytt i sidofältet, kategorisamling, flöde för anpassad posttyp. Efter din loop, anropa alltid wp_reset_postdata(), annars kommer malltaggar längre ner på sidan att få fel inlägg.
1 $q = new WP_Query( array( 2 'post_type' => 'post', 3 'posts_per_page' => 5, 4 'category_name' => 'news', 5 'orderby' => 'date', 6 'order' => 'DESC', 7 ) ); 8 9 if ( $q->have_posts() ) { 10 while ( $q->have_posts() ) { 11 $q->the_post(); 12 the_title( '<h3>', '</h3>' ); 13 } 14 wp_reset_postdata(); // restore global $post 15 }
För att modifiera huvudsidans fråga (till exempel antal inlägg på förstasidan), använd inte den föråldrade query_posts(), den kör en extra databasfråga och förstör paginering. Korrekt tillvägagångssätt är pre_get_posts-hooken, som modifierar frågan före dess körning:
1 add_action( 'pre_get_posts', 'my_main_query' ); 2 function my_main_query( $query ) { 3 if ( ! is_admin() && $query->is_main_query() && $query->is_home() ) { 4 $query->set( 'posts_per_page', 12 ); 5 } 6 }
Säkerhet: escaping och sanitering
Den gyllene WordPress-regeln: sanitera vid inmatning, escape:a vid utmatning, validera överallt. All användardata rensas innan den sparas i databasen och escape:as innan den skrivs ut i HTML, även om den redan har rensats.
1 // Escaping ON OUTPUT 2 echo esc_html( $text ); // text inside tag 3 echo esc_attr( $value ); // attribute value 4 echo esc_url( $href ); // href/src links 5 echo wp_kses_post( $rich_html ); // safe HTML set for content 6 7 // Sanitization ON INPUT (before writing to DB) 8 $clean = sanitize_text_field( $_POST['name'] ); 9 $email = sanitize_email( $_POST['email'] ); 10 $num = absint( $_POST['count'] );
Skydda formulär och actions med nonces, engångstoken mot CSRF:
1 // In form: 2 wp_nonce_field( 'my_save_action', 'my_nonce' ); 3 4 // During processing: 5 if ( ! isset( $_POST['my_nonce'] ) || 6 ! wp_verify_nonce( $_POST['my_nonce'], 'my_save_action' ) ) { 7 return; // request rejected 8 }
I praktiken är de flesta tema- och plugin-sårbarheter just missad output escaping. Gör det till en vana: inte en enda variabel går in i HTML utan esc_*.
WordPress REST API
REST API returnerar webbplatsdata i JSON-format, används av mobilappar, headless-frontends och integrationer. Basadressen är /wp-json/wp/v2/.
1 GET /wp-json/wp/v2/posts // posts 2 GET /wp-json/wp/v2/pages // pages 3 GET /wp-json/wp/v2/media // media files 4 GET /wp-json/wp/v2/users // users 5 GET /wp-json/wp/v2/posts/123 // single post 6 GET /wp-json/wp/v2/posts?per_page=5&search=theme&_embed
Egna routes registreras på rest_api_init-hooken. Parametern permission_callback är obligatorisk, utan den varnar WordPress; för publik läsning använd '__return_true'.
1 add_action( 'rest_api_init', function () { 2 register_rest_route( 'myplugin/v1', '/items/(?P<id>\d+)', array( 3 'methods' => 'GET', 4 'callback' => 'my_get_item', 5 'permission_callback' => '__return_true', 6 ) ); 7 } );
WP-CLI: kommandon till hands
WP-CLI hanterar webbplatsen från terminalen, snabbare och mer tillförlitligt än att klicka i admin, särskilt när man underhåller flera webbplatser. Vanligaste kommandon:
1 wp core update # update WordPress core 2 wp core version # what version is installed 3 wp plugin install akismet --activate # install and activate plugin 4 wp plugin list # plugin list with status and version 5 wp theme activate twentytwentyfive # switch active theme 6 wp db export backup.sql # database dump to file 7 wp search-replace 'old.com' 'new.com' --dry-run # always dry run first 8 wp user create bob [email protected] --role=editor # create user 9 wp cache flush # flush object cache
wp search-replace förstår serialiserad data, så den ändrar säkert domän vid migrering av en webbplats, till skillnad från en direkt SQL-fråga som förstör serialiseringen. Gör wp db export före varje farlig operation.
Klassiska teman och blockteman 2026
I mitten av 2026 (aktuell version: WordPress 7.0 "Armstrong", rekommenderad PHP 8.3+) är klassiska PHP-teman fortfarande fullt stödda och förblir den vanligaste typen. Men all ny kärnverktygsutveckling sker för blockteman och fullständig webbplatsredigering (Full Site Editing): theme.json istället för en del av inställningarna i functions.php, HTML-mallar istället för PHP. The Loop, bloginfo(), villkors-taggar och hooks förblir relevanta i hybridteman och alla PHP-fragment inuti FSE-teman, så detta lathund tappar inte sitt värde. Den praktiska vägen 2026 är en klassisk grund plus riktat blockstöd där det faktiskt behövs.
⁉️🤔 Vanliga frågor
Är det obligatoriskt att skapa alla 13 filer för ett tema?
Nej, det minsta fungerande temat är
index.php+style.css. Men för en fullfjädrad sajt är det bättre att behålla den kompletta uppsättningen: varje fil ger WordPress möjlighet att välja den optimala mallen. Utansingle.phprenderas till exempel ett inlägg viaindex.phpoch tappar kommentarsblocket.
Vad är skillnaden mellan get_bloginfo() och bloginfo()?
bloginfo() skriver ut värdet direkt på skärmen (echo). get_bloginfo() returnerar en sträng till en variabel, du kan bearbeta den, lägga till något eller använda den inuti ett annat uttryck innan den faktiska utmatningen.
Var placerar jag loopen om sidan har flera innehållstyper?
Loopen kan startas flera gånger. Typiskt scenario: en loop för huvudlistan med inlägg, en andra för en widget med "senaste nytt" i sidofältet. Återställ pekaren före den andra loopen med wp_reset_postdata(), annars får nästa kod på sidan fel inläggskontext.
Fungerar det här lathundet för blockteman (FSE)?
Delvis. Blockteman (Full Site Editing) använder
theme.jsonistället förfunctions.phpför många inställningar och mallar i HTML snarare än PHP. Men loopen,bloginfo()och include-taggar är fortfarande relevanta för hybridteman och alla PHP-mallar inuti FSE-teman.
Vad gör man om functions.php blir för stor?
Bryt ut logiken i separata filer och inkludera dem från
functions.phpviarequire_onceellerinclude. Till exempel:require_once get_template_directory() . '/inc/custom-post-types.php';. Detta förbättrar läsbarheten och förenklar underhållet, en best practice för alla teman med fler än 20-30 hooks.
Vad är skillnaden mellan en action och ett filter?
En action utför en sidoeffekt och returnerar ingenting (köa ett skript, skicka ett mejl). Ett filter tar emot ett värde, modifierar det och måste returnera det, en glömd
returni ett filter nollställer innehållet. De registreras på samma sätt:add_action()ochadd_filter().
Varför fungerar inte is_single() i functions.php?
Villkorstaggar för frågor är bara tillgängliga efter att huvudfrågan har formats, det vill säga i mallfiler eller från och med
template_redirect-hooken. I början avfunctions.phpär frågan inte redo än, så WordPress kommer att utfärda_doing_it_wrong(). Endastis_admin()ochis_user_logged_in()fungerar utan frågeberoende.
Vad du ska ha till hands när du utvecklar för WordPress
Det här lathundet är stommen som WordPress-utveckling utgår från. Temafiler och mallhierarki, loopen, include-taggar och bloginfo() bygger ihop temat, medan hooks och filter, villkorstaggar, skriptinköning, shortcodes, WP_Query, escaping, REST API och WP-CLI täcker den stora majoriteten av rutinuppgifter. Resten är övning och dokumentation.
För fördjupning är handboken för temautveckling på developer.wordpress.org den första adressen. Referensen för malltaggar med hundratals funktioner för alla tillfällen finns också där. Om du går från HTML-layout till ett färdigt tema, börja med steg-för-steg-guiden för att skapa ett WordPress-tema från HTML, där loopen och taggar förklaras i skarpt läge, från layout till fungerande tema.
Bokmärk det här lathundet och ha det till hands under utvecklingen.
Vilken tagg eller hook slår du oftast upp? Skriv i kommentarerna vilken WordPress-uppgift du stötte på och dela ditt användningsfall, levande erfarenhetsutbyte är värt ett dussin officiella guider.
Ett professionellt team av skribenter och redaktörer specialiserade på att skapa kvalitetsinnehåll.