0

このHTML5UP テンプレートを Wordpress テーマに変換する必要があります。これまでのところ、結果には全体的に満足していますが、何らかの理由で、オフキャンバス ナビゲーション (元のページの要素を確認すると表示される<div id="titleBar">、および後続のすべてのコード) が表示されません。<div id="navPanel">もちろん、モバイルビューでもありません。同時に、ドロップダウン メニュー (jquery.dropotron.min.js を使用) は機能しますが、元のナビゲーションと比較すると、サブナビゲーションが「高すぎる」ように見えます。

明らかに、私は何かを台無しにしましたが、何が間違っていたのかを理解するのに苦労しています. 私はコードの専門家ではありません。そのため、あなたの貴重な助けを求めることにしました。記録のために、すべてのスクリプトとスタイルは functions.php ページにロードされます。

これは私のマークアップです:

<!doctype html>
<html class="no-js" lang="en" >
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="wp-content/themes/jc/style.css" />
<title>My Blog</title>
<script>
    $(function() {

// Note: make sure you call dropotron on the top level <ul>
    $('#nav > ul').dropotron({ 
        offsetY: -10 // Nudge up submenus by 10px to account for padding
        });
    });
</script>
</head>
<body class="homepage">
<div id="page-wrapper">
<!--HEADER-->
<div id="header-wrapper" class="wrapper">
<div id="header">
<!--LOGO-->
<div id="logo">
<h1><a href="index.html">Name Site</a></h1>
<p>Name Site Subtitle</p>
</div>
<!--MENU-->
<nav id="nav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="#">Link1</a>
<ul>
<li><a href="#">Sub-Link1</a></li>
<li><a href="#">Sub-Link1</a></li>
<li><a href="#">Sub-Link1</a></li>
</ul></li>
<li><a href="#">Link2</a>
<ul>
<li><a href="#">Sub-Link2</a></li>
<li><a href="#">Sub-Link2</a></li>
</ul></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</nav>
</div>
</div>
<!--INTRO-->
<div id="intro-wrapper" class="wrapper style1">
<div class="title">WELCOME</div>
<section id="intro" class="container">
<div class="row">
<div id="welcome-message" class="4u 12u(mobile)">
Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div>
<div class="8u">728x90ads</div>
</div>
</section>
</div>
<!--MAIN CONTENT-->
<div class="wrapper style2">
<div class="title">MAIN CONTENT</div>
<div id="main" class="container">
<div class="row 150%">
<div class="4u 12u(mobile)">
<!--LEFT SIDEBAR-->
<div id="sidebar">
<section class="box">
<header>
<h2>Ipsum nullam luctus</h2>
</header>
<p>Malesuada quis eget eros. Nullam sodales cursus sapien, id consequat leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit amet risus elit.</p>
<a href="#" class="button style1">Learn More</a>
</section>
<section class="box">
<header>
<h2>Vitae turpis consequat</h2>
</header>
<ul class="style2">
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="wp-content/themes/jc/images/pic08.jpg" alt="" /></a>
<h3><a href="#">Diam odio lorem</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="wp-content/themes/jc/images/pic09.jpg" alt="" /></a>
<h3><a href="#">Sed duis consequat</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="wp-content/themes/jc/images/pic10.jpg" alt="" /></a>
<h3><a href="#">Tellus nulla volutpat</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
</ul>
<a href="#" class="button style1">Archives</a>
</section>
</div>
</div>

