wordpress内でjqueryの使用方法

このQ&Aのポイント
  • wordpress内でjqueryを使いたい方のための使い方ガイド。
  • wordpress内でjqueryを利用するためのjsファイルやcssファイルのリンクの書き方について解説。
  • wordpress初心者でも簡単に実装できる方法をご紹介。
回答を見る
  • ベストアンサー

wordpress内でjquery

wordpress初心者の者です。wordpress内でjqueryを使いたいのですが、その際、jsファイルやcssファイルのリンクの書き方がわかりません。ご存知の方、教えていただければ大変助かります。  ・1行目の「○○○○」の部分はjsファイルのどの単語を入れればいいのでしょうか? ※jsファイルの内容は下記の通りです。  ・また1行目、2行目の「template_url」の部分はそのままでいいのでしょうか?もしくは固定ページのテンプレートファイルを指定するのですか?  (template-fullwidth.phpのようなファイル)  ・2行目の「●●●●」の部分はスタイルシートの#以下の単語を記載するのでしょうか? ※スタイルシートの内容は下記の通りです。 <?php wp_enqueue_script('○○○○', get_bloginfo('template_url') . '/js/jquery.map.js', array('jquery')); ?> <?php wp_enqueue_style('●●●●', get_bloginfo('template_url') . '/css/map.css'); ?> <?php wp_head(); ?> 【以下jsファイルのソースコード(下の部分は省略)】 google.load("maps", "3.x", {"other_params":"sensor=false"}); function initialize() { var myLatLng = new google.maps.LatLng(35.44730, 139.63450); //マップの中心座標 var myOptions = { zoom: 17, //ズームレベル center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'style'] } }; map = new google.maps.Map(document.getElementById("map"), myOptions); new google.maps.Marker({ position: new google.maps.LatLng(35.44696, 139.63438), //アイコンの中心座標 map: map, icon: "icon.png" //アイコン画像 }); 以下省略 【cssの内容】 @charset "utf-8"; html,body{ width: 100%; height: 100%; } #map{ width: 100%; height: 100%; }

noname#199277
noname#199277
  • CSS
  • 回答数1
  • ありがとう数9

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

>・1行目の「○○○○」の部分はjsファイルのどの単語を入れればいいのでしょうか? ※jsファイルの内容は下記の通りです。 他の人が作成したライブラリ、テンプレートなどと重複していなければ何でもいいです。 > ・また1行目、2行目の「template_url」の部分はそのままでいいのでしょうか?もしくは固定ページのテンプレートファイルを指定するのですか?  (template-fullwidth.phpのようなファイル) テンプレートのURLを指定するのであれば、"template_url"でなければなりません。 > ・2行目の「●●●●」の部分はスタイルシートの#以下の単語を記載するのでしょうか? ※スタイルシートの内容は下記の通りです。 他の人が作成したライブラリ、テンプレートなどと重複していなければ何でもいいです。

noname#199277
質問者

お礼

この度は、私の質問に丁寧にご回答くださりありがとうございました。おかげさまで、わからなかった部分がすっきりしました。また機会がありましたら、よろしくお願いします。

