Cara Menyembunyikan Bar Pentadbir WordPress

Bar pentadbir untuk pengguna log masuk WordPress menyediakan cara yang mudah untuk mengakses fungsi biasa dengan cepat, seperti mengedit siaran atau mengosongkan cache tapak. Walau bagaimanapun, satu perkara yang saya selalu benci tentang bar pentadbir, terutamanya apabila membangunkan tapak web baharu: ia terlalu kelihatan dan menyukarkan untuk memfokus pada reka bentuk dan kandungan. Sudah tentu, terdapat pilihan untuk menyembunyikannya sepenuhnya, tetapi kadangkala saya masih memerlukan akses pantas kepada beberapa fungsi asas, seperti beralih kepada penyuntingan halaman.

Jika anda ingin melumpuhkan bar pentadbir sepenuhnya, berikut ialah tangkapan skrin cara untuk menogolnya:

Saya tidak suka penyelesaian ini kerana saya suka kemudahan penukaran yang mudah, tetapi pada masa yang sama, saya juga mahukan sesuatu yang lebih elegan. Saya terjumpa kaedah penalaan ini beberapa tahun lalu. Jadi saya memperhalusinya lagi dan membungkusnya menjadi pemalam dengan beberapa tweak. Cuma bandingkan bar pentadbir asal dan bar saya:

Bar pentadbir lalai sentiasa kelihatan

Bar pentadbir yang dilaraskan tersembunyi di bawah bulatan merah

Tuding tetikus anda pada bulatan dan bar pentadbir menegak akan muncul

Seperti yang anda lihat, tiada palang hitam. Di tempatnya terdapat bulatan merah kecil (warna dan ikon boleh ditukar). Tuding tetikus anda pada ikon dan bar menegak akan muncul. Oleh itu, semua pautan penting kekal boleh diakses tetapi disembunyikan sehingga anda memerlukannya. Ringkas dan jelas.

Penyelesaian saya tidak sempurna. Mungkin kelemahan terbesar ialah ia mungkin tidak berfungsi dengan baik dengan pengepala menu yang panjang bagi pelbagai pemalam. Ini tidak penting kepada saya kerana saya memastikan kiraan pemalam saya kurus. Sebagai contoh, laman web ini hanya menggunakan kira-kira 7 pemalam.

Selain meletakkan semula bar pentadbir, penyelesaian saya juga menukar tajuk tapak web kepada alamat URL. Ini sangat mudah apabila bekerja di laman web dengan tajuk yang sangat panjang. Nama domain biasanya lebih pendek.

Kaedah pemasangan

Kaedah satu ialah menggunakan pemalam fail tunggal, muat naik ke folder /wp-content/plugins dan aktifkannya dalam bahagian "Pemalam". Anda boleh memuat turun pemalam dalam artikel asal saya: https://www.php.cn/link/bca314ed6a27eb1a7ce8434de54e3453

Kaedah 2 ialah menambah kod pada fail functions.php tema:

<code class="language-php">// 在管理栏中显示域名而不是网站标题
add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );
function customize_my_wp_admin_bar( $wp_admin_bar ) {
    $node = $wp_admin_bar->get_node('site-name');
    $new_site_name = preg_replace("(^https?://)", "", get_home_url() );
    $node->title = $new_site_name;
    $wp_admin_bar->add_node($node);
}

final class Kama_Collapse_Toolbar {

    public static function init(){
        add_action( 'admin_bar_init', [ __CLASS__, 'hooks' ] );
    }

    public static function hooks(){

        // remove html margin bumps
        remove_action( 'wp_head', '_admin_bar_bump_cb' );

        add_action( 'wp_head', [ __CLASS__, 'collapse_styles' ] );
    }

    public static function collapse_styles(){

        // do nothing for admin-panel.
        // Remove this if you want to collapse admin-bar in admin-panel too.
        if( is_admin() ){
            return;
        }

        ob_start();
        ?>

        <style>
            #wpadminbar {
                position: fixed !important;
                top: -32px !important;
                transition: top 0.3s ease;
            }
            #wpadminbar.expanded {
                top: 0 !important;
            }
            #wpadminbar #wp-admin-bar-site-name {
                display: none;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded {
                display: block;
            }
            #wpadminbar #wp-admin-bar-site-name .ab-item:before {
                content: "\f321"; /* Dashicons icon */
                font-family: 'dashicons';
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                color: red; /* Icon color */
                margin-right: 0.3em;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded .ab-item:before {
                display: none;
            }
        </style>

        <?php
        echo ob_get_clean();
    }
}

Kama_Collapse_Toolbar::init();</code>

Memandangkan saya menggunakannya semula di banyak tapak web, saya rasa lebih mudah untuk menggunakan kaedah pertama. Ia juga menjadikan fail functions.php saya lebih ramping, yang merupakan bonus untuk saya.

Sedikit nota

Cara menukar ikon

Untuk menukar ikon anda harus menukar elemen `wpadminbar #wp-admin-bar-site-name>.ab-item:before`. Pilih mana-mana ikon daripada pemuka dan edit sifat `kandungan` dalam CSS.

Cara menukar warna ikon

Masukkan kod sekali lagi, cari dan edit warna elemen `wpadminbar #wp-admin-bar-site-name>.ab-item:before`. Bagi saya, merah berfungsi dengan baik kerana kontras.

Cara mengekalkan tajuk tapak web dalam bar pentadbir

Alih keluar kod ini daripada fail pemalam atau fail `functions.php` anda:
`add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );`
`function customize_my_wp_admin_bar( $wp_admin_bar ) {`
` $node = $wp_admin_bar->get_node('nama-tapak');`
` $nama_tapak_baru = preg_replace("(^https?://)", "", get_home_url() );`
` $node->tajuk = $nama_tapak_baru;`
`$wp_admin_bar->add_node($node);`
`} ```

Atas ialah kandungan terperinci Cara Menyembunyikan Bar Pentadbir WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!