静态 HTML 模板转换为 wordpress-JavaScript 和 Jquery 问题答案

【问题标题】：Static HTML template conversion into wordpress- JavaScript & Jquery issue静态 HTML 模板转换为 wordpress-JavaScript 和 Jquery 问题
【发布时间】：2016-07-28 17:35:27
【问题描述】：

我成功地将静态 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 文件中编辑文本后，即使页脚中文本的默认字体大小也已更改为小。标题中的菜单没有模板中的悬停效果。error log snippet

【问题讨论】：

标签： wordpress wordpress-theming custom-wordpress-pages

【解决方案1】：

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

【讨论】：

但是我已经提到了在 header.php 中。先生，在哪里添加上述方法。请详细说明，因为我是 wordpress 的新手。我们是否必须在functions.php 中提及这一点。语法是什么样的。
enqueue_script、enqueue_style、enqueue_register 太多。我越来越糊涂了

【解决方案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/including-css-javascript/

【讨论】：