1. 首頁
  2. 問答
  3. 如何在使用WordPress內容管理系統時正確使用Foundation4？

如何在使用WordPress內容管理系統時正確使用Foundation4？

2013-11-20 44 views
-3

所以我使用的是Foundation 4框架。我創建了一個測試着陸頁。然後我從這個着陸頁面創建了一個頁面模板（該頁面簡稱爲page.php）。如何在使用WordPress內容管理系統時正確使用Foundation4？

但是，由於某種原因，我的page.php通過WordPress不符合我想要的樣子（我提供了一個屏幕快照來顯示它出來的內容）。

我的所有css和js文件都通過正確的文件路徑正確引用（請參閱下面的代碼）。基礎css文件夾包含的所有內容，我已將它轉移到wp-content/css文件夾（以及js和images文件夾）。

所以我不確定我的網頁爲什麼會出現。難道我做錯了什麼？

這裏是我的代碼看起來像（忽略額外的/隨機的意見，畢竟這是一個測試）：

<?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>[email protected]<br> 
       <b>Email (sales): </b>[email protected]<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>

enter image description here

來源

2013-11-20 Ebad Saghar

回答

4

無需從零基礎代碼一切。

一些好人已經爲你做了骯髒的工作。

檢查HERE或HEREHERE ..

現成爲基礎的主題 - 一個很好的起點。 你甚至可以像THIS插件，會幫助你，如果你想代碼..

但直接回答你的問題 - 從我的頭頂 - 你的CSS和腳本插入錯誤的，與錯誤的路徑。

在WP，你將不得不使用wp_register_script()和wp_enqueue_script()職能，與同爲風格wp_enqueue_style()和wp_register_style()

編輯我

評論後：

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爲embaded，只需要被稱爲

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;

所有這些當然只適用於你有正確的wp_head()和wp_footer()功能在你的主題文件，如果你正確地包含頁眉和頁腳，並做出正確的文件夾結構，並...

..我可以繼續下去，但說實話，我不認爲我可以給你在wordpress theme development和PHP和PHP崩潰當然在這裏只有一個答案SE ...

你將需要谷歌爲自己學習 - 並介意你，我不會試圖鼓勵你做到這一點 - 這是值得投入的時間。

但是從頭開始編寫第一個wordpress主題需要一定的專業知識，這就是爲什麼我之前建議你下載一些空主題 - 閱讀並向他們學習。

我自己（我相信SE的很多其他優秀人士）會更樂意通過回答具體問題來「引導你」這個過程 - 但是你必須建立一些基礎來堅持，否則它就變得不可能回答...

來源

2013-11-21 00:11:34

+0

對不起，遲到的答覆，但事情是，我想從頭開始編碼一切。另外，什麼是正確的路徑？謝謝。 –

+0

正確的方法是使用我上面編寫的函數。他們將提供正確的路徑（並且只有他們在wordpress中）閱讀codex（鏈接發佈）並隨意實現（如果您想從零開始編碼..） –

+0

我有因爲我已經對文件進行了必要的更改，但仍然無法正常工作，所以我將在上面的文章中對其進行編輯，以便您查看更改。 –

相關問題

 相關問題