<div class="8u 12u(mobile) important(mobile)">
<!--CONTENT-->
<div id="content">  
<article class="box post">
<header class="style1">
<h2 align="left"><a href="http://illusion8.com/test/?p=1" rel="bookmark" title="Permanent Link: Hello world!">Hello world!</a></h2>
<div class="date">Mar 29, 2015</div>
<div class="info"><strong>Published by: </strong> <i class="fa fa-user"></i><em> Gioia</em> in <i class="fa fa-tags"></i> <a href="http://illusion8.com/test/?cat=1" rel="category">Uncategorized</a> | <i class="fa fa-comments"></i> <a href="http://illusion8.com/test/?p=1#comments">0 Comments</a></div>
</header>
<a href="#" class="image featured"><img src="wp-content/themes/jc/images/pic01.jpg" alt="" /></a>
<p><p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</p>
</article>
<div id="content">  
<article class="box post">
<header class="style1">
<h2 align="left"><a href="http://illusion8.com/test/?p=57" rel="bookmark" title="Permanent Link: Another Post with Everything In It">Another Post with Everything In It</a></h2>
<div class="date">Sep 17, 2008</div>
<div class="info"><strong>Published by: </strong> <i class="fa fa-user"></i><em> Gioia</em> in <i class="fa fa-tags"></i> <a href="http://illusion8.com/test/?cat=5" rel="category">Child Category I</a>,<a href="http://illusion8.com/test/?cat=2" rel="category">Parent Category I</a>,<a href="http://illusion8.com/test/?cat=3" rel="category">Parent Category II</a> | <i class="fa fa-comments"></i> <a href="http://illusion8.com/test/?p=57#comments">1 Comment</a></div>
</header>
<a href="#" class="image featured"><img src="wp-content/themes/jc/images/pic01.jpg" alt="" /></a>
<p><p><img class="alignright" src="http://i35.tinypic.com/990wtx.png" alt="WordPress Logo" align="right" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, <a href="#">convallis quis</a>, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.  <a href="http://illusion8.com/test/?p=57#more-57" class="more-link">Continue reading &raquo;</a></p>
</p>
</article>
<div id="content">  
<article class="box post">
<header class="style1">
<h2 align="left"><a href="http://illusion8.com/test/?p=50" rel="bookmark" title="Permanent Link: An Ordered List Post">An Ordered List Post</a></h2>
<div class="date">Sep 17, 2008</div>
<div class="info"><strong>Published by: </strong> <i class="fa fa-user"></i><em> Gioia</em> in <i class="fa fa-tags"></i> <a href="http://illusion8.com/test/?cat=1" rel="category">Uncategorized</a> | <i class="fa fa-comments"></i> <a href="http://illusion8.com/test/?p=50#comments">0 Comments</a></div>
</header>
<a href="#" class="image featured"><img src="wp-content/themes/jc/images/pic01.jpg" alt="" /></a>
<p><p>Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo. Fusce in est. Sed nec diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque semper nibh eget nibh. Sed tempor. Fusce erat.</p>
<h3>An Ordered List</h3>
<ol>
<li>Vestibulum in mauris semper tortor interdum ultrices.</li>
<li>Sed vel lorem et justo laoreet bibendum. Donec dictum.</li>
<li>Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.</li>
<li>Praesent volutpat eros quis enim blandit tincidunt.</li>
<li>Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.</li>
</ol>
</p>
</article>

<!-- Pagination (Page-Navi WP Plugin) -->
 </div></div></div></div></div></div></div>
<!--FOOTER-->
<div id="footer-wrapper" class="wrapper">
<div id="footer" class="container">
<header class="style1">
<h2>Ipsum sapien elementum portitor?</h2>
<p>Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br />
Nam pharetra laoreet imperdiet volutpat etiam consequat feugiat.</p>
</header>
<hr />
<div class="row 150%">
<div class="6u 12u(mobile)">
<!-- Contact Form -->
<section>
<form method="post" action="#">
<div class="row 50%">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="contact-name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="text" name="email" id="contact-email" placeholder="Email" />
</div>
</div>
<div class="row 50%">
<div class="12u">
<textarea name="message" id="contact-message" placeholder="Message" rows="4"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="style1" value="Send" /></li>
<li><input type="reset" class="style2" value="Reset" /></li>
</ul>
</div>
</div>
</form>
</section>
</div>
<div class="6u 12u(mobile)">
<!-- Contact -->
<section class="feature-list small">
<div class="row">
<div class="6u 12u(mobile)">
<section>
<h3 class="icon fa-home">Mailing Address</h3>
<p>Untitled Corporation<br />
1234 Somewhere Rd #987<br />
Nashville, TN 00000-0000</p>
</section>
</div>
<div class="6u 12u(mobile)">
<section>
<h3 class="icon fa-comment">Social Network</h3>
<p>
<a href="#">@untitled-corp</a><br />
<a href="#">facebook.com/untitled</a>
</p>
</section>
</div>
</div>
<div class="row">
<div class="6u 12u(mobile)">
<section>
<h3 class="icon fa-envelope">Email</h3>
<p><a href="#">webmaster@namesite.com</a></p>
</section>
</div>
</div>
</section>
</div>
</div>
<hr />
</div>
<div id="copyright">
<ul>
<li>&copy; NameSite.com</li>
<li>Design by: <a href="#">NameSite2</a> | Based on: <a href="http://html5up.net">HTML5 UP</a> | Powered by: <a href="http://wordpress.com">Wordpress</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

`

事前にどうもありがとうございました

4

1 に答える 1

0

誰かが興味を持っている場合に備えて、このテンプレートを Wordpress のテーマとして機能させ、ほとんどのスクリプトを同時に functions.php ファイルに保持する唯一の解決策は、footer.php jquery.dropotron に残すことです。 min.js と util.js が含まれていますが、他のすべてのスクリプト (jquery.min.js、skel.min,js、skel-viewport.min.js、main.js) は functions.php に配置できます。jquery.dropotron.min.js の前に jquery.js がロードされていることを確認してください。

于 2015-11-17T08:17:22.550 に答える