切换开关（HTML + CSS）工作/不工作答案

【问题标题】：Toggle switch (HTML + CSS) working / not working切换开关（HTML + CSS）工作/不工作
【发布时间】：2021-08-08 02:39:50
【问题描述】：

您好，希望有人可以提供帮助。以下代码似乎可以作为独立的 HTML + CSS 文件正常工作，但在粘贴到 Wordpress 页面时似乎无法正常工作。我在网站上使用 CSS 插件将 CSS 添加到我的页面（简单自定义 CSS 和 JS），对此并没有真正的问题，但想知道为什么在 Wordpress 网站上托管时过渡不起作用。感谢您的关注。代码如下。

#toggleSwitch {
  display: grid;
  place-content: center;
/*  height: 100vh; */
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fefefe;
}

label {
  pointer-events: none;
}
label .input {
  display: none;
}
label .input:checked + .toggle-wrapper {
  box-shadow: 0 8px 14px 0 rgba(18, 51, 215, 0.12);
}
label .input:checked + .toggle-wrapper > .selector {
  left: calc(100% - 50px);
  background-color: #004B88; /*#3957ee;*/
}
label .input:checked ~ .notification > .selected:before {
  content: " ON";
}
label .toggle-wrapper {
  position: relative;
  width: 120px;
  height: 60px;
  background-color: #eaeaea;
  border-radius: 999px;
  margin: auto;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 8px 14px 0 rgba(0, 75, 136, 0.12);
}
label .toggle-wrapper .selector {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  background-color: #FC0; /* #ee5f39;*/
  transition: left 0.25s ease;
  border-radius: 50%;
}
label .notification {
  font-size: 30px;
  width: 100%;
  text-align: center;
  color: #004B88;
}
label .notification .selected:before {
  content: "OFF";
  font-size: 40px;
/*  border-bottom: 2px solid;*/
}

<body>
<div id="toggleSwitch">
<h2 style="text-align: center; color: #004B88;">Toggle the Attend Anywhere service ON or OFF</h2><br /><br />
<label for="toggle">
  <input class="input" type="checkbox" id="toggle"/>
  <div class="toggle-wrapper"><span class="selector"></span></div>
  <p class="notification">Attend Anywhere is currently<br /><span class="selected"></span></p>
  </label>
</div>
  
</body>

【问题讨论】：

标签： html css wordpress animation toggle

【解决方案1】：

修改 WordPress 页面的最佳方法是制作模板 php 文件和您自己的 CSS 文件，这些文件在函数文件或另一个 php 文件中注册并排队，该文件将在 <head> 中加载此类内容。入队是推荐的方法，如果您的 CSS 编写正确，它将起作用。无需使用插件。如果你从来没有做过，一开始可能会让人望而生畏，但这并不难。

如何将 CSS 文件排入队列：

// register main stylesheet
wp_register_style( 'my-stylesheet', get_stylesheet_directory_uri() . '/library/css/style.css', array(), '1', 'all');

// enqueue stylesheet
wp_enqueue_style( 'my-stylesheet' );

你也可以使用条件来排队：

if (is_page('about'){
    wp_enqueue_style( 'my-stylesheet' );
}

如果您使用的是预制主题，它可能已经将样式表排入队列，因此您只需将 CSS 添加到其中即可。即使是样板主题也应该有一个主要的 CSS 文件。你可以简单地加入自己的队列，如果你愿意的话，不要管原来的。只需确保文件名和路径正确即可。

要制作模板页面，您可以从现有主题中修改一个页面，并且 (1) 如果它动态加载（如单个模板），则正确命名它或 (2) 给它一个模板名称，以便可以从下拉列表中选择它帖子创建页面上的菜单。

这是一个简单的 WordPress 模板示例。注意顶部的注释文本是模板名称：

<?php
/*
 Template Name: About
*/
?>
<?php get_header(); ?>

            <div id="content">
                <div id="inner-content" class="wrap cf">
                    <main id="main">
                        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                            <h1><?php the_title(); ?></h1>
                            
                            <?php the_content(); ?>
                        
                        <?php 
                        endwhile;
                        else :
                        endif; 
                        ?>
                    </main>
                </div>
            </div>
<?php get_footer(); ?>

【讨论】：