WordPress : comment appeler des fichiers dans un thème enfant?

Publié par Jean-Michel le

J’ai créé un thème enfant « my-theme » . Dans style.css, je n’ai rien écrit, juste les détails obligatoires que j’y ai écrits.

/*
Theme Name:     my-theme
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Bhuvnesh
Author URI:     http://example.com/about/
Template:       my-theme
Version:        0.1.0
*/

Toutes les règles de style que j’écris dans le fichier « my-theme/css/style.css » . Maintenant dans index.php j’appelle ceci <?php get_header(); ?>appellera header.php maintenant dans le fichier header.php j’appelle ce fichier css comme

<link href="css/style.css" rel="stylesheet" type="text/css" />

mais cela ne charge pas mon css. même chose comme ça, j’appelle certains fichiers .js qui se trouvent sous le répertoire « my-theme/js/ » comme

<script type="text/javascript" src="js/jquery-1.7.2.min.js"> </script>

cela ne se charge pas non plus.

Je sais que je fais des erreurs pour appeler des fichiers ou peut-être dans functions.php .

Je viens de copier le fichier functions.php complet de Twentytwelve . Y a-t-il une erreur que je fais?

S’il vous plaît dites-moi ce qu’il faut écrire dans le fichier functions.php et comment appeler des fichiers comme les fichiers js sous le répertoire js .php sous le répertoire includes , les images sous le répertoire Images.

J’ai cherché comment créer un thème enfant et c’est fait mais impossible d’appeler des fichiers.

Aidez-moi s’il vous plaît! Je vous serai très reconnaissant !!!!

Solution n°1 trouvée

Tous vos fichiers js et css inclus sont inclus en utilisant des chemins relatifs. C’est mauvais.

Vous constaterez que l’utilisation d’un thème enfant n’est pas pertinente, car il est horriblement rompu avec et sans thème enfant.

Donc, à la place, apprenez à mettre en file d’attente les styles et les scripts correctement en utilisant wp_enqueue_styledans functions.php

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

function theme_styles()
{
  // Register the style like this for a theme:
  // (First the unique name for the style (custom-style) then the src,
  // then dependencies and ver no. and media type)
  wp_register_style( 'custom-style',
    get_template_directory_uri() . '/css/style.css',
    array(),
    '20120208',
    'all' );

  // enqueing:
  wp_enqueue_style( 'custom-style' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

et wp_enqueue_script:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

function my_scripts_method() {
    wp_enqueue_script( 'jquery' );
}

add_action('wp_enqueue_scripts', 'my_scripts_method');

Remarques finales :

  • N’incluez jamais de scripts et de styles directement dans header.php
  • Utilisez toujours wp_enqueue_style et wp_enqueue_script
  • Si vous n’utilisez pas ces fonctions, les plugins de mise en cache ne peuvent pas les modifier et vous manquez des choses
  • Ne regroupez jamais JQuery dans votre thème, utilisez toujours la copie fournie via WordPress, sans oublier de regrouper une version aussi obsolète que v1.7.x

Solution n°2 trouvée

On ne se contente pas de jeter <link>(CSS) ou <script>des balises dans le <head>contenu d’un thème WordPress.

La bonne façon de le faire : S’inscrire, mettre en file d’attente… tadaa !

WordPress a la « Dependency API » pour cette tâche. Il se compose essentiellement de ces fonctions publiques :

  • wp_register_script()
  • wp_enqueue_script()
  • wp_register_style()
  • wp_enqueue_style()

Ensuite, il y a des fonctions d’alignement pour désenregistrer des scripts ou des styles, obtenir des données de PHP vers JS – par exemple pour les utiliser pour la localisation ou des appels AJAX – et des vérifications/conditions pour voir si un style ou un script a été enregistré/mis en file d’attente.

Comment les utiliser

Tout d’abord, vous devez vous assurer que votre header.phpfichier a le crochet approprié :

wp_head();

Ajoutez ensuite une fonction à votre functions.phpfichier de thèmes, comme expliqué sur WP Make. Comme vous pouvez le voir, les scripts et les fichiers utilisent le wp_enqueue_scripts-hook.

add_action( 'wp_enqueue_scripts', 'wpse82474_load_styles' );
add_action( 'wp_enqueue_scripts', 'wpse82474_load_scripts' );
wpse82474_load_styles()
{
    wp_enqueue_style( /* etc. */ );
}
wpse82474_load_scripts()
{
    wp_enqueue_script( /* etc. */ );
}

Les arguments

Les principaux arguments sont les suivants

 wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Dans le monde réel (pour parler : dans votre thème), vous l’utiliserez comme suit. Les exemples montrent un script qui a jQueryété chargé en tant que dépendance (en d’autres termes : chargé avant votre fichier en file d’attente).

wp_enqueue_script(
     'my-theme-script'
    ,get_template_directory_uri().'/js/custom_script.js'
    ,array( 'jquery' )
);

Trouver le bon chemin

Depuis un thème enfant que vous voudriez toujours utiliser get_stylesheet_directory_uri()et depuis un thème parent ou « normal », vous utiliseriez get_template_directory_uri().

Le chargement à partir d’un sous-dossier de votre thème enfant utiliserait un chemin comme celui-ci :

$stylesheet_path = get_stylesheet_directory_uri().'/css/style.css';

Chargement des scripts et des styles WP livrés avec le noyau

Si vous souhaitez charger des fichiers déjà livrés avec le noyau, vous pouvez simplement les mettre en file d’attente sans arguments supplémentaires.

wp_enqueue_script( 'jquery' ); // Load jQuery

Il en va de même pour tous les autres scripts (ou styles) livrés avec le noyau, comme vous pouvez le lire dans le Codex.

Si vous voulez savoir si un script est déjà enregistré, il n’est pas nécessaire de chercher dans le noyau ou de chercher dans le Codex. Utilisez simplement wp_script_is()(ou son équivalent pour les styles). Par défaut, cela vérifie la enqueueliste, mais vous pouvez également utiliser registeredou donecomme arguments.

wp_script_is( 'jquery', 'registered' ) AND wp_enqueue_script( 'jquery' );

Solution n°3 trouvée

Dans le style.cssdossier de votre thème enfant, vous avez une ligne Template: my-theme. Cela devrait être le nom du modèle que vous souhaitez avoir comme parent.

Un exemple pour un thème enfant du thème Twenty Twelve par défaut :

/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

Une explication rapide de chaque ligne :

  • Nom du thème. (obligatoire) Nom du thème enfant.
  • URI du thème. (facultatif) Page Web du thème enfant.
  • La description. (facultatif) Quel est ce thème. Ex : Mon premier thème enfant. Hourra!
  • Auteur. (facultatif) Nom de l’auteur.
  • URI de l’auteur. (facultatif) Page Web de l’auteur.
  • Modèle. (obligatoire) nom du répertoire du thème parent, sensible à la casse.
    • REMARQUE. Vous devez passer à un thème différent et revenir au thème enfant lorsque vous modifiez cette ligne.
  • Version. (facultatif) Version du thème enfant. Ex : 0.1, 1.0, etc.

Vous trouverez plus d’informations sur les thèmes enfants ici dans les pages du Codex.

De cette façon, vous ne devriez plus avoir de problèmes avec les fichiers de thème enfant qui ne se chargent pas.

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *