Agregar otros archivos css a wp head

Estoy editando el tema twentythirteen estándar que viene con la última wordpress.

Necesito añadir algunos de los míos .archivos css en el wp_head pero no estoy seguro de cómo hacer esto. Actualmente estoy llamando a mis archivos fuera de wp_head, pero esto es desordenado y me gustaría hacerlo correctamente.

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

¿Dónde se está definiendo lo que entra en wp_head y cómo agrego lo mío?

Author: Florin Pop, 2013-08-29
Source

5 answers

Para agregar tu propio css en wp_head(), necesitas usar una colección de funciones de WordPress:

Primero, pondrás esto en las funciones de tu tema.archivo php:

add_action('wp_enqueue_scripts', 'your_function_name');

(Esto usa el gancho add action, enganchándose a la acción wp_enqueue_scripts.)

Entonces, necesitará agregar la función a sus funciones.archivo php que utilizará la función de WordPress wp_enqueue_style : 

function your_function_name() {
    wp_enqueue_style('my-script-slug',  get_stylesheet_directory_uri() . '/your_style.css');
}

Tenga en cuenta el uso de get_stylesheet_directory_uri() - esto obtiene el directorio de hoja de estilos adecuado para su tema.

Esta es también la forma correcta de encolar scripts en su encabezado. Ejemplo:

function your_function_name() {
    // Enqueue the style
    wp_enqueue_style('my-script-slug',  get_stylesheet_directory_uri() . '/your_style.css');
    // Enqueue the script
    wp_enqueue_script('my-script-slug',  get_stylesheet_directory_uri() . '/your_script.js');
}

Que utiliza la función WordPress wp_enqueue_script.

Finalmente, vale la pena mencionar que alterar el tema twenty thirteen (o cualquier otro tema central) directamente generalmente se desaconseja. La recomendación es crear un tema infantil (overkill en mi opinión, pero vale la pena mencionar).

 40
Author: cale_b,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-20 19:33:39
 1
Author: Tom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-29 19:38:13

@ cale_b Mis plugins se basan en la biblioteca jQuery y llamar a jQuery desde la función wp_head() no tuvo éxito de esta manera

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

La forma correcta es agregar esto a la cabecera.php antes que todo...

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

Es muy importante que llame a jquery primero antes del gancho wp_head(); de las otras importaciones... El WordPress viene con la biblioteca jQuery porque está utilizando para las páginas wp-admin y algunas otras solicitudes post post y get get en la página... Usar su script es mucho más seguro y más fácil que agregar su propio jquery.min.archivo js dentro del directorio themes...

La función Wp_head(); es la mejor manera de llamar a las hojas de estilo, pero cuando llega a las bibliotecas Javascripts y Javascript puede tener errores.

También tenga en cuenta que a veces el WordPress no rendirá su ' $ ' como una variable jQuery y obtendrá errores para TypeError, que por supuesto es correcto. En ese caso, debe cambiar todo el ' $ ' con 'jQuery', que también es una variable definida dentro de la biblioteca jQuery de WordPress...

También tenga en cuenta que a veces necesitará un javascript en línea, etc 

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

Todos estos scripts en línea no deben estar dentro de su índice.php ni su encabezado.php nor footer.php... Puedes listar todos ellos dentro de otro tus-inline-scripts.js y llamarlos así justo donde deberían haber sido listados antes así:

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

O 

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

Prefiero esta segunda opción...

 1
Author: The Bumpaster,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-19 20:11:37

Las hojas de estilo se pueden cargar casi en cualquier lugar, pero la instalación predeterminada de wordpress utiliza el gancho wp_head() para generar la hoja de estilos principal (style.css);

Para ex.: En Twentyfourteen se carga en la línea 232 de funciones.php

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

Una de las razones por las que se prefiere usar este gancho es que si tiene dos complementos que usan la misma hoja de estilos y ambos usan el mismo controlador wp_enqueue_style, WordPress solo agregará la hoja de estilos en la página una vez, otro la razón es que este identificador tiene un parámetro de dependencia, pero esa es otra historia...

 0
Author: maioman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-29 13:29:05

Hmm sí a lo anterior, pero también es posible vincular a sus hojas después de que wp_head se llame así

<?php wp_head(); ?>
<link href="/wp-content/themes/YourTheme/cssFolder/YourOtherStyleSheet.css">

Esto es generalmente lo que hago, ya que es más claro leer.

Además, también recomendaría usar algo como http://html5blank.com para un buen tema wp en blanco limpio en lugar de intentar alterar el tema predeterminado (por lo que no hay tema hijo solo un tema diferente por completo)

 -4
Author: user2634355,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-28 14:33:23