ওয়ার্ডপ্রেস অ্যাডমিন বার ওভারল্যাপিং টুইটার বুটস্ট্র্যাপ নেভিগেশন [বন্ধ]

10

বন্ধ থাকে। এই প্রশ্নটি অফ-টপিক । এটি বর্তমানে উত্তর গ্রহণ করছে না।

এই প্রশ্নটি উন্নত করতে চান? প্রশ্ন আপডেট করুন যাতে এটি ওয়ার্ডপ্রেস ডেভেলপমেন্ট স্ট্যাক এক্সচেঞ্জের বিষয়বস্তু ।

5 বছর আগে বন্ধ ।

টুইটার বুটস্ট্র্যাপ ( 2.3.0) ন্যাভ বারকে ওভারল্যাপ করে আমি ওয়ার্ডপ্রেস অ্যাডমিন বারের সাথে একটি সমস্যা পাচ্ছি । আমি এই সমাধানটি চেষ্টা করেছি:

body.admin-bar .navbar-fixed-top {
    top: 28px;
}

.navbar .brand {
    color: #000 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px
        rgba(255, 255, 255, 0.125);
    font-weight: bold !important;
}

.nav-container {
    padding-left: 0;
    padding-right: 0;
}

.nav-tabs, .nav-pills {
    margin-top: -6px;
}

.dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a
    {
    color: #fff !important;
}

#inner-header {
    width: 100%;
}

input,textarea,select,.uneditable-input {
    margin-bottom: 0;
}

.navbar-form,.navbar-search {
    margin: 0 0 9px;
}

.navbar-search {
    padding-left: 0;
}

#s {
    width: 100px;
}

কিন্তু হায় আফসোস এখনও এটি একটি সমস্যা উত্থাপন করা হয়। আমি ভাবছি কি ফিক্স পাওয়া যায়?

— TheWebs
সূত্র

17

কীভাবে ওয়ার্ডপ্রেস অ্যাডমিন বারটি আপনার টুইটার বুটস্ট্র্যাপ নেভিগেশন বারের সাথে ওভারল্যাপিং থেকে রোধ করবে।

এর জবাবে: ওয়ার্ডপ্রেস অ্যাডমিন বার ওভারল্যাপিং টুইটার বুটস্ট্র্যাপ নেভিগেশন

জিজ্ঞাসা করেছেন: @TheWebs

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

সুতরাং এখানে এমন একটি উত্তর দেওয়া আছে যা ওয়ার্ডপ্রেস অ্যাডমিন বারটি আড়াল করে না বা আপনার পৃষ্ঠাগুলির নীচে ওয়ার্ডপ্রেস অ্যাডমিন বারকে সরিয়ে দেয় না। এই উত্তরটি ওয়ার্ডপ্রেস অ্যাডমিন বারটি যেখানেই থাকবে ঠিক ঠিক রাখবে ... আপনার পৃষ্ঠাগুলির শীর্ষে।

দয়া করে নোট করুন এটি সম্পূর্ণ করতে কয়েকটি সংক্ষিপ্ত পদক্ষেপ গ্রহণ করবে, তবে এটি মূল্যবান। এটি আসলেই জটিল বা সময় সাপেক্ষ প্রক্রিয়া নয়। আমি কেবল এটি নিশ্চিত করতে চেয়েছিলাম যে এটি কীভাবে করা যায় তার ব্যাখ্যাটি পরিষ্কার এবং অনুসরণ করা / বুঝতে সহজ।

ধাপ 1

যোগ get_body_class();আপনার থিম এর <body>ট্যাগ।

থিমগুলির বডি ট্যাগের জন্য একটি টেম্পলেট ট্যাগ রয়েছে যা থিম লেখকদের CSS এর সাথে আরও কার্যকরভাবে স্টাইল করতে সহায়তা করবে। টেমপ্লেট ট্যাগ বলা হয় body_class। এই ফাংশনটি শরীরের উপাদানকে বিভিন্ন শ্রেণি দেয় এবং সাধারণত এটির header.phpএইচটিএমএল বডি ট্যাগ যুক্ত করা যায়।

