Fatal编程技术网
  • php/
  • 如何在使用WordPress内容管理系统时正确使用Foundation4？ >我使用的是基础4框架。我创建了一个测试登录页。然后，我从这个登录页创建了一个页面模板，该页面简称为page.php

如何在使用WordPress内容管理系统时正确使用Foundation4？ >我使用的是基础4框架。我创建了一个测试登录页。然后，我从这个登录页创建了一个页面模板，该页面简称为page.php

php wordpress zurb-foundation

如何在使用WordPress内容管理系统时正确使用Foundation4？ >我使用的是基础4框架。我创建了一个测试登录页。然后，我从这个登录页创建了一个页面模板，该页面简称为page.php,php,wordpress,zurb-foundation,Php,Wordpress,Zurb Foundation,然而，由于某些原因，我通过WordPress创建的page.php不符合我的要求，我提供了一个屏幕截图来显示它的外观 我所有的css和js文件都通过正确的文件路径被正确引用，请参见下面的代码。基础CSS文件夹所包含的所有内容，我已经将它转移到WP内容/ CSS文件夹以及JS和图像文件夹。p> 所以我不确定为什么我的页面会这样出现。我做错什么了吗 下面是我的代码的样子忽略额外的/随机的注释，毕竟它是用于测试的： <?php /* Template Name: VM */?> <

然而，由于某些原因，我通过WordPress创建的page.php不符合我的要求，我提供了一个屏幕截图来显示它的外观

我所有的css和js文件都通过正确的文件路径被正确引用，请参见下面的代码。基础CSS文件夹所包含的所有内容，我已经将它转移到WP内容/ CSS文件夹以及JS和图像文件夹。p> 所以我不确定为什么我的页面会这样出现。我做错什么了吗

下面是我的代码的样子忽略额外的/随机的注释，毕竟它是用于测试的：

<?php /* Template Name: VM

*/?>

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title> VenziMedia Foundation 4</title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->

  <!-- 

  <link rel="stylesheet" href="lol/wordpress/wp-content/foundation-5/css/normalize.css" />
  <link rel="stylesheet" href="lol/wordpress/wp-content/foundation-5/css/foundation.css" />
  <script src="lol/wordpress/wp-content/foundation-5/js/foundation.min.js"></script>

  <script src="lol/wordpress/wp-content/foundation-5/js/jquery.txt"></script>
  <script src="lol/wordpress/wp-content/foundation-5/js/vendor/custom.modernizr.js"></script>
  --> 

  <?php 
  include('lol/wordpress/wp-includes/functions.wp-styles.php');
  include('lol/wordpress/wp-includes/functions.wp-scripts.php');

  wp_register_style( 'normalize-css', 'lol/wordpress/wp-content/foundation-5/css/normalize.css');
  wp_enqueue_style( 'normalize-css', 'lol/wordpress/wp-content/foundation-5/css/normalize.css');
  ?>

  <?php
  include('lol/wordpress/wp-includes/functions.wp-styles.php');
  include('lol/wordpress/wp-includes/functions.wp-scripts.php');

  wp_register_style( 'foundation-css', 'lol/wordpress/wp-content/foundation-5/css/foundation.css');
  wp_enqueue_style( 'foundation-css', 'lol/wordpress/wp-content/foundation-5/css/foundation.css');
  ?>

  <?php
  include('lol/wordpress/wp-includes/functions.wp-styles.php');
  include('lol/wordpress/wp-includes/functions.wp-scripts.php');

  wp_register_script( 'foundation-min', 'lol/wordpress/wp-content/foundation-5/js/foundation.min.js' );
  wp_enqueue_script( 'foundation-min', 'lol/wordpress/wp-content/foundation-5/js/foundation.min.js' );
  ?>

  <?php
  include('lol/wordpress/wp-includes/functions.wp-styles.php');
  include('lol/wordpress/wp-includes/functions.wp-scripts.php');

  wp_register_script( 'jquery', 'lol/wordpress/wp-content/foundation-5/js/jquery.txt' );
  wp_enqueue_script( 'jquery', 'lol/wordpress/wp-content/foundation-5/js/jquery.txt' );
  ?>

  <?php
  include('lol/wordpress/wp-includes/functions.wp-styles.php');
  include('lol/wordpress/wp-includes/functions.wp-scripts.php');

  wp_register_script( 'mod-js', 'lol/wordpress/wp-content/foundation-5/js/vendor/custom.modernizr.js' );
  wp_enqueue_script( 'mod-js', 'lol/wordpress/wp-content/foundation-5/js/vendor/custom.modernizr.js' );
  ?>

