কীভাবে একটি টানুন এবং jQuery UI Sortables সম্মুখের প্রান্তের বিন্যাস সম্পাদকটি ছেড়ে দিতে হবে?

Question

আমি jQuery UI বাছাইযোগ্য ব্যবহার করে একটি ফ্রন্ট এন্ড পোস্ট লেআউট সম্পাদক তৈরি করছি ।

পোস্টগুলি 300 পিক্সারে 250 পিক্স বাক্সে একটি পটভূমির চিত্রের উপরে রাখা হয়েছে। ওয়ার্ডপ্রেস অ্যাডমিন ব্যবহার করে পোস্টগুলি তৈরি এবং সম্পাদিত হয় তবে আমি সাইট প্রশাসককে সামনের প্রান্তে একটি ড্রাগ এবং ড্রপ ইন্টারফেস ব্যবহার করে বাক্সগুলির ক্রম সামঞ্জস্য করার অনুমতি দিতে চাই।

আমি ড্র্যাগ এবং ড্রপ সাজানোর যোগ্য অংশটি পেয়েছি কাজ করেছি তবে বাক্সগুলির রাজ্য (ক্রম) সংরক্ষণের জন্য একটি উপায় নিয়ে আসা দরকার। আদর্শভাবে আমি একটি বিকল্প হিসাবে রাষ্ট্রকে সংরক্ষণ করতে এবং এটিকে ক্যোয়ারিতে তৈরি করতে সক্ষম হতে চাই।

পোস্টগুলির জন্য ক্যোয়ারী হ'ল একটি সহজ ডাব্লুপিওকিউয়ারি যা স্বতন্ত্র বাক্সের বিন্যাসটি নির্ধারণ করতে কাস্টম মেটা বাক্স থেকে ডেটা পায় .:

$args= array(
      'meta_key' => 'c3m_shown_on',
       'meta_value'=> 'home' );
    $box_query = new WP_Query($args);  ?>
        <ul id="sortable">
            <?php
    while ($box_query->have_posts()) : $box_query->the_post(); global $post; global $prefix;           
    $box_size = c3m_get_field($prefix.'box_size', FALSE);
    $box_image = c3m_get_field($prefix.'post_box_image', FALSE);
    $overlay_class = c3m_get_field($prefix.'overlay_class', FALSE);

    if ( c3m_get_field($prefix.'external_link', FALSE) ) {
    $post_link = c3m_get_field($prefix.'external_link', FALSE);
    } else
            { $post_link = post_permalink(); 
    } ?>     
     <li class="<?php echo $box_size;?>  ui-state-default">
        <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
            <?php echo  '<a href="'.$post_link.'" ><img src="'.esc_url($box_image).'" alt="Image via xxxxx.com" /></a>'; ?>
                <div class="post-box <?php echo $overlay_class;?>">
                <?php if ( c3m_get_field( $prefix.'text_display', FALSE) ) { ?>     
                <h2><a href="<?php echo $post_link?>"><?php the_title();?></a></h2> 
                <p><?php echo substr($post->post_excerpt, 0, 90) . '...'; ?></p>            
                <?php } ?>               
                </div>
         </article>
     </li>              
    <?php endwhile; ?>
       </ul>
</section>

জাভাস্ক্রিপ্টটি কেবলমাত্র প্রাথমিক ডিফল্ট বাছাইযোগ্য নির্দেশাবলী

jQuery(document).ready(function() {
    jQuery("#sortable").sortable();
  });

রাষ্ট্র বাঁচাতে কুকি ব্যবহার করে বিভিন্ন পদ্ধতি উপলব্ধ রয়েছে তবে আমাকে অ্যাডমিন ব্যবহারকারীদের জন্য বাছাইযোগ্য টানা এবং ড্রপও নিষ্ক্রিয় করতে হবে যাতে আমার সত্যিকারের ডাটাবেসে সংরক্ষণ করতে হবে।

আমি সর্বাধিক সৃজনশীল এবং ব্যবহারযোগ্য পদ্ধতি খুঁজছি এবং সেরা উত্তরের জন্য একটি 100 পয়েন্ট অনুদান প্রদান করব।

হালনাগাদ:

আমি একটি সামান্য পরিবর্তন নিয়ে কাজ করে সোম্যাটিকের উত্তর পেয়েছি ।

এজ্যাকারল অ প্রশাসক পৃষ্ঠাগুলিতে মান ফেরত দেয় না তাই আমি wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );মানটি সংজ্ঞায়িত করতাম এবং জাভাস্ক্রিপ্ট লাইনটি বিকল্পগুলির অধীনে পরিবর্তন করেছিলাম:
url: MyAjax.ajaxurl,

কেবল প্রশাসকদের কাছে অর্ডার সাজানোর ক্ষেত্রে অ্যাক্সেস সীমাবদ্ধ করতে আমি আমার wp_enqueue_script ফাংশনে একটি শর্তসাপেক্ষ যুক্ত করেছি:

    function c3m_load_scripts() { 
    if ( current_user_can( 'edit_posts' ) ) {
        wp_enqueue_script( 'jquery-ui' );
        wp_enqueue_script( 'functions', get_bloginfo( 'stylesheet_directory' ) . '/_/js/functions.js', array( 'jquery', 'jquery-ui' ), false);
        wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
    }
}

