Was ist der beste Weg, CSS für mehrere Header-Layouts / mehrere benutzerdefinierte Header.php-Dateien zu behandeln?

Also baue ich ein neues Thema basierend auf Unterstrichen. Bis jetzt habe ich es geschafft, dass ACF Pro verschiedene Header-Dateien von einer Dropdwon-Auswahl auf der Optionen-Seite aufruft, aber jetzt muss ich feststellen, wie die CSS für jede der benutzerdefinierten Header-Dateien am besten zu handhaben ist um Widget-Bereiche basierend darauf zu laden, welche Header-Datei geladen ist.

Zuerst das css-Bit: Da das Underscores-Theme sehr minimale Style-Regeln hat, dachte ich, dass es keine schlechte Idee wäre, Header-spezifische CSS-Dateien basierend auf der von ACF Pro in den Optionen aufgerufenen Header-Datei aufzunehmen Seite. Zum Beispiel würde ich eine Header-Datei namens header-slim.php erstellen und in meiner functions-Datei eine Art ‘if’ header = header-slim.php machen und dann header-slim.css laden. Auf diese Weise würde ich nur eine kleine CSS-Datei für den gewählten Header laden, eine normale style.css-Datei und dann für verschiedene Fußzeilen eine footer.css-Datei (zB: footer-full-width.css).

Wenn dies ein akzeptabler Weg ist, um das Konzept des mehrfachen Kopfzeilenlayouts auszuführen, was genau würde ich dann in meine functionsdatei einfügen? Ein weiteres Detail ist, dass, wenn keine Header-Layout-Option ausgewählt ist, das Thema die normale get_header () als Standardfunktion ausführen wird.

Nun zu den Header-Widgets: Korrigieren, wenn ich falsch liege (was oft der Fall ist), aber wenn ich die header1.php-Datei lade und sie drei Widget-Bereiche enthält, erscheinen diese drei Widgets automatisch in den verfügbaren Widgets auf der Widgets-Seite in WP Admin, oder? Nach dem Laden eines Headers müsste ich natürlich die Widgets-Seite aktualisieren, und solange diese Widgets-Bereiche in meiner functionsdatei registriert wurden, würden sie geladen werden, vorausgesetzt, es gibt eine Header-Datei, die die registrierten Widgets aufruft, richtig?

Ich habe hier und im Internet ziemlich viel gegraben und ich habe noch nichts gefunden, was meine Fragen spezifisch angeht. Wenn hier etwas ist und ich es verpasst habe, bitte vergib mir.

Ich würde gerne spezielle Hilfe bei dem bekommen, was ich erreichen möchte, wenn es euch nichts ausmacht.

Danke vielmals! Strahl

UPDATE: Hier sind einige Codebits, die Sie sich ansehen sollten.

Dies ist, was ich am Anfang meiner index.php Datei habe, um den Header zu drucken, der auf der ACF Pro Options Seite ausgewählt wurde:

 

Und hier ist, was ich zu meiner functions.php Datei hinzugefügt habe – ich habe den “ausgewählten_header” zu “select_header_layout” geändert, um mit dem übereinzustimmen, was ich in der index.php Datei habe. Hier kommt das Chaos …

 function my_header_css_scripts () { switch (get_field ('select_header_layout', 'option')) { case 'header-black.php': $appropriateHeader = 'header-black.css'; break; case 'header-gray.php': $appropriateHeader = 'header-gray.css'; break; case 'header-red.php': $appropriateHeader = 'header-red.css'; break; default: $appropriateHeader = 'header-default.css'; break; } wp_enqueue_style ('my_header_css_scripts', get_theme_file_uri('/wp-content/themes/rm-acf1/hdr-styles/' . $appropriateHeader)); } add_action ('wp_enqueue_scripts', 'my_header_css_scripts'); 

Hier ist der Code, den ich in meiner functions.php-Datei gerade habe (4. Januar 2016 @ 16.30 Uhr):

 function my_header_css_scripts () { switch (get_field ( 'chosen_header', 'option' )) { case 'header-black.php': $appropriateHeader = 'header-black.css'; break; case 'header-gray.php': $appropriateHeader = 'header-gray.css'; break; case 'header-red.php': $appropriateHeader = 'header-red.css'; break; default: $appropriateHeader = 'header-default.css'; break; } wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader ); } add_action ('wp_enqueue_scripts', 'my_header_css_scripts'); 

Solutions Collecting From Web of "Was ist der beste Weg, CSS für mehrere Header-Layouts / mehrere benutzerdefinierte Header.php-Dateien zu behandeln?"

