Support » Installation » CSS vom CHild werden nicht „beachtet“

  • Gelöst Lynnv

    (@lynnv)


    Hallo @ll,

    ich habe mal versucht, ein Childtheme zu erstellen, was soweit auch gelang, allerdings funktioniert das CSS des Childthemes nicht.

    Wenn ich es richtig verstanden habe, werden die CSS des Parentthemes immer ausgeführt, wenn aber in der CSS des Childtheme ein Befehl anders aussieht, nimmt die Webseite diesen.

    Oder liege ich da falsch ?

    Im Head-Abschnitt wird die Child-CSS korrekt angezeigt.
    Mit dem DevTool des Browsers finde ich die CSS-Datei und kann sie öffnen und den Inhalt sehen.

    VG sendet

    Lynn

    • Dieses Thema wurde geändert vor 1 Woche, 6 Tage von Lynnv.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)
  • Hallo,

    Mit dem DevTool des Browsers finde ich die CSS-Datei und kann sie öffnen und den Inhalt sehen.

    Vielleicht ein Cache-Plugin aktiviert?

    Wenn du dann noch die URL oben einträgst, dann können wir uns das auch zunächst im Frontend ansehen und dir sicher besser helfen.

    Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.
    Lies bitte auch noch mal: Bevor du ein neues Thema (Thread) erstellst.

    Viele Grüße
    Hans-Gerd

    Thread-Starter Lynnv

    (@lynnv)

    Hallo Hans-Gerd,

    Plugin für Cache ist nicht installiert.

    
    ### wp-core ###
    
    version: 6.1.1
    site_language: de_DE
    user_language: de_DE
    timezone: Europe/Berlin
    permalink: /%postname%/
    https_status: true
    multisite: false
    user_registration: 0
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 1
    dotorg_communication: true
    
    ### wp-paths-sizes ###
    
    wordpress_path: /usr/local/www/docs/p942589/p942589/html/Neu
    wordpress_size: loading...
    uploads_path: /usr/local/www/docs/p942589/p942589/html/Neu/wp-content/uploads
    uploads_size: loading...
    themes_path: /usr/local/www/docs/p942589/p942589/html/Neu/wp-content/themes
    themes_size: loading...
    plugins_path: /usr/local/www/docs/p942589/p942589/html/Neu/wp-content/plugins
    plugins_size: loading...
    database_size: loading...
    total_size: loading...
    
    ### wp-active-theme ###
    
    name: My-Child-Theme (My-Child-Theme)
    version: 1.0
    author: Administrator
    author_website: https://www.rialogo.de/Neu
    parent_theme: Twenty Twenty-One (twentytwentyone)
    theme_features: core-block-patterns, widgets-block-editor, menus, automatic-feed-links, title-tag, post-formats, post-thumbnails, html5, custom-logo, customize-selective-refresh-widgets, wp-block-styles, align-wide, editor-styles, editor-style, editor-font-sizes, custom-background, editor-color-palette, editor-gradient-presets, responsive-embeds, custom-line-height, experimental-link-color, custom-spacing, custom-units, widgets
    theme_path: /usr/local/www/docs/p942589/p942589/html/Neu/wp-content/themes/My-Child-Theme
    auto_update: Deaktiviert
    
    ### wp-parent-theme ###
    
    name: Twenty Twenty-One (twentytwentyone)
    version: 1.7
    author: WordPress-Team
    author_website: https://de.wordpress.org/
    theme_path: /usr/local/www/docs/p942589/p942589/html/Neu/wp-content/themes/twentytwentyone
    auto_update: Deaktiviert
    
    ### wp-themes-inactive (2) ###
    
    Twenty Twenty-One Child: version: 1.0, author: Administrator, Automatische Aktualisierungen deaktiviert
    My-Child-Theme: version: 1.0, author: Administrator, Automatische Aktualisierungen deaktiviert
    
    ### wp-plugins-active (4) ###
    
    Duplicate Page: version: 4.5, author: mndpsingh287, Automatische Aktualisierungen deaktiviert
    Elementor: version: 3.10.0, author: Elementor.com, Automatische Aktualisierungen deaktiviert
    Max Mega Menu: version: 3.1, author: megamenu.com, Automatische Aktualisierungen deaktiviert
    Unlimited Elements for Elementor: version: 1.5.47, author: Unlimited Elements, Automatische Aktualisierungen deaktiviert
    
    ### wp-media ###
    
    image_editor: WP_Image_Editor_GD
    imagick_module_version: Nicht verfügbar
    imagemagick_version: Nicht verfügbar
    imagick_version: Nicht verfügbar
    file_uploads: File uploads is turned off
    post_max_size: 15M
    upload_max_filesize: 15M
    max_effective_size: 15 MB
    max_file_uploads: 20
    gd_version: bundled (2.1.0 compatible)
    gd_formats: GIF, JPEG, PNG, BMP
    ghostscript_version: 9.26
    
    ### wp-server ###
    
    server_architecture: Linux 4.4.0-210-generic x86_64
    httpd_software: Apache
    php_version: 7.4.16 64bit
    php_sapi: cgi-fcgi
    max_input_variables: 1000
    time_limit: 120
    memory_limit: 128M
    admin_memory_limit: 256M
    max_input_time: 60
    upload_max_filesize: 15M
    php_post_max_size: 15M
    curl_version: 7.47.0 OpenSSL/1.0.2g
    suhosin: false
    imagick_availability: false
    pretty_permalinks: true
    htaccess_extra_rules: false
    
    ### wp-database ###
    
    extension: mysqli
    server_version: 5.7.33-0ubuntu0.16.04.1
    client_version: mysqlnd 7.4.16
    max_allowed_packet: 33554432
    max_connections: 214
    
    ### wp-constants ###
    
    WP_HOME: undefined
    WP_SITEURL: undefined
    WP_CONTENT_DIR: /usr/local/www/docs/p942589/p942589/html/Neu/wp-content
    WP_PLUGIN_DIR: /usr/local/www/docs/p942589/p942589/html/Neu/wp-content/plugins
    WP_MEMORY_LIMIT: 40M
    WP_MAX_MEMORY_LIMIT: 256M
    WP_DEBUG: false
    WP_DEBUG_DISPLAY: true
    WP_DEBUG_LOG: false
    SCRIPT_DEBUG: false
    WP_CACHE: false
    CONCATENATE_SCRIPTS: undefined
    COMPRESS_SCRIPTS: undefined
    COMPRESS_CSS: undefined
    WP_ENVIRONMENT_TYPE: Nicht definiert
    DB_CHARSET: utf8
    DB_COLLATE: undefined
    
    ### wp-filesystem ###
    
    wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    
    

    LG sendet

    Lynn

    • Diese Antwort wurde geändert vor 1 Woche, 6 Tage von Lynnv.

    Hallo,
    ich sehe da lt. Bericht keine Probleme und vermute, dass das Problem möglicherweise in der functions.php und/oder in der style.css des Child Themes steckt. Wie ein Child Theme aufgebaut sein sollte, siehst du z. B. hier.

    Schau doch mal bitte, ob du beispielsweise die style.css des Parent Themes korrekt eingebunden hast. Entsprechende Hinweise findest du in dem folgenden umfangreichen Beitrag.

    Sonst poste doch mal bitte die functions.php und die styles.css. Bitte die Formatierung als Code nicht vergessen.

    BTW: Bei der Erstellung des Berichts solltest du ein wenig mehr Geduld haben:

    plugins_size: loading...
    database_size: loading...
    total_size: loading...

    Viele Grüße
    Hans-Gerd

    Thread-Starter Lynnv

    (@lynnv)

    Guten Morgen Hans-Gerd,

    hier die function:

    <?php
    /* Write your awesome functions below */
    /**
    * Child theme stylesheet einbinden in Abhängigkeit vom Original-Stylesheet
    */
    
    function child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));
    }
    
    add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
    
    function removeGoogleFonts(){
    		global $wp_styles;
    			$regex = '/fonts\.googleapis\.com\/css\?family/i';
    			foreach($wp_styles->registered as $registered) {
    
    				if( preg_match($regex, $registered->src) ) {
    					wp_dequeue_style($registered->handle);
    				}
    			}
    		}
    add_action('wp_enqueue_scripts', 'removeGoogleFonts', 999);
    ?>
    

    und hier die Style:

    
    /*
    Theme Name: My-Child-Theme
    Author URI:   https://www.rialogo.de/Neu
    Version: 1.0
    Description: A child theme of Twenty Twenty-One
    Template: twentytwentyone
    Author: Administrator
    */
    
    /* sintony-regular - latin */
    @font-face {
      font-family: 'Sintony', sans-serif;
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/sintony-v13-latin-regular.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/sintony-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/sintony-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/sintony-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('../fonts/sintony-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/sintony-v13-latin-regular.svg#Sintony') format('svg'); /* Legacy iOS */
    }
    
    /* Variables */
    :root {
    	/* Font Family */
    	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Sintony");
    	--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Sintony");
    }
    
    .site-logo {
        margin-top: -50px;
    }
    
    @media only screen and (min-width: 482px)
    .site-logo .custom-logo {
        width: 200px;
    }
    
    @media only screen and (min-width: 1024px)
    .widget-area {
        grid-template-columns: repeat(3, 1fr);
        display: none;
    }
    
    .widget-area {
        grid-template-columns: repeat(3, 1fr);
        display: none;
    }
    

    Liebe Grüße sendet

    Lynn

    Moderator Bego Mario Garde

    (@pixolin)

    In der functions.php verwendest du eine Funktion, um eingebundenen Google Webfonts nicht zu laden. Warum? Vom Parent-Theme Twenty Twenty-One werden keine Google Fonts eingebunden. Die Funktion hilft auch nicht, wenn z.B. ein Plugin einen Link in den Header einbindet (z.B. per add_action( 'wp_head', '…' );). Das solltest du nochmal prüfen.

    Wenn du nur Änderungen am CSS vornehmen möchtest, solltest du auf ein Child-Theme verzichten. Das reduziert den Wartungsaufwand und macht die Änderungen übersichtlicher. Mit dem Code Snippet add_action( 'customize_register', '__return_true' ); kannst du den Customizer aktivieren, bei dem du eigene CSS-Regeln unter Zusätzliches CSS speicherst.

    Zu den Fonts-Änderungen noch rasch ein Hinweis:
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    versucht zuerst, die Schrift „Helvetica Neue“ zu laden. Findet es die auf dem Computer des Webseitenbesuchers nicht, wird auf Helvetica zurückgegriffen. Findet es die ebenfalls nicht, fällt das Theme auf Arial zurück und wenn auch die fehlt, wird eben „irgendein“ serifenloser Font genommen.
    So gesehen ist es vielleicht keine gute Idee, die gewünschte Schrift als letztes Fallback einzutragen? Was du möchtest, ist vermutlich

    :root {
      --global--font-primary: "Sintony", sans-serif;
      --global--font-secondary: "Sintony", sans-serif;
    

    Vielleicht hilfreich in diesem Zusammenhang: How to customize the Twenty Twenty-One theme with CSS variables.

    Thread-Starter Lynnv

    (@lynnv)

    Hallo Bego Mario Garde,

    ich dachte man muss ein Child-Theme einrichten, weil die CSS-bei einem Update ja verloren gehen ?

    VG sendet

    Lynn

    Moderator Bego Mario Garde

    (@pixolin)

    Nicht, wenn du sie in der Datenbank speicherst.

    Wie speicherst du sie in der Datenbank? Entweder über den Customizer (sofern der angezeigt wird) oder über ein Plugin wie Simple Custom CSS.

    Bei Block-Themes wie Twenty Twenty-One wird im Menü Design kein Link zum Customizer mehr angezeigt. Du kannst trotzdem die Seite https://example.com/wp-admin/customize.php (natürlich mit deiner Domain) aufrufen und dort unter „Zusätzliches CSS“ deine Änderungen vornehmen.
    Wenn du aber unbedingt den Link im Menü Design wieder haben möchtest, hilft die genannte Code-Zeile add_action( 'customize_register', '__return_true' );, die du z.B. mit dem Plugin Code Snippets hinzufügen kannst.

    Thread-Starter Lynnv

    (@lynnv)

    Hallo Bego Mario Garde,

    also im Theme Twenty Twenty-One gibt es den blauen Button CUSTOMIZER, zumindest bei mir.
    Wenn ich jetzt dort CSS-Anpassungen vornehme, bleiben die also bestehen – dann ist doch das mit dem Child-Theme tatsächlich überflüssig.

    Dort funktionieren ja auch die Anpassungen.

    Dein vorgeschlagener Aufruf https://example.com/wp-admin/customize.php erzeugt leider nur eine 404-Seite.

    VG sendet Dir
    Lynn

    Hallo,

    Dein vorgeschlagener Aufruf https://example.com/wp-admin/customize.php erzeugt leider nur eine 404-Seite.

    Du hast aber schon example durch deine Domain ersetzt?

    Eine andere Option besteht auch darin, ein Plugin wie z. B. Customizer Export/Import zu verwenden. In dem Fall wird der Customizer automatisch mit eingebunden.

    Bezüglich der Einbindung vom Customizer bei Block Themes habe ich einen Beitrag erstellt, der möglicherweise hilfreich für dich sein könnte. In dem Beitrag werden verschiedene Möglichkeiten beschrieben.

    Viele Grüße
    Hans-Gerd

    Thread-Starter Lynnv

    (@lynnv)

    Hallo Nochmal Hans-Gerd,

    ja, habe meine Urlangegeben, aber ich habe mich vertippt, nun geht es.

    Nochmal zu meiner Sicherheit, wenn das Theme ein Update erfährt, dann werden die „Zusätzliches CSS“ nicht überschrieben ?

    Vielen Dank und VG sendet

    Lynn

    Hallo,

    Nochmal zu meiner Sicherheit, wenn das Theme ein Update erfährt, dann werden die „Zusätzliches CSS“ nicht überschrieben ?

    Bei einem Update sollte alles erhalten bleiben.

    Ich verfahre allerdings zusätzlich in der Art, dass ich die CSS-Regeln noch mal kopiere, in Notepad++ (ein Editor) einfüge und separat lokal als custom.css sichere.
    Zusätzlich verwende ich bei klassischen Themes das genannte Plugin Customizer Export/Import, um die Einstellungen zu exportieren.

    Sicherungen von der gesamten WordPress-Instanz solltest du auf jeden Fall immer machen.

    Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:
    Gelöst
    Die Option findest du rechts in der Sidebar. Danke.

    Viele Grüße
    Hans-Gerd

    Thread-Starter Lynnv

    (@lynnv)

    Alles klar Hans-Gerd,

    vielen Dank für die vielen Informationen und bleib gesund.

    Lynn

    Hallo Lynn,

    vielen Dank für die vielen Informationen und bleib gesund.

    wünsche ich dir auch – danke für die Rückmeldung und “Gelöst”-Markieren. 👍

    Viele Grüße
    Hans-Gerd

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)