-1

私は何年も WordPress を使用してきましたが、大量の本を読んでも、カスタム jQuery スクリプトを機能させることができませんでした。

今日は jScrollPane: http://jscrollpane.kelvinluck.com/です。すべてを適切に表示する必要があるピクセルパーフェクトな Web デザイナー向けに作成された、これまでで最高のスクリプトの 1 つです。

WordPress の最新バージョン (3.4.1) と Whiteboard Framework (テーマ) を使用しています。XAMPP を使用してオフラインでサイトを構築しているため、リンク先のサイトがありません。

これが私が知っていることです：

タグ内のwp_head()の下のheader.phpには、次のものがあります。

<script type="text/javascript" src="/js/jquery.jscrollpane.min"></script>
<script type="text/javascript" src="/js/jquery.mousewheel"></script>
<link rel="stylesheet" href="/css/jquery.jscrollpane.css" />

テーマのルートにある「css」というディレクトリに jquery.jscrollpane.css があり、テーマのルートにある「js」というディレクトリに jquery.jscrollpane.min.js と jquery.mousewheel.js があります。

私の footer.php のすぐ上に、次のものがあります。

<script type="text/javascript">
jQuery(function()
{
jQuery('#main').jScrollPane();
});
</script>

現在、functions.php には何もありません。

私はjQueryについて何も知りません。WordPress と no_conflict モード、スクリプトの登録とエンキュー、および数え切れないほど繰り返されてきたその他のさまざまなことについて読んださまざまな情報を除いて、まったく何もありませんが、何を試しても役に立たないようです...

無数の読書サイト - 何十ものサイト。数え切れないほどの時間... WordPress のバックエンドには、jQuery をもっと簡単にする何かが必要です。私はそのすべてにとてもうんざりしています。このことを理解しようとして以来、あまり食べたり休んだりしていないのは助けにはなりません...

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

更新:私は martinCzerwi が言ったことを試し、そのコードを functions.php に追加し、. Firebug の Web 開発者でエラー メッセージが表示されました。

"Error: TypeError: jQuery("#main").jScrollPane is not a function"

これは、以下を含む私のサイトの footer.php に関連しています。

<script type="text/javascript">
jQuery(function()
{
    jQuery('#main').jScrollPane('refresh');
});
</script>

私は PHP について少しだけ知っています。しかし、私を助けるのに十分ではありません。

私はMartinCzerwiが言ったことをしました。それを functions.php に追加し、 .php 内のものを削除しました。functions.php 内のファイルに URL を修正した後、機能しました。ついに、WordPress サイトで jQuery が動作するようになりました。

すべての人、特に martinCzerwi に感謝します。

4

3 に答える 3

1

相対パスでスクリプトタグを使用する代わりに、WordPress で指定された関数を使用することをお勧めしますfunctions.php。

function theme_enqueue_scripts_and_styles () {
  // Enqueue scripts
  wp_enqueue_script('jquery-mwheel', get_bloginfo('template_url').'/js/jquery.mousewheel.js', array('jquery'));
  wp_enqueue_script('jquery-scrollpane', get_bloginfo('template_url').'/js/jquery.jscrollpane.min.js', array('jquery', 'jquery-mwheel'));

  // Enqueue styles
  wp_enqueue_style('jquery-scrollpane-style', get_bloginfo('template_url').'/css/jquery.jscrollpane.css');
}

add_action('wp_enqueue_scripts', 'theme_enqueue_scripts_and_styles');

この関数を登録すると、スクリプト タグを から削除できます<head>。-Tagwp_head();の前に呼び出している限り、この関数は自動的にスタイルとスクリプトを含め、さらにはその場で jQuery を含めます。</head>デフォルトとは異なるパーマリンク設定を使用すると、相対パスが壊れるため、絶対パスを使用します。

于 2012-08-29T14:23:26.087 に答える
0

正しくリンクしていないか、jQuery自体を含めていないように思われます。

サイトの構造が次のようになっていると論理的です。

root\wp-content\themes\your-theme

そして、JavaScriptを配置するマップと、場合によっては追加のCSS用の個別のマップを配置します。

root\wp-content\themes\your-theme\js
root\wp-content\themes\your-theme\css

次に、これらにリンクする必要があります。これを（行ったように）header.phpに配置するのは論理的に聞こえるかもしれません。

<script type="text/javascript" src="/js/jquery.jscrollpane.min"></script>
<script type="text/javascript" src="/js/jquery.mousewheel"></script>
<link rel="stylesheet" href="/css/jquery.jscrollpane.css" />

Wordpressには、スタイルシートディレクトリを取得する機能があります。あなたはそれを使うことができます！このディレクトリをエコーするには、次を使用します。

<?php echo get_stylesheet_directory_uri(); ?>

したがって、上記のリンクは次のようになります。

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.jscrollpane.min"></script>

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.mousewheel"></script>

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/jquery.jscrollpane.css" />

使用しているテーマにjQuery自体が含まれていない場合は、このコード行を追加しますが、他のJavaScriptコードの前にロードされていることを確認してください（jQueryを使用するスクリプトが欠落していないことを確認するためです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

多くの場合、最初にスタイルシートをロードしてから、スクリプトをロードすることをお勧めします。したがって、すべてを一緒にすると、次のようになります。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/jquery.jscrollpane.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.jscrollpane.min"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.mousewheel"></script>
于 2012-08-29T14:35:07.913 に答える
0

これを追加してfunctions.php、任意の jQuery スクリプトをデレイグスターし、独自のスクリプトを作成することもできます。しかし、これは、不十分にコーディングされたプラグインからのハードコーディングされたインクルードには対抗できません。

function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method');

または、jQuery 競合モードを使用して、次のように使用することもできます。

<script type="text/javascript">
var k = jQuery.noConflict();
k(function() {
      k('#main').jScrollPane();
   });
</script>

<? wp_footer(); ?>プラグインが含まれているライブラリに依存している場合は、フッターにあることを確認してください。

于 2012-08-29T08:14:42.733 に答える