So verwenden Sie nicht get_theme_file_uri();

Sie müssen das Verzeichnis RELATIVE für das Verzeichnis Ihres aktuell aktiven Themes angeben.

Wenn beispielsweise das aktuell aktivierte Thema rm-acf1 und sich alle benutzerdefinierten CSS-Headerdateien im Unterordner hdr-styles .

  • Das ist dein Themenverzeichnis: ./wp-content/rm-acf1/
  • Dies ist Ihr ./wp-content/rm-acf1/hdr-styles/ Verzeichnis: ./wp-content/rm-acf1/hdr-styles/

Also, wenn Sie get_theme_file_uri(); Ohne Parameter sollte es standardmäßig auf ./wp-content/rm-acf1/ .

Nun möchten Sie in Ihrer Situation Dateien in einem Unterverzeichnis innerhalb Ihres aktuell aktivierten Themenverzeichnisses ausrichten, so dass Sie den relativen Pfad angeben müssen.

Sie würden es wie get_theme_file_uri( 'hdr-styles/' . $appropriateHeader ); : get_theme_file_uri( 'hdr-styles/' . $appropriateHeader );


EDIT in Bezug auf Ihren Fehler: Fatal error: Call to undefined function get_theme_file_uri()

Versuchen Sie stattdessen Folgendes:

wp_enqueue_style( 'my_header_css_scripts', get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader );

und eigentlich sollte das Stil-Handle das zu ladende Stylesheet reflektieren. Also anstatt “my_header_css_scripts” generisch für das geladene Stylesheet zu verwenden, vielleicht etwas wie basename($appropriateHeader)

Beispiel:

wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader );

Ja, Ihr Ansatz zum Laden von headerspezifischem CSS klingt gut. Sie könnten so etwas in der functions.php tun:

 function my_header_css_scripts () { switch (get_field ('chosen_header', 'option')) { case 'header-slim.php': $appropriateHeader = 'header-slim.css'; break; case 'header-whatever.php': $appropriateHeader = 'whatever.css'; break; default: $appropriateHeader = 'header.css'; break; } wp_enqueue_style ('my_header_css', get_theme_file_uri ('/themepath/to/css/' . $appropriateHeader)); } add_action ('wp_enqueue_scripts', 'my_header_css_scripts'); 

Für die Widgets … ist nicht ganz klar, was Sie fragen, aber zur Zusammenfassung: Sie können bestimmte Widgets mit dem Widget oder den im Admin-Bereich angegebenen Widgets mithilfe von dynamic_sidebar platzieren . Ihre ausgewählte Header-PHP-Datei kann die Widget-Auswahl im Admin-Bereich nicht ändern, da sie nur zur Ausgabe eines Seitenkopfes dient. Stattdessen könnten Sie mehrere neue Widget-Bereiche definieren, wie in diesem Beitrag von schnalleupstudios.com gezeigt , eine für jeden Header-Typ, und dann würden die Widgets jeder Kopfzeile im Admin-Bereich angepasst werden können. Wenn Sie im Admin-Bereich nur den Widget-Bereich für den aktuell ausgewählten Header anzeigen möchten, müssen Sie sich vermutlich in die Admin-Widgets-Seite einklinken und die anderen Widget-Bereiche ausblenden.

Nachdem ich mich am Kopf kratzt und ein paar Dinge ausprobiert habe, freue ich mich, Ihnen mitteilen zu können, dass dank @iguurarama und @Michael Ecklund die verschiedenen Header, die Stylesheets aufrufen, jetzt funktionieren! 🙂 Ich möchte euch beiden für eure Hilfe danken … ernsthaft! Ich habe den Code, der jetzt in meiner functions.php-Datei funktioniert, eingefügt, damit ihr sie euch ansehen könnt. Jetzt muss ich herausfinden, wie man entsprechende Widgets auf der Widget-Admin-Seite in WP-Admin anzeigt. Was ich damit meine ist, wenn ich Kopfzeile sage, Header-1, die einzigen verfügbaren Header-Widgets in der Widget-Admin-Seite sind Widgets, die in Header-1 auf dem Front-End angezeigt werden.

Hier ist der Code, der funktioniert:

 function my_header_css_scripts () { switch (get_field ( 'select_header_layout', 'option' )) { case 'black': $appropriateHeader = 'header-black.css'; break; case 'gray': $appropriateHeader = 'header-gray.css'; break; case 'red': $appropriateHeader = 'header-red.css'; break; default: $appropriateHeader = 'header-default.css'; break; } wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader ); } add_action ('wp_enqueue_scripts', 'my_header_css_scripts');