টুইটার বুটস্ট্র্যাপ ডিরেক্টরি ব্যবহার করে আপনার সক্রিয় ওয়ার্ডপ্রেস থিমটি খুলুন । এটি খুঁজে header.phpএবং এটি খুলুন।
সন্ধান করুন <body> ।
প্রতিস্থাপন <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

উপরের তিনটি ধাপ শেষ করার পরে, আপনি এখন ওয়ার্ডপ্রেস বডি ক্লাসগুলির সাথে আপনার ওয়ার্ডপ্রেস থিমটি সফলভাবে সক্ষম করেছেন।

পদক্ষেপ 2 (বিকল্প!)

<body>ট্যাগটিতে কাস্টম শর্তসাপেক্ষ সিএসএস ক্লাস যুক্ত করুন ।

ডিফল্টরূপে, ওয়ার্ডপ্রেস ইতিমধ্যে এইচটিএমএল ট্যাগে ডিফল্ট ক্লাসগুলির একটি তালিকা সরবরাহ করে, যদি আপনি body_class()বা get_body_class()ফাংশন ব্যবহার করে থাকেন ।

আপনি যদি আপনার ওয়ার্ডপ্রেস ওয়েবসাইটে কোনও রেন্ডার করা ফ্রন্ট-এন্ড পৃষ্ঠার সোর্স কোড দেখতে পান তবে আপনি লক্ষ্য করবেন যে এইচটিএমএল <body>ট্যাগে স্বয়ংক্রিয়ভাবে যুক্ত হওয়া দুটি সিএস ক্লাস "লগ-ইন" এবং "অ্যাডমিন-বার" রয়েছে।

আপনি যদি খেয়াল করেন যে <body>এই ব্যবহারকারীদের লগইন করা থাকে তবে এই সিএসএস শ্রেণির নামগুলি এইচটিএমএল ট্যাগে যুক্ত করা হয়, অন্যথায় সেগুলি এইচটিএমএল <body>ট্যাগে যুক্ত করা হবে না ।

সুতরাং আপনি যদি ডিফল্ট ওয়ার্ডপ্রেস সিএসএস শ্রেণীর নামগুলি ব্যবহার করতে না চান তবে আপনি খুব সহজেই নিজের নিজস্ব যুক্ত করতে পারেন।

টুইটার বুটস্ট্র্যাপ ডিরেক্টরি ব্যবহার করে আপনার সক্রিয় ওয়ার্ডপ্রেস থিমটি খুলুন । এটি খুঁজে functions.phpএবং এটি খুলুন।
যোগ add_filter('body_class', 'mbe_body_class'); ফাইলের উপরে।
যোগ ফাইল নীচে, নিম্নলিখিত কোড।

কোড:

function mbe_body_class($classes){
    if(is_user_logged_in()){
        $classes[] = 'body-logged-in';
    } else{
        $classes[] = 'body-logged-out';
    }
    return $classes;
}

এখন, আপনি যদি আপনার ওয়ার্ডপ্রেস ওয়েবসাইটটিতে যে কোনও রেন্ডার করা ফ্রন্ট-এন্ড পৃষ্ঠার উত্স কোডটি দেখেন, ব্যবহারকারী লগ ইন থাকলে আপনি দেখতে পাবেন যে "বডি-লগ-ইন" এইচটিএমএল <body>ট্যাগে যুক্ত হয়েছে , এবং ব্যবহারকারী যদি লগ আউট, আপনি দেখতে পাবেন "বডি-লগ-আউট" এইচটিএমএল <body>ট্যাগে যুক্ত করা হয়েছে ।

ধাপ 3

আপনার থিমে সিএসএস কোড যুক্ত করুন।

এটি কোডের বিভাগ যা আপনার থিমটি ওয়ার্ডপ্রেস অ্যাডমিন বার এবং আপনার টুইটার বুটস্ট্র্যাপ নেভিগেশন উভয়ই সঠিকভাবে দেখাতে সক্ষম করবে, ব্যবহারকারী আপনার ওয়েবসাইট থেকে লগ ইন করেছেন বা লগ আউট হয়েছে।

