WordPress Theme Cheat Sheet för nybörjare

WordPress theme development cheat sheet for beginners

Letar du efter ett WordPress-fuskark för att snabbt Àndra ditt tema eller skapa ett nytt anpassat tema? WordPress kommer med mÄnga inbyggda malltaggar som du kan anvÀnda för att fÄ ett försprÄng. I den hÀr artikeln delar vi ett WordPress-fuskblad för nybörjare.

Innan du kommer igÄng

WordPress levereras med en kraftfull mallmotor som gör att temautvecklare kan skapa vackra mönster för WordPress-drivna webbplatser. Det finns bÄde premium- och gratis WordPress-teman som du kan installera pÄ din webbplats.

Varje WordPress-tema har ett antal anpassningsalternativ. Med dessa alternativ kan du Àndra fÀrger, lÀgga till rubrikbilder, konfigurera navigeringsmenyer och mer.

Du Àr dock fortfarande begrÀnsad till vilka funktioner ditt tema stöder. Ibland kanske du vill göra smÄ Àndringar i ditt WordPress-tema som krÀver lite kodning. För att göra det mÄste du kÀnna till nÄgra grundlÀggande PHP, HTML och CSS.

Det första du vill göra Àr att bekanta dig med hur WordPress fungerar bakom kulisserna och WordPress-temamallar.

DÀrefter finns det nÄgra bÀsta metoder som du kanske vill följa. Till exempel att skapa ett underordnat tema istÀllet för att göra dina Àndringar direkt i dina temafiler.

Du kan ocksÄ öva pÄ ditt tema genom att installera WordPress pÄ din dator.

Med det sagt, lÄt oss dyka in i vÄrt WordPress-tema fuskblad för nybörjare.

GrundlÀggande WordPress-temamallar

GrundlÀggande WordPress-temafiler

Varje WordPress-tema bestÄr av olika filer som kallas mallar. Alla WordPress-teman mÄste ha ett formatmall och en indexfil, men vanligtvis kommer de med mÄnga andra filer.

Nedan Àr listan över grundlÀggande filer som varje tema har:

style.css header.php index.php sidofÀlt.php footer.php single.php page.php comments.php 404.php functions.php archive.php searchform.php search.php

Om du bygger ditt eget tema kan du börja med ett av WordPress-startteman. Dessa teman kommer med fÀrdiga WordPress-mallfiler och CSS som ger dig en ram att bygga pÄ.

Malletiketter i rubrik

WordPress kommer med mÄnga praktiska funktioner som kan anvÀndas för att mata ut olika saker i hela ditt tema. Dessa funktioner kallas malltaggar.

Första och förmodligen den viktigaste funktionen som krÀvs i alla standardkompatibla WordPress-teman heter wp_head, och det ser ut sÄ hÀr:


<?php wp_head(); ?>

Den hÀr koden hÀmtar alla viktiga HTML som WordPress behöver lÀgga till i avsnittet pÄ varje sida pÄ din webbplats. Det Àr ocksÄ viktigt att mÄnga WordPress-plugins fungerar korrekt pÄ din webbplats.

Nedan följer en lista med malltaggar som du ofta hittar och anvÀnder i ditt temas header.php-fil. De kan dock ocksÄ anvÀndas nÄgon annanstans pÄ ditt tema nÀr du behöver dem.


// Title of the Blog, or Blog Name
<?php bloginfo('name'); ?> 

// Title of a Specific Page
<?php wp_title(); ?>

// Exact URL for the site
<?php bloginfo('url'); ?> 

// Site's Description
<?php bloginfo('description'); ?> 

// Location of Site’s Theme File
<?php bloginfo('template_url'); ?>

// Link to the Style.css location
<?php bloginfo('stylesheet_url'); ?>  

// RSS Feed URL for the site
<?php bloginfo('rss2_url'); ?> 

// Pingback URL for the site
<?php bloginfo('pingback_url'); ?>

// WordPress version number 
<?php bloginfo('version'); ?> 

Malletiketter som anvÀnds i andra temafiler

LÄt oss nu titta pÄ nÄgra andra vanliga malltaggar och vad de gör.

Malltaggar som innehÄller andra mallar

Följande malltaggar anvÀnds för att ringa och inkluderar andra mallar. Till exempel kommer ditt temas index.php-fil att anvÀnda dem för att inkludera sidhuvud, sidfot, innehÄll, kommentarer och sidofÀltmallar.


//Displays Header.php file content
<?php get_header(); ?> 

// Displays Footer.php file content
<?php get_footer(); ?>

// Displays Sidebar.php file content
<?php get_sidebar(); ?>

// Displays Comment.php file content
<?php comments_template(); ?> 


Följande malltaggar anvÀnds i WordPress-slingan för att visa innehÄll, utdrag och metadata frÄn dina inlÀgg.


// Displays the Content of the Post
<?php the_content(); ?>  

// Displays the excerpt that is used in Posts
<?php the_excerpt(); ?>

// Title of the Specific Post
<?php the_title(); ?>

// Link of the Specific Post
<?php the_permalink() ?>

// Category of a Specific Post
<?php the_category(', ') ?>

// Author of the Specific Post
<?php the_author(); ?> 

//ID of a Specific Post
<?php the_ID(); ?>

