Đáp lại: Thanh quản trị WordPress chồng lên điều hướng twitter bootstrap
Được hỏi bởi: @TheWebs
Nếu bạn đang sử dụng Twitter Bootstrap với WordPress và gặp sự cố với thanh quản trị WordPress chồng chéo với thanh điều hướng của bạn, có lẽ bạn khá thất vọng với một số câu trả lời này. Tôi đã tìm kiếm các giải pháp ở khắp mọi nơi trước khi quyết định chỉ chuyển sang một thiết bị thấp hơn và tìm ra một giải pháp thực hiện chính xác những gì tôi cần nó để làm.
Vì vậy, đây là một câu trả lời không ẩn thanh quản trị WordPress hoặc di chuyển thanh quản trị WordPress xuống cuối trang của bạn. Câu trả lời này sẽ giữ thanh quản trị WordPress ngay tại vị trí của nó ... Ở đầu trang của bạn.
Xin lưu ý rằng điều này sẽ mất một vài bước ngắn để hoàn thành, nhưng nó đáng giá. Nó không thực sự là một quá trình phức tạp hoặc tốn thời gian. Tôi chỉ muốn đảm bảo rằng lời giải thích về cách làm như vậy là rõ ràng và dễ làm theo / hiểu.
Bước 1
Chủ đề có thẻ mẫu cho thẻ body sẽ giúp tác giả chủ đề tạo kiểu hiệu quả hơn với CSS. Thẻ mẫu được gọi
body_class. Hàm này cung cấp cho các thành phần cơ thể các lớp khác nhau và thường có thể được thêm vào trong header.phpthẻ thân HTML.
- Mở chủ đề WordPress hiện đang hoạt động của bạn bằng thư mục Twitter Bootstrap. Tìm
header.phpvà mở nó.
- Tìm
<body> .
- Thay bằng
<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
Sau khi hoàn thành ba bước trên, giờ đây bạn đã kích hoạt thành công chủ đề WordPress của mình với các lớp cơ thể WordPress.
Bước 2 (TÙY CHỌN!)
- Thêm các lớp CSS có điều kiện tùy chỉnh vào
<body>thẻ.
Theo mặc định, WordPress đã cung cấp một danh sách các lớp mặc định cho thẻ HTML, nếu bạn đang sử dụng body_class()hoặc các get_body_class()hàm.
Nếu bạn xem mã nguồn của bất kỳ trang đầu cuối được hiển thị nào trên trang web WordPress của mình, bạn sẽ thấy hai trong số các lớp CSS được thêm tự động vào <body>thẻ HTML là "đăng nhập" và "thanh quản trị".
Bạn cũng sẽ nhận thấy các tên lớp CSS đó chỉ được thêm vào <body>thẻ HTML nếu người dùng đã đăng nhập, nếu không chúng sẽ không được thêm vào <body>thẻ HTML .
Vì vậy, nếu bạn không muốn sử dụng tên lớp CSS CSS mặc định, bạn có thể thêm tên của riêng bạn rất dễ dàng.
- Mở chủ đề WordPress hiện đang hoạt động của bạn bằng thư mục Twitter Bootstrap. Tìm
functions.phpvà mở nó.
- Thêm
add_filter('body_class', 'mbe_body_class'); vào đầu tập tin.
- Thêm mã sau đây, vào dưới cùng của tập tin.
Mật mã:
function mbe_body_class($classes){
if(is_user_logged_in()){
$classes[] = 'body-logged-in';
} else{
$classes[] = 'body-logged-out';
}
return $classes;
}
Bây giờ, nếu bạn xem mã nguồn của bất kỳ trang giao diện nào được hiển thị trên trang web WordPress của bạn, nếu người dùng đã đăng nhập, bạn sẽ thấy "đăng nhập cơ thể" đã được thêm vào <body>thẻ HTML và nếu người dùng là đăng xuất, bạn sẽ thấy "đăng xuất cơ thể" đã được thêm vào <body>thẻ HTML .
Bước 3
- Thêm mã CSS vào chủ đề của bạn.
Đây là phần mã sẽ sửa chủ đề của bạn để hiển thị cả thanh quản trị WordPress và điều hướng Twitter Bootstrap của bạn, cho dù người dùng đã đăng nhập hay đăng xuất khỏi trang web của bạn.
- Mở chủ đề WordPress hiện đang hoạt động của bạn bằng thư mục Twitter Bootstrap. Tìm
functions.phpvà mở nó.
- Thêm vào
add_action('wp_head', 'mbe_wp_head'); vào đầu tập tin.
- Thêm vào mã sau đây, vào dưới cùng của tập tin.
Mật mã:
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;
}
CHỈNH SỬA MÃ
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;
}
Phiên bản này của hàm mbe_wp_head bao gồm truy vấn phương tiện di động đầu tiên, để đảm bảo rằng tiêu đề của bạn được đẩy xuống khoảng cách thích hợp. Đối với thiết bị di động, thanh quản trị WP cao 48px. Sau điểm dừng 783px, thanh quản trị rút ngắn xuống chỉ còn 28px.
Có bạn có nó. Nếu người dùng đã đăng nhập, bây giờ bạn sẽ có thanh quản trị viên WordPress ở đầu trang của bạn, ngay lập tức theo sau là điều hướng Twitter Bootstrapping của bạn. Nếu người dùng đã đăng xuất khỏi trang web WordPress của bạn, điều hướng Twitter Bootstrap của bạn vẫn sẽ hiển thị phù hợp ở đầu trang web của bạn.