আমি আরও কিছু পরীক্ষা করতে যাচ্ছি এবং এই প্রশ্নের সমাধান হিসাবে চিহ্নিত করুন এবং অনুগ্রহ প্রদান করুন।

Comments

আপনি কি পোস্টে মেনু_অর্ডার ব্যবহার করতে পারবেন? আমি জানি আপনি এটি সংযুক্তিতে ব্যবহার করতে পারেন তাই পোস্টগুলি কেন নয়? যদি এটি সম্ভব হয় তবে এটিই আপনি পোস্টগুলির ক্রম সংরক্ষণ করতে পারেন ...

— ব্র্যাডি

দেখে মনে হচ্ছে আপনি করতে পারেন - 'মেনু_অর্ডার' - পৃষ্ঠা অর্ডার অনুসারে অর্ডার করুন। পৃষ্ঠাগুলির জন্য প্রায়শই ব্যবহৃত (সম্পাদনা পৃষ্ঠার বৈশিষ্ট্য বাক্সে অর্ডার ক্ষেত্র) এবং সংযুক্তিগুলির জন্য (সন্নিবেশ / আপলোড মিডিয়া গ্যালারী কথোপকথনের পূর্ণসংখ্যার ক্ষেত্র), তবে স্বতন্ত্র 'মেনু_অর্ডার' মানগুলির সাথে কোনও পোস্টের জন্য ব্যবহার করা যেতে পারে (এগুলি সবই ডিফল্ট থেকে 0)।

— ব্র্যাডি

@ ব্র্যাডি মেনু_অর্ডার ব্যবহারের বিষয়ে দুর্দান্ত ধারণা। @ সুমেটিক এটিতে প্রসারিত এবং এটি কাজ করে। ধন্যবাদ!

— ক্রিস_ও

Answer 1

ব্র্যাডি সঠিক যে কাস্টম পোস্ট টাইপের অর্ডারগুলি সংরক্ষণ এবং প্রদর্শন পরিচালনা করার সেরা উপায় menu_orderসম্পত্তি ব্যবহার করে

তালিকাটি বাছাইযোগ্য এবং এজাক্সের মাধ্যমে ডেটা ওয়ার্ডপ্রেসে পাস করার জন্য এখানে jquery:

jQuery(document).ready(function($) {        
    var itemList = $('#sortable');

    itemList.sortable({
        update: function(event, ui) {
            $('#loading-animation').show(); // Show the animate loading gif while waiting

            opts = {
                url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
                type: 'POST',
                async: true,
                cache: false,
                dataType: 'json',
                data:{
                    action: 'item_sort', // Tell WordPress how to handle this ajax request
                    order: itemList.sortable('toArray').toString() // Passes ID's of list items in  1,3,2 format
                },
                success: function(response) {
                    $('#loading-animation').hide(); // Hide the loading animation
                    return; 
                },
                error: function(xhr,textStatus,e) {  // This can be expanded to provide more information
                    alert(e);
                    // alert('There was an error saving the updates');
                    $('#loading-animation').hide(); // Hide the loading animation
                    return; 
                }
            };
            $.ajax(opts);
        }
    }); 
});

এখানে ওয়ার্ডপ্রেস ফাংশনটি রয়েছে যা আজাক্স কলব্যাকের জন্য শোনে এবং ডিবিতে পরিবর্তনগুলি সম্পাদন করে:

function my_save_item_order() {
    global $wpdb;

    $order = explode(',', $_POST['order']);
    $counter = 0;
    foreach ($order as $item_id) {
        $wpdb->update($wpdb->posts, array( 'menu_order' => $counter ), array( 'ID' => $item_id) );
        $counter++;
    }
    die(1);
}
add_action('wp_ajax_item_sort', 'my_save_item_order');
add_action('wp_ajax_nopriv_item_sort', 'my_save_item_order');

আপনার সংরক্ষণ করা ক্রমে পোস্টগুলি প্রদর্শন করার কীটি হল menu_orderকোয়েরি আরগগুলিতে সম্পত্তি যুক্ত করা:

$args= array(
    'meta_key' => 'c3m_shown_on',
    'meta_value'=> 'home'
    'orderby' => 'menu_order',
    'order' => 'ASC'
);

$box_query = new WP_Query($args);

তারপরে আপনার লুপটি চালান এবং প্রতিটি আইটেম আউটপুট করুন ... (প্রথম লাইনটি মূল ডাব্লুপিপি লোডিং অ্যানিমেশন রয়েছে - আপনি প্রাথমিকভাবে এটি CSS এর মাধ্যমে লুকিয়ে রাখতে চাইবেন এবং প্রক্রিয়াকরণের সময় jquery ফাংশনটি প্রদর্শিত হবে)

