web-dev-qa-db-fra.com

Ajout d'autres fichiers CSS à wp_head

J'édite le thème standard des vingt-treize ans fourni avec la dernière version de wordpress.

J'ai besoin d'ajouter quelques-uns de mes propres fichiers .css dans wp_head mais je ne sais pas comment faire. J'appelle actuellement mes fichiers en dehors de wp_head mais c'est désordonné et j'aimerais le faire correctement.

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo("template_url"); ?>/bootstrap.css" />
<script type="text/javascript"   src="<?php bloginfo("template_url"); ?>/js/bootstrap.min.js"></script>

<?php wp_head(); ?>

Où est-il défini ce qui va dans wp_head et comment puis-je y ajouter le mien?

phpwordpress
24
probablybest

utiliser wp_enqueue_style pour les feuilles de style et wp_enqueue_scripts pour javascript

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

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

1
Tom

@cale_b Mes plugins sont basés sur la bibliothèque jQuery et l'appel de la fonction jQuery à partir de la fonction wp_head () n'a pas abouti de cette façon. 

wp_enqueue_script ('jquery', 'get_stylesheet_uri (); .' js/jquery.min.js ');

la bonne façon est d'ajouter ceci à l'entête.php avant tout ...

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

Il est très important que vous appeliez jquery avant wp_head (); crochet des autres importations ... WordPress est livré avec la bibliothèque jQuery car il l'utilise pour les pages wp-admin et d'autres requêtes $ post et $ get sur la page ... L'utilisation de leur script est beaucoup plus sécurisée et plus simple Ajoutez ensuite votre propre fichier jquery.min.js dans le répertoire des thèmes ...

wp_head (); function est juste le meilleur moyen d'appeler les feuilles de style, mais quand il arrive aux librairies Javascripts et Javascript, il peut être bogué.

Notez également que, parfois, WordPress ne rendra pas votre '$' en tant que variable jQuery et que vous obtiendrez des erreurs pour TypeError, ce qui est bien sûr correct. Dans ce cas, vous devriez changer tous les '$' avec 'jQuery' qui est aussi une variable définie dans la bibliothèque WordPress jQuery ...

Notez également que vous aurez parfois besoin d’un javascript intégré, etc. 

<script>
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>

Tous ces scripts intégrés ne doivent pas figurer dans votre index.php, ni dans votre en-tête.php, ni dans votre footer.php ... Vous pouvez les lister dans un autre fichier your-inline-scripts.js et les appeler comme ceci juste où ils devraient avoir été énumérés auparavant comme ceci:

    <script type="text/javascript"  
src="<?php bloginfo("template_url"); ?>/js/your-inline-scripts.js"></script>

ou 

<script type="text/javascript"
   src="<?php echo get_stylesheet_directory_uri(); ?>/js/yourScript.js"></script>

Je préfère cette deuxième option ...

1
The Bumpaster

Les feuilles de style peuvent être chargées presque n’importe où, Mais l’installation par défaut de wordpress utilise wp_head () hook pour afficher la feuille de style principale (style.css);

Par exemple: dans Twentyfourteen, il est chargé à la ligne 232 de functions.php

    // Load our main stylesheet.
    wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri(), array( 'genericons' ) );

Une des raisons pour lesquelles il est préférable d’utiliser ce hook est que si vous avez deux plugins qui utilisent la même feuille de style et que le même descripteur utilise le même descripteur wp_enqueue_style, WordPress n’ajoutera la feuille de style sur la page handle a un paramètre de dépendance, mais c'est une autre histoire ... 

0
maioman