在制作wordpress模板時，如何正確引用css樣式及js效果是至關重要的。一旦我們在引用css或者是js的時候，路徑沒有寫對，那么頁面上就不能夠加css載樣式或者說就沒有js動態效果。博主在剛接觸wordpress的時候，對這一塊也是迷糊，時常會出現引用錯誤的時候。但隨著自己的不斷學習與實踐，已經能夠正確掌握了。那就把握我知道的幾種方法分享給大家。
css及js引用方法一:
(1)主題根目錄中style.css樣式的引用
在模板中的header.php中<head></head>標簽中添加如下代碼：
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>">
(2)其他css樣式的引用
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css.css">
注意:以上兩種css引用方法，需要把css樣式放在主題的根目錄中
(3)js效果的引用
可以使用css中的(2)的方法引用,這里可以單獨給js建立一個”js文件夾”，引用方法如下:
<script src="<?php bloginfo('template_directory'); ?>/js/js.js" ></script>
css及js引用方法二:
在主題模板中的functions中加入如下函數:
function add_css_js () { wp_register_style( 'CSS', get_stylesheet_directory_uri() . '/css/demo.css' //自定義路徑 ); wp_register_script( 'JS', get_stylesheet_directory_uri() . '/js/demo.js' //自定義路徑 ); wp_enqueue_style('CSS'); wp_enqueue_script('JS'); }add_action('wp_enqueue_scripts', 'add_css_js');
貴公網安備52032102000602號