[英]How to call css stylesheets and js files into a custom WordPress theme
I'm developing a custom WordPress theme from scratch and now I faced a problem with loading css and js files. 我正在从头开发自定义WordPress主题,现在我遇到了加载css和js文件的问题。 I have searched everywhere to see how can I be able to load those files and I did this on my functions.php
file: 我到处搜索,看看我怎么能加载这些文件,我在我的functions.php
文件中做了这个:
<?php
function catalog(){
wp_enqueue_style('bootstrap', get_template_directory_uri() . 'css/bootstrap.min.css');
wp_enqueue_style('style', get_stylesheet_uri());
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/offcanvas.js', array( 'jquery' ) );
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts','catalog');
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footer' => __('Footer Menu'),
));
?>
So I don't know whats really going wrong here cause I've checked everything and it looks fine. 所以我不知道这里真的出了什么问题,因为我已经检查了一切,看起来很好。 Here's my folder structure: 这是我的文件夹结构:
theme_folder
css
bootstrap.min.css
images
js
bootstrap.min.js
imagesloaded.pkgd.min.js
jquery.js
masonry.pkgd.min.js
offcanvas.js
But after all this I get this as result which means they have not beed loaded: 但毕竟这样我得到了这个结果,这意味着他们没有被加载:
Problem You are register a script but not enqueue. 问题您注册了一个脚本但没有入队。
Solution: If you are register then you have to enqueue. 解决方案:如果您是注册,那么您必须入队。 wp_enqueue_style() - For css enqueue wp_enqueue_script()- For JS enqueue wp_enqueue_style() - 用于css入队wp_enqueue_script() - 用于JS入队
Updated code 更新的代码
<?php
function catalog(){
wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_script( 'custom-script-bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script-imgesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script-jquery', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script-masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script-offcanvas', get_template_directory_uri() . '/js/offcanvas.js', array( 'jquery' ) );
}
add_action('wp_enqueue_scripts','catalog');
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footer' => __('Footer Menu'),
));
?>
Recommendation 建议
Always Prefer CDN for css and js like jquery,bootstrap etc. 总是喜欢CDN用于css和js,如jquery,bootstrap等。
Try to something like this. 尝试这样的事情。
add css file in your template like below... 在你的模板中添加css文件,如下所示......
<link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/bootstrap.min.css">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.