Установить скрипт на WordPress

  • Решено abiturient

    (@abiturient)


    8 лет, 5 месяцев назад

    Здравствуйте. Нашёл в инете скрипт разворачивающейся панели, доработал HTML и CSS. В Notepad++ всё работает OK.

    Вот код:

    <!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
  	<title>Выезжающая панель</title>
	<script>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script>
$(document).ready(function() {
	$("#open").click(function(){
		$("div#panel").slideDown("slow");	
	});		
	$("#close").click(function(){
		$("div#panel").slideUp("slow");	
	});			
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
	});				
});
</script>

<style>
#panel {
	width: 100%;
	box-shadow: 0 2px 4px #000000;
	height: 470px;	
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
}
.tab {
    border-top: 2px solid #555555;
	height: 42px;
	position: relative;
    top: 0;
    z-index: 999;
}
.tab ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 42px;
	width: auto;
  	font-weight: bold;
	line-height: 42px;
	margin: -2px 0 0;
	right: 283px;
  	font-size: 80%;
}
.tab ul.login li  {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 42px;
}
.tab .sep {
	border: 2px solid #555555;
}
.tab ul.login li#toggle {
    background: ;
    border: 1px solid #555555;
    display: block;
    height: 42px;
    padding: 0 6px;
    text-decoration: none;
}
.tab a.open {
	height: 20px;
	line-height: 20px !important;
    cursor: pointer;
	display: block;
	width: 60px;
	position: relative;
	top: 11px;
}
.tab a.close{
    height: 20px;
	line-height: 20px !important;
    cursor: pointer;
	display: block;
	width: 60px;
	position: relative;
	top: 11px;   
}
</style>

</head>

<body>

	<div id="panel">
		<div class="content clearfix">          
		</div>
	</div>	

	<div class="tab">
		<ul class="login">

	        <li class="welcome"></li>			
			<li id="toggle">
				<a id="open" class="open" href="#">Открыть</a>
				<a id="close" style="display: none;" class="close" href="#">Закрыть</a>			
			</li>
		</ul> 
	</div> 	
     
Test				                             
</body>
</html>

    Если можно подскажите:

    1. Как прикрутить скрипт к WordPress. В файлах шаблона я ориентируюсь.
    2. В админке WP уже есть такая опция. Вкладки Настройки экрана и Помощь. Мне нужно такое же на лице сайта. Отсюда вопрос: нужно ли грузить jquery-1.7.min, и если да, то куда.
    Или есть вообще более оптимальное и простое решение. Я нашёл код вкладок в исходниках, но лезть в него боюсь — только начинаю ориентироваться в PHP и Jvascript.

    Заранее благодарен за ответ.

    • Тема изменена 8 лет, 5 месяцев назад пользователем abiturient. Причина: Орфографическая ошибка
Просмотр 8 ответов — с 1 по 8 (всего 8)
Просмотр 8 ответов — с 1 по 8 (всего 8)
  • Тема «Установить скрипт на WordPress» закрыта для новых ответов.