Wie wende ich auf jede WordPress-Seite ein anderes Stylesheet an?

Question 1

Ich bin neu in der Webentwicklung und habe meine erste WordPress-Site nur mit HTML und CSS (+ ein bisschen Javascript) entwickelt. Meine Website hat für jede HTML-Seite ein anderes CSS-Stylesheet, aber ich kann anscheinend nicht mehr als ein Blatt korrekt mit meiner WordPress-Website verknüpfen. Ich habe einen Ordner in meinem lokalen wp-Theme-Speicherort, der nur den CSS-Dateien gewidmet ist, die jeweils mit pagename_style.css bezeichnet sind.

Ich bin mir ziemlich sicher, dass es etwas ist, das ich in meiner functions.php vermisse, und vermute, dass ich Bedingungen für jede Seite der Website verwenden muss, aber ich habe große Probleme herauszufinden, wie das aussieht. Ich habe das Internet nach ähnlichen Situationen durchsucht und seltsamerweise nichts gefunden (vielleicht, weil die Antwort etwas Offensichtliches ist, das ich vermisse).

Und auf einer weniger relevanten Anmerkung werden meine Google-Fonts völlig ignoriert, wenn sie zuvor gut mit meinem HTML verknüpft waren. Irgendwelche Ideen, vielleicht ist es meine Syntax?

Unten ist, was ich versucht habe, wenn das eine Hilfe ist. Vielen Dank im Voraus tt

function my_setup() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
   
    wp_enqueue_style('home', get_template_directory_uri() . '/css/home_style.css', microtime());

    wp_enqueue_style('about', get_template_directory_uri() . '/css/about_style.css', microtime());

    wp_enqueue_style('diary', get_template_directory_uri() . '/css/diary_style.css', microtime());

    wp_enqueue_style('post', get_template_directory_uri() . '/css/post_style.css', microtime());

    wp_enqueue_style('work', get_template_directory_uri() . '/css/work_style.css', microtime());

    wp_enqueue_style('web-dev', get_template_directory_uri() . '/css/web-dev_style.css', microtime());

    wp_enqueue_style('storyteller', get_template_directory_uri() . '/css/storyteller_style.css', microtime());

    wp_enqueue_style('fashion', get_template_directory_uri() . '/css/fashion_style.css', microtime());

    wp_enqueue_style('contact', get_template_directory_uri() . '/css/contact_style.css', microtime());

    if(is_page('home')) {
        wp_enqueue_style('home');
    }
    
    if(is_page('about')) {
        wp_enqueue_style('/css/about_style.css');
    }
}

add_action('wp_enqueue_scripts', 'my_setup');

Question 2

Wenn Sie wie zu Beginn wp_enqueue_style() verwenden, wird style bereits global auf jeder Seite geladen. Wenn Sie einer bestimmten Seite eine Bedingung zuweisen möchten, fangen Sie gut an. Wenn Sie mehr darüber erfahren möchten, lesen Sie den offiziellen Artikel von WP und ihren berühmten Kodex Webseite.

function my_setup() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
  

    if(is_page('home')) {
    wp_enqueue_style('home', get_template_directory_uri() . '/css/home_style.css');
    }
    
    if(is_page('about')) {
    wp_enqueue_style('about', get_template_directory_uri() . '/css/about_style.css');
    }
    // etc

}

add_action('wp_enqueue_scripts', 'my_setup');

Question 3

Werfen Sie einen Blick auf die Dokumentation für wp_enqueue_style(). Du hast microtime() in dem $dependency Streit. Das bedeutet, dass sie nicht geladen werden, da kein Stil mit dem Griff vorhanden ist 1234567891011 (oder was auch immer die aktuelle Zeit ist) geladen wird, weil es nicht existiert.

Wenn ich Sie wäre, würde ich neu bewerten, ob für jede Seite eine vollständig separate CSS-Datei erforderlich ist. Aber wenn das gesagt ist, denke ich, dass Sie die Dinge auch ein wenig verkomplizieren. Sie können verwenden wp_register_style() um die Dateien bereit zu machen und sie dann auf der entsprechenden Seite einzureihen, aber wp_enqueue_style tatsächlich registriert und reiht sie ein. Wenn sie also in Ihrem Beispiel geladen würden, würden sie ALLE laden.

Da Sie eine bequeme Namenskonvention von haben post_name = post_name_style.cssich denke, Sie wären besser bedient, wenn Sie sich den aktuellen Seitennamen ansehen und diese CSS-Datei laden.

Auch zu beachten, nicht verwenden microtime() als die Version, da sie jegliches Caching verhindert. Ihre beste Wette ist zu verwenden filemtime() und get_stylesheet_directory() um den Zeitpunkt der letzten Änderung der Datei als Version abzurufen. Das heißt, es wird jedes Mal aktualisiert, wenn Sie es ändern, aber bis dahin zwischengespeichert bleiben (natürlich basierend auf Ihren Server- / Browsereinstellungen).

Schließlich gibt es einen Unterschied zwischen get_template_[…] und get_stylesheet_[…] Funktionen. Im Allgemeinen ist es vorzuziehen, es zu verwenden get_stylesheet_[…] in einem Thema, weil es auf das derzeit aktive Thema verweist, während get_template_[…] verweist auf das übergeordnete Thema, falls vorhanden (dies könnte auch ein Teil Ihres Problems sein, je nachdem, wie Ihre Struktur aussieht)

(Re: Google, es sollte funktionieren? Versuchen Sie vielleicht, das Handle zu ändern)

Auch hier würde ich die Notwendigkeit einzelner CSS-Dateien neu bewerten, aber angesichts Ihres aktuellen Codes wäre es wahrscheinlich am einfachsten / am besten wartbar, so etwas wie das Folgende zu tun, solange Sie die behalten post_name = post_name_style.css Struktur:

function my_setup() {
    wp_enqueue_style('google-fonts-notosanjp-press-start-2p-roboto', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
    
    $slug = get_post_field( 'post_name', get_the_ID() ); // 'home', 'about', 'web-dev', etc.
    if( file_exists( get_stylesheet_directory()."/css/{$slug}_style.css" ) ){
        wp_enqueue_style( $slug, get_stylesheet_directory_uri()."/css/{$slug}_style.css", [], filemtime( get_stylesheet_directory()."/css/{$slug}_style.css" ) );
    }
}
add_action('wp_enqueue_scripts', 'my_setup');

Question 4

Vielen Dank an diejenigen, die geantwortet haben! Ich habe eigentlich eine viel einfachere Lösung gefunden, die darin besteht, die jeweilige CSS-Datei in jede einzelne PHP-Seite einzubinden. Ich habe es indirekt aus einem anderen SO-Post entdeckt. In Zukunft werde ich mich so weit wie möglich an eine CSS-Datei halten, das ist sicher. Unten ist ein Beispiel dafür, was ich getan habe, falls es jemand anderem da draußen hilft:

<style>
<?php include 'CSS/single_style.css'; ?>
</style>
//where single_style is the file name