导入可将CSS和Java脚本加载到特定页面中的HTML代码

时间:2015-07-18 作者:Toodarday

如何将以下HTML代码添加到我的一个网页中?这是一个依赖css和一些java脚本的web表单。

下面是原始HTML代码。

<head>
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>

    <script src="js/slider.js"></script>
    <script src="js/rslider.js"></script>
    <script src="js/popup.js"></script>

</head>

<body>

        <div class="wrapper">
            <form id="signup_form" method="post" name="signup_form" action="post">
                <input type="hidden" name="token" value="2f8247702b1f51b36dad1d8f4ba66211de0c31af">
                <input type="hidden" name="configure" value="true">

......

</body>
我在Visual Composer中添加了以下内容,但这会导致它停止工作(仅针对该页面)。

<link href="css/style.css" rel="stylesheet">
        <script src="js/jquery.min.js"></script>

        <script src="js/slider.js"></script>
        <script src="js/rslider.js"></script>
        <script src="js/popup.js"></script>


            <div class="wrapper">
                <form id="signup_form" method="post" name="signup_form" action="post">
                    <input type="hidden" name="token" value="2f8247702b1f51b36dad1d8f4ba66211de0c31af">
                    <input type="hidden" name="configure" value="true">

    ......
我猜这不是最干净的方式。什么会更好?

4 个回复
SO网友:Jignesh Patel

添加CSS和JS特定页面。将此代码放入当前活动的主题函数中。php文件

<?php
    function function_name() {
        is_page( \'about-me\' ) //is_page( \'PAGE_SLUG_NAME\' )
        {
            wp_enqueue_style( \'stylecss\', get_template_directory_uri() .\'/css/style.css\',\'\', \'3.3.1\' );         
            wp_enqueue_script( \'script\', get_template_directory_uri() . \'/js/script.js\', array ( \'jquery\' ));
        }    
    }
    add_action( \'wp_enqueue_scripts\', \'function_name\' );
    ?>

SO网友:David in Mississippi

Toodarday,

对于要放入您的<;中的代码;压头(>);节,您应该在标题中执行此操作。php文件。

要做到这一点,请转到WordPress仪表板,将光标悬停在左侧菜单栏的外观上,然后单击编辑器。

当编辑器屏幕出现时,在右边的列中,您应该会看到下面带有(Header.php)的列表“Header”。单击该列表以编辑标题。php文件。

复制要放在标记中的代码,并将其粘贴在<;压头(>);以及</压头(>);标签,然后向下滚动并单击[更新文件]按钮。

这将把您的代码放在正确的位置。

请注意,这会将代码放入所有页面的标题标记中。

如果只想为一个页面编写代码,那么应该在PHP中使用条件标记。您可以在中找到有关条件标记的信息 the WordPress Conditional Tags Codex.

但简而言之,如果您希望此代码只出现在主页上,那么您可以将以下PHP代码放入标题中。php文件:

<?php
  if (is_home())
{?>
Your Javascript Goes Here
<?php } ?>
如果它不是您的主页,您可以将上面的If语句替换为适合于要限制代码显示的页面的If语句。

至于<;车身(>);部分,您可以简单地在页面/帖子编辑器的文本视图部分添加此代码-我认为这是真的,但我尚未对其进行测试。

希望这有帮助。

SO网友:David in Mississippi

要在一个页面上加载css/js,请参阅我前面的答案,并使用WordPress条件标记,就像我在代码示例中所示,除了用您想要此代码所在页面的条件标记替换示例中的“Home”。

您可以通过查找任何特定页面的条件标记,如我之前回答中的CODEX链接所示。

SO网友:Mahavar Hitesh

您要添加CSS OR SCRIPT 在wordpress主题中。。所以

wordpress提供functions.php 复制并通过您的CSS LINK OR JS SCRIPT LINK.

/**
 * Enqueue scripts and styles.
 */
function function_name() {  

    // ADD STYLE
    wp_enqueue_style( \'CSS-ID\', get_template_directory_uri() .\'/css/style.css\',\'\', \'3.3.1\' );           

    // ADD SCRIPT
    wp_enqueue_script( \'JS-ID\', get_template_directory_uri() . \'/js/SCRIPT.js\', array(), null, true );  

}
add_action( \'wp_enqueue_scripts\', \'function_name\' );

结束

相关推荐

如何根据设备和按钮点击来切换css文件?

如果网站是在移动设备上打开的,我正在尝试将响应css文件排队。此外,我还想在单击按钮时切换/排队默认或无响应的css文件。无响应css文件是加载到桌面上的默认样式表。因此,要求如下:默认情况下,如果用户来自桌面,则应加载非响应站点。默认情况下,应加载响应站点。如果用户来自移动,则应加载响应站点。如果用户单击移动(响应)站点的桌面切换按钮,则应将非响应站点加载到移动中</如果用户从移动(非响应)站点单击移动切换按钮,则应加载响应站点</我有style.css (无响应css文件)输入到我的主题目