今日、オンラインで役立つ個人によって提供されたコードに出くわしました。これは、Web サイトに追加しようとしているものに最適です。この個人が提供した関連コードはすべて持っていますが、Wordpress を使用した Web サイトに正しく実装する方法がわかりません。
正しい使い方を示すデモページ -> http://www.akshitsethi.me/labs/slidepanel/
基本的に、私が行ったことは、彼らの CSS を私の CSS ファイルの最後に正確にコピーすることです (後で好みに合わせて編集します)。テーマのフォルダーにアップロードした .js ファイルを正確に指すようにスクリプト コード内のリンクを手動で編集する以外は、スクリプト コードを正確に header.php ファイルにコピーしました。DIV に関する HTML コードを取得し、header.php ファイルに含めるように指示したslider.php ファイルに配置しました...
私が本当に助けを必要としているのは、なぜこれが機能しないのかを理解することです. 要約すると、CSS は正確で、SCRIPT コードは header.php にコピーされ、HTML は Slider.php にコピーされます。私は何か間違ったことをしていますか？
誰かが私のウェブサイトでこれを機能させる方法を理解するのを手伝ってくれれば、本当に感謝しています. これを使用しているテスト Web サイトはhttp://test.vtisvc.comです。ホームページのコンテンツ領域にある「メニュー」リンクは、理論的には、パネルを開閉するためのものです。明らかに、slider.php にパネル DIV が含まれているため、ヘッダーが台無しになっていると思います。
Slider.php の HTML
<div id="panel" class="hide">
<h4>MENU</h4>
<ul class="menu">
<li>
<a href="#">News Feed</a>
</li>
<li>
<a href="#">Friends</a>
</li>
<li>
<a href="#">Nearby</a>
</li>
<li>
<a href="#">Messages</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Photos</a>
</li>
<li>
<a href="#">Notes</a>
</li>
<li>
<a href="#">Pokes</a>
</li>
</ul>
</div>
HEAD タグを閉じる前の、header.php 内の HTML
<script type="text/javascript" src="http://test.vtisvc.com/wp-content/themes/brk_2013/js/jquery.min.js"></script>
<script type="text/javascript" src="http://test.vtisvc.com/wp-content/themes/brk_2013/js/jquery.pageslide.js"></script>
<script type="text/javascript">
$(".open").pageslide({ direction: "right", modal: true });
</script>
header.php の HTML で、開始 BODY タグの後に
<?php
include ('slider/slider.php');
?>
ホームページの HTML
<a href="#panel" class="open highlight strong">Menu</a>
CSS
#pageslide {
/*
* Required. Do not modify these.
*/
display: none;
position: absolute;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
/*
* Optional. You can tweak these as per your preference.
*/
width: 200px;
padding: 20px;
background-color: #fafafa;
color: #666;
-webkit-box-shadow: 0 0 3px 3px #efefef;
-moz-shadow: 0 0 3px 3px #efefef;
box-shadow: 0 0 3px 3px #efefef;
}