Étape 2: Créer Index.html et fichiers Style.css :
Même si vous avez déjà des fichiers HTML et CSS de votre site HTML statique, je recommande que vous créez un nouveau index.html et un fichier style.css . Cela permettrait de simplifier tout le processus de codage dans une large mesure car construire une page Web à partir de zéro vous donne beaucoup plus options de personnalisation et de la liberté, qui est tout à fait décisif dans le cas de développer des thèmes avec un cadre frontal comme Bootstrap. Même si cet itinéraire prend plus de temps par rapport à commencer par un modèle HTML existant, il stimule votre créativité vers des sommets inimaginables.
Imaginons que votre fichier nouvellement créé index.html ressemble à ceci :
< ! DOCTYPE html >
< html lang = « fr » >
< tête >
< meta charset = « utf-8 » >
< nom meta = « viewport » content = "largeur = dispositif-largeur, échelle initiale = 1.0" >
< titre > mon WordPress thème < /title >
</head >
< corps >
< p > Bonjour WordPress! < /p >
< /body >
< /html >
Pour que Bootstrap fonctionne pour vous, vous devrez initialiser dans la section de votre fichier index.html comme suit :
< ! DOCTYPE html >
< html lang = « fr » >
< tête >
< meta charset = « utf-8 » >
< nom meta = « viewport » content = "largeur = dispositif-largeur, échelle initiale = 1.0" >
< titre > mon WordPress thème < /title >
< lien href="css/bootstrap.min.css" rel = "stylesheet" media = "écran" >
</head >
< corps >
< p > Bonjour WordPress! < /p >
< /body >
< /html >
Et si vous avez l’intention d’intégrer toutes les fonctionnalités JavaScript-powered – comme les onglets Bootstrap, alertes et ainsi de suite - dans votre thème, puis vous devez également inclure jQuery et JavaScript associé (bootstrap.min.js) dans la section de votre fichier index.html :
< ! DOCTYPE html >
< html lang = « fr » >
< tête >
< meta charset = « utf-8 » >
< nom meta = « viewport » content = "largeur = dispositif-largeur, échelle initiale = 1.0" >
< titre > mon WordPress thème < /title >
< lien href="css/bootstrap.min.css" rel = "stylesheet" media = "écran" >
</head >
< corps >
< p > Bonjour WordPress! < /p >
< script src = « https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js » >< / script >
< script src="js/bootstrap.min.js" >< / script >
< /body >
< /html >
Maintenant, sur la base de votre conception de site existante et en profitant des composants Bootstrap, vous pouvez coder vers le haut de votre nouveau modèle "Bootstrap-powered" HTML. N’oubliez pas, aucun CSS personnalisé ne fonctionnera sur le modèle HTML, sauf si vous référencez le fichier style.css nouvelle dans la section de votre fichier index.html .
< ! DOCTYPE html >
< html lang = « fr » >
< tête >
< meta charset = « utf-8 » >
< nom meta = « viewport » content = "largeur = dispositif-largeur, échelle initiale = 1.0" >
< titre > mon WordPress thème < /title >
< lien href="css/style.css" rel = "stylesheet" media = "écran" >
< lien href="css/bootstrap.min.css" rel = "stylesheet" media = "écran" >
</head >
< corps >
< p > Bonjour WordPress! < /p >
< script src = « https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js » >< / script >
< script src="js/bootstrap.min.js" >< / script >
< /body >
< /html >
Ainsi, vous non seulement pouvez dénommer chaque élément de votre page HTML pour adapter vos besoins mais aussi pouvez d’exploiter la puissance de CSS Media Queries pour rendre votre modèle entièrement sensible dans un large éventail de périphériques !