টুইটার বুটস্ট্র্যাপ ডিরেক্টরি ব্যবহার করে আপনার সক্রিয় ওয়ার্ডপ্রেস থিমটি খুলুন । এটি খুঁজে functions.phpএবং এটি খুলুন।
যোগ add_action('wp_head', 'mbe_wp_head'); ফাইলের উপরে।
যোগ ফাইল নীচে, নিম্নলিখিত কোড।

কোড:

function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

কোড সম্পাদনা করুন

add_action('wp_head', 'mbe_wp_head');
function mbe_wp_head(){
    echo '<style>'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'@media only screen and (min-width: 783px) {'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'}</style>'
    .PHP_EOL;
}

আপনার শিরোনামটি যথাযথ দূরত্বে নিচে নামানো হয়েছে তা নিশ্চিত করার জন্য mbe_wp_head ফাংশনের এই সংস্করণটিতে একটি মোবাইল-প্রথম মিডিয়া ক্যোয়ারী অন্তর্ভুক্ত রয়েছে। মোবাইলের জন্য, ডাব্লুপি প্রশাসনের বারটি 48px লম্বা। 783px ব্রেকপয়েন্টের পরে, অ্যাডমিন বারটি কেবলমাত্র 28px লম্বায় সংক্ষিপ্ত করে to

ওখানে তোমার আছে। যদি ব্যবহারকারী লগ ইন থাকে, আপনার এখন আপনার পৃষ্ঠার একেবারে শীর্ষে ওয়ার্ডপ্রেস অ্যাডমিন বার থাকা উচিত, সঙ্গে সঙ্গে আপনার টুইটার বুটস্ট্র্যাপড নেভিগেশনটি অনুসরণ করুন। যদি ব্যবহারকারী আপনার ওয়ার্ডপ্রেস ওয়েবসাইট থেকে লগ আউট হয় তবে আপনার টুইটার বুটস্ট্র্যাপ নেভিগেশন এখনও আপনার ওয়েবসাইটের শীর্ষে যথাযথভাবে প্রদর্শিত হবে।

— মাইকেল একলন্ড
সূত্র

1

আপনি এইচটিএমএল এম্বেড করার পরিবর্তে উদাহরণস্বরূপ স্টাইল সিএসএসে সিএসএস রাখেন নি কেন? এটি আরও মার্জিত সমাধান হবে। এছাড়াও আপনার কাজ এবং ধারণা জন্য আপনাকে ধন্যবাদ!

— ম্যাক্স রুফ

@ ম্যাক্সরুফ আপনি একদম ঠিক বলেছেন আলাদা এনকুইড সিএসএস ফাইল আরও ভাল হবে। আমি এই পোস্টটি সন্ধানকারী লোকদের সম্পর্কে কেবল ভাবছিলাম, যাতে তারা সহজেই অনুলিপি / পেস্ট করতে পারে। সমস্যা দেখা দেওয়ার সম্ভাবনা কম।

— মাইকেল একলন্ড

25

আমার পক্ষে কাজ করেনি, তবে আমি একটি দুর্দান্ত ফিক্স পেয়েছি। আপনার শিরোনামে। পিএফপিতে সরঞ্জামদণ্ড প্রদর্শিত হয় কিনা তা জিজ্ঞাসা করার জন্য ওয়ার্ডপ্রেস ফাংশনটি ব্যবহার করুন এবং তারপরে নববার ডিভের নীচে একটি ফাঁকা ডিভি তৈরি করুন:

<div class="navbar navbar-inverse navbar-fixed-top">
<?php 
  // Fix menu overlap
  if ( is_admin_bar_showing() ) echo '<div style="min-height: 32px;"></div>'; 
?>
<div class="navbar-inner">

— Filtah
সূত্র

দুর্দান্ত ফিক্স। আমি পছন্দ করি যে এটি গৃহীত উত্তরের চেয়ে অনেক সহজ এবং এটির জন্য is_admin_bar_showing()ব্যবহারকারীরা লগইন করা নয়, যা ভালভাবে বিবেচনা করে কেউ লগ ইন হতে পারে তবে অ্যাডমিন বারটি বন্ধ করে দিয়েছে। ধন্যবাদ!

— মার্ক রুম্মেল

3

ওয়ার্ডপ্রেস ৩.৮ অনুসারে, অ্যাডমিন বারের উচ্চতা 32px।

— গাভিল

