使用 Javascript (Wordpress) 操纵 child 主题的 CSS

Question

我想在我的网站中实现 3 个按钮，单击时应该更改字体大小。

HTML 看起来会像

<div class='normal_font_size'>ill put some image here</div>
<div class='medium_font_size'>ill put some image here</div>
<div class='big_font_size'>ill put some image here</div>

这是 child 主题中应该更改的 CSS(?)（假设 normal= 100%，medium= 150，big= 200%）

html { font-size: 100% }

我用的是这个主题的child主题：http://davidakennedy.com/accessible-zen/ 我的 child 主题文件夹中有一个 style.css

我会把 HTML 放在 child 主题文件夹的 page.php 中，这样它就在我的 header 下面，这是最佳做法吗？

如何操作 CSS？

我的第一个问题是 Java-Code 放在哪里，这样 CSS 就会受到实际影响，因为我尝试进行一些基本操作，但到目前为止我没有做任何更改。 .

*回答：我将代码放在 childtheme/js 目录中的 custom-script.js 中，然后将该脚本放入 child 主题目录中的 functions.php 队列中. 从那里我可以使用代码在我的 child 主题的 custom.css

中操纵 css

我目前对JavaScript & Jquery 的理解可能与你的中文在同一层级（很有可能）。但是我想改进！这就是我来这里的原因

感谢您的宝贵时间！

*更新

@Eduardo 不幸的是，你的代码对我不起作用，也许我把它放在了错误的地方......正如我告诉你的那样，我真的刚刚开始做所有不是 HTML 或 CSS.

这就是我的 child 主题的 custom-script.js 排队的方式（正确的是，jQuery 库正在加载），我把你的代码放在里面 custom-script.js。你说我应该把它放在主要的 .js 中，但到目前为止这是我的 child 主题目录中唯一的 .js...

add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom-script.js',
    array( 'jquery' )
);
        }

我做错了什么？

**更新：

这段代码现在对我来说工作正常：

jQuery(document).ready(function(){
  jQuery('.mybutton').on('click', function() {
    jQuery('body').css('font-size','1000%');
  });
});

看起来 $-signs 引起了麻烦

Answer 1

嗯，首先，Java 和 Javascript 不是同一种语言。

现在，您可能只需使用 jquery 到 select 您的按钮。例如：

In your page.php or index.php:
<button class="my-button">Small Font</button>

接下来你想用 jquery 调用那个按钮 onclick:

On your main.js
 $(document).ready(function() {

        //storing your button in var, so you can reference it
        var mybutton = $(".my-button");

        //when you click the button, something happens
        mybutton.on('click', function() {

        //do something here (consider using jquery's .css functions to alter the font size)

        }

    });

此外，您还可以将类添加到您的 style.css，然后使用 jquery 的 .addClass() 来评估您的 css 类任何你希望字体增长的地方。

您询问如何更改 html 标签以增加全局字体。首先，您不想标记 html 标记，您只想标记 body。确保您了解 html、head 和 body 之间的根本区别。

这就是单击按钮后，您会使文档 body 内的所有字体增加 100% 的方法。

$('.mybutton').on('click', function() {

    $('body').css('font-size','100%');

}

Answer 2

在您的子主题的根目录中创建 style.css。在那里添加你所有的风格。

如果内容仍未被拾取（尽管它应该被拾取），请将其添加到您的 functions.php:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

当然可以根据需要进行修改。

编辑。您的 js 无法正常工作的一个可能原因是它无法识别 $。您必须记住 Wordpress 在无冲突模式下运行 jQuery。如果您使用：

jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

它可能会工作得很好。但是，如果您真的想保留 $ 符号，请将其包装成这样：

(function($) {

    // Inside here $ = jQuery
    $( document ).ready(function() {
        console.log( "ready!" );
    });

})(jQuery);

Answer 3

好的，伙计们，它现在工作得很好。谢谢大家

这是我的代码，这样可以吗？或者我可以把它删掉吗？

下一个问题是将其保存在 cookie 中...

HTML:

<button class='body_standard_font_size'>Standard</button>
<button class='body_medium_font_size'>medium</button>
<button class='body_big_font_size'>big</button>

jQuery:

jQuery(document).ready(function(){
  jQuery('.body_standard_font_size').on('click', function() {
    jQuery('body').css('font-size','100%');
});
});
    jQuery(document).ready(function(){
  jQuery('.body_medium_font_size').on('click', function() {
    jQuery('body').css('font-size','150%');
});
});
        jQuery(document).ready(function(){
  jQuery('.body_big_font_size').on('click', function() {
    jQuery('body').css('font-size','200%');
});
});

使用 Javascript (Wordpress) 操纵 child 主题的 CSS

Manipulate CSS of child theme with Javascript (Wordpress)

javascript

wordpress