व्यवस्थापक पैनल में शैली कस्टम कॉलम (विशेषकर स्तंभ सेल चौड़ाई समायोजित करने के लिए)

Question

मैं एक परियोजना के लिए सीएमएस के रूप में वर्डप्रेस का उपयोग कर रहा हूं जो कस्टम पोस्ट प्रकारों का व्यापक उपयोग करता है। मुझे प्रत्येक कस्टम पोस्ट प्रकार के लिए अलग-अलग तरीके से व्यवस्थापक पैनल में कॉलम प्रदर्शित करने की आवश्यकता है।

मैंने पहले ही आवश्यक कॉलम बना लिए हैं और उन्हें आबाद कर दिया है। सीएसएस को थोड़ा समायोजित करने के लिए मुझे क्या करना चाहिए। सबसे महत्वपूर्ण बात यह है कि मैं कुछ स्तंभों की चौड़ाई को बढ़ाने की कोशिश कर रहा हूं। उदाहरण के लिए मुझे पोस्ट नाम की तरह कॉलम को सूचीबद्ध करने के लिए कॉलम की जरूरत नहीं है।

मैंने अपने कस्टम पोस्ट प्रकारों के लिए व्यवस्थापक पैनल में एक स्टाइलशीट की कल्पना की, लेकिन मैं कॉलम की चौड़ाई को स्टाइल करने के लिए इसे प्राप्त नहीं कर सकता।

मैंने वें या td तत्वों की अधिकतम-चौड़ाई समायोजित करने का प्रयास किया, लेकिन यह अप्रभावी है। फायरबग से मैं देख सकता हूं कि सीएसएस शैली वहां है, लेकिन यह कुछ नहीं कर रहा है।

हालांकि मुझे कस्टम कॉलम जोड़ने / संपादित करने के लिए बहुत सारे ट्यूटोरियल मिल सकते हैं, लेकिन मैं वास्तव में इस तरह के कॉलम को स्टाइल करने के बारे में ज्यादा जानकारी नहीं जुटा पाया। कोई संकेत?

धन्यवाद!

Answer 1

मुझे एक समाधान मिला जो मेरे लिए काम करता है!

मैंने इस कोड को functions.php में छोड़ दिया है:

add_action('admin_head', 'my_column_width');

function my_column_width() {
    echo '<style type="text/css">';
    echo '.column-mycolumn { text-align: center; width:60px !important; overflow:hidden }';
    echo '</style>';
}

Answer 2

धन्यवाद निकुसर: महान काम करता है। मैं आपके समाधान के साथ पोस्ट पैनल (जैसे शीर्षक, लेखक, श्रेणियाँ) पर चयनित कॉलम की चौड़ाई बदलने में सक्षम था:

add_action('admin_head', 'my_admin_column_width');
function my_admin_column_width() {
    echo '<style type="text/css">
        .column-title { text-align: left; width:200px !important; overflow:hidden }
        .column-author { text-align: left; width:100px !important; overflow:hidden }
        .column-categories { text-align: left; width:100px !important; overflow:hidden }
    </style>';
}

Answer 3

आपको काफी आसानी से CSS का उपयोग करके कॉलम की चौड़ाई निर्धारित करने में सक्षम होना चाहिए। आप .column-{name}स्तंभ कोशिकाओं (दोनों thऔर td) पर शैलियों को लागू करने के लिए वर्ग का उपयोग कर सकते हैं । उदाहरण के लिए:

.column-mycolumn { width:20%; }

सुनिश्चित करें कि आपके पास CSS विशिष्टता नियमों के कारण आपके कॉलम की चौड़ाई को ओवररॉल करने वाली अन्य शैलियाँ नहीं हैं । इसके अलावा, रिक्त स्थान या बड़ी छवियों के बिना लंबे शब्द कॉलम को कुछ ब्राउज़रों में निर्दिष्ट की तुलना में व्यापक होने के लिए मजबूर कर सकते हैं।

Comments

इसने काम कर दिया! आपको बहुत - बहुत धन्यवाद! मैं अपने सीएसएस को स्पष्ट रूप से

— दिखा

मेरे पास "क्लिक" नाम का एक कॉलम है और इस कोड को मेरे चाइल्डहेम स्टाइल्स में रखा गया है। फाइल का एडमिन पोस्ट लिस्ट में कोई प्रभाव नहीं है! । कॉलम-क्लिक {चौड़ाई: 60 पीएक्स; }

— निकुसर डम्ब्राव

Answer 4

आप अपनी समस्याओं को हल करने की कोशिश कर सकते हैं:

add_action('admin_head', 'my_admin_custom_styles');
function my_admin_custom_styles() {
    $output_css = '<style type="text/css">
        .column-date { display: none }
        .column-tags { display: none }
        .column-author { width:30px !important; overflow:hidden }
        .column-categories { width:30px !important; overflow:hidden }
        .column-title a { font-size:30px !important }
    </style>';
    echo $output_css;
}

Comments

प्रत्येक सीएसएस लाइनों पर कोई अर्धविराम नहीं।

— उत्तर दिशा

यह बहुत उपयोगी था। बस जोड़ने के लिए, वर्डप्रेस का उपयोग हमारे कुछ संपादक उपयोगकर्ताओं द्वारा बड़े स्क्रीन मोबाइल पर भी किया जाता है, इसलिए हमने मीडिया क्वेरी को जोड़ा क्योंकि !importantउपरोक्त नियमों ने WP के व्यवस्थापक सूचीकरण के डिफ़ॉल्ट डिज़ाइन को तोड़ दिया। यह एक बहुत ही आसान सुझाव है। धन्यवाद!

— PKHunter

डिफ़ॉल्ट रूप से, कुछ स्तंभों में वर्ग होता है .fixedजिसके परिणामस्वरूप होता है width: 15%; । यह सुनिश्चित करता है कि उन स्तंभों में दूसरों की तुलना में उन्हें अधिक कमरे आवंटित किए गए हैं (जो कई लाइनों को तोड़ने की संभावना है।) लेकिन व्यवहार में, इससे कॉलमों को ज़रूरत से ज़्यादा जगह मिल सकती है! अपने कम महत्वपूर्ण स्तंभों के लिए अतिरिक्त स्थान देने से बचने के लिए आप ऊपर गौरांग के कार्य को अनुकूलित कर सकते हैं। उदाहरण के लिए: .column-tags { width: initial !important; }।

— फेबियन सन्नुअर्ट