</head>
<body>

  <!-- body content here -->

  <nav class="top-bar">
    <ul class="title-area">
        <li class="name">
            <h1><a href="vm.php">VenziMedia</a></h1>
        </li>
    </ul>

    <section class="top-bar-section">
    <ul class="right">

        <li class="divider"></li>

        <li class="name">
            <h1><a href="vm.php">Home</a></h1>
        </li>

        <li class="divider"></li>

        <li class="name">
            <h1><a href="vm.php">Services</a></h1>
        </li>

        <li class="divider"></li>

        <li class="name">
            <h1><a href="vm.php">Advertisers</a></h1>
        </li>

        <li class="divider"></li>

        <li class="name">
            <h1><a href="vm.php">Technology</a></h1>
        </li>

        <li class="divider"></li>

        <li class="name">
            <h1><a href="#" data-reveal-id="second-modal">Contact</a></h1>
        </li>

        <li class="divider"></li>
        <li class="has-form">
            <a href="#" data-reveal-id="myModal" class="tiny button">LOGIN/SIGN UP</a>
        </li>
    </section>
    </ul>
  </nav>


  <br><br><br>

<!-- ======================== ORBIT===================== -->
<div style="width: 80%; margin:0 auto">
    <ul data-orbit>
        <li>
            <img src="1.jpg" />
            <div class="orbit-caption">you this is the first slideeee</div>
        </li>
        <li>
            <img src="1.jpg" />
            <div class="orbit-caption">why don't you just send us money?</div>
        </li>
        <li>
            <img src="1.jpg" />
            <div class="orbit-caption">how much wood could a wood chuck chuck, if a wood chuck could chuck wood?</div>
        </li>
    </ul>
</div>

<br><br><br>
<!-- =======ORBIT END======= -->

<!-- =======14 ======= -->

<div style="text-align:center">
<a href="#" class="large button expand">START YOUR FREE 14-DAY TRIAL! </a>
</div>

<!-- =======14 day END ======= -->

<!--===== 2 PANELLS ====  -->

<div class="row">
    <div class="small-6 columns">
        <div class="panel">
            <h6>LOCAL/SMB</h6>
            <p>Learn how VenziMedia can help your business advertise on a local and national level with strategic ad solutions.</p>
        </div>
    </div>

    <div class="small-6 columns">
        <div class="panel">
            <h6>AGENCY/BRAND</h6>
            <p>Contact VenziMedia today to see how we can add value to you or your clients Brand and get a better ROI.</p>
        </div>
    </div>

</div>

<!-- ====== 2 PANELLS END ====  -->

<!-- ===== WHY VENZI MEDIA ====== -->
<div style="text-align:center">
    <a href="#" class="large button">WHY VENZIMEDIA?</a>
</div>
<!-- ===== WHY VENZI MEDIA END ====== -->


<div class="row">
    <div class="small-4 columns">
        <div class="panel">
        <!-- Content here -->
        <h6>You check this out man</h6>
        <p>we got some cool stuff at venziMedia !</p>
        </div>
    </div>

    <div class="small-4 columns">
        <ul class="pricing-table">
            <li class="title">Standard</li>
            <li class="price">$99.99</li>
            <li class="description">An awesome description</li>
            <li class="bullet-item">1 Database</li>
            <li class="bullet-item">5GB Storage</li>
            <li class="bullet-item">20 Users</li>
            <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
        </ul>
    </div>

    <div class="small-4 columns">
        <div class="panel">
        <!-- Content here -->
        <h6>some more cool stuff</h6>
        <p> you know like venzimedia !this is some random words</p>
        </div>
    </div>

</div>


    <script>
      document.write('<script src=lol/wordpress/wp-content/foundation-5/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js><\/script>');
    </script>

  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'lol/wordpress/wp-content/foundation-5/js/vendor/zepto' : 'lol/wordpress/wp-content/foundation-5/js/vendor/jquery') +
  '.js><\/script>')
  </script>


  <script>
    $(document).foundation();
  </script>

 <!-- =========== FIRST REVEAL ======= -->
 <div id="myModal" class="reveal-modal">
     <form>
         <fieldset>
             <legend>Fieldset</legend>

             <div class="row">
                 <div class="large-12 columns">
                     <label>Input Label</label>
                     <input type="text" placeholder="large-12.columns">
                </div>
            </div>

        <div class="row">
            <div class="large-4 columns">
                <label>Input Label</label>
                <input type="text" placeholder="large-4.columns">
            </div>

            <div class="large-4 columns">
                <label>Input Label</label>
                <input type="text" placeholder="large-4.columns">
            </div>

        <div class="large-4 columns">
            <div class="row collapse">
                <label>Input Label</label>
            <div class="small-9 columns">
                <input type="text" placeholder="small-9.columns">
            </div>
                <div class="small-3 columns">
                    <span class="postfix">.com</span>
                </div>
            </div>
        </div>
    </div>

   <div class="row">
     <div class="large-12 columns">
       <label>Textarea Label</label>
        <textarea placeholder="small-12.columns"></textarea>
      </div>
    </div>

  </fieldset>
  </form>
  </div>
 <!-- ========== FIRST REVEAL END ====== -->

 <!-- ========= 2ND REVEAL ===== -->
 <div id="second-modal" class="reveal-modal">
    <div class="section-container tabs" data-section="tabs">
        <section class="active">
            <p class="title" data-section-title><a href="#">Phone/Email</a></p>
            <div class="content" data-section-content>
                <b>Sales #: </b>123-456-789<br>
                <b>Tech #: </b>232-453-564<br>
                <b>Email (tech): </b>tech@Venzimedia.com<br>
                <b>Email (sales): </b>sales@Venzimedia.com<br>
            </div>
        </section>

        <section>
            <p class="title" data-section-title><a href="#">Adress</a></p>
            <div class="content" data-section-content>
                <b>123 Easy St.</b><br>
                <b>Hayward, CA</b><br>
                <b>94509</b><br>
                <b>USA</b>
            </div>
        </section>

        <section>
            <p class="title" data-section-title><a href="#">Social</a></p>
            <div class="content" data-section-content>
                <a href="https://www.facebook.com/VenziMedia?ref=br_tf">Check our Facebook!</a><br>
                <a href="https://twitter.com/venzimedia">Check our Twitter!</a>
            </div>
        </section>


    </div>
