使wordpress模板移动友好

Question

我创建了一个带有官方 WordPress 子主题的自定义页面模板 二十七主题。

但是我在移动设备上遇到问题，这些页面对移动设备不友好，我得到的弹出窗口从 chrome 到 使页面适合移动设备 以及内容在移动设备上根本不可读。

我正在尝试使用 W3.css framework, how can i do the content mobile friendly with w3.css or just some css or any other library? Below is the code of the template. Here 使其变得友好，这是我使用的模板页面，不适合移动设备。

   <?php
/**
 * Template Name: More info template
 *
 * Description: A custom template for displaying a fullwidth layout with no sidebar.
 *
 * @package Twenty Seventeen Child
 */
?>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div style="padding:5px;" class="wrap">
    <div id="primary" class="content-area">
        <main id="main info-template"  class="site-main w3-padding" role="main">
            <?php
            while ( have_posts() ) : the_post();
                get_template_part( 'template-parts/page/content', 'page' );
                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;
            endwhile; // End of the loop.
            ?>

        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- .wrap -->

Answer 1

或者专门为此模板创建另一个页眉和页脚，以便 header-new.php 并调用：

get_header('new');

或者将 header.php 和 footer.php 的内容复制到模板的顶部和底部，并删除不需要的 html 元素。

模板中不应忽略以下标签：

<head> <html> wp_head(); 和 wp_footer();

使wordpress模板移动友好

Making wordpress template mobile friendly

css

wordpress

responsive

w3.css