// Edit link for a Post 
// Oonly visible to logged in users with editing privileges
<?php edit_post_link(); ?>

// URL of the next page
<?php next_post_link(' %link ') ?>

// URL of the previous page
<?php previous_post_link('%link') ?> 

WordPress-teman kommer med widget-klara omrÄden som kallas sidofÀlt. Det hÀr Àr platser i dina temafiler dÀr anvÀndare kan dra och slÀppa WordPress-widgets. Ofta har ett tema flera platser dÀr anvÀndare kan lÀgga till widgets.

Men oftast finns dessa widgetomrÄden i höger eller vÀnster sidofÀlt i temalayouten. För att lÀra dig mer, se vÄr guide om hur du lÀgger till dynamiska widget-fÀrdiga sidofÀlt i ditt WordPress-tema.

HÀr Àr koden som anvÀnds för att visa en sidofÀlt i ditt tema.


<?php 
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
	return;
}
?>

<aside id="secondary" class="widget-area" role="complementary">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

Du mÄste ersÀtta sidofÀlt-1 med namnet som definieras av ditt tema för det specifika widget-klara omrÄdet eller sidofÀltet.

Malletiketter för att visa navigeringsmenyer

WordPress levereras med ett kraftfullt menyhanteringssystem som tillÄter anvÀndare att skapa navigeringsmenyer för sin webbplats. Ett WordPress-tema kan ha mer Àn en plats för navigeringsmenyn.

Se vÄr guide om hur du skapar dina egna anpassade navigeringsmenyer i ett WordPress-tema.

Följande Àr koden som kommer att anvÀndas i ditt tema för att visa en navigeringsmeny.


<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

Temaplacering beror pÄ namnet ditt tema anvÀnde för att registrera navigeringsmenyn. CSS-behÄllarklassen kan kallas vad du vill. Den omger din navigeringsmeny sÄ att du kan utforma den efter det.

Diverse malltaggar

Följande Àr nÄgra av de taggar som du ofta anvÀnder i hela ditt WordPress-tema.



// Displays the date current post was written
<?php echo get_the_date(); ?> 

// Displays the last time a post was modified
get_the_modified_time

// Displays the last modified time for a post
<?php echo the_modified_time('F d, Y'); ?>

// Displays post thumbnail or featured image
<?php the_post_thumbnail( ); ?>

// Displays monthly archives
<?php wp_get_archives( ); ?>

// Displays the list of categories
<?php wp_list_categories(); ?>

// Displays the gravatar of a user from email address
// 32 pixels is the size, you can change that if you need
<?php echo get_avatar( 'email@example.com', 32 ); ?>

// Displays gravatar of the current post's author
<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>


Villkorliga taggar i WordPress-teman

Villkorliga taggar Àr funktioner som ger resultat i True eller False. Dessa villkorliga taggar kan anvÀndas i hela ditt tema eller plugin för att se om vissa villkor Àr uppfyllda och sedan göra nÄgot dÀrefter.

Till exempel om det aktuella inlÀgget har en bild eller inte. Om den inte har en bild som visas kan du istÀllet visa en standardbild.


<?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}
else {
    echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) 
        . '/images/thumbnail-default.jpg" />';
}
?>

Följande Àr nÄgra fler villkorliga taggar som du kan anvÀnda.


// Checks if a single post is being displayed
is_single() 

// Checks if a page is being displayed
is_page() 

// Checks if the main blog page is displayed
is_home() 

// Checks if a static front page is displayed
is_front_page() 

// Checks if current viewer is logged in
is_user_logged_in() 


Det finns mÄnga fler villkorliga taggar som du kan anvÀnda. Den fullstÀndiga listan över villkorliga taggar finns pÄ WordPress codex-sidan om villkorliga taggar.

WordPress-slingan

Loop eller WordPress-loop Àr koden som anvÀnds för att hÀmta och visa inlÀgg i WordPress. MÄnga WordPress-malltaggar kanske bara fungerar inuti slingan eftersom de Àr associerade med post- eller post_type-objekten.

Följande Àr ett exempel pÄ en enkel WordPress-loop.


<?php
 
// checks if there are any posts that match the query
if (have_posts()) :
 
  // If there are posts matching the query then start the loop
  while ( have_posts() ) : the_post();
 
    // the code between the while loop will be repeated for each post
    ?>
 
    <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
 
    <p class="date-author">Posted: <?php the_date(); ?> by <?php the_author(); ?></p>
 
    <?php the_content(); ?>
 
    <p class="postmetadata">Filed in: <?php the_category(); ?> | Tagged: <?php the_tags(); ?> | <a href="<?php comments_link(); ?>" title="Leave a comment">Comments</a></p>
 
    <?php
 
    // Stop the loop when all posts are displayed
 endwhile;
 
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</p>
<?php
endif;
?>

För att lÀra dig mer om slingan, kolla in What is a Loop in WordPress (Infographic).

Vi hoppas att den hÀr artikeln hjÀlper dig som grundlÀggande WordPress-tema fuskblad för nybörjare. Du kanske ocksÄ vill se vÄr lista över de mest anvÀndbara knep för WordPress-funktionsfilen.

Om du gillade den hÀr artikeln, prenumerera sedan pÄ vÄr YouTube-kanal för WordPress-sjÀlvstudier. Du hittar oss ocksÄ pÄ Twitter och Facebook.