WordPress - Themes: Unterschied zwischen den Versionen

Aus Flinkwiki
Wechseln zu: Navigation, Suche
(→‎Notizen)
 
(13 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
<div align="right"><big>'''[https://flinkwiki.de/index.php?title=Kategorie:Alle_Seiten Seitenübersicht]'''</big></div>
 +
<div align="right"><big>'''[[WordPress|Zur Hauptseite WordPress]]'''</big></div>
 +
 +
  
 
== Grundgerüst ==
 
== Grundgerüst ==
 
''style.css'':
 
''style.css'':
 
  <nowiki>
 
  <nowiki>
−
<?php
 
 
  /*
 
  /*
 
Theme Name: Twenty Fifteen
 
Theme Name: Twenty Fifteen
Zeile 20: Zeile 23:
 
*/
 
*/
  
−
 
−
?>
 
 
</nowiki>
 
</nowiki>
  
Zeile 34: Zeile 35:
  
 
----
 
----
 +
 
== Template Tags ==  
 
== Template Tags ==  
  
Zeile 247: Zeile 249:
  
 
----
 
----
 +
== Beispiel für die Erstellung eines Themes ==
 +
 +
Download der Vorlage von http://www.initializr.com/
 +
 +
''index.html'' aufteilen auf
 +
* ''header.php''
 +
* ''index.php''
 +
* ''sidebar.php''
 +
* ''footer.php''
 +
 +
<?php echo get_stylesheet_directory_uri(); ?>
 +
 +
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js"></script>
 +
 +
 +
<nowiki><title> <?php bloginfo('name'); ?> </title></nowiki>
 +
 +
<nowiki><h1 class="title"> <?php bloginfo('name'); ?></h1></nowiki>
 +
 +
----
 +
 +
Website-Namen als Link für die Startseite einrichten:
 +
<nowiki>
 +
<h1 class="title">
 +
<a href="<?php bloginfo('url'); ?>"</<> <?php bloginfo('name'); ?>
 +
</h1>
 +
</nowiki>
 +
 +
----
 +
 +
do_action
 +
 +
the_excerpt
 +
 +
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );
 +
 +
 +
 +
=== Links ===
  
 
* https://www.urbanstudio.de/blog/wordpress-template-dateien-ueberblick/
 
* https://www.urbanstudio.de/blog/wordpress-template-dateien-ueberblick/
Zeile 252: Zeile 293:
 
* https://wphierarchy.com/
 
* https://wphierarchy.com/
  
−
 
+
* https://developer.wordpress.org/themes/basics/the-loop/
  
 
----
 
----

Aktuelle Version vom 15. August 2020, 21:41 Uhr

Seitenübersicht
Zur Hauptseite WordPress


Grundgerüst

style.css: 

 /*
Theme Name: Twenty Fifteen
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, two-columns, left-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

index.php: 

<?php

the_post();
the_title();

Template Tags

Conditional Tags

Schlagwörter

Schlagwörter aktivieren

Dieser Code wird in die functions.php des Themes eingefügt (wp-content/themes/<themename>/functions.php).[1] 

// add tag support to pages
function tags_support_all() {
	register_taxonomy_for_object_type('post_tag', 'page');
}

// ensure all tags are included in queries
function tags_support_query($wp_query) {
	if ($wp_query->get('tag')) $wp_query->set('post_type', 'any');
}

// tag hooks
add_action('init', 'tags_support_all');
add_action('pre_get_posts', 'tags_support_query');

Kommentare

-> You will need to define your custom callback function in your theme's functions.php file.

Hier kann man folgende Vorlage entnehmen: 

function mytheme_comment($comment, $args, $depth) {
    if ( 'div' === $args['style'] ) {
        $tag       = 'div';
        $add_below = 'comment';
    } else {
        $tag       = 'li';
        $add_below = 'div-comment';
    }?>
    <<?php echo $tag; comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID() ?>"><?php 
    if ( 'div' != $args['style'] ) { ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body"><?php
    } ?>
        <div class="comment-author vcard"><?php 
            if ( $args['avatar_size'] != 0 ) {
                echo get_avatar( $comment, $args['avatar_size'] ); 
            } 
            printf( __( '<cite class="fn">%s</cite> <span class="says">says:</span>' ), get_comment_author_link() ); ?>
        </div><?php 
        if ( $comment->comment_approved == '0' ) { ?>
            <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em><br/><?php 
        } ?>
        <div class="comment-meta commentmetadata">
            <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>"><?php
                /* translators: 1: date, 2: time */
                printf( 
                    __('%1$s at %2$s'), 
                    get_comment_date(),  
                    get_comment_time() 
                ); ?>
            </a><?php 
            edit_comment_link( __( '(Edit)' ), '  ', '' ); ?>
        </div>

        <?php comment_text(); ?>

        <div class="reply"><?php 
                comment_reply_link( 
                    array_merge( 
                        $args, 
                        array( 
                            'add_below' => $add_below, 
                            'depth'     => $depth, 
                            'max_depth' => $args['max_depth'] 
                        ) 
                    ) 
                ); ?>
        </div><?php 
    if ( 'div' != $args['style'] ) : ?>
        </div><?php 
    endif;
}


