无法将所有css和js功能转换为WP主题

时间：2013-07-04 作者：Debashis Sikdar

我正在尝试转换一个HTML和CSS模板，该模板使用.js 文件，并将其转换为本地主机上的WP主题。这个index.html 具有以下特性：

<head>
<title>Home</title>
<meta charset="utf-8">

<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="css/touchTouch.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/camera.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<script src="js/jquery.equalheights.js"></script>
<script src="js/touchTouch.jquery.js"></script>
<script src="js/jquery.carouFredSel-6.1.0-packed.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/sForm.js"></script>
为此，我在标题中写了以下内容。php：

<head>
<!--<?php bloginfo(\'name\'); ?> <?php wp_title(); ?></title> -->
<title>Home</title>
<meta charset="utf-8">

<link rel="icon" href="<?php bloginfo(\'template_directory\'); ?>/img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="<?php bloginfo(\'template_directory\'); ?>/img/favicon.ico" type="image/x-icon"/>
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="<?php bloginfo(\'stylesheet_directory\'); ?>/bootstrap.css" type="text/css"> 
<link rel="stylesheet" href="<?php bloginfo(\'stylesheet_directory\'); ?>/camera.css" type="text/css"> 
<link rel="stylesheet" href="<?php bloginfo(\'stylesheet_directory\'); ?>/responsive.css" type="text/css"> 
<link rel="stylesheet" href="<?php bloginfo(\'stylesheet_directory\'); ?>/touchTouch.css" type="text/css">
<link rel="stylesheet" href="<?php bloginfo(\'stylesheet_url\'); ?>" type="text/css">
<script src="<?php bloginfo(\'template_url\'); ?>/js/jquery.js"></script>
<!--<script src="<?php bloginfo(\'template_url\'); ?>/js/jquery1.js"></script>-->
<script src="<?php bloginfo(\'template_url\'); ?>/js/jquery.easing.1.3.js"></script>
<script src="<?php bloginfo(\'template_url\'); ?>/js/jquery-migrate-1.1.1.js"></script>
<script src="<?php bloginfo(\'template_url\'); ?>/js/superfish.js"></script>
<script src="<?php bloginfo(\'template_url\'); ?>/js/jquery.mobilemenu.js"></script>
<script src="<?php bloginfo(\'template_url\'); ?>/js/jquery.cookie.js"></script>
<script src="<?php bloginfo(\'template_url\'); ?>/js/camera.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="<?php bloginfo(\'template_url\'); ?>/js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<script src="<?php bloginfo(\'template_url\'); ?>/js/jquery.equalheights.js"></script>
<script src="<?php bloginfo(\'template_url\'); ?>/js/touchTouch.jquery.js"></script>
<script src="<?php bloginfo(\'template_url\'); ?>/js/jquery.carouFredSel-6.1.0-packed.js"></script>
<script src="<?php bloginfo(\'template_url\'); ?>/js/jquery.mousewheel.min.js"></script>
<script src="<?php bloginfo(\'template_url\'); ?>/js/jquery.touchSwipe.min.js"></script>
<script src="<?php bloginfo(\'template_url\'); ?>/js/sForm.js"></script>
所有的CSS 和.js 因此，将链接文件。但是一些次要的CSS和可能的js功能没有被转换。此外，WP仪表板工具栏未出现。从仪表板访问站点后，我必须单击浏览器的后退按钮才能转到WP仪表板。有人建议我使用wp_head() 和wp_footer() 功能，但从codex读取后。wordpress。org，不知道如何使用它们。菜单栏的HTML如下所示：

  • 关于我们艺术家作品>

  • 我写过functions.php 作为：

    <?php
function register_my_menus() {
  register_nav_menus(
    array(
      \'header-menu\' => __( \'Header Menu\' ),
      \'extra-menu\' => __( \'Extra Menu\' )
    )
  );
}
add_action( \'init\', \'register_my_menus\' );
?>
    并在我的header.php:

    <?php wp_nav_menu( array( \'theme_location\' => \'header-menu\', \'container_class\' => \'nav-collapse nav-collapse_ collapse\',  \'menu_class\' => \'nav sf-menu clearfix\')); ?>
    但WP菜单显示为垂直列表。我希望它与HTML模板中的CSS保持水平。

    2 个回复
    SO网友:Mayeenul Islam

    我宁愿全部更改：
    <?php bloginfo(\'template_url\'); ?> 和<?php bloginfo(\'stylesheet_directory\'); ?>
    进入：

    <?php echo get_template_directory_uri(); ?>
    用于连接到默认值style.css 我更喜欢改变：

    <link rel="stylesheet" href="<?php bloginfo(\'stylesheet_url\'); ?>" type="text/css">
    进入：

    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( \'stylesheet_url\' ); ?>" />
    我发现任何脚本中都没有定义脚本类型：

    <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.js" type="text/javascript"></script>
    使用的最佳选择wp_head() 在结束标记之前使用它，例如：

    ...
<?php wp_head(); ?>
</head>
    以及使用wp_footer() 正在页脚中使用，但就在结束之前</body> 标签：

    ...
<?php wp_footer(); ?>
</body>
    除此之外，
    Ian Stewart\'s theme development tutorial 可以帮助您以非常简单的方式理解WordPress主题的核心内容。

    此外，WordPress默认使用js 文件，所以js 可能在许多方面与这些冲突。如果，那么您必须找出js 手动。

    对于菜单CSS，我调用THIS ONE 通用菜单CSS.：）

    SO网友:JMau

    您应该按以下方式将js和CSS排队：

      function wpse_105303_enqueue_my_scripts() {

    wp_register_script( \'my-js1\', get_stylesheet_directory_uri(). \'/js/myjs1.js\',false,null,true );
    wp_register_style( \'my-style1\',  get_stylesheet_directory_uri(). \'/css/my-style1.css\' );

    wp_enqueue_script(\'my-js1\');
    wp_enqueue_style(\'my-style1\');
     }
   add_action(\'wp_enqueue_scripts\',\'wpse_105303_enqueue_my_scripts\');
    代码位于名为functions.php

    结束
    标签： theme-development   小码农  

    相关推荐