web-dev-qa-db-fra.com

Conversion de modèle HTML en thème Wordpress

Alors que j'essayais de convertir une page HTML statique en thème Wordpress, j'ai eu un problème. la page ne fonctionne pas correctement Après vérification de la console Google Chrome, le fichier CSS est chargé avec un chemin incorrect.

il charge Website/css/styles.css et Website/css/style-desktop.css

voici comment j'ai importé des feuilles de style de header.php

<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/skel.css" />
<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/style.css" />
<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/style-desktop.css" />
<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/style-noscript.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/ie/v8.css" /><![endif]-->
<!--[if lte IE 8]><script src="<?php bloginfo( 'template_directory' ); ?>/css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php bloginfo( 'template_directory' ); ?>/js/jquery.min.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/skel.min.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/init.js"></script>

Il devrait obtenir la feuille de style suivante: website.com/wp-content/theme/themename/css/styles.css

Je ne sais pas s'il y a quelque chose que je devrais écrire dans function.php

UPDATE1:

Il se trouve que l’un des fichiers JS charge directement le fichier CSS; je devais donc modifier le chemin des fichiers CSS.

Cela semble bien avec le CSS, mais il y a quelques conflits dans le thème.

phpfunctionstheme-developmentcustomizationhtml
1
Kalmuraee

Comme dit, vous devriez mettre en file d'attente vos feuilles de style comme ceci dans votre functions.php dans votre thème:

function adds_to_the_head() { // Our own unique function called adds_to_the_head

wp_register_style( 'custom-style-css', get_stylesheet_directory_uri() . '/css/styles.css','','', 'screen' ); // Register style.css

wp_enqueue_style( 'custom-style-css' ); // Enqueue our stylesheet

}
add_action( 'wp_enqueue_scripts', 'adds_to_the_head' );
1
user3325126

Essayez comme ça

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>

Mais il est recommandé de mettre votre script en file d'attente dans function.php Référence de la fonction/wp script de mise en file d'attente

0
shuvroMithun

Vous pouvez utiliser cette façon. Et c'est aussi standard

/**
 * Enqueue scripts and styles.
 */
function test_name_scripts() {
    wp_enqueue_style( 'test-name-style', get_stylesheet_uri() );

    wp_enqueue_script( 'test-name-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

    wp_enqueue_script( 'test-name-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'test_name_scripts' );

Et suivez également ce tutoriel: https://developer.wordpress.org/themes/basics/including-css-javascript/

0
Abdus Salam