Suchen Sie nach einem WordPress-Theme-Spickzettel, um Ihr Thema schnell zu ändern oder ein neues benutzerdefiniertes Thema zu erstellen? WordPress wird mit vielen integrierten Vorlagen-Tags geliefert, mit denen Sie einen Vorsprung erzielen können. In diesem Artikel werden wir einen WordPress-Theme-Spickzettel für Anfänger teilen.
Bevor Sie beginnen
WordPress wird mit einer leistungsstarken Template-Engine geliefert, die es Theme-Entwicklern ermöglicht, schöne Designs für WordPress-basierte Websites zu erstellen. Es gibt sowohl Premium- als auch kostenlose WordPress-Themes, die Sie auf Ihrer Website installieren können.
Jedes WordPress-Theme bietet eine Reihe von Anpassungsoptionen. Mit diesen Optionen können Sie Farben ändern, Kopfzeilenbilder hinzufügen, Navigationsmenüs einrichten und mehr.
Sie sind jedoch immer noch auf die Funktionen beschränkt, die Ihr Theme unterstützt. Manchmal möchten Sie möglicherweise geringfügige Änderungen an Ihrem WordPress-Theme vornehmen, die etwas Codierung erfordern. Dazu benötigen Sie grundlegende Kenntnisse in PHP, HTML und CSS.
Zunächst sollten Sie sich mit der Funktionsweise von WordPress hinter den Kulissen und WordPress-Theme-Vorlagen vertraut machen.
Danach gibt es einige Best Practices, die Sie befolgen sollten. Erstellen Sie beispielsweise ein untergeordnetes Design, anstatt Ihre Änderungen direkt in Ihren Designdateien vorzunehmen.
Sie können auch an Ihrem Thema üben, indem Sie WordPress auf Ihrem Computer installieren.
Lassen Sie uns jedoch in unseren WordPress-Theme-Spickzettel für Anfänger eintauchen.
Grundlegende WordPress-Theme-Vorlagen
Jedes WordPress-Theme besteht aus verschiedenen Dateien, die als Vorlagen bezeichnet werden. Alle WordPress-Themes müssen ein Stylesheet und eine Indexdatei haben, aber normalerweise kommen sie mit vielen anderen Dateien.
Unten ist die Liste der grundlegenden Dateien, die jedes Thema hat:
- style.css
- header.php
- index.php
- sidebar.php
- footer.php
- single.php
- page.php
- Kommentare.php
- 404.php
- Funktionen.php
- archiv.php
- searchform.php
- search.php
Wenn Sie Ihr eigenes Theme erstellen, können Sie mit einem der WordPress-Starter-Themes beginnen. Diese Themen werden mit gebrauchsfertigen WordPress-Vorlagendateien und CSS geliefert, die Ihnen einen Rahmen bieten, auf dem Sie aufbauen können.
Vorlagen-Tags in der Kopfzeile
WordPress bietet viele praktische Funktionen, mit denen Sie verschiedene Dinge in Ihrem Theme ausgeben können. Diese Funktionen werden Template-Tags genannt.
Die erste und wahrscheinlich wichtigste Funktion, die in allen standardkonformen WordPress-Themes benötigt wird, heißt wp_head und sieht so aus:
<?php wp_head(); ?>
Dieser Code ruft alle wichtigen HTML-Dateien ab, die WordPress hinzufügen muss <head>
Abschnitt jeder Seite Ihrer Website. Es ist auch für viele WordPress-Plugins unerlässlich, auf Ihrer Website ordnungsgemäß zu funktionieren.
Im Folgenden finden Sie eine Liste von Vorlagen-Tags, die Sie häufig in der header.php-Datei Ihres Themes finden und verwenden. Sie können jedoch bei Bedarf auch an anderer Stelle in Ihrem Thema verwendet werden.
// 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'); ?>
Vorlagen-Tags, die in anderen Designdateien verwendet werden
Werfen wir nun einen Blick auf einige andere häufig verwendete Template-Tags und deren Funktion.
Die folgenden Vorlagen-Tags werden verwendet, um andere Vorlagen aufzurufen und einzubinden. Die Datei index.php Ihres Themes verwendet sie beispielsweise, um Kopfzeilen, Fußzeilen, Inhalte, Kommentare und Seitenleistenvorlagen einzuschließen.
//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(); ?>
Die folgenden Vorlagen-Tags werden innerhalb der WordPress-Schleife verwendet, um Inhalte, Auszüge und Metadaten aus Ihren Beiträgen anzuzeigen.
// 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-Themes werden mit Widget-bereiten Bereichen namens Sidebars geliefert. Dies sind Orte in Ihren Designdateien, an denen Benutzer WordPress-Widgets ziehen und ablegen können. Häufig hat ein Design mehrere Speicherorte, an denen Benutzer Widgets hinzufügen können.
Am häufigsten befinden sich diese Widget-Bereiche jedoch in der rechten oder linken Seitenleiste des Design-Layouts. Weitere Informationen finden Sie in unserer Anleitung zum Hinzufügen dynamischer Widget-bereiter Seitenleisten in Ihrem WordPress-Theme.
Hier ist der Code, der verwendet wird, um eine Seitenleiste in Ihrem Design anzuzeigen.
<?php if ( ! is_active_sidebar( 'sidebar-1' ) ) { return; } ?> <aside id="secondary" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </aside><!-- #secondary -->
Sie müssen sidebar-1 durch den Namen ersetzen, der von Ihrem Theme für diesen bestimmten Widget-bereiten Bereich oder die Sidebar definiert wurde.
Vorlagen-Tags zum Anzeigen von Navigationsmenüs
WordPress wird mit einem leistungsstarken Menüverwaltungssystem geliefert, mit dem Benutzer Navigationsmenüs für ihre Website erstellen können. Ein WordPress-Theme kann mehr als eine Navigationsmenüposition haben.
In unserer Anleitung erfahren Sie, wie Sie Ihre eigenen benutzerdefinierten Navigationsmenüs in einem WordPress-Theme erstellen.
Im Folgenden finden Sie den Code, der in Ihrem Design verwendet wird, um ein Navigationsmenü anzuzeigen.
<?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
Der Speicherort des Themas hängt von dem Namen ab, den Ihr Thema verwendet hat, um das Navigationsmenü zu registrieren. Die CSS-Containerklasse kann beliebig aufgerufen werden. Es umgibt Ihr Navigationsmenü, sodass Sie es entsprechend gestalten können.
Verschiedene Vorlagen-Tags
Im Folgenden sind einige der Tags aufgeführt, die Sie häufig in Ihrem WordPress-Theme verwenden.
// 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 ); ?>
Bedingte Tags in WordPress-Themes
Bedingte Tags sind Funktionen, die Ergebnisse mit True oder False zurückgeben. Diese Bedingungs-Tags können in Ihrem gesamten Theme oder Plugin verwendet werden, um zu sehen, ob bestimmte Bedingungen erfüllt sind, und dann etwas entsprechend zu tun.
Zum Beispiel, ob der aktuelle Beitrag ein vorgestelltes Bild enthält oder nicht. Wenn es kein vorgestelltes Bild enthält, können Sie stattdessen ein standardmäßiges vorgestelltes Bild anzeigen.
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } else { echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumbnail-default.jpg" />'; } ?>
Im Folgenden sind einige weitere bedingte Tags aufgeführt, die Sie verwenden können.
// 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()
Es gibt viele weitere bedingte Tags, die Sie verwenden können. Die vollständige Liste der Bedingungs-Tags finden Sie auf der WordPress-Codex-Seite über bedingte Tags.
Die WordPress-Schleife
Die Schleife oder die WordPress-Schleife ist der Code, der zum Abrufen und Anzeigen von Beiträgen in WordPress verwendet wird. Viele WordPress-Template-Tags funktionieren möglicherweise nur innerhalb der Schleife, da sie mit den post- oder post_type-Objekten verknüpft sind.
Im Folgenden finden Sie ein Beispiel für eine einfache WordPress-Schleife.
<?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; ?>
Um mehr über die Schleife zu erfahren, lesen Sie Was ist eine Schleife in WordPress (Infografik).
Wir hoffen, dass dieser Artikel Ihnen als grundlegender Spickzettel für WordPress-Themen für Anfänger hilft. Vielleicht möchten Sie auch unsere Liste der nützlichsten Tricks für die WordPress-Funktionsdatei sehen.