탐색 메뉴 항목에 사용자 지정 메타 추가

Question

탐색 메뉴 항목에 사용자 지정 메타 추가

- 5
- 4606 2011-11-13
모든 메뉴 항목에 'foo'키를 사용하여 메타 데이터를 첨부해야합니다.핵심 WP를 편집하지 않고도 그렇게 할 수 있습니까?

탐색 메뉴 파일을 살펴보면 입력 상자를 추가하려는 위치 근처에 후크가없는 것으로 나타났습니다 (설명 아래,여기- http://cl.ly/0v2Z0X1n2e1L431t0h1G )

I need to attach meta data to every menu item, with a key 'foo'. Is it possible to do that, without editing core WP?

A quick look at the nav-menu files showed that no hooks exist near the place I want to add the input box (below Description, here - http://cl.ly/0v2Z0X1n2e1L431t0h1G)

navigation

- 내가 아는 한,그것은 완전히 불가능하지만,당신이 달성하려는 것이 무엇인지 정확히 알 수 있도록 당신의 시나리오를 자세히 설명한다면 좋을 것입니다.)
  
  As far as I know, it's totally not possible, however would be great if you elaborate your escenario so we can know exactly what are you trying to achieve ;)
  - 0
  - 2011-11-13
  - andresmijares
- 내 사용 사례는 'class'옵션에 가깝지만 사용자가 클래스 이름을 입력하는 대신`` item, instead of having users enter the class names.
  - 0
  - 2011-11-13
  - Dogbert
- Javascript별로 추가 할 수 있습니다.다른 방법은없는 것 같습니다.
  
  You could add it per Javascript. There seems to be no other way.
  - 0
  - 2011-11-13
  - fuxia
- 나는 울거야 !!!! 11one
  
  I'm gonna CRY!!!!11one
  - 0
  - 2013-01-22
  - frnhr

2 대답

투표

-1

2015-09-30

여기 는 약간의 과장입니다. 이 경우 워커를 방해하지 않기를 원하므로 더 많은jquery를 사용하여 작업을 수행했습니다.

 add_action('wp_update_nav_menu_item', 'custom_nav_update', 10, 3);
function custom_nav_update($menu_id, $menu_item_db_id, $args)
{
    if (is_array($_REQUEST['menu-item-icon'])) {
        $custom_value = $_REQUEST['menu-item-icon'][$menu_item_db_id];
        update_post_meta($menu_item_db_id, '_menu_item_icon', $custom_value);
    }
}

function menu_item_class_select()
{
    global $pagenow;
    if ($pagenow == "nav-menus.php") {
        ?>
        <script>
            (function ($) {
                $(document).ready(function () {
                    var menu_item_collection = {};
                    var item_holder = $("#menu-to-edit");
                    menu_item_collection.items = item_holder.find("li");

                    // extract id of a menu item from this pattern (menu-item-109)
                    // which 109 is the id
                    function getId(item_id) {
                        var arrayed = item_id.split("-");
                        return arrayed[2];
                    }

                    // return template wrapped in jquery object
                    function extra_field(id, value) {
                        if (value === null) {
                            value = "";
                        }
                        var template = '<p class="field-title-attribute description description-wide">' +
                            '<label for="edit-menu-item-attr-title-108">' +
                            'icon' +
                            '<input type="text" class="widefat edit-menu-item-attr-title" name="menu-item-icon[' + id + ']" value="' + value + '">' +
                            '</label>' +
                            '</p>';

                        return $(template);
                    }

                    // ajax out to get metadata
                    function getMetaData(id, callback) {
                        $.ajax({
                            method: "POST",
                            url: "/wp-admin/admin-ajax.php",
                            data: {id: id, post_type: "menu", action: "menu_metadata"}
                        }).done(function (msg) {
                            callback(msg);
                        }).fail(function (msg) {
                            console.log("failed : " + msg);
                        });
                    }

                    // these lines of codes initialize menus with their custom attributes values
                    if (menu_item_collection.items.length > 0) {
                        var id;
                        menu_item_collection.items.each(function () {
                            id = getId($(this).attr("id"));
                            var _this = $(this);
                            getMetaData(id, function (msg) {
                                var attribute = (_this.find(".field-title-attribute"));
                                if (msg._menu_item_icon === 'undefined') {
                                    msg._menu_item_icon = "";
                                }
                                attribute.after(extra_field(getId(_this.attr('id')), msg._menu_item_icon[0]));
                                _this.addClass("icon-link-was-added");
                            });
                        });
                    }

                    // this listener interact with adding live menus
                    item_holder.on('DOMNodeInserted', function (e) {
                        try {
                            // sortable script code that they used made me to check upon whether our intended child is li or not
                            // yet i wrap this code into try catch because some nodes was`nt inserted to the dome
                            // and null pointer would cause undefined error some times
                            if (
                                !$(e.target).hasClass("icon-link-was-added") &&
                                $(e.target).is("li") &&
                                $(e.target).attr("id").search(/menu\-item\-[0-9]+/) !== -1) {

                                var attribute = ($(e.target).find(".field-title-attribute"));
                                attribute.after(extra_field(getId($(e.target).attr('id'))));
                                $(e.target).addClass("icon-link-was-added");
                            }
                        } catch (e) {
                            // silent
                        }
                    });
                });
            })(jQuery);
        </script>
        <?php
    }
}

add_action('admin_footer', 'menu_item_class_select');

this answer in here is little bit of overdoing. I prefer to do not interfere with walkers in this case so I did my job with more jquery involved.

add_action('wp_update_nav_menu_item', 'custom_nav_update', 10, 3);
function custom_nav_update($menu_id, $menu_item_db_id, $args)
{
    if (is_array($_REQUEST['menu-item-icon'])) {
        $custom_value = $_REQUEST['menu-item-icon'][$menu_item_db_id];
        update_post_meta($menu_item_db_id, '_menu_item_icon', $custom_value);
    }
}

function menu_item_class_select()
{
    global $pagenow;
    if ($pagenow == "nav-menus.php") {
        ?>
        <script>
            (function ($) {
                $(document).ready(function () {
                    var menu_item_collection = {};
                    var item_holder = $("#menu-to-edit");
                    menu_item_collection.items = item_holder.find("li");

                    // extract id of a menu item from this pattern (menu-item-109)
                    // which 109 is the id
                    function getId(item_id) {
                        var arrayed = item_id.split("-");
                        return arrayed[2];
                    }

                    // return template wrapped in jquery object
                    function extra_field(id, value) {
                        if (value === null) {
                            value = "";
                        }
                        var template = '<p class="field-title-attribute description description-wide">' +
                            '<label for="edit-menu-item-attr-title-108">' +
                            'icon' +
                            '<input type="text" class="widefat edit-menu-item-attr-title" name="menu-item-icon[' + id + ']" value="' + value + '">' +
                            '</label>' +
                            '</p>';

                        return $(template);
                    }

                    // ajax out to get metadata
                    function getMetaData(id, callback) {
                        $.ajax({
                            method: "POST",
                            url: "/wp-admin/admin-ajax.php",
                            data: {id: id, post_type: "menu", action: "menu_metadata"}
                        }).done(function (msg) {
                            callback(msg);
                        }).fail(function (msg) {
                            console.log("failed : " + msg);
                        });
                    }

                    // these lines of codes initialize menus with their custom attributes values
                    if (menu_item_collection.items.length > 0) {
                        var id;
                        menu_item_collection.items.each(function () {
                            id = getId($(this).attr("id"));
                            var _this = $(this);
                            getMetaData(id, function (msg) {
                                var attribute = (_this.find(".field-title-attribute"));
                                if (msg._menu_item_icon === 'undefined') {
                                    msg._menu_item_icon = "";
                                }
                                attribute.after(extra_field(getId(_this.attr('id')), msg._menu_item_icon[0]));
                                _this.addClass("icon-link-was-added");
                            });
                        });
                    }

                    // this listener interact with adding live menus
                    item_holder.on('DOMNodeInserted', function (e) {
                        try {
                            // sortable script code that they used made me to check upon whether our intended child is li or not
                            // yet i wrap this code into try catch because some nodes was`nt inserted to the dome
                            // and null pointer would cause undefined error some times
                            if (
                                !$(e.target).hasClass("icon-link-was-added") &&
                                $(e.target).is("li") &&
                                $(e.target).attr("id").search(/menu\-item\-[0-9]+/) !== -1) {

                                var attribute = ($(e.target).find(".field-title-attribute"));
                                attribute.after(extra_field(getId($(e.target).attr('id'))));
                                $(e.target).addClass("icon-link-was-added");
                            }
                        } catch (e) {
                            // silent
                        }
                    });
                });
            })(jQuery);
        </script>
        <?php
    }
}

add_action('admin_footer', 'menu_item_class_select');

Bainternet · Accepted Answer · 2011-11-15

5

2011-11-15

다음은 작업을 수행해야하는 빠른 코드입니다. 테마의functions.php 파일에 붙여 넣으세요.

기본적으로 모든 일반 클래스 입력 상자를 숨기고 선택한 값에 따라 숨겨진 입력 값을 변경하는 새로운 선택 드롭 다운을 추가합니다.

다음과 같이 보입니다.

여기에 이미지 설명 입력

 function menu_item_class_select(){
    global $pagenow;
    if ($pagenow == "nav-menus.php"){
    ?>
    <script>
    jQuery(document).ready(function(){
        function create_dd(v){
            //create dropdown
            var dd = jQuery('<select class="my_class"></select>');
            //create dropdown options
            //array with the options you want
            var classes = ["","class1","class2","class3"];
            jQuery.each(classes, function(i,val) {
                if (v == val){
                    dd.append('<option value="'+val+'" selected="selected">'+val+'</option>');
                }else{
                    dd.append('<option value="'+val+'">'+val+'</option>');
                }
            });
            return dd;
        }

        jQuery(".edit-menu-item-classes").each(function() {
            //add dropdown
            var t = create_dd(jQuery(this).val());
            jQuery(this).before(t);
            //hide all inputs
            jQuery(this).css("display","none");

        });
        //update input on selection
        jQuery(".my_class").bind("change", function() {
            var v = jQuery(this).val();
            var inp = jQuery(this).next();
            inp.attr("value",v);
        });
    });


    </script>
    <?php
    }
}
add_action('admin_footer','menu_item_class_select');

here is a quick code that should do the job, paste this in your theme's functions.php file

basically what it does is hide all regular class input boxes and adds a new select dropdown which changes the value of the hidden input based on the selected value.

and it looks like this;

enter image description here

function menu_item_class_select(){
    global $pagenow;
    if ($pagenow == "nav-menus.php"){
    ?>
    <script>
    jQuery(document).ready(function(){
        function create_dd(v){
            //create dropdown
            var dd = jQuery('<select class="my_class"></select>');
            //create dropdown options
            //array with the options you want
            var classes = ["","class1","class2","class3"];
            jQuery.each(classes, function(i,val) {
                if (v == val){
                    dd.append('<option value="'+val+'" selected="selected">'+val+'</option>');
                }else{
                    dd.append('<option value="'+val+'">'+val+'</option>');
                }
            });
            return dd;
        }

        jQuery(".edit-menu-item-classes").each(function() {
            //add dropdown
            var t = create_dd(jQuery(this).val());
            jQuery(this).before(t);
            //hide all inputs
            jQuery(this).css("display","none");

        });
        //update input on selection
        jQuery(".my_class").bind("change", function() {
            var v = jQuery(this).val();
            var inp = jQuery(this).next();
            inp.attr("value",v);
        });
    });


    </script>
    <?php
    }
}
add_action('admin_footer','menu_item_class_select');