Diferentes Métodos Para Cargar Un Archivo CSS y JS En WordPress

Hay muchas formas en la que puedes cargar un archivo CSS o un Script con wordpress, vamos echar vistazo a las opciones disponibles.

Método No Dinámico

<link rel="stylesheet" href="/wp-content/themes/tu-tema/style.css" type="text/css" media="screen, projection" />

Método Directo

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />

Método Dinámico

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" type="text/ css" media="screen, projection" />

IE

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href= "<?php bloginfo('stylesheet_directory'); ?>/css/style-ie6.css" />
<![endif]-->

Condicionando

<?php if (is_page_template("page-snippet.php")){ ?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/snippets.css" />
<?php } ?>

Usando Funciones

Muchos programadores de wordpress recomiendan usar funciones como wp_register_style, wp_register_script que estan destinadas para estos fines haciendo que nuestro código sea más limpio y legible y a la vez nos permite crear dependencias de otros archivos, o si queremos cargar un script en el header o en el footer.

// cargando archivos css
function load_stylesheets() {
    wp_register_style('Style', bloginfo('stylesheet_directory') . '/style.css', array(), '', 'screen' );
    wp_enqueue_style('Style');

    if (is_post_type_archive('snippet')) {
        wp_register_style('snippetStyle', bloginfo('stylesheet_directory') . '/snippets.css', array('Style'), '', 'screen' );
	wp_enqueue_style('snippetStyle');
    }
}
add_action('wp_enqueue_scripts', 'load_stylesheets');

Aquí cargamos jquery desde los repositorios de Google, usamos wp_deregister_script() para anular la carga de jquery que hace wordpress por defecto para poder cargar nuestra propia versión de jquery, y le decimos global.js que depende de jquery.

// cargando archivos javascript
function scripts_load() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js", array(), '', true);
    wp_enqueue_script('jquery');

    wp_register_script('global', bloginfo('stylesheet_directory') . '/js/global.js', array('jquery'), '', true);
    wp_enqueue_script('global');
}
add_action('wp_enqueue_scripts', 'scripts_load');