Bagaimana cara menambahkan atribut data ke item menu WordPress


17

Saya Twitter Bootstrap dan perlu menambahkan atribut data-toggle = "modal" ke tag tautan menu. Setelah mencari sebagian besar semua referensi hasil melakukan jalan-jalan untuk menu dropdown Bootstrap Twitter namun menu ini tidak memiliki dropdown dan saya hanya perlu menambahkan atribut tertentu.

Berikutnya saya menemukan ini: Tambahkan atribut khusus ke item menu tanpa plugin yang sangat membantu seperti yang muncul di WordPress 3.6+ kita tidak lagi harus melakukan walker kompleks yang panjang dan sebaliknya dapat menggunakan ini: http://codex.wordpress.org/Plugin_API / Filter_Reference / nav_menu_link_attributes

Namun pada saat ini berjalan bahwa referensi API cukup telanjang dan tidak memberikan contoh dan karena sangat baru ada sangat sedikit referensi untuk itu di Google.

Saya mencoba ini dulu:

add_filter( 'nav_menu_link_attributes', 'mywp_contact_menu_atts', 10, 3 );

function pb_contact_menu_atts( $atts, $item, $args )
{
    // inspect $item, then …
    $atts['data-toggle'] = 'modal';
    return $atts;
}

dan itu tidak bekerja namun seperti yang diharapkan menambahkan atribut ke semua tag di menu. Jadi saya mencoba mencari cara untuk menargetkan satu item menu dengan # menu-item-7857 atau sejenisnya.

Adakah yang tahu di mana menemukan contoh penargetan item menu atau dapat menentukan bagaimana mendasarkan pada informasi yang ada di referensi API tertaut di atas?

Untuk diketahui, saya memang menemukan satu contoh berikut tetapi hanya menargetkan item yang memiliki anak yang tidak membantu tetapi mungkin berada di arah yang benar:

add_filter('nav_menu_link_attributes', function($atts, $item, $args) {
    if ( $args->has_children )
    {
        $atts['data-toggle'] = 'dropdown';
        $atts['class'] = 'dropdown-toggle';
    }

    return $atts;
}, 10, 3);

UPDATE - Satu-satunya jawaban di bawah ini sepertinya ada pada sesuatu tetapi dari itu tidak dapat menentukan bagaimana sebenarnya menemukan nomor untuk menargetkan tautan spesifik saya dan di mana / bagaimana menambahkan yang bersyarat dalam contoh kerja. Menambahkan komentar tetapi tidak mendapat balasan. Sejak sekitar 18 hari saya pikir saya akan melihat apakah hadiah akan membantu.

Ketika saya melihat kode untuk tautan yang ingin saya targetkan:

<li id="menu-item-7858" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7858"><a href="#" data-toggle="modal">Chat</a></li>

Saya melihat nomor 7858 jadi berpikir mungkin itu nomor yang harus saya targetkan.

Tapi ketika saya coba misalnya:

add_filter( 'nav_menu_link_attributes', 'my_chat_menu_atts', 10, 3 );


function my_chat_menu_atts( $atts, $item, $args ) {
    if ( 7857 == $item['ID'] ) {
        // inspect $item, then …
        $atts['onclick'] = 'SnapEngage.startLink();';
        return $atts;
    }
}

Namun menambahkan bahwa jika pernyataan satu komentator menyarankan saya mendapatkan kesalahan berikut:

Fatal error: Cannot use object of type WP_Post as array

Saya mengasumsikan lebih banyak kode diperlukan tetapi hilang. Sebagai pengingat tanpa pernyataan if berfungsi, namun ia menargetkan semua tautan daripada satu tautan yang ingin saya targetkan.


Saya ingin memasukkan <? Php the_id ();?> Ke dalam variabel $ atts.something seperti itu // periksa $ item if ($ item-> ID == $ menu_target) {$ atts ['data-toggle'] = 'modal - <? php the_id ();?>'; } mengembalikan $ atts; Bisakah Anda membantu saya bagaimana saya bisa memasukkan the_id ke dalam variabel $ atts. Terima kasih
nadzhq

Jawaban:


36

Khusus mengedit kode yang Anda berikan dalam pertanyaan asli:

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 123;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-toggle'] = 'modal';
  }
  return $atts;
}

Setelah saya bertukar dengan beberapa nilai saya sendiri yang berhasil! Terima kasih! Menandai itu sebagai benar, tetapi mengatakan saya harus menunggu 23 jam lagi sebelum saya bisa memberi hadiah.
cchiera

Saya senang bisa membantu! : D
Jen

Saya menetapkan pengingat di Fantastical jadi saya tidak lupa untuk memberi hadiah besok.
cchiera

Bagaimana jika Anda memiliki beberapa item menu sebagai target?
Eric Mitjans

