Letar du efter en WordPress tema fusklapp för att snabbt ändra ditt tema eller skapa ett nytt customize tema? WordPress levereras med många built-in template tags som du kan använda för att få ett head start. I den här artikeln delar vi med oss av en fuskbricka för WordPress-teman för nybörjare.
Innan du kommer igång
WordPress levereras med en kraftfull templates-motor som tillåter utvecklare av teman att skapa beautiful design för WordPress-drivna websites. Det finns både premiumteman och gratis WordPress-teman som du kan installera på din website.
Varje WordPress theme kommer med ett antal alternativ för customize. Dessa alternativ allow you to change colors, add header images, setup navigation menus, and more.
Men you are still limited to what features your theme supports. Ibland kanske du vill göra små ändringar i ditt WordPress-tema som kräver viss kodning. För att göra det måste du känna till grundläggande PHP, HTML och CSS.
Det första du bör göra är att bekanta dig med hur WordPress fungerar bakom kulisserna och templates för WordPress.
Följ därefter finns det några bästa metoder som du kanske vill följa. Till exempel att skapa ett barntema istället för att göra dina ändringar direkt i dina temafiler.
Du kan också öva på ditt theme genom att installera WordPress på din dator.
Med detta sagt, låt oss dyka in i vår WordPress Theme Cheat Sheet för Beginnare.
Grundläggande templates för WordPress
Varje WordPress tema består av olika filer som anropas templates. Alla WordPress theme måste ha en stylesheet och en indexfil, men vanligtvis kommer de med en hel del andra filer.
Under finns en lista över grundläggande filer som alla teman har:
- style.css
- header.php
- index.php
- sidebar.php
- footer.php
- single.php
- page.php
- comments.php
- 404.php
- funktioner.php
- archive.php
- sökformulär.php
- search.php
Om du ska bygga ditt eget theme kan du börja med ett av WordPress startteman. Dessa teman levereras med färdiga WordPress template-filer och CSS som ger dig ett ramverk att bygga vidare på.
Template Tags i Header
WordPress levereras med en hel del praktiska funktioner som kan användas för att mata ut olika saker i hela ditt theme. Dessa funktioner anropas template tags.
Den första och förmodligen viktigaste funktionen som är obligatorisk i alla WordPress-teman som uppfyller standardkraven anropas wp_head, och den gillar att se ut så här:
<?php wp_head(); ?>
Denna kod hämtar all viktig HTML som WordPress behöver add to i <head> section på varje page på din website. Den är också nödvändig för att många tillägg till WordPress ska fungera korrekt på din website.
Följarna är en lista över templates-taggar som du vanligtvis hittar och använder i ditt temas header.php-fil. Men de kan också användas på andra ställen i ditt theme 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'); ?>
Template Tags som används i andra temafiler
Låt oss nu ta en titt på några andra vanligt förekommande template tags och vad de gör.
Följande templates taggar används för att anropa och inkludera andra templates. Till exempel kommer ditt temas index.php-fil att använda dem för att inkludera templates för header, footer, content, comments och sidebar.
//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öljer templates-taggar används inuti WordPress-loopen för att visa content, excerpt och meta data från dina posts.
// 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 areas som anropas Sidebars. Dessa är locations i dina theme-filer där användare kan drag and drop WordPress-widgets. Ofta har ett theme flera locations där användare kan add to widgets.
Det vanligaste är dock att dessa area för widgetar är placerade i höger eller vänster sidebar i temats layout. Om du vill veta mer kan du läsa vår guide om hur du lägger till dynamiska sidebar med widgetar i ditt WordPress-tema.
Här är koden som används för att visa ett sidebar i your theme.
<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
You will need to replace sidebar-1 with the name defined by your theme for that viss widget-ready area or the sidebar.
Template Tags för att visa navigationsmenyer
WordPress levereras med ett kraftfullt system för hantering av menyer som allow användare att skapa navigation menyer för sin website. Ett WordPress-tema kan ha mer än en location för navigation menu.
Se vår guide om hur du skapar dina egna customize navigationsmenyer i ett WordPress-tema.
Följ koden som kommer att användas i ditt theme för att displayed en navigation menu.
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
Theme location beror på det namn som ditt theme använde för att registrera navigation menu. Klassen CSS container kan anropas vad du gillar. Den kommer att omge din navigation menu, så att du kan utforma den i enlighet med detta.
Diverse taggar för templates
Följ några av de taggar som du ofta kommer att använda 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 ); ?>
Villkorsstyrda taggar i WordPress Themes
Villkorsstyrda taggar är funktioner som returnerar resultat i True eller False. Dessa villkorsstyrda taggar kan användas i hela ditt theme eller plugin för att se om vissa villkor är uppfyllda och sedan göra något i enlighet därmed.
Till exempel om det aktuella inlägget har en featured image eller ej. Om det inte har en featured image, kan du visa en standard feature d image istället.
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/images/thumbnail-default.jpg" />';
}
?>
Följ är några fler villkorsstyrda 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 villkorsstyrda taggar som du kan använda. Den fullständiga listan över villkorsstyrda taggar finns på WordPress codex page about conditional tags.
WordPress-slingan
Loopen eller WordPress-loopen är den kod som används för att hämta och displaya posts i WordPress. Många WordPress template tags kan bara fungera inuti loopen eftersom de är associerade med post eller post_type objects.
Följ 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 loopen, kontrollera Vad är en loop i WordPress (Infographic).
Vi hoppas att den här artikeln hjälper dig som den grundläggande WordPress Theme fusklista för Beginner. Du kanske också vill se vår lista över de mest användbara tricken för WordPress funktionsfil.
Om du gillade den här artikeln, vänligen prenumerera på vår YouTube-kanal för WordPress video tutorials. Du kan också hitta oss på Twitter och Facebook.
Marco
This is great article.
But is it still relevant in 2022 with Gutenberg block editor?
WPBeginner your the best!
WPBeginner Support
What we share in this article is still currently relevant.
Administratör
Henry Obilor
I would love to ask when creating a new theme. Can I create my own header.php and use a premium theme footer.php?
Mixing yours with already built template. Will it work?
WPBeginner Support
That would heavily depend on the content of the footer.php and how you have your theme coded. If you have the footer then the best method would be to test on a local installation.
Administratör
Biplob
It’s awesome thing. it’s very useful
Zaki
This is certainly not for beginners. I am afraid I will end up with messing up my website. Coding part is completely unclear. I would appreciate if you can some great screenshots to illustrate ”How to add a custom page”.
Sanam
Bro where to paste that code in functions.php
WPBeginner Support
At the bottom. If you have ?> tag as the last line then you need to paste code before that line.
Administratör
Shahbaz Ahmed Bhatti
Very Nice and Goooood Work Keep it up, Very goood information for Basic
Solomon
Thanks very much, i really appreciate.
Pali Madra
Thanks for the great tutorial. I recommend the tutorial to anyone trying to learn WordPress.
Keep up the good work!
Ben
Thanks for a very helpful article. Just want I have been looking for.
Thanks.
Ben
madalinignisca
what is – Site’s Description
I think it is
madalinignisca
what is ”<?php bloginfo(%u2019description%u2019); ?> – Site’s Description” ? I think it is ”<?php bloginfo(’description’); ?>”
mirzayasir4
That’s great useful cheet sheet when you are doing editing in themes. Thanks
John
Fantastic, I’ve been looking for an easy Wordpress cheatsheet for a while, thanks for doing this, makes life a lot easier and I can get a bit more creative. Wordpress has such a lot of power under the hood.
mark
this is gr8 for beginner
Russell Poulter
This is SO bookmarked!
Thanks.
asif eminov
Thanks this details.
Ersatzknochen
Yeah, very useful. Thank you.
Delighted
Thank you for the Codes in Header.php part, Very easy to understand and VERY useful! thank you for this.
SleepY
Wow….thats what i was looking for since days.
thanks a lot !
Victor Duwon Jackson
This is great, Thanks.
Manoj
Great info! bookmarked
Obed Ward
Excellent WP theme cheat sheet, going to bookmark it (and of course tweet it). Thanks!
Naeem Noor
Very Useful, just printed it.
Blog2Life
These shortcodes are just what I was looking for to start work on some new themes.. thanks for the post and keep up the good work!
Hami
Yes exactly. This post has solved out and let us (beginners) start working instantly on new ideas
A.D.K.
This is very useful thanks.
Jon Rawlins
Retweeted this for you. Just about to get a blog setup for myself, so this site has been very useful.
Angad Sodhi
Aah! Bookmarking this right away..
Referring the default theme for these small details is now history!
Thank you people.
DaveK
Cool, Thanks for sharing, consider it tweeted