ワードプレスでjQuery 右から飛び出ているボタンをクリックするとボックスがスライドして出てくるよ

解決済

質問者：でこぽろ
質問日時：2017/02/22 14:07
回答数：2件

ワードプレスでjQuery

右から飛び出ているボタンをクリックするとボックスがスライドして出てくるようにしたのですが、ワードプレスでｊQueryを使う方法が調べてもよくわかりませんでした。
（調べるとたくさん出てくるのですが、その通りにやってもうまく動きません）

この件で何日も悩んでいて本当に困っています。
知識のある方、教えていただけませんか？

どうか宜しくお願いします(TT)

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： uxk
回答日時：2017/02/22 16:30

WordPressでもHTMLでも使い方は同じだと思います。

例えば、bxsliderでしたら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1200px">
<title><?php bloginfo('name'); ?></title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/index.css">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/jquery.bxslider.css">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.10.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
controls: false,
speed: 2000
});
});
</script>
<?php wp_head() ?>
</head>
<body>
<ul class="bxslider">
<?php query_posts( 'category_name=slider&posts_per_page=-1' ); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<li><?php echo wp_get_attachment_image(post_custom('photo'),'slider'); ?></li>
<?php endwhile; endif; ?>
<?php wp_reset_query();?>
</ul>
<?php wp_footer(); ?>
</body>
</html>

それとも、jQueryの使い方がわからないということでしょうか？

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！

jQuery自体ど素人です。

bxsliderはjQueryプラグインですよね？
これをダウンロードして、どこへダウンロードしたデータをアップロードしたらよいのでしょうか？

無知ですみません(;_;)

通報する

お礼日時：2017/02/23 12:40

No.2ベストアンサー

回答者： uxk
回答日時：2017/02/23 12:57

＞これをダウンロードして、どこへダウンロードしたデータをアップロードしたらよいのでしょうか？

答えはすべて前回のところにありますよ。
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/jquery.bxslider.css">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.bxslider.min.js"></script>
これです。
なので、私の場合は、テーマの中に「css」と「js」フォルダを作ってその中に入れているので、js/jquery.bxslider.min.jsこのようにしてます。
すべてここで聞くのではなくて、ネットで調べたらたくさんでてきます。
今後自分で作っていくのであれば検索して解決していかないと何もできませんよ。