cukup gunakan beberapa pernyataan jika nilai data-toggle berbeda. Atau Anda dapat menyimpan id ke dalam kunci array (menganggapnya unik) dan nama modal sebagai nilai array. Kemudian periksa pernyataan if denganarray_key_exists()
Sisir

8

$itemArgumen kedua , yang disediakan untuk fungsi filter Anda, berisi objek item menu. Jika dicampakkan akan terlihat seperti ini:

[1] => WP_Post Object
    (
        [ID] => 2220
        [post_author] => 1
        [post_date] => 2012-12-26 19:29:44
        [post_date_gmt] => 2012-12-26 17:29:44
        [post_content] => 
        [post_title] => Home
        [post_excerpt] => 
        [post_status] => publish
        [comment_status] => open
        [ping_status] => open
        [post_password] => 
        [post_name] => home-3
        [to_ping] => 
        [pinged] => 
        [post_modified] => 2013-06-05 01:55:20
        [post_modified_gmt] => 2013-06-04 22:55:20
        [post_content_filtered] => 
        [post_parent] => 0
        [guid] => http://dev.rarst.net/?p=2220
        [menu_order] => 1
        [post_type] => nav_menu_item
        [post_mime_type] => 
        [comment_count] => 0
        [filter] => raw
        [db_id] => 2220
        [menu_item_parent] => 0
        [object_id] => 2220
        [object] => custom
        [type] => custom
        [type_label] => Custom
        [title] => Home
        [url] => http://dev.rarst.net/
        [target] => 
        [attr_title] => 
        [description] => 
        [classes] => Array
            (
                [0] => 
                [1] => menu-item
                [2] => menu-item-type-custom
                [3] => menu-item-object-custom
                [4] => current-menu-item
                [5] => current_page_item
                [6] => menu-item-home
            )

        [xfn] => 
        [current] => 1
        [current_item_ancestor] => 
        [current_item_parent] => 
    )

Untuk menargetkan item menu tertentu, Anda perlu merumuskan kondisi Anda dan memeriksanya dengan data yang tersedia di objek, misalnya if ( 2220 == $item['ID'] )


Terima kasih untuk ini! Saya tidak yakin saya mengerti bagaimana cara mendapatkan $ item ID untuk item menu khusus saya. Dalam contoh Anda, 2220 juga sama dengan url Anda " dev.rarst.net/?p=2220 ". Tautan saya, saya ingin menambahkan atribut data agar tidak pergi ke url wordpress lain melainkan href = "# ContactForm". Berdasarkan contoh Anda di atas, saya lebih banyak mencari di Google dan mencoba menjalankan echo var_export ($ GLOBALS ['post'], TRUE); tetapi ketika saya melihat di dekat item menu invidual saya tidak melihat ID unik. Bisakah Anda mengklarifikasi? Atau di "if (2220 == $ item ['ID'])" Terima kasih sebelumnya!
cchiera

2
Kesalahan yang Anda lihat adalah karena $itemobjek, bukan array; ubah $item['ID']ke $item->ID.
Jen

1

Mengapa Anda tidak mendekati masalah ini dari arah yang berbeda? Alih-alih mencoba menargetkan item menu dengan id == ?? yang dapat berubah di beberapa titik (item menu, bukan id), gunakan area WP Admin untuk menambahkan kelas kustom ke item menu yang ingin Anda targetkan. Kemudian gunakan kelas itu di Javascript Anda untuk memicu informasi yang Anda butuhkan:

$('.my-class').click(function(e){
  // do other stuff
  e.preventDefault;
});

Javascript saya tidak dijamin. Jika Anda tidak menggunakan jQuery, Anda bisa mencoba ini .


1

Saya ingin menambahkan data-surat ke menu khusus yang saya buat di WordPress.

Langkah-langkah yang saya pilih adalah:

  1. Menemukan nomor id menu saya.
  2. menambahkan baris kode dari @guiniveretoo
  3. menulis pernyataan if untuk setiap item menu (karena saya ingin nilai atribut yang berbeda untuk diinjeksi.)
  4. bekerja!

Ini kode saya.

add_filter( 'nav_menu_link_attributes', 'wpse121123_contact_menu_atts', 10, 3 );
function wpse121123_contact_menu_atts( $atts, $item, $args )
{  
  $menu_target = 6;

  if ($item->ID == $menu_target) {
    $atts['data-letters'] = 'PROJECTS';
  }

  elseif ($item->ID == 7) {
    $atts['data-letters'] = 'RESUME';
  }
  elseif ($item->ID == 8) {
    $atts['data-letters'] = 'ARTWORKS';
  }
  elseif ($item->ID == 9) {
    $atts['data-letters'] = 'HELLO!';
  }
  return $atts;
}

Semoga ini bisa membantu Anda.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.