添加Javascript崩溃网站(Wordpress,Customizr子主题)

时间:2016-08-04 14:10:23

标签: wordpress scroll javascript-events

我正在尝试修改当前处于测试环境中的this site标题。

目的是在用户通过在两个类之间切换来向下滚动页面时修改标题。详细信息如下 - 我遇到的问题是在我的子主题functions.php文件中添加JS代码会导致网站崩溃。我能够检索Wordpress管理面板访问权限(并让网站再次出现在浏览器中)的唯一方法是使用FTP覆盖子主题的functions.php以及之前的版本。我们将非常感激地提供任何帮助。

CSS (修剪到相关部分)

.header-widget-shortheader {
  color: #08c;
  width: 100%;
  margin: 0px auto;
}

@media screen and (min-width: 1066px) {
.header-widget {
  color: #08c;
  padding-right: 30px;
  float: right;
  margin-top: -80px !important;
}
}

@media screen and (min-width: 961px) and (max-width: 1065px) {
.header-widget {
  color: #08c;
  width: 95%;
  margin: 0px auto;
  margin-top: -0px !important;
}
}

@media screen and (min-width: 0px) and (max-width: 960px) {
.header-widget {
  color: #08c;
  width: 90%;
  margin: 0px auto;
  margin-top: -0px !important;
}
}

的Javascript

我正在尝试添加以下内容。请告知是否有更好的方法(由于我遇到的问题,我实际上还没看到它会如何表现)。

window.onscroll = function() {headerWidgetPlacement()};
function headerWidgetPlacement() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("myP").className = "header-widget-shortheader";
    } else {
        document.getElementById("myP").className = "header-widget";
    }
}

我打算将这两个类应用于窗口小部件,此代码旨在在滚动超过50px时在.header-widget-shortheader上切换,然后在再次向上滚动时恢复为.header-widget。换句话说,根据用户滚动屏幕的距离,只有一个代码处于活动状态。

我现有的儿童主题的功能.php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

//----- Amend footer credits -----//

add_filter('tc_credits_display', 'my_custom_credits', 20);
function my_custom_credits(){ 
$credits = '10 The Triangle, Kingston, Surrey, KT1 3RT';
$newline_credits = 'Website development by Max Rice';
return '
<div class="span6 credits">
                    <p> &middot; &copy; '.esc_attr( date( 'Y' ) ).' <a href="'.esc_url( home_url() ).'" title="'.esc_attr(get_bloginfo()).'" rel="bookmark">'.esc_attr(get_bloginfo()).'</a> &middot; '.($credits ? $credits : 'Designed by <a href="http://www.presscustomizr.com/">Press Customizr</a>').' &middot;'.($newline_credits ? '<br />&middot; '.$newline_credits.' &middot;' : '').'</p>       </div>';
}

// -----Adds widget to header and positions----- //

// Adds a widget area.
if (function_exists('register_sidebar')) {
    register_sidebar(array(
    'name' => 'Extra Header Widget Area',
    'id' => 'extra-widget-area',
    'description' => 'Extra widget area in the header',
    'before_widget' => '<div class="widget extra-header-widget">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
    ));
}
// Place the widget area after the header
add_action ('__after_logo', 'add_my_widget_area', 10);
function add_my_widget_area() {
  if (function_exists('dynamic_sidebar')) {
    dynamic_sidebar('Extra Header Widget Area');
  }
}

// ------ITEMS BELOW ARE STILL IN TEST------ //

// -----Add secondary menu----- //

add_action( 'init', 'register_secondary_menu' ); // this registers your menu with WP
function register_secondary_menu() {
    if ( function_exists( 'register_nav_menu' ) ) {
        register_nav_menu( 'secondary-menu', 'Secondary Menu' );
    }
}

// Select the add_action you need, depending on where you want to add the menu and disable the rest:
// add_action('__before_header', 'display_secondary_menu');     // use this line to add above header
add_action('__header', 'display_secondary_menu', 1000, 0);     // use this to add after header
// add_action('__before_footer', 'display_secondary_menu');     // use this line to add above footer
// add_action('wp_footer', 'display_secondary_menu', 1000, 0);     // use this to add before credits

// display function for your menu:
function display_secondary_menu() {
    echo ( has_nav_menu( 'secondary-menu' ) ? wp_nav_menu (
        array (
            'theme_location' => 'secondary-menu',
            'container_id'    => 'secondary-menu',
            'container_class'    => 'secondary-menu'
        )
    ).'
' : '' );
}

非常感谢你的帮助。

0 个答案:

没有答案