এটি সামান্য বিট হ্যাকি তবে আমি এটি সেরা সমাধান হিসাবে পেয়েছি। আপভোটড

— প্লিশিঅবজেক্ট

টার্নারি লজিক এবং একটি ইনলাইন স্টাইল ব্যবহার করে কিছুটা সংশোধিত সমাধান:<nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>

— মার্ক রুম্মেল

1

এটি একটি মোবাইল ডিভাইস ব্যতীত অফসেটটি 32px নয় 46px। এর জন্য অ্যাকাউন্ট করতে আমি স্টাইলের পরিবর্তে একটি সিএসএস ক্লাস ব্যবহার করেছি। এখানে প্রয়োগ করা যেতে পারে এমন ক্লাসটি এখানে রয়েছে:

.fix_wp_overlap {   min-height: 32px; }  @media screen and (max-width: 782px) { .fix_wp_overlap {     top: 46px  !important;   } }

— সার্ফবডস

3

আপনি এটি চেষ্টা করতে পারেন:

   .navbar-fixed-top { top: 0px; }
    body.admin-bar .navbar-fixed-top { top: 28px !important; }

যদি এটি আপনার পক্ষে কাজ করে (যা এটি হওয়া উচিত!), তবে আপনাকে নীচের কোডটি প্লাগইন ফোল্ডারে বা আপনার ফাংশন.এফপি ফাইলটিতে স্টিক দিয়ে নীচে ডাব্লুপিপি প্রশাসক বারটি সরিয়ে নিতে হবে:

function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body { 
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

বিকল্প হিসাবে আপনি এই প্লাগইনটি ব্যবহার করতে পারেন

আমি সত্যিই প্লাগিনগুলি ব্যবহার করতে পছন্দ করি না কারণ বেশিরভাগ থিম আমার স্ক্রিপ্টটি বোগাস কোডের সাথে আমার লোড করে না ... উপরের সমাধান 1 এবং 2 ঠিকঠাক কাজ করে, তবে যদি এটি আপনার পক্ষে কাজ করে না, আপনি নীচের 3 টি সমাধান চেষ্টা করতে পারেন:

function stick_admin_bar_to_bottom_css() {
echo "

html {
padding-bottom: 28px !important;
}

body.admin-bar {
margin-top: -28px;
}

#wpadminbar {
top: auto !important;
bottom: 0;
}

#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}

";
}

add_action('admin_head', 'stick_admin_bar_to_bottom_css');
add_action('wp_head', 'stick_admin_bar_to_bottom_css');

28px ইস্যু ব্যতীত এটি আমার পক্ষে দুর্দান্ত কাজ করেছে বলে মনে হয়েছিল ..

— তামারা
সূত্র

2

আমি এটি বডি ট্যাগে যোগ না করা পর্যন্ত এটি আমার পক্ষে কাজ করে না:

<body <?php body_class(); ?>>

তাহলে এটা ভাল কাজ!

— timhc22
সূত্র

0

পারফেক্ট! আমি যা খুঁজছিলাম ঠিক তেমনই, আমি ৩ য় ধাপে কিছুটা আলাদাভাবে করেছি sure এটি নিশ্চিত নয় যে এটি গুরুত্বপূর্ণ তবে আমার কোডটি এর মতো দেখাচ্ছে ...

    function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}
add_action('wp_head', 'mbe_wp_head');

আপনি বিভিন্ন জায়গায় যুক্ত করার কথা উল্লেখ করেছেন, তবে আমি সবসময় এটি এরকম করে দিয়েছি এবং এটি ঠিক ঠিক কাজ করবে বলে মনে হচ্ছে। ঠিক করার জন্য ধন্যবাদ!

— user51355
সূত্র

1

এবং আপনি ঠিক কি ভিন্ন করেছেন?

— কায়জার

0

ওয়ার্ডপ্রেস অ্যাডমিন মেনু দিয়ে সাইট মেনুর ওভারল্যাপিং রোধ করতে বুটস্ট্র্যাপ 'নববার-ফিক্সড-টপ' ঠিক করুন

.admin-bar .navbar-fixed-top { top:46px; @media screen and (min-width:782px) { top:32px; } }

— user49936
সূত্র