个性化阅读
专注于IT技术分析

静态HTML模板转换为WordPress-JavaScript和Jquery问题

我将静态HTML模板成功转换为WordPress的php。问题是HTML模板的滑块, 推荐书, 猫头鹰轮播和其他一些JavaScript min.js的Jquery插件很少, 这些插件无法在浏览器中加载。我尝试添加

<?php wp_enqueue_script('jquery'); ?>

对于jQuery, 然后

<script src="<?php bloginfo( 'template_url' ); ?>/js/jquery-1.12.4.min.js" type="text/javascript"></script>  
<script src="<?php bloginfo( 'template_url' ); ?>/js/plugin/jquery.easing.js" type="text/javascript"></script> 
<script src="<?php bloginfo( 'template_url' ); ?>/js/jquery-ui.js" type="text/javascript"></script>

有很多这样的脚本, 但是所有失败。甚至滑块, 如下所示

<!--Main Slider-->
<link href="<?php bloginfo( 'template_url' ); ?>/template-parts/css/settings.css" type="text/css" rel="stylesheet" media="screen">
<link href="<?php bloginfo( 'template_url' ); ?>/template-parts/css/layers.css" type="text/css" rel="stylesheet" media="screen">
<link href="<?php bloginfo( 'template_url' ); ?>/template-parts/css/style.css" rel="stylesheet" type="text/css">
<link href="<?php bloginfo( 'template_url' ); ?>/template-parts/css/responsive.css" rel="stylesheet" type="text/css">

<!--Theme Color-->
<link href="<?php bloginfo( 'template_url' ); ?>/template-parts/css/theme-color/default.css" rel="stylesheet" id="theme-color" type="text/css">

在wordpress footer.php文件中编辑文本后, 即使页脚中文本的默认字体大小也已变小。标头中的菜单没有tempate.error日志片段中的悬浮效果


#1


使用函数调用css和js。对于后端使用admin_enque_script和wp_enque脚本。请在调用文件之前使用注册函数调用css和js


#2


将外部css和js文件链接到wordpress的最佳方法是将它们放入functions.php文件中。

下面是示例:

<!-- Html css link in your header.php or footer.php file -->
<script src="js/plugin/jquery.easing.js" type="text/javascript"></script>

你应该在functions.php中编写什么

<?php
wp_enqueue('jquery'); //you must enqueue jquery before enqueueing other scripts
wp_enqueue_script('easing', get_template_directory_uri().'/js/plugin/jquery.easing.js', array('jquery'), '', true);
//keep adding other scripts link like this below

?>

对于css文件, 你应该执行以下操作

<?php 
wp_enqueue_style('custom-style', get_template_directory_uri().'/css/style.css');
?>

在我的示例中, 文件路径不是你将要使用的路径……你将不得不使用相对于主题的index.php文件的路径。

当所有脚本文件都入队后, 你应该删除header.php和footer.php文件中的链接。

为了更好地理解, 请查看https://developer.wordpress.org/themes/basics/includes-css-javascript/

赞(0)
未经允许不得转载:srcmini » 静态HTML模板转换为WordPress-JavaScript和Jquery问题

评论 抢沙发

评论前必须登录!