web-dev-qa-db-fra.com

Pourquoi je ne peux pas ajouter de style CSS dans ce thème WordPress?

J'essaie d'ajouter un style CSS à un thème WordPress que je développe, comme le montre ce didacticiel: http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and -styles-in-wordpress/ mais semble ne pas fonctionner et je ne comprends pas pourquoi.

Voici donc le fichier head.php de mon thème personnel:

<!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 />

Et dans mon functions.php fichier, j'ai mis le code suivant:

<?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');
?>

Mais le fichier style.css n'est pas chargé. Pourquoi? Qu'est-ce que je rate?

En particulier, ce que je ne comprends pas dans le didacticiel précédent est comment et comment le wpb_adding_styles () est appelé car il n’appelle jamais dans le fichier header.php.

Quelqu'un peut m'aider?

Tnx

Andrea

theme-developmentthemescsswp-enqueue-scriptwp-enqueue-style
5
AndreaNobili

Vous utilisez plugins_url - vous indiquez donc un répertoire complètement différent de votre thème actuel. Si vous essayez juste de mettre en file d'attente un style de thème, procédez comme suit:

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');

le wp_enqueue_style prend quelques paramètres. Dans l'exemple ci-dessus, j'utilise:

  • Un identifiant unique (handle) - je peux ensuite l'utiliser pour les dépendances
  • Chemin vers le style lui-même - cela devrait être évident
  • Un array() de dépendances (dans ce cas vide) - par exemple, si nous avions deux styles en file d'attente, nous pourrions définir dans le second array('main-css') et WP serait alors WAITED jusqu'à ce que le style avec l'identifiant du style main-css est chargé avant de le charger.
  • Version - Maintenant, cela peut être ce que vous voulez. Je règle toujours ceci comme par exemple lorsque je mets à jour des thèmes et qu'un client a des problèmes, je peux rapidement déterminer la version simplement en regardant le code. Un autre avantage est que la mise à jour des fichiers avec un numéro de version supérieur (ou inférieur) garantit que les styles sont réellement chargés au lieu d'être extraits du cache.
  • Le dernier concerne uniquement les supports pour lesquels cette feuille de style a été définie.

PS Pas besoin de l'enregistrer d'abord. C'est aussi sûr que de s'enregistrer puis de l'appeler via une file d'attente. Si vous souhaitez enregistrer vos scripts, mais pas les charger directement dans vos pages, vous pouvez enregistrer les fichiers une fois, puis les charger quand vous en avez besoin en appelant simplement wp_enqueue_script( $handle ) (il suffit de passer le $ handle et le reste sera pris à partir du wp_register_script()). Donc, si vous voulez simplement le charger (ce qui représente 99% des cas), vous pouvez simplement l'omettre.

Référence:

En ce qui concerne votre fichier header.php cette partie:

<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>
-->

doit être supprimé et tout script doit être ajouté à WP de la même manière que vous ajoutez des styles. Par exemple:

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');

Il en va de même pour les autres éléments tels que les polices Google, etc. Utilisez également wp_enqueue_scripts pour les ajouter également:

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' );

Si j'ai ADD_YOUR_DESIRED_FONT_FAMILIES_HERE, vous devez ajouter des familles de polices à partir de la police Google. Si vous voulez plusieurs, il suffit de les diviser avec |. Par exemple, si je veux les polices Roboto et PT Serif, je l’écrirai comme ceci Roboto:400,700,300|PT+Serif:400,700,400italic

5
Borek

  1. Lors de l'enregistrement et de la mise en file d'attente de fichiers CSS, vous devez utiliser wp_register_style() et wp_enqueue_style().

  2. Si ce code se trouve dans le fichier functions.php de votre thème, vous souhaitez utiliser get_template_directory_uri() pour référencer le chemin de vos fichiers CSS personnalisés.

Votre code est très proche, mais devrait être corrigé comme suit:

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