<img src="<?php bloginfo('url'); ?>/wp-admin/images/loading.gif" id="loading-animation" />
<ul id="sortable">
    <li id="{echo post ID here}">{echo title or other name here}</li>
</ul>

সোলসিজলের দুর্দান্ত টিউটোরিয়াল দ্বারা অনুপ্রাণিত কোড ।

Comments

দুর্দান্ত উত্তর। আমি এটি একটি শট দিতে হবে।

— ক্রিস_ও

এর জন্য আপনাকে অনেক ধন্যবাদ - আমি যে কিছুতে কাজ করেছিলাম তাতে সম্পূর্ণরূপে সহায়তা করেছি। আমি যে সমস্যার মুখোমুখি হয়েছি তা হ'ল বাছাইযোগ্য তালিকার প্রতিটি আইটেমের একটি আইডি থাকা দরকার যা পোস্ট আইডির সাথে মেলে। এটি সোলসিজলের টিউটোরিয়ালে ছিল কিন্তু ওপির পোস্টে নয়।

— ডাল্টন

একেবারে ঠিক, ডাল্টন, আমি আমার উদাহরণে খুব সংক্ষিপ্ত ছিলাম। কোড আপডেট হয়েছে।

— সোম্যাটিক

Answer 2

http://jsfiddle.net/TbR69/1/

সমাপ্তি থেকে অনেক দূরে, তবে ধারণাটি হ'ল ড্রাগ এবং ড্রপ এজ্যাক্স অনুরোধ প্রেরণ। আপনি "সংরক্ষণ করুন" বোতাম বা অন্য কিছু ক্লিক করার পরেও এজাক্স অনুরোধটি ট্রিগার করতে চাইতে পারেন। পোস্ট আইডি এবং নতুন অর্ডার সহ একটি অ্যারে প্রেরণ করা হবে।

তারপরে আপনাকে সার্ভারের শেষে ডাটাবেসে পোস্টগুলি আপডেট করতে হবে। অবশেষে, orderআপনার WP_Queryলুপে একটি প্যারামিটার যুক্ত করুন ।

আমি আশা করি এটি আপনার শুরু হবে। যে কেউ ফিডিং চালিয়ে যেতে নির্দ্বিধায় বোধ করেন।

Answer 3

/**
 *  Enqueue javascript and css files
 */
function uc_enqueue_my_assets() {
    wp_enqueue_script( 'jquery-ui-sortable');
    wp_register_script( 'order', plugins_url( '/js/order.js', __FILE__ ), array( 'jquery' ) );
    wp_enqueue_script( 'order' );
}

function uc_is_user_logged_in()
{
    if ( is_user_logged_in()) {
        add_action( 'wp_enqueue_scripts', 'uc_enqueue_my_assets' );
        add_action( 'admin_enqueue_scripts', 'uc_enqueue_my_assets' );
    }
}
add_action('init', 'uc_is_user_logged_in');


/**
 *  Update order of posts by ajax on trigger of drag and drop event
 */
function uc_sort_post_items() {

    $order = wp_parse_id_list(explode(',', $_POST['order']));
    write_log($order);

    global $wpdb;
    $list = join(', ', $order);
    $wpdb->query('SELECT @i:=0');
    $wpdb->query(
        "UPDATE wp_posts SET menu_order = ( @i:= @i+1 )
        WHERE ID IN ( $list ) ORDER BY FIELD( ID, $list );"
    );

    wp_die();
}
add_action('wp_ajax_uc_sort_post_items', 'uc_sort_post_items');
add_action('wp_ajax_nopriv_uc_sort_post_items', 'uc_sort_post_items');



/**
 *  Display sorted posts
 */
function uc_pre_get_posts( $wp_query ) {
    write_log(basename($_SERVER['PHP_SELF']));
    $wp_query->set('orderby', 'menu_order');
    $wp_query->set('order', 'ASC');
}
add_action( 'pre_get_posts', 'uc_pre_get_posts', 1 );

জাভাস্ক্রিপ্ট ফাইল অর্ডার .js

$('#the-list').sortable({
        update: function(event, ui) {

            $.ajax({

                url: '/wp-admin/admin-ajax.php',
                type: 'post',
                dataType: 'json',
                data:{
                    action: 'uc_sort_post_items', // Tell WordPress how to handle this ajax request
                    order: '4567,4569,4565 ' // Passes ID's of list items in  1,3,2 format. Write your own js method to access the list of id from frontend.
                },
                success: function(data, response) {
                    console.log(response);
                },
                error: function(xhr,textStatus,e) {
                    alert(e);
                }

                });

        }
    });

Comments

দয়া করে কেবল কোড ডাম্প করবেন না। আপনাকে কিছু ব্যাখ্যা যুক্ত করার জন্য অনুরোধ করা হয়েছে, কেন মনে হয় উপরের কোডটি প্রশ্নের উত্তর দেবে।

— মইনুল ইসলাম

@ মায়নুলআইসলাম বর্ণনাটি ইতিমধ্যে মন্তব্য স্নাতকের হিসাবে কোড স্নিপেটের ভিতরে যুক্ত করা হয়েছে।

— স্কাইআর