関連するQ&A

  • HTMLをWordPress化 CSSをどこに?

    HTMLをWordPress化にするための勉強をしています。 HTML側 CSS ヘッダー内 <link rel="stylesheet" href="css/test.css"> <link rel="stylesheet" href="css/test2.css"> JS ヘッダー内ではなく一番下</body>の前に配置 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="js/test1.js"></script> <script src="js/test2.js"></script> ★これをfunctions.php に記述するにはどうすれば良いのでしょうか? function sample_scripts() {   // CSSの読み込み   wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test.css', array(), '1' );   wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test2.css', array(), '1' );   // jqueryの読み込み wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', get_template_directory_uri().'https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array(), '1.10.3', true );   // サイト内のjsの読み込み   wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test1.js', array(), '1', true );   wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test2.js', array(), '1', true ); }//ここまで 結果 ヘッダー内にtest.cssのみ記載、test2.cssは記載していない。 jsはどこにも記載していませんでした。 どこが間違っておりますか? 宜しくお願いします。

    • ベストアンサー
    • PHP
  • Googleマップを航空写真で、45度にしない方法

    Googleマップを航空写真で、ホームページに埋め込んでいます。 かなり拡大しているので、地域として自動で45度写真になってしまいます。 これを、平面のまま、切り替えられなくしたいのです。 どなたか、教えてください。 以下のようなJavaScriptを、見つけて使っています。 LatLngは、適当に入れてあります。 ------------------------------------------------------------- var myLatLng = new google.maps.LatLng(35.000000,139.000000); //地図を表示 var myMap = new google.maps.Map(document.getElementById('map'), { zoom: 20, center: myLatLng, mapTypeId: google.maps.MapTypeId.SATELLITE, scaleControl: false, scrollwheel: false, mapTypeControl: false }); ------------------------------------------------------------- 以上、よろしくお願いします。 あまり詳しくないので、加筆していたがけると、助かります。

  • 地図上クリックで情報ウィンドウを閉じるには…

    Google maps API V3 で 開いた情報ウィンドウが地図上をクリックすると閉じるように設定しようと、 google.maps.event.addListener(map,'click',function(){ infowindow.close(); }); を追記したのですが、上手く動いてくれません。 どこが悪いのか、お分かりになる方、よろしくお願い致します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>TEST</title> <style type="text/css"> html {height: 100%;} body {text-align: CENTER; height: 100%; margin: 0; padding: 0; background-color:#ffffff; font-size: small;} </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=ja"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> var map; function initialize() { var myLatlng = new google.maps.LatLng(35.681373, 139.766084); var myOptions = { zoom: 14, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var layer = new google.maps.FusionTablesLayer({ query: {select: 'Geocodable address', from: 'FusionTablesのIDが入ります'}});layer.setMap(map); } google.maps.event.addListener(map,'click',function(){ infowindow.close(); }); </script> </head> <body> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

  • google map吹き出し

    下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>

    • ベストアンサー
    • AJAX
  • javascriptで困ってます。

    モーダルを実装するプラグイン「colorbox」を使用してgooglemapを表示しようとしてるのですがうまくいきません。以下のように作ってみたのですが、地図の一部しか読み込まれません。 いろいろ調べてみると非表示にしていたdivにgooglemapを読み込んでいるので、高さ、幅が決まっていない状態なので、地図の一部しか読み込まれないということでした。 <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> のあたりも無理な記述になっています。 colorboxで非表示になっていたdivが表示になったときに地図をきちんと読み込まれるようにするにはどのようにすればよいのでしょうか?よろしくお願いします。 <html> <head> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/jquery.colorbox.js"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(34.0,135.0); var opts = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var m_latlng = new google.maps.LatLng(34.0,135.0); var marker = new google.maps.Marker({ position: m_latlng, map: map }); } $(function(){ $('.inline').colorbox({ inline:true, width:"80%", height:"80%", }); }); </script> </head> <body> <a href="#inline_content" class="inline" title="" >googlmap</a> <div style='display:none'> <div id='inline_content'> <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> </div> </div> </body> </html>

  • WordPressでjQuery-UIの使い方

    WordPressでjQuery-UIの使い方を教えてください。 現在、WordPressで作ったサイトにフローティングメニューを取り入れたいと思っています。 フローティングメニューを入れるにあたり、jQuery-UIを読み込まなければならないのですが ちゃんと読み込まれていないようです。 WordPressではなくテストでサイトを作り、読み込ませるとちゃんと動作するので、 WordPress特有の問題かと思います。 WordPressでjQuery-UIを読み込ませる方法を教えてください。 下記に参考にしたサイトと、ソースを記述しました。 -------WordPressのヘッダ内の記述と参考にしたサイト------- <?php wp_deregister_script('jquery.ui.core.min'); wp_enqueue_script('jquery.ui.core', get_bloginfo('template_url') . '/js/jquery.ui.core.js'); ?> wp_deregister_scriptでWordPressのjquery.uiを見に行かないようにして、 wp_enqueue_scriptでダウンロードしてきたUIを見に行くようにしてあります。 参考にしたサイト(jQuery-UI) http://d.hatena.ne.jp/deeeki/20090907/wp_enqueue_jquery_ui フローティングメニューについて参考にしたサイト http://www.skuare.net/test/jScrollFollow.html

    • ベストアンサー
    • PHP
  • googlemapについて教えてください。

    googlemapでマーカーが追随するようにしたくて、function update(position) の関数のはじめにif(marker!=null){marker.setMap(null);}を入れてマーカーを消してから、次のマーカーがつくようにとしたつもりなのですが、うまくいきません。どのようにしたら、現在地にマーカーがつくようになるのでしょうか。下の場合マーカーがたくさんつきます。 よろしくお願いします。 <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript"> var gmap; window.onload = function(){ var myLatlng = new google.maps.LatLng( 33 , 130 ); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var myLatlng = new google.maps.LatLng( lat , lng ); gmap.setCenter( myLatlng ); var marker = new google.maps.Marker({ position: myLatlng, map: gmap }); } function poserror(position){alert("error");} </script> </head> <body> <div id="map_canvas" style="width:95%; height:500px ; border:solid 3px #ccc;"></div> </body> </html>

  • Google maps API V3 検索ボックス

    Google maps API V3 で、kmlファイルを利用した地図(http://itohiki119.iinaa.net/bousai/test.html) を作成しました。 この地図に検索ボックスを追記したいのですが、上手くいきません。 お知恵をお貸し下さい。m(_ _)m 一応、http://code.google.com/p/gmaps-api-v3-googlebar/downloads/list からダウンロード (1) gmaps-api-v3-googlebarから入手したファイルを解凍。 (2) その中のjGoogleBarV3.jsとdefault.cssを適当な位置に配置。 (3) scriptとlinkを追加。 してみたのですが、ダメでした。 もともとの、htmlは、下記の通りです。 _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>避難所マップ</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=ja"></script> <script type="text/javascript"> function initialize() { var initPos = new google.maps.LatLng(34.794267, 134.717400); var myOptions = { zoom : 15, center : initPos, mapTypeId : google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var kmlOptions = {preserveViewport: true} var ctaLayer = new google.maps.KmlLayer('http://itohiki119.iinaa.net/bousai/test.kml', kmlOptions); ctaLayer.setMap(map); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 100%; height: 100%;"><br /></div> </body> </html> _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ よろしくお願い致します。

  • グーグルマップのサイズが変更できない

    ここでの質問じゃなかったらすみません; 以下のようにグーグルマップを使用しています。 google.load('maps', '3.0', {other_params: 'sensor=false'}); google.load('jquery', '1.3.2'); google.setOnLoadCallback(function() {   jQuery(document).ready(function($) {     var latlng = new google.maps.LatLng(35.658632, 139.745411);     var options = {       zoom: 2,       center: latlng,       mapTypeId: google.maps.MapTypeId.ROADMAP     }     map = new google.maps.Map($('#mapCanvas').get(0), options); 略   }); }); これで普通にマップが表示されるのですが #mapCanvas { width: 100%; height: 300px; border: 1px solid #cecece; margin: 0; padding: 0;} このCSSでheightを100%にすると、マップが線のようになってしまいます。 横は自動でサイズ変更されるのですが、縦だけ300pxのように指定しないと画面が 見れません。 本家グーグルマップのように画面全体に表示したいのですが、どうすればよいので しょうか、どなたかご教示願います。

    • ベストアンサー
    • AJAX
  • Google Maps V3のズームの規制

    現在htmlにはhead内に <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=123456&sensor=false"></script> <script language="JavaScript" type="text/javascript" src="v3.js"></script> v3スクリプト内に //functionコード function mapload() { var latlng = new google.maps.LatLng(123,456); var opts = { zoom: 16, center: latlng, //マップタイプHYBRID(航空写真+地図)ROADMAP(地図)SATELLITE(航空写真)TERRAIN(地形) mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeId: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN ] } }; //IDコード var map = new google.maps.Map (document.getElementById("map"),opts); //Marker var LatLng = new google.maps.LatLng(123,456); var contentString = 'ここです!€'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var image = new google.maps.MarkerImage ('アイコンURL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var shadow = new google.maps.MarkerImage ('アイコン影画像URL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var marker = new google.maps.Marker({ position: LatLng, map: map, title: "ここです!",icon: image,shadow: shadow }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } と記載し、html内のスクリプトのとこに表示しています。 表示される地図のズームを規制したいと考え、mapType.maxZoom = 19; mapType.minZoom = 2;のようなものを記入しても何も変化しません。 上記スクリプトの表記のどこに何を入れれば規制できるのでしょうか。 追伸、google.maps.MapTypeId.TERRAINと地図と地形のみ表示指定しているのですが、実際は、地図と航空地図になります。

専門家に質問してみよう