web-dev-qa-db-ja.com

テンプレートを修正してjQueryを追加する

カテゴリごとにグループ化されたすべてのリンクを表示するための「All Bookmarks」というページテンプレートがあります。私はそれを2つの方法で修正したいです。

  • リンクの各カテゴリは、カテゴリヘッダをクリックして折りたたみ/展開可能にする必要があります。
  • テンプレートは、含めるか除外するかのいずれかのカテゴリのリストを受け入れる必要があります。

折りたたみ可能な部分については、おそらく私は自分のjQueryコードがそれらに影響を与えることができるように各カテゴリヘッダにクラスを追加するだけでよいです。カテゴリを制限するために、おそらく私はテンプレートにパラメータを渡す方法が必要です。しかし、私はWPを完全に習得していないので、知りません。

  • jQueryコードを配置する場所
  • クラスをテンプレートに追加するか、または新しいテンプレートを作成するか
  • 新しいテンプレートをPagesで利用できるように保存する場所
  • テンプレートがパラメータを取ることができる場合、またはテンプレートがカスタムPHP関数を参照する必要がある場合
  • カスタムPHP関数を格納する場所

私はしばらくの間WordPress.orgをさまよっていて、ますますフラストレーションを感じています。誰かが上記の質問に対処して、おそらくWPコード構造の良い説明を私に指摘できれば私はそれを感謝します。

ありがとうございます。

Version: WP 3.1
Theme: Suffusion 3.7.7
jquerytemplatesblogroll
2
dnagirl

テンプレートを変更するのではなく、とにかくjQueryが必要になるので、これを実行できます。

functions.phpに追加

add_action( 'wp_enqueue_scripts', 'blogroll_toggles' );
function blogroll_toggles() {
    if( is_page_template( 'bookmarks.php' ) )
        wp_enqueue_script( 'blogroll-toggle', get_bloginfo( 'stylesheet_directory' ) . '/blogroll-toggle.js', array( 'jquery' ) );
}

またはwp-content/plugins/フォルダに新しいフォルダを作成し、新しいフォルダ内にファイルを作成します。 blogroll-plugin.php、そして以下を追加してください。

<?php
/*
    Plugin Name: Suffusion Blogroll Toggles
*/
add_action( 'wp_enqueue_scripts', 'blogroll_toggles' );
function blogroll_toggles() {
    if( is_page_template( 'bookmarks.php' ) )
        wp_enqueue_script( 'blogroll-toggle', plugins_url( '/blogroll-toggle.js', __FILE__ ), array( 'jquery' ) );
}

ブックマークテンプレートが添付されたページが読み込まれるたびに、この関数は基本的にスクリプトにエンキューします。 jQueryはスクリプトの依存関係として設定されているので、別々に読み込む必要はありません。

テーマ（またはプラグイン）フォルダーにファイルを作成してblogroll-toggle.jsという名前を付け、そのファイルに次のコードを追加します。

jQuery(document).ready( function($) {
    // Hide the blogroll lists
    $('div.entry ul.blogroll').hide();
    // Attach a click function to the headings
    $('div.entry h4').click( function() {
            // Make sure we're targeting the blogroll heading, if not, stop here(do nothing)
        if( !$(this).next('ul.blogroll') )
            return false;
            // Toggle the blogroll list that follows the heading
        $(this).next('ul.blogroll').toggle();
    });
});

JQueryはテストされていませんが、動作するはずです（私は何十回もトグルしました）。

注：プラグインとして使用している場合は、他のプラグインと同じように必ずアクティブにしてください。

コードに問題がある場合は、お知らせください。 :)

3
t31os