jQuery の利用に関して

解決済 imaru
(@imaru)

13年、 9ヶ月前
こんにちは。

WordPress2.9.2を利用しています。
ボーダーで囲んだ角を丸くしたく、下記のjQueryプラグインを利用しました。

jQuery Curvy Corners
http://code.google.com/p/jquerycurvycorners/

jQuery v1.4.2 と jquerycurvycorners 2.1.1.zip を個別にダウンロードして、自作テーマのフォルダ内に jsフォルダを作成し、jsフォルダ内に設置しました。

次に「header.php」に以下の記述を追加しました。
```
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.curvycorners.packed.js"></script>
```
上記のコードを入れ、CSSを設定する事で、ボーダーの角丸が実現出来て満足していました。

実は「header.php」に

<?php wp_head(); ?>

を追加した所、head 内に下記の記述がありました。

<script type='text/javascript' src='http://www.example.com/wp/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>

調べた所、WordPressには既にjquery.jsが内包されているころが判りました。
ただ、内包されているjquery.jsには最後に「jQuery.noConflict();」の記述があり、一般に配布されているjquery.jsは違い、WordPress用でないjQueryプラグインは利用出来ないとの事でした。

実際ヘッダーから下記の行を削除した所、jquery.curvycorners.packed.jsが有効になりませんでした。
```
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
```
現状、希望することは出来ています。
ただ、余りスマートでなく出来る事で有れば、WordPressに内包されている、jquery.jsを利用したいと思います。

対策として
１，内包されているjquery.jsから、「jQuery.noConflict();」を削除する。
２，jquery.curvycorners.packed.jsをカスタマズする。

