えなねこメニュー

IMG_2083-2-2 IMG_2089-2スクリーンショット 2016-08-29 0.32 のコピー スクリーンショット 2016-08-29 0.40 のコピー

 

ロリ

パソコンに詳しいパソコン紳士!助けて!

投稿日:2016年10月30日 更新日:

追記
ワードプレスは<script></script>が使えない。その代わりにwp_enqueue_scriptを使うことを理解しました。えなねこが使用したいプラグインはjQuery-rwdImageMapsです。

上記リンクから公式ダウンロードサイトに飛べます。この場合wp_enqueue_scriptで記述するにはどうしたら良いでしょうか?

 

<?php wp_enqueue_script(‘anythingSlider‘, get_bloginfo(‘template_url‘) . ‘/js/jquery.anythingslider.min.js’,array(jquery)); ?>

<?php wp_enqueue_script(‘jquery.rwdImageMaps.min.js(サーバーに格納しているファイル名)’, get_bloginfo(‘http://サーバーにプラグインが格納されてるアドレス’) . array(jquery)); ?>

 

上記のように記述しましたが正解でしょうか?

 

jqueryのプラグインjquery.rwdImageMaps.min.jsをワードプレスで運用したい。ワードプレスには初めからjqery本体はダウンロードされているのでプラグインだけを実行すれば動くということまでは理解した。

このjqueryのプラグインjquery.rwdImageMaps.min.jsはイメージマップ(画像指定箇所のリンク)を張った際にスマホサイトといったレスポンジサイトに対応させることができる。画像が縮小しても指定したurlの位置がずれるのを防いでくれる。

 

ワードプレスは「$」を使うとコンフリクト(衝突)が発生すうので$を使わずに書き換えることを理解。するとこのようになる。

<script src=”http://サーバーにアップロードしたurl先”></script>

<script>
jQuery(document).ready(function(e) {jQuery(‘img[usemap]’).rwdImageMaps();});</script>

この上記の記述をワードプレスの投稿画面のテキストに貼り付けた。

 

クリッカブルマップ

この画像にはイメージマップを仕込んである。

画像の大きさを変えると当然のごとくズレる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-30-2-34-13

上の画像の麺と書いた青枠の部分がリンクになっている。画像の大きさを変えてみる。

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-30-2-33-43
上の画像青枠の部分がリンク。だだずれでプラグインが作動しない。これを100時間くらいできずに悩んで気が狂いそうです。

たすけてください。ピン子もいじる暇すらなく大変こまっています。どなたか解決作をご提案お願いします。

 

下のコメント欄からお願いします。アドレス無記入でも通ります。

 

四角形ページ 円形ページ 多角形ページ

-ロリ

執筆者:


  1. 匿名 より:

    >>この上記の記述をワードプレスの投稿画面のテキストに貼り付けた。
    そもそも投稿でJS記述しても動きませんよ。
    で囲ったり、空白全削除たら動くとか動かないとか・・・
    ちなみにJCもアウトです。

    まず、JSが動くか確認してください。アラート等
    動かなければプラグインを使って動くようにしないと駄目ですわ。

  2. 通りすがり より:

    >>この上記の記述をワードプレスの投稿画面のテキストに貼り付けた。
    そもそも投稿でJS記述しても動きませんよ。
    で囲ったり、空白全削除たら動くとか動かないとか・・・
    ちなみにJCもアウトです。

    まず、JSが動くか確認してください。アラート等
    動かなければプラグインを使って動くようにしないと駄目ですわ。

    • えなねこ より:

      サーバーにブラグインアップロードしてheder/の前に記述しても無理でした。Google検索してもこれと言って解決策なし。困っています。

  3. エロエロ兄さん より:

    jQuery、プラグインがうまく動かない時のミス確認
    チェック項目、トラブル解決案
    http://matome.naver.jp/odai/2144030849637252101

    あなたのjQuery(プラグイン)が動かない14の理由
    http://lifequest-blog.com/webcreation/javascript/367/

    yahoo検索結果
    http://search.yahoo.co.jp/search?p=jquery+%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%8C%E4%BD%9C%E5%8B%95%E3%81%97%E3%81%AA%E3%81%84&aq=-1&oq=&ei=UTF-8&fr=top_ga1_sa&x=wrt

    • えなねこ より:

      jqeryのプラグインを自分のサーバーに読み込んで呼び出しす方法もやったけど動かないんですよね。親切にありがとうございます。

  4. 通りすがり より:

    多分ね、コピペがミスってるよ。
    このページに適応されてるとして仮定したら「>」が使われてるわ。

  5. 通りすがり より:

    2バイト文字が使われてるわ。
    このページのソースコード表示したら分かると思うよ。

  6. 通りすがり より:

    連投ごめんね。
    スクリプトの終了タグの前あたりかな。
    ●</script>
    ↑ここ

  7. 通りすがりの名無し より:

    いつも愛読させていただいております。

    phpで直接記述するのではなく
    /wp-includes/functions.php
    に以下を書きます。

    function add_rwdImageMaps() {
    wp_enqueue_script( ‘enaneko_rwdImageMaps’, get_settings(‘site_url’).’/wp-content/themes/your-theme/js/jquery.rwdImageMaps.min.js’, array(‘jquery’) );
    }
    add_action( ‘wp_enqueue_scripts’, ‘add_rwdImageMaps’ );

    詳しくはこちらをご覧くださいませ!
    http://works.coldsleep.jp/blog/wp_enqueue_script/

    • えなねこ より:

      ファンクションphpに記述しましたが動きません!

      function add_rwdImageMaps() {
      wp_enqueue_script( ‘enaneko_rwdImageMaps’, get_settings(‘kids-talent.com’).’/wp-content/themes/hummingbird_custom/js/jquery.rwdImageMaps.min.js’ );
      }
      add_action( ‘wp_enqueue_scripts’, ‘add_rwdImageMaps’ );

  8. えなイヌ より:

    ちょっと日にちが経っていますが、解決しました?

    こちらでwordpressでテスト環境を作ってみたら動きました。
    気になる点をまとめました。

    ●気になる点①
    右クリック→『ページのソースを表示』
    えなネコさんのコードの249行目

    これだと『jquery.rwdImageMaps.min.js』のファイルのみを単体で入れてないですか?

    ダウンロードしたとき、『jQuery-rwdImageMaps-master』というフォルダでダウンロードしたはずです。
    フォルダごとアップロードしてください。一見他のファイルは関係なさそうに見えても、必要な場合があります。

    ●気になる点②
    えなネコさんのコード 249行目。

    このコードの上に↓を記載してみましょう。

    ブログでおっしゃっているとおり、ワードプレスには初めからjqery本体はダウンロードされているのですが、jqueryがうまく動かない場合もあります。

    ●気になる点③
    ブログに書かれていたように、下記コードを使用されているようですが、プログラムが文字化けと判断している可能性が高いです。

    jQuery(document).ready(function(e) {jQuery(‘img[usemap]’).rwdImageMaps();});

    下記、コードで動きました。
    ワードプレスは「$」を使うとコンフリクト(衝突)が発生するので$を使わずに書き換える、というのはもっともです。さすがです。
    でも細かく言うと、コンフリクト(衝突)が発生する可能性がある、ということです。100%発生するわけではありません。
    下記で動きましたが、今後コードが増えていくでしょうし、コンスクリプトは学ばれていたほうがいいかと思います。

    $(document).ready(function(e) {
    $(‘img[usemap]’).rwdImageMaps();
    });

    ※まとめ
    1.『jQuery-rwdImageMaps-master』というフォルダごとアップロード。
    2.内に下記二つのコードを記載する。

    ←できればこのタグの上に。

    3.コードを次のように変更する。

    jQuery(document).ready(function(e) {jQuery(‘img[usemap]’).rwdImageMaps();});

    $(document).ready(function(e) {
    $(‘img[usemap]’).rwdImageMaps();
    });

    本当はfunction.phpにきちんとしたコード書いたほうがよさそうですが、そこまで詳しくする時間もないので、これで失礼します。

    • えなねこ より:

      動きました!ありがとうございます!使えるタイのサイトを制作しております。親切な、エナ犬さんにロリの幸あれ!

  9. えなイヌ より:

    何度もごめんなさい。
    気になる点②補足
    スクリプトタグでこれを入れてください。http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

comment

メールアドレスが公開されることはありません。

関連記事

IMG_1146-e1440212874830-2

アクネスちゃんサイト復活しました!

  祝! アクネスちゃんサイトが復活しまいた!フレンドサーバーという何も対応しないバグでサイトが眠っていましたがサーバー管理画面のバグが修復されてサイトが復活しました。 えなねこプロデュースサイト ア …

IMG_1832

「えなねこ」ってパチプロなの?ロリコンなの?上巻

えなねこって何者?パチスロで稼いでる人?それともただのロリコン無職? 約7年間、家賃から食費、そしてタイ旅行の旅費とすべてパチスロから収入を得て生活をしていました。「いました。」という過去形だがパチス …

IMG_3213

タイの幼女・美少女の写真詰め合わせ!

タイ国鉄でバンコク行きの車内に疲れ果てた小学生の少女がいたので記念撮影。となりには弟と思われる幼い子供が2人います。 どうやらこの3人でタイの田舎から首都バンコクを目指してやってきたらしい。うーん。3 …

991331

悲報!ジュニアアイドルの佐々木みゆうが2chでフルボッコ!

ジュニアアイドル好きなら知らない人はいない、それどころかジュニアアイドル業界で過去最高の売れっ子美少女佐々木みゆうであるが、2ちゃんねるのスレッドで 「デリヘルにいそうな量産型清楚系クソビッチJKグラ …

img_9700

えなねこが猫ハウスつくったった!

えなねこの家の前に住み着いている野良ネコが寒さを凌ぐためなのか、何故か家のベランダに住み着くようになった。    おそらくこのごちゃごちゃした汚い感じがネコにとってはストライクなのだろう。この放置され …

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-2-59-47

アクセス数

  • 2074今日の閲覧数:
  • 15048昨日の閲覧数:
  • 689今日の訪問者数:
  • 53543月別閲覧数:
  • 17現在オンライン中の人数:

えなねこの月別のブログが見れるよ

Back to Top ↑