如何在自定义Wordpress主题中添加Responsive.css

Question

我是wordpress的新手。我创建了一个wordpress主题，其中包含style.css，header.php和index.php以及footer.php。现在我想让我的index.php页面响应，因为在调整浏览器窗口大小后，index.php的布局变得非常糟糕（在移动设备和其他句柄持有设备上无法正常查看）。

我希望在@media查询或引导程序的帮助下使index.php响应。

请建议我如何使index.php成为一个响应式页面？

Answer 1

您需要使用主题文件夹内functions.php文件中的wp_enqueue_style() 函数注册responsive.css表。如果您没有此文件，只需创建它：

<?php

// Enqueue your files
function theme_enqueue_styles() {
    // If the current page is the homepage, then load the responsive.css file
    if(is_home()) {
        wp_enqueue_style( 'responsive', get_stylesheet_directory_uri() . '/css/responsive.css' );
    }
}

// Add action
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 15 );

然后，您需要创建theme/css/responsive.css文件，并为您编写媒体查询和样式。

希望这有帮助！