使wordpress模板移动友好

时间:2017-11-24 12:47:48

标签: css wordpress responsive w3.css

我创建了一个自定义页面模板,其子主题为官方WordPress 二十七主题

但是我在移动设备上遇到问题,这些页面不是移动设备友好的,我从Chrome到弹出窗口使页面移动友好,实际上内容在移动设备上根本无法读取。

我正在尝试使用W3.css framework使其友好,我如何使用w3.css或只是某些css或任何其他库来进行内容移动友好?下面是模板的代码。 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 -->

1 个答案:

答案 0 :(得分:1)

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

get_header('new');

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

以下标记应在模板中忽略 NOT

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