时间戳

首页 > 解决方案 > WordPress 上每个页面的自定义 CSS 和 JS

javascript - WordPress 上每个页面的自定义 CSS 和 JS

问题描述

我正在使用 wordpress 做一个网站。这是我第一个使用它的项目。我正在寻找一种为我网站的每个页面创建自定义 CSS 的方法，因为我的页面非常不同。我不想把所有的都放在我的主题的 styles.css 中。我知道我可以做类似的事情：

function initScriptsAndStyles()
{
    if ( is_post( 'home' ) )
    {
        wp_enqueue_style( 'style', get_template_directory_uri() . '/css/home.css');
    }
}
add_action( 'wp_enqueue_scripts', 'initScriptsAndStyles' );

但是我也不想为每个帖子都这样做，您总是会担心没有人更改名称或其他内容...我发现有人说它可以动态插入，但我不知道如何这样做，没有找到任何一步一步解释的教程。

任何人都可以帮助我吗？

干杯!

标签： javascriptphpcsswordpress

解决方案

您可以创建不同的页眉、不同的页脚和完全不同的样式和 JS 文件，并将它们包含在您需要的任何地方。如果它们看起来不同，您可以为每个页面创建模板。

在您的主题目录中，创建一个空的 php 页面 page-home.php。

在页面的开头，写下以下内容：

<?php
/**
 * Template Name: My Custom Home Pgae
 */

 get_header();
?>

然后用 HTML / PHP 编写所有代码

最后，包括这样的页脚：

<?php get_footer(); ?>

现在转到您的 wordpress 仪表板并单击 Pages。添加一个新页面，在右侧（靠近发布按钮），您将看到一个为页面分配模板的选项。您将在那里看到“测试”，因为您将该模板名称分配给您的 page-home.php

为您分配该模板的页面，您的页面将反映您分配的代码。

对于 CSS，你甚至可以去掉整个 style.css

您可以创建一个文件或文件夹来将您的 css 文件保存在您的主题文件夹中，并将其包含在 wordpress 附带的 header.php 文件中。

推荐阅读