Jump to content

Вопрос по подключению JavaScript в Wordpress


Recommended Posts

Всем привет!

Вопрос очень простой, хочу подключить JavaScript к себе на сайт WordPress вот к примеру есть html-ка:

 

<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="http://Сайт/js/jquery-1.1.3.1.min.js"></script>
<style type="text/css"> 
    .overlay{
        background:transparent url('015/overlay.png') repeat top left;
        position:fixed; /* с помощью этого правила фиксим и растягиваем его на весь экран*/
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        z-index:100;   /* поднимем его выше основной разметки*/
       }
   .nonebox{
         position:fixed;
         top:-300px;
         left:35%;
         right:35%;
         background:#fff;
         color:#4d4d4d;
         padding:25px;
         border:5px solid #e4e4e4;
         width:30%;
         z-index:101;   /* а его выше фонового блока*/
   }   
a.box-close{
float:right;
width:26px;
height:26px;
height:26px;
background:url('015/close.png') repeat top left;;
margin:-30px -30px 0px 0px;
cursor:pointer;
display:block
}   
</style> 
<script type="text/javascript"> 
 $(function() {
     $('#click-elem').click(function(){  // добираемся до элемента по которому будем кликать
         $('#overlay').fadeIn('fast',function(){ // после клика запускаем наш оверлэй
             $('#nonebox').animate({'top':'160px'},500); // а теперь аккуратно выводим наш блок
         });
     });
     $('#box-close').click(function(){ // кликаем по элементу который всё это будет закрывать
         $('#nonebox').animate({'top':'-200px'},500,function(){ // убираем наш блок
             $('#overlay').fadeOut('fast'); // и теперь убираем оверлэй
         });
     });
 });
</script>     
    </head>
    <body>
<a href="#" id="click-elem">Пример</a>
        <div class="overlay" id="overlay" style="display:none;"></div> 
        <div class="nonebox" id="nonebox"> 
            <a class="box-close" id="box-close" href="#"></a> 
            <h1>Заголовок</h1> 
            <p> 
Какой-нибудь простой текст. Картинку даже можно вставить или что-нибудь ещё
            </p> 
        </div>   
    </body>
</html>

 

Она отробатывает, если просто залить html на сервер, а как подключить в WordPress и уже внутри движка использовать мой JavaScript?

Добавлял ссылку на JavaScript в header.php + добавил стиль в style.css, добавляю запись в Wordpresse и всавляю текст вызывающий мой скрипт 

 

<a href="#" id="click-elem">Пример</a>
        <div class="overlay" id="overlay" style="display:none;"></div> 
        <div class="nonebox" id="nonebox"> 
            <a class="box-close" id="box-close" href="#"></a> 
            <h1>Заголовок</h1> 
            <p> 
Какой-нибудь простой текст. Картинку даже можно вставить или что-нибудь ещё
            </p> 
        </div>   
ни чего не работает, подскажите как правильно подключить JavaScript в Wordpress и уже внутри Wordpress использовать скрипт, к примеру в создаваемой страницы или поделитесь ссылкой на рекомендации, копался в инете ничего не нашел :(
Вот скрипт который хочу поставить к себе на сайт http://yeap.narod.ru/js/015.html
Link to post
Share on other sites
  • VIP

А саму функцию нужно описать в header.php или в function.php?

Функцию Вашу надо прописать после подключения самой jquery. Пользовательская функция, работающая на jquery всегда должна выводится после неё, иначе будет ошибка.

Link to post
Share on other sites

Функцию Вашу надо прописать после подключения самой jquery. Пользовательская функция, работающая на jquery всегда должна выводится после неё, иначе будет ошибка.

ок, попробую так в принципе и делал, сперва прописал в header.php ссылку на скрипт, там же описал функцию, затем в style.css добавил новые стили и на странице писал код, который вызывает функцию, ок понял сделаю.

Спасибо, попробую воспользоваться выше описанным рекомендациям.

Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...