Child Themes

Es muss im folgende Verzeichnisse angelegt werden:

  1. Im Ordner themesas Child-Theme-Verzeichnis (meintheme-child), darin die Dateien
  2. style.css und
  3. functions.php

Hier der Dateikopf für style.css: Wichtig ist der Eintrag Template. Beispiel: twentyfifteen-child: 

/*
 Theme Name:   Twenty Fifteen Child
 Description:  Twenty Fifteen Child Theme
 Author:       Heinrich Flink
 Template:     twentyfifteen
 Version:      1.0.0
*/

@import url("../twentyfifteen/style.css");

Hier das Grundgerüst für functions.php: Wichtig ist der Eintrag $parent_style = 'twentyfifteen-style';. Beispiel für twentyfifteen-child: 

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Footer-Menü

Dies ist ein Beispiel für ein manuell erstelltes Fußzeilen-Menü. Idealerweise wird es in einem Child-Theme realisiert. Wenn man kein Child anlegen kann (weil das zugrunde liegende Theme schon ein Child ist), muss man die Eintragungen in die Dateien des "Basis"-Themes vornehmen. Nach einem Update des Themes müssen diese dann von Neuem manuell vorgenommen werden.

  • style.css: Dieser Eintrag wird am Ende des Dokuments hinzugefügt.
.myfooter{
text-align: center;
margin-left: 40px;
padding:20px 0
}

.myfooter a{
color: #5858FA;
}


  • footer.php: Dieser Eintrag muss am Beginn der Codierung stehen.
<footer><div  class="myfooter"><a href="http://example.com/ueber-mich/">Über mich</a>        <a href="http://example.com/impressum/">Impressum & Datenschutz</a>        <a href="http://example.com/kontakt/">Kontakt</a></div></footer>

Bilder

Thumbnail: 880x660 Pixel

Troubleshooting

System Status

  • PHP Time Limit

zu niedrig eingestellt.

>> In wp-config.php über der Zeile mit "Happy blogging" z. B. folgende Zeile einfügen: 

set_time_limit(180);

[2]

  • PHP Max Input Vars

zu niedrig.

>> Im Document root eine Datei .user.ini anlegen. Hier z. B. folgenden Eintrag hinterlegen: 

max_input_vars = 5000;
[3]


Notizen

Mindestens notwendig:

index.php

style.css: wichtig Theme Name:


single.php: > einzelne Beiträge

Beispiel für die Erstellung eines Themes

Download der Vorlage von http://www.initializr.com/

index.html aufteilen auf

  • header.php
  • index.php
  • sidebar.php
  • footer.php
<?php echo get_stylesheet_directory_uri(); ?>

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js"></script>


<title> <?php bloginfo('name'); ?> </title>

<h1 class="title"> <?php bloginfo('name'); ?></h1>

Website-Namen als Link für die Startseite einrichten: 

<h1 class="title"> 
		<a href="<?php bloginfo('url'); ?>"</<>	<?php bloginfo('name'); ?>
		</h1>


do_action

the_excerpt

add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );


Links

Links und Quellen



|

Abgerufen von „https://flinkwiki.de/index.php?title=WordPress_-_Themes&oldid=1215“