বিভাগগুলির মেটা বক্সের মতো ট্যাবগুলি কী কী একটি মেটা বাক্স তৈরি করার কোনও সহজ উপায় আছে?


13

আমার প্রশ্নটি শিরোনামে বেশ সংক্ষেপে প্রকাশিত। আমি নতুন পোস্ট / সম্পাদনা পোস্ট প্রশাসক পৃষ্ঠায় একটি মেটা বাক্স ফেলে দিচ্ছি, এবং আমি বিভাগ মেটা বক্সের মতো ট্যাবগুলি দিয়ে সেট আপ করতে সক্ষম হতে চাই। আমি ধরে নিই এটির মধ্যে সহজ উপায় আছে তবে আমি কীভাবে তা মনে করতে পারি না। কেউ কি জানেন?



ধন্যবাদ - এটি করেছেন এবং আমি মনে করি জেএস নিষ্ক্রিয় ট্যাবগুলি গোপন করতে আইডি ব্যবহার করছে (সঠিকভাবে)। আইডিগুলি সদৃশ করতে পারে না, তাই আমার নিজের জেএসটি লিখতে হতে পারে।
জেসন রোডস

উত্তর:


13

এখানে একটি খুব প্রাথমিক উদাহরণ ..

/*
    Code assumes it will be in the theme functions.php file
    Update the enqueue path if using it elsewhere
*/
add_action( 'add_meta_boxes_post', 'add_post_metabox' );

function add_post_metabox() {
    wp_enqueue_script( 'mytabs', get_bloginfo( 'stylesheet_directory' ). '/mytabs.js', array( 'jquery-ui-tabs' ) );
    add_meta_box( 'examplebox' , __('Example box'), 'my_example_metabox', 'post', 'side', 'core'/*,array()*/);
}

function my_example_metabox() {
    ?>
    <div id="mytabs">
        <ul class="category-tabs">
            <li><a href="#frag1">Tab 1</a></li>
            <li><a href="#frag2">Tab 2</a></li>
            <li><a href="#frag3">Tab 3</a></li>
        </ul>
        <br class="clear" />
        <div id="frag1">
            <p>#1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
        <div class="hidden" id="frag2">
            <p>#2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
        <div class="hidden" id="frag3">
            <p>#3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
    </div>
    <?php
}

এনকুইতে উল্লিখিত mytabs.js এর jQuery।

jQuery(document).ready(function($) {
    $("#mytabs .hidden").removeClass('hidden');
    $("#mytabs").tabs();
});

মন্তব্য:

  • একটি প্লাগইন ভিতরে ব্যবহৃত, এনকুই স্ট্রিংয়ের plugins_url( '/mytabs.js', __FILE__ )জায়গায় কল করা উচিত get_bloginfo
  • প্রতিটি ট্যাবের জন্য অ্যাঙ্কর লিঙ্কটি উল্লেখ করা সামগ্রীর উপাদানটির আইডিটির সাথে মেলে। ভঙ্গ 1, ভঙ্গ 2, ইত্যাদি
  • প্রথম পৃষ্ঠার পরে প্রতিটি কন্টেন্ট ডিআইভিতে একটি লুকানো শ্রেণি প্রয়োগ করা হয় যাতে তারা পৃষ্ঠার লোডে লুকিয়ে থাকে (অন্যথায় আপনি পৃষ্ঠাটিতে একটি সংক্ষিপ্ত লাফটি লক্ষ্য করবেন), পৃষ্ঠা লোডের পরে ক্লাসটি সরানো হবে, অন্যথায় তারা লুকিয়ে থাকবে।
  • আপনি যে পোস্টটি প্রভাব করতে চান তার প্রতিচ্ছবি করতে শীর্ষ পদক্ষেপটি আপডেট করা উচিত add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );, আমি postউদাহরণটিতে ব্যবহার করেছি ..
  • বিদ্যমান ওয়ার্ডপ্রেস সিএসএস যা ট্যাব এলআই উপাদানগুলিকে ইনলাইন অবস্থিত করে তা কাজে লাগাতে আপনাকে পাশের মেটাবক্স রেন্ডার করতে হবে (যদিও আপনি সিএসএসের সাথে ডিল করতে নিজের স্টাইলশীটটি সর্বদা লোড করতে পারেন)।

ট্যাব স্ক্রিপ্টটি কীভাবে কনফিগার করতে হয় সে সম্পর্কে আরও তথ্যের জন্য এখানে দেখুন।
http://docs.jquery.com/UI/Tabs

আশা করি এইটি কাজ করবে..


t31os, আমি wp_enqueue_script এ পরিবর্তন করেছি: wp_enqueue_script ('মাইটাবস', get_bloginfo ('টেমপ্লেট_ডাইরেক্টরি')। '/js/mytabs.js', অ্যারে ('jquery-ui-tabs')); এবং আমি থিমের মূলটিতে mytabs.js / js / ফোল্ডারে রেখেছি কিন্তু এটি কার্যকর হয় না
ফিলিপ

1
@ ফিলিপ - কোডটি একটি কার্যকরী উদাহরণ, আউটপুট উত্সটি পরীক্ষা করুন এবং এনকুই পথগুলি সঠিকভাবে উত্পাদিত হচ্ছে কিনা তা যাচাই করুন .. (বা এগুলি সব মিলে আউটপুট হয়ে গেছে) ..
t31os

আমি একটি ভুল করেছি ... কোন বিভ্রান্তির জন্য দুঃখিত! সবকিছু ঠিকঠাক চলছে।
ফিলিপ

@ ফিলিপ - কোনও সমস্যা নেই সাথী, কোনও ক্ষতি করা হয়নি ..;)
t31os
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.