functions.php lädt meine Styles nicht (Custom Template // bootstrap)

  • Hi zusammen,
    ich hänge seit Wochen an einem Problem. Ich habe eine Website entworfen, die ich nun in Wordpress als Custom-Template portiert habe. Wenn ich meine Stylessheets und Skripte über Footer und Header lade, wird die Seite wie gewünscht dargestellt. Leider kommen einige Plugins damit nicht zurecht, weshalb ich die Styles und Skripte über die functions.php laden möchte. Leider funktioniert das überhaupt nicht, obwohl ich die functions.php genau so eingerichtet habe, wie man es machen sollte.

    Kurz zur Erläuterung: Die Seite ist auf Bootstrap aufgebaut, die Firma heißt BoKe, weshalb ich die functions und Templates boke genannt habe, es gibt ein Landing Page-, Newsarchive-, Impressum- und Datenschutz-Template.

    Übersehe ich etwas, muss ich das Custom-Template genauer ansteuern, vielleicht über If-Abfragen? Wenn ich die Wordpress-Systematik richtig verstanden habe, ist mein Custom-Template ein Parent-Template. Hat es vielleicht damit etwas zu tun?

    Meine functions und eine Template-Datei findet Ihr anbei. Schon mal vielen Dank.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    1. [FONT=Courier New]wp_remote_get()[/FONT] wird falsch verwendet, es hat da gar nichts verloren...
    2. Das [FONT=Courier New]jquery[/FONT] Handle ist als Dependency für die Scripts angegeben, wird aber vorher via [FONT=Courier New]wp_deregister_script()[/FONT] aus dem System entfernt, d.h. es existiert nicht, d.h. davon abhängige Scripts werden nicht eingebunden.
    3. Die Datei [FONT=Courier New]style.css[/FONT] wird automatisch geladen, [FONT=Courier New]boke-style[/FONT] ist überflüssig.
    4. Ergänzung: In [FONT=Courier New]index.php[/FONT] fehlt [FONT=Courier New]get_footer()[/FONT]
    5. Ergänzung: [FONT=Courier New]index.php[/FONT] ist ein reservierter Dateiname in WordPress, verwende für eigene Templates einen eigenen Dateinamen.


    Mehr zum Einbinden von Styles und Scripts und reservierte Dateinamen im Theme Handbook bei wordpress.org.

    9 Mal editiert, zuletzt von b3317133 (5. Oktober 2020 um 20:08)

  • Hi, vielen Dank für die schnelle Rückmeldung. Da nicht mal die css Dateien geladen werden, hab ich die Skripte erst mal hinten angestellt. Aber danke für die Tipps, dann werde ich mich doch nochmal tiefer durchwühlen müssen.

    Was das setup angeht, gibt es etwas das essenziell für eun Template ist?

  • Ein Setup ist nicht nötig.

    Ergänzung: Im Anhang eine Minivariante des Themes, das [FONT=Courier New]style.css[/FONT] autom. einbindet.

    In Deinem Seitentemplate steht offenbar in der Mitte des Codes schon [FONT=Courier New]get_footer();[/FONT] also muss es am Ende nicht nochmal ergänzt werden...

  • Okay, ich hab da scheinbar schon etwas grundlegendes falsch gemacht. Die index.php darf, bis auf die WP "get.." Elemente, keinen Code enthalten. Ich schau mir mal die Dokus an und werde alles umstellen und euch wissen lassen, ob es geklappt hat.

    Danke Schon mal.

  • Die [FONT=Courier New]index.php[/FONT] kann und wird schon Code enthalten, es ist nur ein reservierter Dateiname für das Theme und wird für zig Zwecke verwendet, siehe auch hier in der WordPress Template Hierarchy. Daher ist in der o.g. Minivariante nur ein kleiner Platzhalter dafür.

    Für eigene Seitentemplates bzw. Page Templates darf man keine reservierten Dateinamen(teile) nutzen. Daher heisst das eigene Seitentemplate in der o.g. Minivariante [FONT=Courier New]boke-landing.php[/FONT]

    Schau Dir mal ein älteres Standardtheme wie Twenty Ten oder Twenty Twelve an und vergleiche das mit der o.g. Template Hierarchy, damit versteht man die Struktur ggf. besser.

  • Hallo Zusammen,
    nach ein paar Wochen Pause habe ich mich endlich mal wieder tiefer mit meinem Problem befassen können und ich habe (aus Unwissenheit) einige essenzielle Fehler eingebaut. Zur Unterstützung möglicher Leidensgenossen führe ich nachfolgend auf, worauf man beim erstellen von Custom-Themes für Wordpress achten sollte bzw. was explizit meine Fehler waren.

    Der Unteschied zwischen Themes und Templates:
    Mir war von vornherein nicht bewusst, dass es einen Unterschied zwischen Themes und Templates. Ich war der Meinung, dass Theme nur ein anderer Name für Template ist und umgekehrt. Das ist natürlich vollkommen falsch was mir die gedankliche Zuordnung dann etwas erschwert hat. Grundsätzlich ist ein Theme die übergeordnete Layout einer Seite und Templates sind mögliche Vorlagen für Unterseiten oder Seitenbestandteile. Die genaue Analyse der WP Template Hierarchie hat mir wesentlich weitergeholfen.

    WP Head und WP Footer:
    Ein weiterer essenzieller Fehler war, dass ich die Tags <?php wp_head(); ?> und <?php wp_footer(); ?> nicht mit in mein Theme eingebaut habe, weil ich dachte diese nicht zu benötigen. Ohne die Tags ist es Wordpress jedoch unmöglich von WP oder Plugins benötigte Styles und Scripts auf meiner Seite zu laden. Der wp_head gehört bestenfalls direkt vor dem </head>-Tag und der wp_footer vor dem </body>-Tag eingebaut.

    Die functions.php:
    Ach, meine geliebte functions.php! Hier habe ich einige Varianten, die einem das Internet ausspuckt, ausprobiert. Erst wp_register_style und dann wp_enqueue_style, mit genauer Benennung der Styles, mit array und ohne, dies und das und hin und her. Am Ende war es dann diese Variante, die funktioniert hat:

    function boke_scripts_and_styles() {
    // enqueue the main style.css stylesheet
    wp_enqueue_style( 'boke-styles', get_stylesheet_uri() );
    wp_enqueue_style( 'bootstrap_min_css', get_template_directory_uri() . '/assets/css/bootstrap.min.css');

    // enqueue a typography stylesheet
    wp_enqueue_style( 'boke-typography', get_template_directory_uri() . '/assets/css/typography.css' );

    // enqueue main JavaScript file
    wp_enqueue_script( 'boke-main-scripts', get_template_directory_uri() . '/assets/js/script.min.js' );
    wp_enqueue_script( 'bootstrap-scripts', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js' );
    wp_enqueue_script( 'smart_forms_min_js', get_template_directory_uri() . '/assets/js/smart-forms.min.js' );

    }
    add_action( 'wp_enqueue_scripts', 'boke_scripts_and_styles' );

    Was mich dabei wirklich ins Schleudern gebracht hat, war die Verwendung von Handles und Arrays usw. Immer wenn ich diese mit meinem stümperhaften Wissen versucht habe zu verwenden, hat am Ende gar nichts mehr funktioniert. Was das betrifft muss ich mich auf jeden Fall nochmal schlau machen.

    Alles was ich zuvor über wp_remote_get() versucht habe extern zu laden, habe ich übrigens dann per @import -Befehl über die typography.css geladen, das funktioniert ohne Probleme!

    Das ursprüngliche Problem:
    Mein ursprüngliches Problem mit dem Kontakt-Formular-Plugin hatte am Ende wahrscheinlich kaum etwas mit den direkt im Head und Footer eingebauten Styles und Scripts zu tun, denn nachdem ich alles umgebaut und funktionsfähig hatte, hat das Plugin immer noch nicht funktioniert. Des Rätsels Lösung war dann einfach, dass ich das Kontaktformular in einem <form>-Tag verbaut hatte, womit das Plugin nicht zurecht kam. Jetzt wo ich dies in eine <div id="form"> umgebaut und die entsprechende Zuweisung in meiner Css-Datei geändert habe, funktioniert alles wie gewünscht.

    FML, I guess. :D

    Aber zumindest habe ich durch diesen Fehler einiges im Umgang mit WP dazu gelernt und ich bin euch sehr für die Unterstützung dankbar!

    Liebe Grüße und bleibt Gesund!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!