</div>
 <!-- ========== 2ND REVEAL END ==== -->



</body>
</html>

不需要对零进行任何代码的基础。

有些好人已经为你做了坏事

检查或

《准备好的主题》是一个很好的起点。 如果你真的想编码，你甚至有这样的插件可以帮助你

但是，为了直接回答你的问题——在我的脑海里——你的CSS和脚本插入错误，路径错误

在WP中，您必须使用和函数，样式和函数也是如此

编辑一

评论后：

I had to un-answer this because I had made the necessary changes to the file and still it did not work, I will make an edit in my post above for you to see the changes.
伙计，我想你全错了。。。 通过上面的代码，我可以理解您在wordpress开发和PHP方面的经验很少

如果你坚持从零开始写你自己的主题，我建议你自己熟悉一些基本概念

您插入的代码完全错误，并且位于错误的位置。。它需要进入functions.php，并且需要如下所示：

/**
 * Enqueue Scripts and Styles for Front-End
 */

if ( ! function_exists( 'foundation_assets' ) ) :

function foundation_assets() {

    if (!is_admin()) {

        /** 
         * Deregister jQuery in favour of ZeptoJS
         * jQuery will be used as a fallback if ZeptoJS is not compatible - uncomment at will
         * @see foundation_compatibility & http://foundation.zurb.com/docs/javascript.html
         */
        // wp_deregister_script('jquery');

        // Load JavaScripts
        wp_enqueue_script( 'foundation', get_template_directory_uri() . '/js/foundation.min.js', null, '4.0', true );
        wp_enqueue_script( 'modernizr', get_template_directory_uri().'/js/vendor/custom.modernizr.js', null, '2.1.0');
        if ( is_singular() ) wp_enqueue_script( "comment-reply" );

        // Load Stylesheets
        wp_enqueue_style( 'normalize', get_template_directory_uri().'/css/normalize.css' );
        wp_enqueue_style( 'foundation', get_template_directory_uri().'/css/foundation.min.css' );
        wp_enqueue_style( 'app', get_stylesheet_uri(), array('foundation') );

        // Load Google Fonts API
        wp_enqueue_style( 'google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:400,300' );

    }

}

add_action( 'wp_enqueue_scripts', 'foundation_assets' );

endif;
你不需要

include('lol/wordpress/wp-includes/functions.wp-styles.php');
  include('lol/wordpress/wp-includes/functions.wp-scripts.php');
当然不是6次在PHP中，包括一次就足够了

还有，下面一行

wp_enqueue_script( 'jquery', 'lol/wordpress/wp-content/foundation-5/js/jquery.txt' )
错误，因为jquery存储在wp中，只需调用

wp_enqueue_script( 'jquery');
然后需要初始化

/**
 * Initialise Foundation JS
 * @see: http://foundation.zurb.com/docs/javascript.html
 */

if ( ! function_exists( 'foundation_js_init' ) ) :

function foundation_js_init () {
    echo '<script>$(document).foundation();</script>';
}

add_action('wp_footer', 'foundation_js_init', 50);

endif;
当然，只有在主题文件中有正确的and函数，并且正确地包含页眉和页脚，并且创建了正确的文件夹结构，以及

…我可以继续讲下去，但老实说，我不认为我可以给你一个速成班，在这里只有一个答案

为了学习，你需要自己用谷歌搜索——请注意，我并不鼓励你这么做——这是值得你花时间的

但是，从头开始编写wordpress的第一个主题需要一定的专业知识，这就是为什么我建议您在之前下载一些空主题-阅读并从中学习

我本人和我相信，SE上的许多其他优秀人士将非常乐意通过回答特定问题来引导您完成这一过程-但您必须建立一些基础，否则就无法回答…

很抱歉，我的回答太晚了，但问题是，我想从头开始编写所有代码。另外，正确的路径是什么？谢谢。正确的方法是使用我上面写的函数。它们将提供正确的路径，只有它们在wordpress中阅读张贴的codex链接，如果你想从零开始编码，它们才可以随意实现。我必须取消回答这个问题，因为我已经对文件进行了必要的更改，但它仍然不起作用，我将在上面的帖子中进行编辑，以便您看到更改。