php - wp_footer - Agregar otros archivos css a wp_head

wordpress title tag

Question

Estoy editando el tema estándar veintitrés que viene con el último wordpress.

Necesito agregar algunos de mis propios archivos .css en wp_head, pero no estoy seguro de cómo hacer esto. Actualmente estoy llamando a mis archivos fuera de wp_head, pero esto es complicado 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 qué entra en wp_head y cómo puedo agregar mi propio?

Answer 1

@cale_b Mis complementos se basan en la biblioteca jQuery y llamar a jQuery desde la función wp_head () no fue exitoso de esta manera

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

la forma correcta es agregar esto a header.php antes de todo ...

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

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

wp_head (); la función es la mejor manera de llamar a las hojas de estilo, pero cuando llega a las librerías Javascripts y Javascript puede generar errores.

También tenga en cuenta que a veces el WordPress no representará su ''$'' como una variable jQuery y obtendrá errores para TypeError, que por supuesto es correcto. En ese caso, debe cambiar todos los ''$'' por ''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 deberían estar dentro de su index.php ni su header.php ni footer.php ... Puede enumerarlos todos dentro de otro your-inline-scripts.js y llamarlos así donde deberían sido mencionado antes de esta manera:

    <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 ...

Answer 2

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

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

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

Además, también recomendaría usar algo como http://html5blank.com para un tema wp limpio y bonito en lugar de tratar de alterar el tema predeterminado (por lo tanto, no hay tema secundario sino un tema completamente diferente).

Answer 3

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

Por ejemplo: en Twentyfourteen se carga en la línea 232 de functions.php

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

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

Answer 4

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

Primero, pondrás esto en el archivo functions.php de tu tema:

add_action(''wp_enqueue_scripts'', ''your_function_name'');

(Esto usa el gancho de agregar acción , enganchando en la acción wp_enqueue_scripts ).

Luego, deberá agregar la función a su archivo functions.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 adecuado de la hoja de estilo para su tema.

Esta es también la forma correcta de poner guiones en tu 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 usa la función wp_enqueue_script WordPress.

Finalmente, vale la pena mencionar que alterar el tema de los veintinueve (o cualquier otro tema central) directamente se desaconseja. La recomendación es crear un tema infantil (excesivo en mi opinión, pero vale la pena mencionarlo).

Answer 5

utilice wp_enqueue_style para stylesheets y wp_enqueue_scripts para javascript

wp_enqueue_style

wp_enqueue_script