it-swarm.com.de

Warum kann ich in diesem WordPress-Theme keinen CSS-Stil hinzufügen?

Ich versuche, einem WordPress-Theme, das ich entwickle, einen CSS-Stil hinzuzufügen, wie in diesem Tutorial gezeigt: http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and -styles-in-wordpress/ aber scheint nicht zu funktionieren und ich kann nicht verstehen warum.

Das ist also die head.php Datei meines persönlichen Themas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<!--
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
-->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- <?php bloginfo('stylesheet_directory'); ?>/ -->
<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.js"></script>
<!--
<script language="javascript" type="text/javascript">    
    if(f)
    {
        write_css('<?php bloginfo('stylesheet_directory'); ?>');
    }
</script>
-->

<?php wp_head(); ?>
</head>
<body>
<center>
<div id="page">
<div id="header">

<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<hr />

Und in meine functions.php Datei habe ich folgenden Code eingefügt:

<?php
function wpb_adding_styles() {
    wp_register_script('my_stylesheet', plugins_url('style.css', __FILE__));
    wp_enqueue_script('my_stylesheet');
}

add_action('wp_enqueue_scripts', 'wpb_adding_styles');
?>

Die Datei style.css wird jedoch nicht geladen. Warum? Was vermisse ich?

Insbesondere ist das, was ich im vorherigen Tutorial nicht verstehen kann, wie und wo das wpb_adding_styles () aufgerufen wird, da es in der header.php-Datei niemals aufgerufen wird.

Kann mir jemand helfen?

Tnx

Andrea

5
AndreaNobili

Sie verwenden plugins_url und verweisen daher auf ein völlig anderes Verzeichnis als Ihr aktuelles Thema. Wenn Sie nur versuchen, einen Themenstil in eine Warteschlange zu setzen, gehen Sie folgendermaßen vor:

function load_theme_styles() { 
    wp_enqueue_style('main-css', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'load_theme_styles');

der wp_enqueue_style akzeptiert einige Parameter. Im obigen Beispiel verwende ich:

  • Eine eindeutige ID (Handle) - ich kann sie dann für Abhängigkeiten verwenden
  • Weg zum Stil selbst - das sollte klar sein
  • Eine array() von Abhängigkeiten (in diesem Fall leer) - wenn wir beispielsweise zwei Stile in die Warteschlange gestellt hätten, könnten wir in der zweiten array('main-css') und WP dann auf den Stil mit der ID des main-css-Stils warten wird vor dem Laden geladen.
  • Version - Jetzt können Sie wählen, was Sie wollen. Ich stelle dies immer so ein, als ob ich beispielsweise Themen aktualisiere und ein Client Probleme hat. Ich kann die Version schnell ermitteln, indem ich nur den Code betrachte. Eine weitere gute Sache ist, dass das Aktualisieren von Dateien mit einer höheren (oder niedrigeren) Versionsnummer sicherstellt, dass die Stile tatsächlich geladen werden, anstatt aus dem Cache gezogen zu werden.
  • Das letzte ist nur das Medium, für das dieses Stylesheet definiert wurde.

PS. Keine Notwendigkeit, es zuerst zu registrieren. Es ist genauso sicher wie das Registrieren und anschließende Aufrufen per Enqueue. Wenn Sie Ihre Skripte registrieren möchten, diese aber nicht direkt in Ihre Seiten laden möchten, können Sie die Dateien einmal registrieren und sie dann bei Bedarf laden, indem Sie einfach wp_enqueue_script( $handle ) aufrufen (übergeben Sie einfach das $ -Handle, und der Rest wird aus dem wp_register_script()). Wenn Sie es also nur laden möchten (was 99% der Fälle ist), können Sie es einfach weglassen.

Referenz:

Wie für Ihre header.php-Datei dieser Teil:

<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.js"></script>
<!--
<script language="javascript" type="text/javascript">    
    if(f)
    {
        write_css('<?php bloginfo('stylesheet_directory'); ?>');
    }
</script>
-->

sollte gelöscht werden und jedes Skript sollte zum WP hinzugefügt werden, genauso wie Sie Stile hinzufügen. Zum Beispiel:

function load_Java_scripts() {
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_Java_scripts');

Das Gleiche gilt für andere Elemente wie zum Beispiel Google-Schriftarten usw. Verwenden Sie wp_enqueue_scripts, um sie ebenfalls hinzuzufügen:

function load_google_fonts() {
    $protocol = is_ssl() ? 'https' : 'http';
    wp_enqueue_style( 'theme-default-fonts', "$protocol://fonts.googleapis.com/css?family=ADD_YOUR_DESIRED_FONT_FAMILIES_HERE' rel='stylesheet' type='text/css" );}
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );

Wo ich ADD_YOUR_DESIRED_FONT_FAMILIES_HERE habe, sollten Sie Schriftfamilien aus Google-Schriftarten hinzufügen. Wenn Sie mehrere möchten, teilen Sie sie einfach mit |. Zum Beispiel, wenn ich Roboto-Schriftart und PT Serif-Schriftart möchte, würde ich es so schreiben Roboto:400,700,300|PT+Serif:400,700,400italic

5
Borek
  1. Beim Registrieren und Einreihen von CSS-Dateien müssen Sie wp_register_style() und wp_enqueue_style() verwenden.

  2. Befindet sich dieser Code in der Datei functions.php Ihres Themas, möchten Sie get_template_directory_uri() verwenden, wenn Sie auf den Pfad Ihrer benutzerdefinierten CSS-Dateien verweisen.

Ihr Code ist sehr ähnlich, sollte jedoch wie folgt korrigiert werden:

function wpb_adding_styles() {
        wp_register_style('my_stylesheet', get_template_directory_uri() . '/style.css');
        wp_enqueue_style('my_stylesheet');
}

add_action('wp_enqueue_scripts', 'wpb_adding_styles');
2
Rachel Baker