の２点が考えられます。
１点目は削除することで何が起きるか予想出来ません。対策を実行出来ません。
２点目は、力業でjquery.curvycorners.packed.js内の”$”の記述を”jQuery”と書き換えてみました。具体的にはエディターで”$(“を”jQuery(“と置換しました。結果、jquery.curvycorners.packed.jsは有効になりませんでした。

ここまで試してみました。
個人的はバージョンの違うjquery.jsを読み込んでしまっているのがスマートで無いと思います。

他に良い案はないでしょうか。

8件の返信を表示中 - 1 - 8件目 (全8件中)

mizube
(@mizube)

13年、 9ヶ月前
wp_enqueue_script() を使って JQuery Curvy Corners を読み込むようにするといいですよ。

WordPress には <?php wp_head(); ?> の位置で、wp_enqueue_script() から登録された JavaScript を script 要素で出力する仕組みが用意されています。 imaru さんのように、ライブラリが重複してしまうといった問題を回避する目的などで使えます。
```
if ( !is_admin() ) {
    $jsurl = get_bloginfo('template_url') . '/js/jquery.curvycorners.packed.js';
    $jsver = '2.1.1';
    wp_enqueue_script( 'jquery-curvycorners', $jsurl, array('jquery'), $jsver );
}
```
詳しくは WordPress Codex の該当ページをチェックしてみてください。

それから、

調べた所、WordPressには既にjquery.jsが内包されているころが判りました。
ただ、内包されているjquery.jsには最後に「jQuery.noConflict();」の記述があり、一般に配布されているjquery.js は違い、WordPress用でないjQueryプラグインは利用出来ないとの事でした。

については、 CurvyCorners させる任意のコードについて
```
jQuery(document).ready(function($){
  $('.myBox').corner();
});
```
のような書き方をすれば特に修正なく使えるのではないかと思います（未確認）。
トピック投稿者 imaru
(@imaru)

13年、 9ヶ月前

mizube 様

アドバイスをありがとうございます。
アドバイス頂いた事を確認して、実行するには自分のスキルでは少し時間が掛かりそうです。
でも、出来ないことはなさそうと手応えを感じました。
試してみて、結果が出るまで少しお時間をください。

ますはお礼まで。
mizube
(@mizube)

13年、 9ヶ月前
> imaru さん
説明不足だったかもしれません。
```
if ( !is_admin() ) {
    $jsurl = get_bloginfo('template_url') . '/js/jquery.curvycorners.packed.js';
    $jsver = '2.1.1';
    wp_enqueue_script( 'jquery-curvycorners', $jsurl, array('jquery'), $jsver );
}
```
のコードはお使いのテーマの functions.php (なければ作成) に挿入する PHP コードです。
これと併せて、 WordPress 用テーマ用の JavaScript ファイル (theme.js とします) を作成し、 JavaScript ファイルを設置しているディレクトリに置いたあと、 wp_enqueue_script() でそのスクリプトも登録しておきます。
```
// 上記コードの代わりに以下を functions.php に追加。
if ( !is_admin() ) {
    $jsurl = get_bloginfo('template_url') . '/js/jquery.curvycorners.packed.js';
    $jsver = '2.1.1';
    wp_enqueue_script( 'jquery-curvycorners', $jsurl, array('jquery'), $jsver );
    $jsurl = get_bloginfo('template_url') . '/js/theme.js';
    $jsver = '1.0';
    wp_enqueue_script( 'jquery-myscript', $jsurl, array('jquery', 'jquery-curvycorners'), $jsver );
}
```
これで、各ファイルが読み込まれるはずです。サイトの HTMl ソースを確認してください。登録した Script 要素がすべて出力されていれば、あとは theme.js の中に必要な JavaScript の処理を記述します。
```
jQuery(document).ready(function($){
  $('.myBox').corner();
});
```
この手順で一度進めてみてください。
トピック投稿者 imaru
(@imaru)

13年、 9ヶ月前
mizube 様

ご返事が遅くなり申し訳りませんでした。
また、再度のアドバイスをありがとうございます。
時間を見つけて、色々試していました。

実は、ご指摘の通り頂いたアドバイスを理解出来ず、直ぐに試すことが出来ませんでした。

wp_enqueue_script()

をキーワードとして、検索し以下の方法を知りました。
<head>内に
```
<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('curvycorners.packed', '/wp-content/themes/example/js/jquery.curvycorners.packed.js'); ?>
```
を入れることで、<?php wp_head(); ?>の出力に
```
<script type='text/javascript' src='http://www.example.com/wp/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/example/js/jquery.curvycorners.packed.js?ver=2.9.2'></script>
```
となりました。

ただ、この時点では角丸が有効になりませんでした。
原因はjquery.curvycorners.packed.js内の”$”の記述を”jQuery”への書き換えが終わっていないからだと思います。

そこでアドバイスを頂いた下記コードを、functions.php を作成し下記の内容のみを記述しました。
```
jQuery(document).ready(function($){
  $('.myBox').corner();
});
```
「’.myBox」は角丸をし指定しているクラスになります。自分で指定したクラスに書き換え、試しましたが角丸になりませんでした。

ここまで確認したところ、新たにアドバイスを頂きました。

新しいアドバイスに従い
functions.phpに下記のコードのみ書き込みました。
```
if ( !is_admin() ) {
    $jsurl = get_bloginfo('template_url') . '/js/jquery.curvycorners.packed.js';
    $jsver = '2.1.1';
    wp_enqueue_script( 'jquery-curvycorners', $jsurl, array('jquery'), $jsver );
    $jsurl = get_bloginfo('template_url') . '/js/theme.js';
    $jsver = '1.0';
    wp_enqueue_script( 'jquery-myscript', $jsurl, array('jquery', 'jquery-curvycorners'), $jsver );
}
```
その結果、そのまま「DOCTYPE」の上部に書き出されています。

また、アドバイス頂いた

>>あとは theme.js の中に必要なJavaScriptの処理を記述します。

に関して理解できませんでした。
テーマで利用する、JavaScriptを管理する物と理解はしましたが・・・。

自分としては、theme.jsの前に、上記のfunctions.phpの記述内容が全て「DOCTYPE」の上部に書き出されてしまった時点で新たなアドバイスを理解できていないと判断します。

以上、自分になり理解したことで、試してみた内容になります。

お時間のある時にでも再度アドバイスを頂けるとうれしく思います。
mizube
(@mizube)

13年、 9ヶ月前
imaru さん

説明が下手で申し訳ありません。

自分としては、theme.jsの前に、上記のfunctions.phpの記述内容が全て「DOCTYPE」の上部に書き出されてしまった時点で新たなアドバイスを理解できていないと判断します。

これは、functions.php へコードを挿入する際に <?php ?> を付けずに挿入したため、 HTML として出力されている状態ですね。
従って functions.php に何もコードが記述されていない場合は以下のようにします。
```
<?php
if ( !is_admin() ) {
    $jsurl = get_bloginfo('template_url') . '/js/jquery.curvycorners.packed.js';
    $jsver = '2.1.1';
    wp_enqueue_script( 'jquery-curvycorners', $jsurl, array('jquery'), $jsver );
    $jsurl = get_bloginfo('template_url') . '/js/theme.js';
    $jsver = '1.0';
    wp_enqueue_script( 'jquery-myscript', $jsurl, array('jquery', 'jquery-curvycorners'), $jsver );
}
?>
```
また、アドバイス頂いた

>>あとは theme.js の中に必要なJavaScriptの処理を記述します。

に関して理解できませんでした。
テーマで利用する、JavaScriptを管理する物と理解はしましたが・・・。

単純に theme.js というファイルを head 要素内で読み込むようになるので、この theme.js に角丸にするなどの JavaScript コードをまとめてここに記述していってください。という意味でした。

そして、以下は誤解を招きそうだなと思いつつ説明した部分ではあるのですが、
そこでアドバイスを頂いた下記コードを、functions.php を作成し下記の内容のみを記述しました。
```
jQuery(document).ready(function($){
  $('.myBox').corner();
});
```
「’.myBox」は角丸をし指定しているクラスになります。自分で指定したクラスに書き換え、試しましたが角丸になりませんでした。
これは意味がありません。 jQuery… はこの場合 theme.js に記述するべき JavaScript コードになります。

ということで、手順としては
1. ```
<?php
if ( !is_admin() ) {
    $jsurl = get_bloginfo('template_url') . '/js/jquery.curvycorners.packed.js';
    $jsver = '2.1.1';
    wp_enqueue_script( 'jquery-curvycorners', $jsurl, array('jquery'), $jsver );
    $jsurl = get_bloginfo('template_url') . '/js/theme.js';
    $jsver = '1.0';
    wp_enqueue_script( 'jquery-myscript', $jsurl, array('jquery', 'jquery-curvycorners'), $jsver );
}
?>
```
  を functions.php に追加。<?php ?> の前後に空白文字がないように注意。
2. ```
jQuery(document).ready(function($){
  $('.myBox').corner();
});
```
  は functions.php ではなく theme.js に追加。
とりあえず、これでうまくいけば私の言いたかったことは理解して頂けるはずです。
この件で何かつまずいたことがあれば、またご遠慮なくどうぞ。
トピック投稿者 imaru
(@imaru)

13年、 9ヶ月前
mizube 様

再度早急のアドバイスをありがとうございます。
再度アドバイスに従い試してみました。結果として希望することが出来ました。

WirdPressに内包されている、jQueryが利用出来ました。
一般に配布されている、jQueryのプラグイン（jQuery Curvy Corners）がそのまま利用出来ました。

以下に結果を報告しておきます。

今回自作のテーマを作成し、functions.phpは制作していませんでした。今回アドバイスに従い新たにfunctions.phpを作成し、アドバイス頂いたコードを記述いたしました。
```
<?php
if ( !is_admin() ) {
    $jsurl = get_bloginfo('template_url') . '/js/jquery.curvycorners.packed.js';
    $jsver = '2.1.1';
    wp_enqueue_script( 'jquery-curvycorners', $jsurl, array('jquery'), $jsver );
    $jsurl = get_bloginfo('template_url') . '/js/theme.js';
    $jsver = '1.0';
    wp_enqueue_script( 'jquery-myscript', $jsurl, array('jquery', 'jquery-curvycorners'), $jsver );
}
?>
```
当初、<?php ?> を付けずに記述し、「DOCTYPE」上に全て出てしまいますと回答しました。実はその際に<?php ?>を付けた物を試していたのですが、読み込んだところブラウザが真っ白になり何も表示しなくなってしまったため、報告していませんでした。

今回、新たに記述しなおしたことでページも問題なく表示し、

wp_enqueue_script()

内に、以下にコードが生成されました。
```
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/example/js/jquery.curvycorners.packed.js?ver=2.1.1'></script>
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/example/js/theme.js?ver=1.0'></script>
```
上記のコードで、theme.jsが読み込まれていることがわかりました。

次に、theme.jsに以下の内容を記述しました。
```
jQuery(document).ready(function($){
  $('.myBox').corner();
});
```
テーマフォルダ内に用意したjsフォルダにアップロードすることで、jquery.curvycorners.packed.js が有効になり、角丸になりました。

以上で希望することが出来ました。

アドバイスを本当にありがとうございました。アドバイス頂いたことをなかなか理解出来ず、お手数をかけてしまい申し訳ありませんでした。

最後に
```
jQuery(document).ready(function($){
  $('.myBox').corner();
});
```
上記コードで「’.myBox」のクラスは角丸をし指定しているクラスになりますが、このクラスは自作スタイルシート上で複数設定していた為、以下のようにしました。
角丸を与えるクラスは「.profile」と付けました。
```
jQuery(document).ready(function($){
  $('.profile1').corner();
  $('.profile2').corner();
  $('.profile3').corner();
});
```
以上です。
mizube
(@mizube)

13年、 9ヶ月前

imaru さん

解決されたようで何よりです。
私の説明が悪く、結果として解決までに時間がかかってしまい申し訳なかったです。
もう少し分かり易く説明できるよう気を配りたいと思います。

トピック投稿者 imaru
(@imaru)

13年、 9ヶ月前

mizube 様

はい、無事に希望することが出てありがとうございました。

>私の説明が悪く、結果として解決までに時間がかかってしまい申し訳なかったです。
>もう少し分かり易く説明できるよう気を配りたいと思います。

いいえとんでもありません。
自分の知識不足を質問させて頂いております。ヒントを教えて頂けるだけでもとてもうれしく思います。
ヒントを頂き出来るだけ自分で調べ、解決したいと思っていますが、いかんせん基礎知識が無い為、アドバイスをなかなか理解出来ず。時間が掛かってしまっており申し訳ありません。

後はアドバイスを頂いたことを自分なりに理解して、今後応用出来るようになれればと思います。

今後もともよろしくお願いいたします。

8件の返信を表示中 - 1 - 8件目 (全8件中)

トピック「jQuery の利用に関して」には新たに返信することはできません。

トピックタグ

表示