サービス一覧
レンタルサーバー
ドメイン取得
SSL証明書

メンバーメニュー

ようこそ、ゲストさん

■ トップ > カテゴリ一覧 > WPblog > アコーディオンのスクリプトが作動しません

質問

  • アコーディオンのスクリプトが作動しません
  • 本文：

    恐れ入ります、アコーディオン機能についてお助けいただけませんでしょうか。
    ローカルでXAMPP+Wordpressを利用して、アコーディオン（プルダウンメニュー）を作成しました。
    ローカルでは問題なく動くのですが、アップロードしてブラウザで見てみるとアコーディオン（プルダウンメニュー）が機能しません。
    トップ画面に行くと、アコーディオン機能で隠れていないといけない内容がすべての内容が出てきてしまいます。
    以下のスクリプトです。

    <script>
    // アコーディオンです
    $(function() {
    $( "#accordion" ).accordion({
    heightStyle: "content"
    });
    });
    </script>

    恐れ入ります、どんな些細なことでも結構ですのでアドバイス、ご指導いただければありがたいです。
    よろしくお願いいたします。

  • 緊急度：通常投稿者：megumi1991さん投稿時間：2016/02/24 10:52
質問に対する回答は締め切られました

回答 No.4384

  • この回答がベストアンサーです

  • 本文：

    高度なことをやっておられる感じがするので、必要ないかと思いますが
    書いておきます。

    ■
    ＞部員一人一人のHPを作って競争意識を高めたいという思いからサブディレクトリ型のほうがいいのかと思いまして、

    たぶん、部員一人一人をカテゴリーにして
    Wordpressの記事投降で、１ページずつ作るほうが良いと思う。

    パーマリンクの設定で、
    /%category%/%postname%/

    みたいにすれば、

    見た目は、サブディレクトリ構造になるかと思います。

    この方法だと、PHPを作成する必要がないので難易度は下がると思います。


    ■
    Wordpressのプラグインなどを使うと難易度が下がる場合もあるます。

    「Wordpress　プラグイン　アコーディオン」とかで探せば、参考になるブログとかがヒットするかと思います。

  • 投稿者：k-tanさん 投稿時間：2016/02/25 14:59
質問者からのコメント

k-tanさん

めぐみです、ご指導ありがとうございました。
おかげさまで無事作動することができました(^o^)。
問題はFTP転送時にバイナリー転送することでサーバとローカルのファイルサイズが一緒になり解決しました(^o^)。
恐れ入ります、アドバイスいただいた件でご連絡差し上げました。


１．”部員一人一人をカテゴリーにしてWordpressの記事投降で、１ページずつ作るほうが良いと思う”
記事投稿のようにすれば、例えば
http://megumi1991.wpblog.jp/
と同じように表現できるのでしょうか？
それとも、記事の一部にこのようなページがあるようにみえるのでしょうか。
スミマセン、イメージがしっかりわかなくて、おかしな質問をしているかもしれませんがよろしくお願いします。


”パーマリンクの設定で、/%category%/%postname%/にすれば、サブディレクトリ構造になる”
ありがとうございます！
すごくありがたい提案でした。
ただ、ひとつ質問させて下さい。
生徒一人一人のHPを作るのですが、許可した人だけしか見れないようにしたいのです。
例えば、AさんからZさんまでいて、AさんのHPはAさんしかみれず、AさんはZさんのHPを見れません。
ただ、AさんがZさんを許可すれば（許可する場合、Zさんに許可するメールを送って同意すれば見れるようにしたい）
見れるようにしたいのですが、ご提案頂いた”記事投稿”の方法でも上記のようなセキュリティをかけることができるでしょうか？
もし、できるようでしたら、少し具体的に教えて頂ければすごくありがたいです。

本当に見知らぬ私に親切にアドバイス下さりありがとうございます。
お時間あるときで結構ですが、なにとぞよろしくお願いいたします。

回答 No.4374

  • 本文：

    wordpressの jqueryは、標準では、$ は使えないので、

    スクリプトの最初に、

    $=jQuery;

    と書くとか、( 他の方法も 検索すれば、いろいろ解説が見つかるはず )対策が必要です。

    # もちろん、jqueryが読み込まれていないと当然にダメです。

  • 投稿者：ジョバンニさん 投稿時間：2016/02/24 11:13
