4eker59

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

5 posts in this topic

Всем привет!

Вопрос очень простой, хочу подключить 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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.