質問者からのコメント

ジョバンニさま

早速のご連絡を頂きましてありがとうございます。めぐみと申します。
恐れ入ります、”スクリプトの最初に、$=jQuery;とか書く”
の意味がよくわかりません。理解するために他のHPを調べてみましたが理解できず大変申し訳ありませんが再度質問させていただきました。

ヘッダーに以下のようにしてアコーディオンのスクリプトを書いています。
// アコーディオンです
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
</script>

そして、ボディーを下記のようにして呼び出しています。
<div id="accordion">
<h3>1番目</h3>
<h3>2番目</h3>
<h3>3番目</h3>
<h3>4番目</h3>
<h3>5番目</h3>

この場合にどこに”$=jQuery;”を書けばいいでしょうか？

大変恐れ入りますがお時間あるときで結構ですのでご連絡いただけると助かります。
よろしくお願いいたします。

回答 No.4379

  • 本文：

    > 恐れ入ります、”スクリプトの最初に、$=jQuery;とか書く”
    の意味がよくわかりません。

    場所は
    <script>
    var $=jQuery; 　　　<= この辺です。
    // アコーディオンです
    $(function() {

    標準のjquery(jquery.comで配布しているもの)だと、$はjQueryの別名になっているのですが、$という変数は他のライブラリ(prototype.jsとか)でも使われることが多いので、衝突を避けるために、Wordpressに組み込まれているjqueryは、$がjQueryの別名になっていないので、$をjQueryの積りで使うと動作しません。

    Web上で見かける対処法だと、
    (function($) {
    $を使ったスクリプト
    })(jQuery));
    と書けとか、他にもいろいろ方法は有るようです。


    > ローカルでは問題なく動くのですが、

    まあ、jqueryが読み込まれていない、なんてことは無いと思いますが、jquiry.js の他に、jquery-ui.js も読み込んでおく必要があります。
    普通はtemplateの方で、
    wp_enqueue_script('jquery-ui-accordion')
    とか書きますかね。

    この辺にも書かれています。 http://wp.fromkato.com/?p=1918

  • 投稿者：ジョバンニさん 投稿時間：2016/02/24 15:23
質問者からのコメント

何度も本当にありがとうございます、めぐみです。
大変恐れ入ります、教えていただいたことを試してみたのですが以前の変わりませんでした。
大変失礼だと思ったのですが、他のホームページを見てても解決策が見つからずソースを貼り付けてしまいました。
25行目にアドバイスいただいた”var $=jQuery;”を入れました。
ローカルで動くのになぜサーバにアップすると動かなくなるのかどうしてもわからなくなりました。
もし、以下のソースを見ていただいてヒントでも何でも結構なのですが、アドバイスいただければ大変助かります。
何度も恐れ入りますがよろしくお願いいたします。

<!doctype html>
<html lang="ja">
<head>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>./style.css">
<script src="<?php bloginfo('template_url'); ?>./js/jquery-2.1.4.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>./js/jquery-ui.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>./js/jquery-ui.css" />

<!--ここからFlotr2のスクリプトです-->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>./js/flotr2.min.js"></script>
<style>
.graph {
width : 500px;
height: 300px;
margin: 2em auto 0;}
</style>
<!--ここまでFlotr2のスクリプトです-->

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>./css/mobile.css" type="text/css">
<meta charset="utf-8" />

<title>がんばって強くなってください</title>

<script>
var $=jQuery;
// 全体のアコーディオンです。
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
</script>

<script>
//もう一つのアコーディオンです。

$(function () {
// 親メニュー処理
$('span').click(function() {
// メニュー表示/非表示
$(this).next('ul').slideToggle('fast');
});

// 子メニュー処理
$('li').click(function(e) {
// メニュー表示/非表示
$(this).children('ul').slideToggle('fast');
e.stopPropagation();
});
});
</script>

</head>
<body>
<div class="parent"></div>

<div id="accordion">
<h3>1番目</h3>

<div>
<table width="80%" border="0">
<tr>
<td width="50%" align="center">目標達成率</td>
<td align="center">山下さん</td>
</tr>
<tr>
<td align="center"><font size="7" color="0c9697">　68%　　</font></td>
<td><img src="<?php bloginfo('template_url'); ?>/images/KAO.png" alt="" width="150" height="190"></td>
</tr>
<tr>
<td colspan="2" bgcolor="#F0E68C">成長度ランキング</td>
</tr>
<tr>
<td colspan="2">あなたの努力度はチーム内で<br>
<font size="5" color="0c9697">3位</font>
/30人中 です</td>
</tr>

</table>
</div>

<h3>2番目</h3>
<div>


<!--ここからFlotr2体重の推移折れ線グラフのスクリプトです-->
<section id="smp3">
<div id="graph2-1" class="graph"></div>
<script>
(function basic(container) {
var
d1 = [[1, 110],[2, 112],[3, 112.5],[4, 115.2],[5, 116],[6, 118]],
d2 = [[1, 74],[2, 76],[3, 78],[4, 82],[5, 83],[6, 85]],
d3 = [[1, 25],[2, 26],[3, 28],[4, 31],[5, 33],[6, 35]],

data = [{
data: d1,
label: "Aさん"}, {
data: d2,
label: "Bさん"}, {
data: d3,
label: "Cさん"

}]

ticks = [
[1, "2016.01"],
[2, "2016.02"],
[3, "2016.03"],
[4, "2016.04"],
[5, "2016.05"],
[6, "2016.06"]];
graph = Flotr.draw(container, data, {
grid: {outline:'ns'},
lines: { lineWidth:2},
xaxis: {ticks:ticks,
title:'測定日'},



yaxis:{min:10,
max:125,
title:'(Kg)'},
legend: {
backgroundColor:"#eee",
margin:12},
});
})(document.getElementById("graph2-1"));
</script>
</section>
<!--ここまでFlotr2体型の推移折れ線グラフのスクリプトです-->


</div>


<h3>3番目</h3>
<div>

<div>

<span>更にアコーディオン</span>
<ul>
<li>アコーディオン1
<ul>

<li><a href="https://youtu.be/xxxxxxxxxx">アコーディオンA</a></li>
<li><a href="https://youtu.be/xxxxxxxxxx">アコーディオンB</a></li>
</ul>
</li>

<li>アコーディオン2
<ul>
<li>メニュー 1-3-1
<ul>
<li><a href="#">メニュー 1-3-1-1</a></li>
<li><a href="#">メニュー 1-3-1-2</a></li>
<li><a href="#">メニュー 1-3-1-3</a></li>
</ul>
</li>
<li>メニュー 1-3-2
<ul>
<li><a href="#">メニュー 1-3-2-1</a></li>
<li><a href="#">メニュー 1-3-2-2</a></li>
<li><a href="#">メニュー 1-3-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>


</div>


</div>
</body>
</html>

回答 No.4380

  • 本文：

    う〜ん。
    <script src="<?php bloginfo('template_url'); ?>./js/jquery-2.1.4.min.js"></script>
    <script src="<?php bloginfo('template_url'); ?>./js/jquery-ui.js"></script>
    で、 bloginfo('template_url') を指定しているってことは、themeの下のディレクトリにあるファイルを指定しているわけで、wordpress標準の jqueryや jquery-ui を使っていないわけですよね。

    で、jqueryの方は、まあ、バージョン番号を指定すれば、大体中身は決まってしまうファイルですが、jquery-ui の方は、どのコンポーネントを使うか選んでカスタマイズして作る方が普通なので、その中に何が含まれているか予想できない。(テーマを作った人のさじ加減一つ)

    wordpress標準の jquery のバージョンは、たぶん、1.11.3 なので、敢えて 2.1.x系列を指定しているということは、古いスクリプトが動かない可能性がある。
    (といっても関係ありそうなのは flotr2.min.jsだけで、ここでエラーになっていなければ、あまり関係ない)
    wordpress標準の jquery-ui の accordion は、wp-includes/js/jquery/ui/accordion.min.js にあるのに、これを読み込んでいるわけではない。

    テーマの下の js/jquery-ui.js にaccordion が含まれているかどうか確認する必要があるのではないかなぁ。
    (含まれていなければ、ローカルでも動かないはずなので、ローカルとサーバーで同じテーマならこれも関係なさそうですが)

    後は、header部分とか、footer部分は、wordpressの場合は別ファイルにするのが、普通なので、「全部一緒になったこのファイルは、一体どこのファイルなんだろう？」というのは疑問です。

    デバッガを使って調べてみるのが速いかもしれませんね。
    公開されているページなら URL を書いてみては？

  • 投稿者：ジョバンニさん 投稿時間：2016/02/24 23:42
質問者からのコメント

返信いただきまして本当にありがとうございます、めぐみです。
おっしゃる通りの状況でしてすごくびっくりしました。
ソースを見てそんなところまでわかってしまうのですね！

実は、娘が弱小クラブのマネージャーをしていて強くしたいからHPを作ってほしいと頼まれて独学で見よう見まねで作ってました。
部員一人一人のHPを作って競争意識を高めたいという思いからサブディレクトリ型のほうがいいのかと思いまして、
themeの下のディレクトリに同じようなHP（データは違う）を部員人数分作ろうとしています。
モバイル向けなのでバージョンは高い方がいいと他のHPで書いてあったので jquery のバージョンを2.1.x系列にしました。
ジョバンニさまにいろいろと言い当てられて自分の無知さがばれてしまい恥ずかしい思いでしたが以上のような状況です。

以下、公開している作りかけのものです。
http://megumi1991.wpblog.jp/

恐れ入りますがお時間あるときに何故jquery動作しないのかアドバイスご指導いただけるようでしたらすごく助かります。
写真(KAO.png)のところも表示されないので、構造上の問題で読み込めないようになってしまってるのでしょうか。
よろしくお願いいたします。

回答 No.4381

  • 本文：

    なぜ、ローカルでは動作するか？という路線で一つずつ調べていっては？
    違う部分があると思いますよ。


    文章を読む限りでは、
    ホーム（home.php）をテンプレートで別途作成して、それを表示させているように見えます。

    書き方が正しいかどうかは別にして

    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>./style.css">
    <script src="<?php bloginfo('template_url'); ?>./js/jquery-2.1.4.min.js"></script>
    <script src="<?php bloginfo('template_url'); ?>./js/jquery-ui.js"></script>
    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>./js/jquery-ui.css" />

    とかなんですけど、

    jquery-2.1.4.min.jsのファイルとかが、たんにサーバー側にないからとかいう可能性はないのでしょうか？

    jquery-2.1.4.min.jsとかは、Wordpressの標準添付のjqueryではないので、＄で動作しますと。もしそうだとしたら、＄のことはとりあえず忘れてもいいと思う。


    たぶん、ローカルで動作しているのなら
    見直す点は、上記のような読み込まれるファイルがサーバー側にもあるかとかそういう点ではないかと思います。

    違いがなければ、動作しないとおかしいですからね。

  • 投稿者：k-tanさん 投稿時間：2016/02/25 00:11
この回答に対してコメントする

回答 No.4382

  • 本文：


    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>./style.css">
    <script src="<?php bloginfo('template_url'); ?>./js/jquery-2.1.4.min.js"></script>
    <script src="<?php bloginfo('template_url'); ?>./js/jquery-ui.js"></script>
    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>./js/jquery-ui.css" />


    /js/ の前の . が余計かも。

    ./style.css　=> /style.css
    ./js/jquery-2.1.4.min.js => /js/jquery-2.1.4.min.js
    等々

  • 投稿者：ジョバンニさん 投稿時間：2016/02/25 09:59
この回答に対してコメントする

回答 No.4383

  • 本文：


    > 以下、公開している作りかけのものです。
    http://megumi1991.wpblog.jp/

    たぶん、最大の原因は、
    jquery-2.1.4.min.js
    が正しくアップロードされていないことです。

    配布されているjquery-2.1.4.min.jsは約83KBあるのに、
    アップロードされているファイルは、約63KBしかありません。
    (984行あるはずが、764行しかありません)

    ( jqueryを 本家(jquery.com)から持ってきたのなら、$=jQuery のトリックは不要です。あっても害にはなりませんが。)

    細かいところでは、style.css のアップロード先が違います。
    wpblogでは、wp-content の下にしかファイルをアップロードできないのに、/ の直下に置こうとして、アップロードできていません。

    KAO.pngも、アップロードに失敗しているのでは？
    「ファイルが壊れている」というエラーになっています。

  • 投稿者：ジョバンニさん 投稿時間：2016/02/25 10:55
質問者からのコメント

ジョバンニさん

本当にいろいろとありがとうございました。
アドバイスいただいた方法を試したのですができませんでした。
が、ファイルの大きさが違うというヒントを頂き調べてみました。
何度もアップしても同じ大きさにならず（ほぼ全ファイルが）、
調べたところバイナリー転送することでファイルがローカルとサーバで一緒になりました。
そのおかげで無事正常に作動するようになりました。
本当に誠実に対応下さりありがとうございました(^o^)。
今後も何かありましたらなにとぞよろしくお願いいたします！

回答 No.4388

  • 本文：

    ■
    ＞それとも、記事の一部にこのようなページがあるようにみえるのでしょうか。

    そうです。

    http://trip.phpapps.jp/category/hanako/
    http://trip.phpapps.jp/category/taro/


    ＞”パーマリンクの設定で、/%category%/%postname%/にすれば、サブディレクトリ構造になる”

    一人１ページなら
    /%postname%/
    で、サブディレクトリ構造になるかも。

    ■
    ＞ただ、AさんがZさんを許可すれば（許可する場合、Zさんに許可するメールを送って
    ＞同意すれば見れるようにしたい）

    「Wordpress 会員サイト　プラグイン」で検索をすれば、それらしいプラグイン（機能追加）がでてくるかと思います。


    可能かどうかという話なら可能ですが、要望に合わない部分がでてくるとは思います。

  • 投稿者：k-tanさん 投稿時間：2016/02/27 08:36
質問者からのコメント

K-tanさま
めぐみです、アドバイスをありがとうございました。
今日、アコーディオンのプラグインのarconix shortcodesをインストールしてみました。
アドバイス頂いた方法で”投稿”のところでアコーディオンの作成を試みてみました。
アコーディオンの作成は非常に簡単だったのですが、そのアコーディオンの中からflotr2.min.jsを呼び出してグラフを作るという所をずっと試していたのですが、グラフの表示ができなかったのでまたご連絡してしまいました。
上記のように、Wordpressの”投稿”のところからアコーディオンを作成して、その中からjquery系のプログラムを呼び出して、出力させるということは可能なのでしょうか？
もし、ご経験あるようでしたらばどんな些細なことでも結構ですのでご連絡頂ければありがたいです。
なにとぞよろしくお願いいたします。

回答 No.4464

  • 本文：

    平素はネットオウルをご利用いただき誠にありがとうございます。
    ネットオウル運営チームです。

    本ご質問は一定期間新たな回答がなかったため
    運営チームで締め切らせていただきました。


    ■質問の締め切りについて

    Q&A掲示板はユーザー様同士の交流掲示板です。
    回答がもらえた場合、回答者へお礼コメントをしましょう。

    問題が解決した際にはベストアンサーを選び、
    質問を締め切ってください。


    ■再度のご質問について

    ご質問が未解決の場合、「ワンポイント！」を参考に、
    再度質問してみてください。

    【ワンポイント！】

    　メールやFTPの設定がうまくいかない場合、
    　ネットオウルIDやサーバーIDなどのお客様情報を公開しない範囲で、
    　現在の設定内容を出来るだけ詳しく書いてみましょう。
    　設定内容のミスを指摘してもらえるかもしれません。

    　エラーが出てうまくいかない場合、
    　エラーメッセージの内容を書いてみましょう。
    　エラーメッセージにはエラー原因が詳しく書かれていることが多く、
    　問題の解決につながる回答が得られるかもしれません。


    ■ベストアンサーについて

    ご質問の締め切りに際して、運営チームにて
    ベストアンサーを選んでおります。

    　※ベストアンサーの回答者様には通常と同様のポイントが
    　　付与されています。


    --ネットオウル運営チーム--

  • 投稿者：ネットオウル運営 投稿時間：2016/03/16 14:23
この回答に対してコメントする